162 lines
2.2 KiB
CSS
162 lines
2.2 KiB
CSS
:root {
|
|
/* Thanks to! https://modernfontstacks.com/ */
|
|
--ui-font-family: system-ui, sans-serif;
|
|
--heading-font-family: Delicious, system-ui, sans-serif;
|
|
--body-font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--ui-font-family);
|
|
color: #040;
|
|
max-width: 800px;
|
|
margin-inline: auto;
|
|
padding-inline: 1em;
|
|
}
|
|
|
|
a {
|
|
color: #226622;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: var(--heading-font-family);
|
|
|
|
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;
|
|
|
|
padding-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.85em;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
main {
|
|
border-block: 1px solid #060;
|
|
padding-block: 0.75em;
|
|
}
|
|
|
|
body > footer {
|
|
font-size: 0.85em;
|
|
padding-block: 0.5em;
|
|
|
|
nav {
|
|
display: inline;
|
|
}
|
|
|
|
nav::before {
|
|
content: "• ";
|
|
}
|
|
}
|
|
|
|
article {
|
|
> header {
|
|
h2 {
|
|
font-size: 2.5em;
|
|
margin-bottom: 0.125em;
|
|
margin-top: 0;
|
|
}
|
|
|
|
p {
|
|
font-size: 0.85em;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
> img {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
> :is(p, ul) {
|
|
font-family: var(--body-font-family);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
|
|
.posts {
|
|
time {
|
|
font-size: 0.85em;
|
|
font-style: italic;
|
|
margin-left: 0.25em;
|
|
|
|
&:before {
|
|
content: "(";
|
|
}
|
|
|
|
&:after {
|
|
content: ")";
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin-block: 0.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");
|
|
}
|