96 lines
2.5 KiB
SCSS
96 lines
2.5 KiB
SCSS
@use "../abstracts" as *;
|
|
|
|
// --------------------------------------------------
|
|
// BASE STYLE
|
|
// --------------------------------------------------
|
|
|
|
body {
|
|
color: $black;
|
|
background-color: $white;
|
|
font-family: $default-font-family;
|
|
font-size: $default-font-size;
|
|
line-height: $default-line-height;
|
|
}
|
|
|
|
a {
|
|
color: $black;
|
|
text-decoration: underline;
|
|
|
|
&:focus-visible {
|
|
outline: 1px dashed $black;
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
strong {
|
|
font-weight: 700;
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// BASE LAYOUT
|
|
// --------------------------------------------------
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
#app {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: $sidebar-width-portrait minmax(min-content, $content-width-m) $sidebar-width-portrait;
|
|
justify-content: space-evenly;
|
|
justify-items: center;
|
|
width: 100%;
|
|
max-width: $content-width-xl;
|
|
|
|
@media (orientation: landscape) {
|
|
grid-template-columns: $sidebar-width-landscape minmax(min-content, $content-width-m) $sidebar-width-landscape;
|
|
}
|
|
|
|
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 0;
|
|
|
|
.header__logo {
|
|
display: block;
|
|
position: relative;
|
|
width: $logo-width-portrait;
|
|
aspect-ratio: calc(1 / 2);
|
|
background-image: url("/public/images/signature-portrait.svg");
|
|
background-size: contain;
|
|
background-position: center;
|
|
|
|
@media (orientation: landscape) {
|
|
width: $logo-width-landscape;
|
|
aspect-ratio: calc(2 / 1);
|
|
background-image: url("/public/images/signature-landscape.svg");
|
|
}
|
|
}
|
|
}
|
|
|
|
main {
|
|
grid-column: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: $main-padding-y-portrait 0;
|
|
|
|
@media (orientation: landscape) {
|
|
padding: $main-padding-y-landscape 0;
|
|
}
|
|
}
|
|
}
|
|
}
|