123 lines
3.2 KiB
SCSS
123 lines
3.2 KiB
SCSS
@use "../abstracts" as *;
|
|
|
|
// --------------------------------------------------
|
|
// BASE STYLE
|
|
// --------------------------------------------------
|
|
|
|
body {
|
|
color: $black;
|
|
background-color: $white;
|
|
font-family: $text-font-family;
|
|
font-size: $text-font-size;
|
|
line-height: $text-line-height;
|
|
}
|
|
|
|
strong {
|
|
font-weight: 700;
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
|
|
a {
|
|
color: $black;
|
|
text-decoration: underline;
|
|
text-underline-position: under;
|
|
|
|
&:focus-visible {
|
|
outline: 1px dashed $black;
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// BASE LAYOUT
|
|
// --------------------------------------------------
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
#app {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
width: $content-width-xl;
|
|
|
|
header {
|
|
grid-column: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100vh; // Fallback in case dvh unit is not supported
|
|
height: 100dvh;
|
|
padding: $sidebar-padding-y $sidebar-padding-x;
|
|
|
|
.header__logo {
|
|
display: block;
|
|
position: relative;
|
|
width: $logo-portrait-width;
|
|
aspect-ratio: calc(1 / 2);
|
|
background-image: url("/public/images/signature-portrait.svg");
|
|
background-size: contain;
|
|
background-position: center;
|
|
|
|
@media (orientation: landscape) {
|
|
width: $logo-landscape-width;
|
|
aspect-ratio: calc(2 / 1);
|
|
background-image: url("/public/images/signature-landscape.svg");
|
|
}
|
|
}
|
|
}
|
|
|
|
main {
|
|
grid-column: 2;
|
|
padding: calc(($sidebar-padding-y * 2) + ($logo-portrait-width * 2)) 0;
|
|
|
|
@media (orientation: landscape) {
|
|
padding: calc(($sidebar-padding-y * 2) + ($logo-landscape-width / 2)) 0;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
grid-column: 3;
|
|
position: sticky;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100vh; // Fallback in case dvh unit is not supported
|
|
height: 100dvh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: $icon-spacing;
|
|
padding: $sidebar-padding-y $sidebar-padding-x;
|
|
|
|
@media (orientation: landscape) {
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.footer__link {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: $icon-size;
|
|
aspect-ratio: 1;
|
|
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|