169 lines
2.7 KiB
SCSS
169 lines
2.7 KiB
SCSS
@use "sass:color";
|
|
|
|
// Palette: Catppuccin Mocha
|
|
// https://catppuccin.com/palette/
|
|
$base: #1e1e2e;
|
|
$text: #cdd6f4;
|
|
|
|
$mantle: #181825;
|
|
$crust: #11111b;
|
|
|
|
$overlay0: #6c7086;
|
|
$overlay1: #7f849c;
|
|
$overlay2: #9399b2;
|
|
|
|
$surface0: #313244;
|
|
$surface1: #45475a;
|
|
$surface2: #585b70;
|
|
|
|
$subtext0: #a6adc8;
|
|
$subtext1: #bac2de;
|
|
|
|
$red: #f38ba8;
|
|
$green: #a6e3a1;
|
|
$peach: #fab387;
|
|
$blue: #89b4fa;
|
|
$mauve: #8839ef;
|
|
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: $base;
|
|
font-family: Pixeloid;
|
|
color: $text;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
main {
|
|
max-width: 45rem;
|
|
margin-inline: auto;
|
|
padding: 0 8px;
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
a {
|
|
color: unset;
|
|
text-decoration: underline;
|
|
text-decoration-color: $blue;
|
|
text-underline-offset: 1px;
|
|
transition: 0.3s ease;
|
|
|
|
&:hover {
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
&:active {
|
|
transition: none !important;
|
|
display: inline-block;
|
|
transform: scale(.98) !important;
|
|
}
|
|
|
|
&.block {
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
transform: scale(1.02) translateY(-.25rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
background-color: $mantle;
|
|
padding: 8px;
|
|
font-size: larger;
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
background-color: $crust;
|
|
margin-top: 32px;
|
|
padding: 16px;
|
|
column-gap: 4ch;
|
|
}
|
|
|
|
.mono {
|
|
font-family: Monocraft, monospace;
|
|
background-color: $mantle;
|
|
border-radius: 2px;
|
|
padding: 0 4px;
|
|
color: $subtext0;
|
|
overflow-wrap: anywhere;
|
|
|
|
&:hover {
|
|
transition: .3s ease;
|
|
background-color: $crust;
|
|
}
|
|
}
|
|
|
|
.block {
|
|
display: block;
|
|
background-color: $surface0;
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
|
|
& + & {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
&.red {
|
|
background-color: color.mix($surface0, $red, 60%);
|
|
}
|
|
&.orange {
|
|
background-color: color.mix($surface0, $peach, 60%);
|
|
}
|
|
&.green {
|
|
background-color: color.mix($surface0, $green, 60%);
|
|
}
|
|
|
|
& .header {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: x-large;
|
|
|
|
.icon {
|
|
margin-right: .5ch;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
width: 1.5em;
|
|
vertical-align: middle;
|
|
border-radius: .2em;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Monocraft;
|
|
src: url("/static/font/Monocraft.ttc");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Pixeloid;
|
|
src:
|
|
url("/static/font/Pixeloid/woff/Sans.woff2") format("woff2"),
|
|
url("/static/font/Pixeloid/otf/Sans.otf") format("opentype");
|
|
}
|
|
@font-face {
|
|
font-family: Pixeloid;
|
|
src:
|
|
url("/static/font/Pixeloid/woff/Sans-Bold.woff2") format("woff2"),
|
|
url("/static/font/Pixeloid/otf/Sans-Bold.otf") format("opentype");
|
|
font-weight: bold;
|
|
}
|