135 lines
2.0 KiB
CSS
135 lines
2.0 KiB
CSS
@font-face {
|
|
font-family: Maple Mono;
|
|
src: url(./assets/fonts/MapleMono-Regular.ttf) format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Maple Mono;
|
|
src: url(./assets/fonts/MapleMono-Bold.ttf) format('truetype');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: JetBrainsMono;
|
|
src: url(./assets/fonts/JetBrainsMono-VariableFont_wght.ttf)
|
|
format('truetype');
|
|
font-style: normal;
|
|
font-display: block;
|
|
}
|
|
|
|
:root {
|
|
--blue: #1e66f5;
|
|
--sky: #04a5e5;
|
|
--red: #d20f39;
|
|
--orange: #fe640b;
|
|
--text: #4c4f69;
|
|
--background: #fff8fa;
|
|
--radius: 5px;
|
|
--shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
|
--border: 1px solid #8c8fa1;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--blue: #89b4fa;
|
|
--sky: #89dceb;
|
|
--red: #f38ba8;
|
|
--orange: #fab387;
|
|
--text: #cdd6f4;
|
|
--background: #1e1e2e;
|
|
--border: 1px solid rgb(131, 139, 167);
|
|
}
|
|
}
|
|
|
|
html {
|
|
color: var(--text);
|
|
background-color: var(--background);
|
|
font-family: 'Maple Mono', monospace;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
body {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
a {
|
|
color: var(--blue);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
main p {
|
|
text-align: justify;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
article img {
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
display: block;
|
|
margin: auto;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.no-shadow {
|
|
box-shadow: none;
|
|
}
|
|
.footnotes {
|
|
font-size: 1rem;
|
|
}
|
|
.footnotes p {
|
|
display: inline;
|
|
}
|
|
|
|
.blog-header {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.blog-header > h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 4px solid;
|
|
border-color: var(--text);
|
|
margin-left: 1rem;
|
|
padding-left: 2rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
code {
|
|
color: var(--orange);
|
|
border: var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 1px 4px;
|
|
margin: 0 2px;
|
|
user-select: all;
|
|
}
|
|
|
|
kbd {
|
|
border: var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 1px 4px;
|
|
}
|
|
|
|
code,
|
|
kbd {
|
|
font-size: 0.85rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 590px) {
|
|
header {
|
|
flex-direction: column;
|
|
}
|
|
}
|