Responsive starts to become fun :)

This commit is contained in:
Reto Bollinger 2024-11-18 21:42:54 +01:00
parent e4554db40a
commit be931c9b4d

View file

@ -86,7 +86,7 @@ footer {
header h1 { header h1 {
margin: 0; margin: 0;
font-weight: 700; font-weight: 700;
font-size: 42px font-size: 1.9vw
} }
header nav ul { header nav ul {
@ -110,6 +110,24 @@ div.page {
} }
@media (max-width:768px) { @media (max-width:768px) {
header h1 {
font-size: 3.15vw
}
header nav ul {
display: flex;
flex-wrap: wrap;
width: 75%;
font-size: 2.5vw
}
header nav ul li {
flex-basis: 25%;
box-sizing: border-box;
padding: 5px 2.5% 5px 0;
white-space: nowrap
}
div.inner_page.bgimage { div.inner_page.bgimage {
background-image: none; background-image: none;
min-height: 0 min-height: 0
@ -137,6 +155,10 @@ div.page {
min-height: calc((80vw - 60px)*.572) min-height: calc((80vw - 60px)*.572)
} }
header h1 {
font-size: 2.4vw
}
body { body {
font-size: 1.5vw font-size: 1.5vw
} }
@ -151,6 +173,22 @@ div.page {
} }
@media (min-width:769px) and (max-width:1024px) { @media (min-width:769px) and (max-width:1024px) {
header h1 {
font-size: 3.15vw
}
header nav ul {
display: flex;
flex-wrap: wrap;
width: 75%
}
header nav ul li {
flex-basis: 25%;
box-sizing: border-box;
padding: 5px 2.5% 5px 0
}
div.inner_page.bgimage { div.inner_page.bgimage {
min-height: calc((80vw - 60px)*.572) min-height: calc((80vw - 60px)*.572)
} }