134 lines
2.2 KiB
CSS
134 lines
2.2 KiB
CSS
|
body {
|
||
|
|
font-family: "Noto Sans", Helvetica, Arial, Verdana, sans-serif;
|
||
|
|
color: #040;
|
||
|
|
max-width: 800px;
|
||
|
|
margin-inline: auto;
|
||
|
|
padding-inline: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #226622;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1,
|
||
|
|
h2,
|
||
|
|
h3,
|
||
|
|
h4,
|
||
|
|
h5,
|
||
|
|
h6 {
|
||
|
|
font-family: Delicious, "Noto Sans", Helvetica, Arial, Verdana, sans-serif;
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: inherit;
|
||
|
|
text-decoration: none;
|
||
|
|
&:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
body > header {
|
||
|
|
display: grid;
|
||
|
|
grid-template-areas:
|
||
|
|
"logo title"
|
||
|
|
"logo subtitle";
|
||
|
|
grid-template-rows: auto 1fr;
|
||
|
|
grid-template-columns: auto 1fr;
|
||
|
|
row-gap: 0.5em;
|
||
|
|
column-gap: 0.5em;
|
||
|
|
|
||
|
|
border-bottom: 1px solid #060;
|
||
|
|
padding-bottom: 0.75em;
|
||
|
|
margin-bottom: 0.75em;
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
grid-area: logo;
|
||
|
|
img {
|
||
|
|
width: 4em;
|
||
|
|
height: 4em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
grid-area: title;
|
||
|
|
font-size: 1.5em;
|
||
|
|
margin: 0;
|
||
|
|
a {
|
||
|
|
color: inherit;
|
||
|
|
text-decoration: none;
|
||
|
|
&:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
[role="doc-subtitle"] {
|
||
|
|
grid-area: subtitle;
|
||
|
|
font-size: 0.75em;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
article {
|
||
|
|
> header {
|
||
|
|
h2 {
|
||
|
|
font-size: 2.5em;
|
||
|
|
margin-bottom: 0.125em;
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
font-size: 0.75em;
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
> :is(p, ul) {
|
||
|
|
font-family: "Noto Serif", Georgia, "Times New Roman", Times, serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
font-size: 1.5em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
|
||
|
|
@font-face {
|
||
|
|
font-family: Delicious;
|
||
|
|
src: local("Delicious"), url("/assets/fonts/Delicious-Roman.otf");
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: Delicious;
|
||
|
|
font-weight: bold;
|
||
|
|
src: local("Delicious"), url("/assets/fonts/Delicious-Bold.otf");
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: Delicious;
|
||
|
|
font-style: italic;
|
||
|
|
src: local("Delicious"), url("/assets/fonts/Delicious-Italic.otf");
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: "Noto Sans";
|
||
|
|
src: local("Noto Sans"), url("/assets/fonts/NotoSans-Variable.ttf");
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: "Noto Sans";
|
||
|
|
font-style: italic;
|
||
|
|
src: local("Noto Sans"), url("/assets/fonts/NotoSans-Italic-Variable.ttf");
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: "Noto Serif";
|
||
|
|
src: local("Noto Serif"), url("/assets/fonts/NotoSerif-Variable.ttf");
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: "Noto Serif";
|
||
|
|
font-style: italic;
|
||
|
|
src: local("Noto Serif"), url("/assets/fonts/NotoSerif-Italic-Variable.ttf");
|
||
|
|
}
|