mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-09-20 12:12:09 +00:00
938428333e
Statically grab and include webmentions during Hugo builds, no JS involved. Hugo supports making web requests and parsing the resulting JSON, so there was no need to use an external program either.
105 lines
2.3 KiB
CSS
105 lines
2.3 KiB
CSS
/* CSS that adds the bare minimum for a simple layout */
|
|
|
|
/* This site's CSS only does 9 major things:
|
|
* 1. sans-serif instead of serif for low-res screens.
|
|
* 2. Consistent font size; <pre> and <code> shouldn't be smaller.
|
|
* 3. max text width for readability
|
|
* 4. single-row nav links widescreen, multiline nav on narrow screens
|
|
* 5. Bigger "home" link that doubles as a site header
|
|
* 6. Soft border around code in case it looks too similar to regular
|
|
* text, and to show it continue across more than one line
|
|
* 7. Horizontally center inline images; left-aligned stick out.
|
|
* 8. Padding fixes so the above changes don't make elements misalign.
|
|
* 9. dark.css changes a few colors if the browser wants dark mode.
|
|
* Everything else is browser defaults:
|
|
* default fonts, non-dark-mode colors, etc.
|
|
*/
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.5rem;
|
|
margin: auto;
|
|
max-width: 50rem;
|
|
padding: 0 5%;
|
|
}
|
|
|
|
nav ul {
|
|
/* nav links should look more prominent than normal links */
|
|
font-size: 1.25rem;
|
|
|
|
/* Use whitespace instead of bullets to separate nav from article.
|
|
Also avoid top-padding at the top of the page. */
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
|
|
/* nav links should be easy to tap with fat fingers */
|
|
nav li {
|
|
padding: 0 0.5rem 0.75rem 0;
|
|
}
|
|
|
|
/* The posts list doesn't need bullets; simple spacing and repetition
|
|
* of the "date + title" format is enough to convey separation
|
|
* between elements.
|
|
*/
|
|
.unstyled-list {
|
|
padding: 0;
|
|
}
|
|
|
|
.unstyled-list li {
|
|
list-style-type: none;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Make the home link a bit bigger to serve as a site heading */
|
|
.home {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* single-line nav on widescreen, multi-line nav on narrow screens */
|
|
@media (min-width: 32rem) {
|
|
nav li {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
line-height: 1.75rem;
|
|
}
|
|
|
|
img:not(.u-photo) {
|
|
display: block;
|
|
height: auto;
|
|
margin: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.u-photo {
|
|
display: inline-block;
|
|
height: 1em;
|
|
vertical-align: -0.1em;
|
|
width: 1em;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
border: 1px solid #bbb;
|
|
padding: 0 0.25rem;
|
|
}
|
|
|
|
pre code {
|
|
border: 0; /* don't border each line in a pre block */
|
|
padding: 0; /* otherwise the first line in a pre block gets indented. */
|
|
}
|
|
|
|
/* Allow horizontal scroll in a pre block, but don't clip it vertically */
|
|
pre {
|
|
/* csslint ignore:start */
|
|
overflow: auto visible;
|
|
|
|
/* csslint ignore:end */
|
|
padding: 0.5rem;
|
|
}
|