mirror of
https://github.com/MarijnDoeve/TijdVoorDeTest.git
synced 2026-07-05 15:10:16 +02:00
Marijn
e5198507ae
The CSS cleanup broke vertical centering: flex on body causes main to stretch full-width; place-items:center on a grid body only centers items within their auto-sized track (not the track within body). Fix: move background/color to html (full-viewport grid that centers body), give body height:100% + display:grid + align-content:center (centers the content track within full-height body) + justify-self:center (shrink-wraps body width). Matches production behavior exactly.
36 lines
738 B
SCSS
36 lines
738 B
SCSS
html {
|
|
height: 100%;
|
|
background-image: url("../img/background.png");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-color: black;
|
|
color: white;
|
|
display: grid;
|
|
align-items: center;
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
background-image: url("../img/background.png");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-color: black;
|
|
display: grid;
|
|
align-content: center;
|
|
justify-self: center;
|
|
}
|
|
|
|
.elimination-screen {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
object-fit: contain;
|
|
background-color: white;
|
|
z-index: 1000;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|