:root {
--main-bg-color: #ffffff;
--main-fg-color: #000000;
--link-fg-color: var(--main-fg-color);
--aside-fg-color: #888888;
--math-delim-color: #aaaaaa;
--code-fg-color: #272822;
--code-bg-color: #fafafa;
}
html {
font-size: 18px;
background-color: var(--main-bg-color);
color: var(--main-fg-color);
}
body {
margin: 0;
font-family: 'WorkSans', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Fira Code', monospace;
}
a {
color: var(--main-link-color);
}
ul.nav {
padding: 0;
margin: 0 1rem;
text-align: center;
li {
display: inline;
font-family: 'Fira Code', monospace;
}
li + li::before {
content: " | "
}
}
time.post-time {
color: var(--aside-fg-color);
white-space: nowrap;
font-family: 'Fira Code', monospace;
}
.content {
max-width: 920px;
margin: 0 auto;
min-height: 100vh;
min-height: -webkit-fill-available;
display: grid;
// see: https://css-tricks.com/preventing-a-grid-blowout/
grid-template-columns: minmax(240px, 1fr);
grid-template-rows: auto auto 1fr auto;
}
#intro {
display: flex;
width: 100vw;
min-height: 100vh;
min-height: -webkit-fill-available;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
h1 {
font-size: 4rem;
font-weight: normal;
}
}
.content > header {
grid-column: 1;
img {
display: none;
}
> h1 {
font-size: 1.8rem;
font-weight: normal;
margin: 10px 0;
padding: 0;
display: flex;
justify-content: center;
text-align: center;
a {
text-decoration: none;
}
}
> nav {
display: flex;
justify-content: center;
dl {
display: none;
}
}
}
.content main {
grid-column: 1;
margin: 0 0.5em;
margin-top: 0.3rem;
.all-posts-title {
display: none;
}
}
.blogpost, .aboutme {
header {
margin: 0;
padding: 0;
h1.post-title {
font-size: 1.2rem;
margin-top: 0.5rem;
}
}
figure.resizable img {
width: 100%;
}
section {
h1, h2, h3, h4, h5, h6 {
font-size: 1rem;
margin: 1rem 0;
}
figure {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
figcaption p {
color: var(--aside-fg-color);
font-size: 0.9rem;
margin-top: 0.4rem;
margin-bottom: 0;
}
}
figure.resizable {
margin: 8px 4px;
}
.inline-math {
color: var(--math-delim-color);
}
}
pre {
padding: 0.2rem 0.3rem;
overflow-x: auto;
color: var(--code-fg-color);
background-color: var(--code-bg-color);
code {
padding: 0;
}
}
code {
font-size: 0.9rem;
padding: 0 0.1rem;
color: var(--code-fg-color);
background-color: var(--code-bg-color);
}
table {
display: block;
overflow-x: auto;
}
blockquote {
color: var(--aside-fg-color);
}
.footnotes {
font-size: 0.8rem;
ol {
margin: 0.5rem 0;
}
p {
margin: 0;
margin-top: 0.5rem;
}
}
}
.blogpost {
header {
.post-title {
margin: 0;
margin-bottom: 2px;
}
}
}
.post-metadata {
color: var(--aside-fg-color);
align-items: center;
align-items: center;
.feed-icon {
height: 1rem;
position: relative;
top: 0.13em;
path {
fill: var(--aside-fg-color);
}
}
}
.post-tags {
margin: 0;
padding: 0;
display: inline;
li {
margin: 0;
padding: 0;
display: inline;
}
li + li::before {
content: ", ";
}
}
.list-title {
display: flex;
justify-content: center;
font-size: 1.2rem;
font-weight: normal;
margin: 0.5rem 0;
}
.post-list {
margin: 0;
padding: 0;
list-style-type: none;
li {
margin: 0;
padding: 0;
}
article > header {
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
h1 {
font-size: 1rem;
margin: 0.5rem;
}
}
.tag-list {
margin: 0;
padding: 0;
list-style-type: none;
li {
margin: 0;
padding: 0;
display: inline;
}
li + li::before {
content: ", ";
}
}
.content > footer {
grid-row: 4 / 5;
grid-column: 1 / 3;
font-size: 0.9rem;
margin-top: auto;
p {
padding: 0;
margin: 0.2rem 0.5em;
}
}
section.webring {
margin: 0 0.5rem;
margin-top: 0.5rem;
border-top: 1px solid var(--main-fg-color);
font-size: 0.9rem;
display: flex;
flex-direction: column;
text-justify: none;
grid-row: 3 / 4;
> header > h2 {
text-align: center;
}
header {
h2 {
font-size: 1rem;
margin-bottom: 0;
}
h3 {
font-size: 0.9rem;
}
}
.articles {
display: flex;
flex-direction: column;
}
.article {
text-align: left;
text-justify: none;
margin: 0 0.3rem;
}
.article:first-child {
margin-left: 0;
}
.summary {
margin-bottom: 0.5rem;
}
.source {
margin-bottom: 0.8rem;
}
.attribution {
color: var(--aside-fg-color);
}
}
@media (min-width: 640px) {
.blogpost figure.resizable img {
width: 616px; // 640 - 1em (= 16px) - 2 * 4px
}
}
@media (min-width: 768px) {
.content {
// see: https://css-tricks.com/preventing-a-grid-blowout/
grid-template-columns: minmax(0, 1fr) 224px;
}
.content > header {
grid-row: 1;
grid-column: 1/3;
img {
margin: 0 auto;
margin-top: 0.5rem;
border-radius: 50%;
display: block;
}
nav.detailed {
margin: 10px 0;
align-items: center;
justify-content: left;
> dl {
display: block;
font-size: 0.8rem;
margin: 0;
dt .feed-icon {
height: 1em;
position: relative;
top: 0.12em;
path {
fill: var(--main-fg-color);
}
}
dd {
margin: 0;
margin-left: 1em;
margin-bottom: 5px;
}
}
> ul {
display: none;
}
}
}
header.detailed {
grid-column: 2;
h1 {
font-size: 1.8rem;
font-weight: normal;
justify-content: center;
margin: 0.5rem 0;
a {
text-decoration: none;
}
}
}
.list-title {
font-size: 1.6rem;
}
.content main {
display: flex;
flex-direction: column;
grid-column: 1;
grid-row: 1/3;
.all-posts-title {
display: flex;
}
}
main.blogpost {
grid-column: 1/3;
grid-row: 2;
}
section.webring {
grid-column: 1/3;
.articles {
flex-direction: row;
}
}
}
@media (prefers-color-scheme: light) {
@import "highlight";
}
@media (prefers-color-scheme: dark) {
:root {
--main-bg-color: #121212;
--main-fg-color: #ffffff;
--code-bg-color: #272822;
--code-fg-color: #f8f8f2;
}
@import "highlight-dark";
.invertable {
filter: invert(92.6%);
}
}