winzer/elwig-www
2
0
Fork 0
Code Issues Pull Requests Activity

Add /preview pages

Browse Source
This commit is contained in:
Lorenz Stechauner
2026-05-04 20:19:06 +02:00
parent fbb0ac86d5
commit a7658c33b1
43 changed files with 500 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/res/style.css
+127 -10
View File
@@ -77,7 +77,7 @@ nav li a {
}
nav li a:hover,
nav li.active a{
nav li.active a {
color: var(--main-color);
}
@@ -92,15 +92,15 @@ nav a.flag div {
margin: 0.75rem 1rem;
}
nav a.flag[href='/de/'] div::before,
nav a.flag[href='/en/']:hover div::before,
nav a.flag[href='/en/']:focus div::before {
nav a.flag[href^='/de/'] div::before,
nav a.flag[href^='/en/']:hover div::before,
nav a.flag[href^='/en/']:focus div::before {
content: '\1F1EC\1F1E7'; /* GB */
}
nav a.flag[href='/en/'] div::before,
nav a.flag[href='/de/']:hover div::before,
nav a.flag[href='/de/']:focus div::before {
nav a.flag[href^='/en/'] div::before,
nav a.flag[href^='/de/']:hover div::before,
nav a.flag[href^='/de/']:focus div::before {
content: '\1F1E6\1F1F9'; /* AT */
}
@@ -416,7 +416,7 @@ table .unit {
}
}
@media screen and (max-width: 650px) {
@media screen and (max-width: 700px) {
nav.index li:first-child {
display: none;
}
@@ -425,7 +425,7 @@ table .unit {
}
}
@media screen and (max-width: 550px) {
@media screen and (max-width: 600px) {
nav.index li:nth-child(2) {
display: none;
}
@@ -435,7 +435,7 @@ table .unit {
}
@media screen and (max-width: 500px) {
nav.index li:nth-child(3) {
nav.index li:nth-child(4) {
display: none;
}
.home {
@@ -448,3 +448,120 @@ table .unit {
font-size: 0.5em;
}
}
/**** Preview ****/
main.preview {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin: 4em 0;
gap: 4em;
}
main.preview section {
background-color: #FFFFFF;
padding: 2em 4em;
border-radius: 0.5em;
box-shadow: 0 0 2em #00000060;
border: 1px solid #C0C0C0;
}
main.preview section h4:not(:first-child) {
margin-top: 2em;
}
main.preview a {
color: var(--main-color);
text-decoration: none;
}
main.preview a:hover,
main.preview a:focus {
text-decoration: underline;
}
@media screen and (max-width: 800px) {
main.preview section {
padding: 2em 1em;
}
}
.window {
position: relative;
box-shadow: 0 0 2em #00000060;
display: flex;
font-size: 1rem;
border-radius: 0.5em;
}
.window img {
border-radius: 0.5em;
}
@media screen and (min-width: 2480px) {
.window:nth-of-type(1) {
font-size: 2rem;
}
.window:nth-of-type(1) * {
width: 2472px;
height: auto;
}
}
@media screen and (max-width: 1240px) {
.window:nth-of-type(1) {
font-size: 0.5rem;
}
.window:nth-of-type(1) * {
width: 618px;
height: auto;
}
}
@media screen and (max-width: 620px) {
.window:nth-of-type(1) {
font-size: 0.25rem;
}
.window:nth-of-type(1) * {
width: 309px;
height: auto;
}
}
@media screen and (min-width: 2280px) {
.window:nth-of-type(2), .window:nth-of-type(3) {
font-size: 2rem;
}
.window:nth-of-type(2) *, .window:nth-of-type(3) * {
width: 2272px;
height: auto;
}
}
@media screen and (max-width: 1140px) {
.window:nth-of-type(2), .window:nth-of-type(3) {
font-size: 0.5rem;
}
.window:nth-of-type(2) *, .window:nth-of-type(3) * {
width: 568px;
height: auto;
}
}
@media screen and (max-width: 570px) {
.window:nth-of-type(2), .window:nth-of-type(3) {
font-size: 0.25rem;
}
.window:nth-of-type(2) *, .window:nth-of-type(3) * {
width: 284px;
height: auto;
}
}
.window canvas {
position: absolute;
left: 0;
top: 0;
}
.window img:not(.selected) {
display: none;
}