hugo-theme-contentful/assets/css/main.css

:root {
    /* The color palette. */
    --background: #FAFAFA;
    --background-light: #E1E1E1;
    --foreground: #000000;
    --foreground-light: #363537;
    --grey: #454545;

    /* The fonts. */
    --body-family: serif;
    --header-family: sans-serif;
    --mono-family: monospace;

    /* Spacing options. */
    --font-size: 20px;
    --vertical-rhythm: 24px;
    --content-width: 750px;

    --border-style: var(--foreground) solid 1px;
}

@media (prefers-color-scheme: light) {
    :root {
        --background: #FAFAFA;
        --background-light: #E1E1E1;
        --foreground: #000000;
        --foreground-light: #363537;
        --grey: #454545;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #000000;
        --background-light: #363537;
        --foreground: #FAFAFA;
        --foreground-light: #CCCCCC;
        --grey: #919191;
    }
}

:root {
    font-family: var(--body-family);
    font-size: var(--font-size);
    background: var(--background);
    color: var(--foreground);
    line-height: var(--vertical-rhythm);
    margin: 0;
    padding: 0;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0 auto;
    max-width: var(--content-width);
    padding: 1rem;
}

nav {
    margin: 1rem auto;
}

article h2 {
    margin-top: 3rem;
}

article h3 {
    margin-top: 2rem;
}


/* Text formatting */
h1, h2, h3,
h4, h5, h6 {
    font-family: var(--header-family);
    line-height: 1.25;
}

a {
    color: #3AA2BF;
}

a:visited {
    color: #AC5A82;
}

code {
    font-family: var(--mono-family);
    font-size: 0.9em;
}

dd, li, p, td {
    line-height: 1.5;
}

p {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

dd {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

kbd {
    border: var(--border-style);
    font-size: 0.85rem;
    font-weight: bold;
    padding: 0.25rem;
}

tr:nth-child(even) {
    background: var(--background-light);
}

pre {
    background: var(--foreground);
    color: var(--background);
    font-family: var(--mono-family);
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    overflow: auto;
}


/* Multimedia blocks */
img, video, audio, iframe {
    display: block;
    height: auto;
    max-width: 100%;
    margin: auto;
}

table {
    border: var(--border-style);
    border-collapse: collapse;
    margin: auto;
}

thead, tbody {
    margin: 0 auto;
}

th, td {
    border: var(--border-style);
    padding: 1rem;
}

ol, ul {
    line-height: 1.5;
}

figure {
    margin: 2rem auto;
}

figure > * {
    margin: 1rem auto;
}

figcaption {
    text-align: center;
    font-size: 1rem;
}

svg {
    height: 1rem;
    width: 1rem;
    fill: currentColor;
}

blockquote {
    margin: 2rem 1rem;
}

blockquote footer {
    display: block;
    width: 100%;
}

/* Form controls */
button {
    background: unset;
    border: var(--foreground) solid 1px;
    color: var(--foreground);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.5rem;
}


/* Semantic blocks */
aside {
    --vertical-rhythm-reduction: 0.2;
    color: var(--grey);
    border: 1px solid var(--grey);
    border-left: 3px solid var(--grey);
    font-size: calc(1rem * (1 - var(--vertical-rhythm-reduction)));
    font-family: var(--header-family);
    line-height: calc(1rem * (1 + var(--vertical-rhythm-reduction)));
    margin: 1rem 0;
    padding: 0.5rem;
    width: 100%;
}

footer {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-flow: column wrap;
}


/* Layout styles. */
.site__title {
    display: inline-block;
    font-size: 2rem;
    margin-bottom: 1rem;
    margin-right: 0.5rem;
}

.site__links {
    display: inline-block;
}

.site__languages {
    display: inline-block;
}

.site__theme-btn {
    position: absolute;
    right: 0;
    top: 0;
}

.pagination {
    display: flex;
    font-size: 1rem;
    list-style: none;
    justify-content: center;
    margin: 1.2rem 0;
    padding: 0.8rem;
}

.pagination > * {
    margin: 0 0.25em;
    text-decoration: none;
}

.page-link {
    background: var(--background-light);
    color: var(--foreground-light);
    text-decoration: none;
    padding: 0.5em;
}

.page-link:visited {
    color: var(--foreground-light);
}

.page-link--active {
    font-weight: bolder;
}

.page-link:hover {
    background: var(--foreground);
    color: var(--background);
}

.post {
    margin-top: 1rem;
}

.post h1 {
    margin: 0 auto;
}

.post__meta {
    color: var(--grey);
    display: inline-block;
    margin: 0.5rem auto;
    font-size: 0.9em;
}

.post__meta--single {
    color: var(--grey);
    font-size: 0.9em;
    margin: 0.5em auto;
}

.post__meta--single > * {
    margin: 0.5em auto;
}

.post__meta > :not(:first-child)::before {
    content: "|";
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.taxonomy__header {
    display: flex;
    align-items: center;
    justify-content: start;
}

.taxonomy__header > * {
    margin: 0;
    margin-right: 0.25em;
}

.taxonomy__pages {
    list-style: none;
    padding-left: 1em;
    margin: 1em auto;
}

.taxonomy__page {
    display: flex;
}

.taxonomy__page :first-child {
    white-space: nowrap;
}

.taxonomy__page > * {
    margin-right: 0.5em;
}

/* Mobile styles */
@media all and (max-width: 860px) {
    html:root {
        --font-size: 17px;
    }
}