112 lines
2.8 KiB
SCSS
112 lines
2.8 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: auto 1fr auto;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
width: $app-width;
|
|
|
|
header {
|
|
grid-column: 1;
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh; // Fallback in case dvh unit is not supported
|
|
height: 100dvh;
|
|
padding: 1rem;
|
|
|
|
.header__logo {
|
|
position: relative;
|
|
width: $icon-size;
|
|
aspect-ratio: calc(1 / 2);
|
|
background-image: url("/public/images/signature-vertical.svg");
|
|
background-size: contain;
|
|
background-position: center;
|
|
|
|
@media screen and (min-width: $desktop-media-query) {
|
|
width: calc(($icon-size * 2) + $icon-spacing);
|
|
aspect-ratio: calc(2 / 1);
|
|
background-image: url("/public/images/signature-horizontal.svg");
|
|
}
|
|
}
|
|
}
|
|
|
|
main {
|
|
grid-column: 2;
|
|
width: $large-content-width;
|
|
padding: calc(2rem + $icon-size) 0;
|
|
}
|
|
|
|
footer {
|
|
grid-column: 3;
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh; // Fallback in case dvh unit is not supported
|
|
height: 100dvh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
gap: $icon-spacing;
|
|
padding: 1rem;
|
|
|
|
@media screen and (min-width: $desktop-media-query) {
|
|
flex-direction: row;
|
|
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%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|