72 lines
1.5 KiB
SCSS
72 lines
1.5 KiB
SCSS
.maintenance {
|
|
position: relative;
|
|
isolation: isolate;
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
|
|
// The same light as the hero, so this reads as the same site rather than an
|
|
// error page from somewhere else — but centred behind the message instead of
|
|
// washing the top of the viewport.
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 34rem;
|
|
height: 34rem;
|
|
transform: translate(-50%, -55%);
|
|
border-radius: 50%;
|
|
opacity: 0.35;
|
|
filter: blur(70px);
|
|
background: radial-gradient(
|
|
closest-side,
|
|
var(--pi-color-accent),
|
|
transparent
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.maintenance__inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
// Pinned to the top rather than stacked with the message: the notice should
|
|
// sit in the middle of the viewport, not be pushed down by the wordmark.
|
|
.maintenance__brand {
|
|
position: absolute;
|
|
top: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
// The only branding on this page, so it gets more room than in the header.
|
|
.maintenance__mark {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.maintenance__title {
|
|
margin: 1rem 0 0;
|
|
}
|
|
|
|
.maintenance__message {
|
|
max-width: 40ch;
|
|
margin: 1rem 0 0;
|
|
}
|
|
|
|
.maintenance__until {
|
|
margin-top: 1.5rem;
|
|
}
|