83 lines
1.1 KiB
SCSS
83 lines
1.1 KiB
SCSS
// landing.scss
|
|
|
|
/* IMPORTS ================================================================= */
|
|
@use "sass:math";
|
|
|
|
@use "modules/include-media" as *;
|
|
|
|
@use "markup" as *;
|
|
@use "vars" as *;
|
|
@use "colors";
|
|
@use "fonts";
|
|
|
|
html {
|
|
font: {
|
|
size: $font-base-size;
|
|
family: $font-stack-serif;
|
|
}
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
padding: $gutter * 2;
|
|
@include media(">md") {
|
|
grid-template-columns: 2fr 3fr 2fr;
|
|
gap: $gutter;
|
|
height: 100%;
|
|
padding: ($gutter * 2) 0;
|
|
}
|
|
}
|
|
|
|
nav {
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
justify-self: right;
|
|
align-self: end;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
@include media(">md") {
|
|
grid-column: 2;
|
|
}
|
|
|
|
a {
|
|
&:hover {
|
|
font-style: italic;
|
|
}
|
|
|
|
&::after {
|
|
content: " >>";
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
main {
|
|
@include media(">md") {
|
|
grid-row: 2;
|
|
grid-column: 2;
|
|
justify-self: center;
|
|
}
|
|
|
|
article {
|
|
padding: 0;
|
|
font-size: 1rem;
|
|
|
|
h1 {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
aside {
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
max-width: 192px;
|
|
@include media(">md") {
|
|
grid-column: 2;
|
|
}
|
|
|
|
img {
|
|
image-rendering: pixelated;
|
|
}
|
|
}
|