diff --git a/andromeda.css b/andromeda.css index 3a418b9..e41d2b2 100644 --- a/andromeda.css +++ b/andromeda.css @@ -1,3 +1,4 @@ +/* Set size of logo, depending on orientation */ @media (orientation: landscape) { :root { --logo-width: clamp(34.08em, 40vw, 56.89em); @@ -12,6 +13,20 @@ } } +/* Set size of background, depending on screen width */ +@media (max-width: 100em) { + /* Set static graphic width on smaller screens */ + :root { + --background-width: 100rem; + } +} +@media (min-width: 100em) { + /* Set graphic to width of screen */ + :root { + --background-width: 100%; + } +} + /* ============================== */ /* Global /* ============================== */ @@ -24,27 +39,12 @@ body { } /* Add Milky Way graphic to header */ -@media (max-width: 100em) { - /* Set static graphic width on smaller screens */ - .skinHeader { - --background-width: 100rem; - } -} -@media (min-width: 100em) { - /* Set graphic to width of screen */ - .skinHeader { - --background-width: 100%; - } - /* Push content down from under graphic */ - div.skinBody > div.page { - padding-top: 15rem !important; - } -} .skinHeader { /* Position graphic behind header */ margin-top: calc(-1 * (0.2202 * var(--background-width))); height: 100%; padding-top: calc(0.2202 * var(--background-width)); + /* Add graphic */ backdrop-filter: none !important; background-color: rgba(0, 0, 0, 0) !important; background-image: url("https://static.zomerkoningin.nl/andromeda/images/milkyway_header.webp"); @@ -52,6 +52,7 @@ body { background-size: var(--background-width) auto; background-position-x: center; background-position-y: top; + /* Pass-through clicks */ pointer-events: none; /* Keep header visible when scrolling on phone */ transform: unset !important; @@ -60,13 +61,21 @@ body { flex-grow: 0 !important; } .skinHeader > * { + /* Limit pass-through to graphic only */ pointer-events: auto; } +@media (min-width: 100em) { + /* Push content down from under graphic on wider screens */ + div.skinBody > div.page { + padding-top: 15rem !important; + } +} /* Add starry background */ .backdropContainer { background-image: url("https://static.zomerkoningin.nl/andromeda/images/nightsky.webp"); - background-size: 100%; + background-size: var(--background-width) auto; + background-position: center center; } .backgroundContainer { display: none;