116 lines
1.8 KiB
SCSS
116 lines
1.8 KiB
SCSS
body {
|
|
image-rendering: pixelated;
|
|
line-height: 1.6;
|
|
font-size: 18px;
|
|
color: $foreground-color;
|
|
background: $background-color;
|
|
text-align: center;
|
|
margin: 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: 20px;
|
|
gap: 2em;
|
|
}
|
|
|
|
.page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: right;
|
|
align-items: left;
|
|
text-align: left;
|
|
margin-left: 40em;
|
|
margin-right: 40em;
|
|
}
|
|
|
|
/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
|
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
line-height: 1.2;
|
|
}
|
|
|
|
h1 {
|
|
border-bottom: 4px solid $accent-color;
|
|
}
|
|
h2 {
|
|
margin-top: 1cm;
|
|
margin-bottom: 0;
|
|
}
|
|
h3 {
|
|
margin-top: 1cm;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
::selection {
|
|
background-color: $foreground-color;
|
|
color: $background-color;
|
|
}
|
|
|
|
a {
|
|
color: $accent-color;
|
|
|
|
&:hover {
|
|
color: $accent-color-light;
|
|
}
|
|
|
|
&:visited {
|
|
color: $accent-color-dark;
|
|
}
|
|
}
|
|
|
|
pre {
|
|
border-radius: $radius;
|
|
padding: 4px;
|
|
}
|
|
|
|
blockquote {
|
|
margin-left: 5mm;
|
|
padding-left: 2mm;
|
|
color: scale-color($foreground-color, $lightness: -10%);
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 4px solid #F28FAD;
|
|
}
|
|
|
|
blockquote blockquote {
|
|
border-left: 4px solid #F8BD96;
|
|
}
|
|
|
|
blockquote blockquote blockquote {
|
|
border-left: 4px solid #FAE3B0;
|
|
}
|
|
|
|
blockquote blockquote blockquote blockquote {
|
|
border-left: 4px solid #ABE9B3;
|
|
}
|
|
|
|
blockquote blockquote blockquote blockquote blockquote {
|
|
border-left: 4px solid #B5E8E0;
|
|
}
|
|
|
|
blockquote blockquote blockquote blockquote blockquote blockquote {
|
|
border-left: 4px solid #96CDFB;
|
|
}
|
|
|
|
blockquote blockquote blockquote blockquote blockquote blockquote blockquote {
|
|
border-left: 4px solid #DDB6F2;
|
|
}
|
|
|
|
code, pre {
|
|
font-family: "Fira Code", monospace;
|
|
overflow: auto;
|
|
}
|
|
|
|
code {
|
|
display: inline;
|
|
}
|