:root {
--page-width: 60rem; --content-width: 40rem;
}
body > section {
margin: 0 auto; max-width: var(--page-width); padding: 0 1rem;
}
body > footer {
background-color: var(--secondary-bg-color); display: flex; flex-flow: wrap-reverse; justify-content: space-between; overflow-x: auto; padding: 0 1rem; ul { display: inline-block; flex: 0 0 auto; margin: 0; padding: 0; } li { display: inline-block; list-style: none; vertical-align: middle; } a { display: inline-block; opacity: 1; padding: 0 0.4rem; text-decoration: none; } a, p { color: var(--secondary-fg-color); font-family: var(--ui-font); font-size: 0.6rem; line-height: 3em; margin: 0; }
}
article {
margin-bottom: 4rem; p, ul, ol, h1, h2, h3, h4, h5, h6 { margin-left: auto; margin-right: auto; max-width: var(--content-width); } img, video { display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; } > table { font-family: var(--ui-font); margin: 2em auto; max-width: 100%; th, td { padding: 0 0.5rem; } } .thanks { .links { display: flex; flex-wrap: wrap; justify-content: center; margin: 0.75em -1.5em; a { margin: 0.75em 1.5em; } svg { color: var(--fg-color); height: 2em; } } }
}
hr {
border: 0; margin: 3em auto; max-width: 50%; &::before { content: "..."; display: block; font-weight: bold; letter-spacing: 1em; text-align: center; }
}
.license {
display: block; font-family: var(--ui-font); font-size: 0.75rem; margin: 0 auto; max-width: var(--content-width); text-align: center; a, svg { color: var(--secondary-fg-color); vertical-align: middle; } a { text-decoration: none; &:hover { text-decoration: underline; } } svg { height: 1.25em; margin-left: 0.25em; margin-right: 0.25em; }
}
.up-next {
margin: 8rem auto 0;
}
aside.outdated {
background: var(--warning-bg-color); bottom: 0; color: var(--warning-fg-color); display: block; font-family: var(--ui-font); font-size: 0.8rem; left: 50%; opacity: 0.8; padding: 0.5em 1em; position: relative; text-align: center; transform: translateX(-50%); width: 100vw; z-index: 1;
}