mercury-site/_scss/_base.scss

126 lines
2.0 KiB
SCSS
Raw Normal View History

2023-04-16 18:14:25 +00:00
body {
image-rendering: pixelated;
line-height: 1.6;
2023-04-17 13:13:58 +00:00
font-family: Atkinson sans;
2023-04-16 18:14:25 +00:00
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;
2023-04-17 13:13:58 +00:00
margin-left: $content-gap;
margin-right: $content-gap;
2023-04-16 18:14:25 +00:00
}
/* 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;
}
2023-04-17 13:13:58 +00:00
h4 {
margin-top: 0.5cm;
margin-bottom: 0;
}
2023-04-16 18:14:25 +00:00
::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 {
2023-04-16 19:40:52 +00:00
font-family: "Cozette", "Fira Code", monospace;
font-size: 16px;
2023-04-16 18:14:25 +00:00
overflow: auto;
}
code {
display: inline;
}
2023-04-17 13:13:58 +00:00
.footnote-definition p {
display: inline;
}