Adjusted CSS for smaller screens.

This commit is contained in:
Reto Bollinger 2025-01-15 21:04:02 +01:00
parent 96570fe2d3
commit f361219927

View file

@ -59,6 +59,10 @@
src:url(/static/webfonts/Roboto-ThinItalic.woff2)format("woff2"),url(/static/webfonts/Roboto-ThinItalic.woff)format("woff") src:url(/static/webfonts/Roboto-ThinItalic.woff2)format("woff2"),url(/static/webfonts/Roboto-ThinItalic.woff)format("woff")
} }
@view-transition {
navigation: auto;
}
html{ html{
margin: 0px; margin: 0px;
} }
@ -394,6 +398,7 @@ div.left_footer, div.middle_footer, div.right_footer {
opacity: 0; opacity: 0;
-webkit-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards; animation-fill-mode:forwards;
width: min(700px, 63.6vw);
} }
@-webkit-keyframes pulse{ @-webkit-keyframes pulse{
@ -743,7 +748,7 @@ div.left_footer, div.middle_footer, div.right_footer {
border-collapse: collapse; border-collapse: collapse;
padding: 0 0 calc(50px * 0.7) calc(50px * 0.7); padding: 0 0 calc(50px * 0.7) calc(50px * 0.7);
margin: 0 0 calc(50px * 0.7) calc(50px* 0.7); margin: 0 0 calc(50px * 0.7) calc(50px* 0.7);
width: calc(1000px * 0.7); width: 84vw;
} }
.termine ul > li, .vorstand ul > li { .termine ul > li, .vorstand ul > li {
@ -752,13 +757,14 @@ div.left_footer, div.middle_footer, div.right_footer {
} }
.termine ul > li > div, .vorstand ul > li > div{ .termine ul > li > div, .vorstand ul > li > div{
width: 680px; line-height: normal;
width: 84vw;
max-width: 700px; max-width: 700px;
text-align: left; text-align: left;
padding: calc(20px * 0.7) calc(10px * 0.7) calc(15px * 0.7) calc(10px * 0.7); padding: 0;
margin: 0; margin: 7px 0 0 7px;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: normal;
font-family: "Roboto-Regular","Arial",sans-serif; font-family: "Roboto-Regular","Arial",sans-serif;
} }
@ -768,6 +774,7 @@ div.left_footer, div.middle_footer, div.right_footer {
margin: 0; margin: 0;
display: grid; display: grid;
grid-gap: 0; grid-gap: 0;
width: 84vw;
} }
.termine ul > li > ul,{ .termine ul > li > ul,{
@ -801,19 +808,20 @@ div.left_footer, div.middle_footer, div.right_footer {
grid-column: span 1; grid-column: span 1;
} }
.termine ul > li > ul > li:nth-child(3) { .termine ul > li > ul > li:nth-child(3) {
width: 700px; width: 84vw;
grid-column: span 2; grid-column: span 2;
} }
.vorstand ul > li > ul > li:nth-child(1), .vorstand ul > li > ul > li:nth-child(2){ .vorstand ul > li > ul > li:nth-child(1), .vorstand ul > li > ul > li:nth-child(2){
width: 700px; width: 84vw;
grid-column: span 1; grid-column: span 1;
} }
.termine ul > li > ul > li > div, .vorstand ul > li > ul > li > div { .termine ul > li > ul > li > div, .vorstand ul > li > ul > li > div {
font-family: "Roboto-Light","Arial",sans-serif; font-family: "Roboto-Light","Arial",sans-serif;
padding: calc(10px * 0.7) calc(10px * 0.7); padding: 2px 0 0 7px;
margin: 0;
} }
.termine ul > li > ul > li:nth-child(1) > div{ width: 250px; } .termine ul > li > ul > li:nth-child(1) > div{ width: 250px; }
@ -824,11 +832,13 @@ div.left_footer, div.middle_footer, div.right_footer {
text-align: left; text-align: left;
} }
.termine ul > li > ul > li:nth-child(3) > div{ .termine ul > li > ul > li:nth-child(3) > div{
width: 680px; width: 84vw;
padding: calc(10px * 0.7) calc(10px * 0.7) calc(20px * 0.7) calc(10px * 0.7); line-height: 24px;
padding: 0;
margin: 0 0 0 7px;
} }
.vorstand ul > li > ul > li:nth-child(1) > div, .vorstand ul > li > ul > li:nth-child(2) > div{ width: 680px; } .vorstand ul > li > ul > li:nth-child(1) > div, .vorstand ul > li > ul > li:nth-child(2) > div{ width: 84vw;}
.vorstand ul > li > ul > li:nth-child(2) > div { padding: calc(10px * 0.7) calc(10px * 0.7) calc(20px * 0.7) calc(10px * 0.7); } .vorstand ul > li > ul > li:nth-child(2) > div { padding: calc(10px * 0.7) calc(10px * 0.7) calc(20px * 0.7) calc(10px * 0.7); }