mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-12-26 18:32:10 +00:00
558b6844ca
It says "Home". That's enough to know it navigates to the homepage. Bolding it makes it look like it's the current page.
86 lines
1.9 KiB
CSS
86 lines
1.9 KiB
CSS
/* CSS that adds the bare minimum for a simple layout */
|
|
|
|
/* This site's CSS does 11 major things:
|
|
* 1. sans-serif instead of serif for low-res screens.
|
|
* 2. Consistent font size; <pre> and <code> shouldn't be smaller than regular text.
|
|
* 3. max text width for readability
|
|
* 4. single-row nav links widescreen, multiline nav on narrow screens
|
|
* 5. Bold "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 non-inline images; left-aligned stick out.
|
|
* 8. Padding/line-height fixes so the above changes don't ruin alignment.
|
|
* 9. dark.css changes a few colors if the browser wants dark mode.
|
|
* 10. Make blockquotes stand out a little; some browsers don't make them obvious
|
|
* 11. Support unstyled lists: for webmentions, post lists, nav links.
|
|
* Everything else is browser defaults:
|
|
* default fonts, non-dark-mode colors, etc.
|
|
*/
|
|
|
|
body {
|
|
font: 16px sans-serif;
|
|
line-height: 1.5rem;
|
|
margin: auto;
|
|
max-width: 50rem;
|
|
padding: 0 5%;
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 6px solid #bbb;
|
|
margin-left: 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
line-height: 1.75rem;
|
|
}
|
|
|
|
/* nav links should be easy to tap with fat fingers */
|
|
nav li {
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
/* Lists without bullets; navlinks, posts lists, webmentions */
|
|
.unstyled-list {
|
|
padding: 0;
|
|
}
|
|
|
|
.unstyled-list li {
|
|
list-style-type: none;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* single-line nav on widescreen, multi-line nav on narrow screens */
|
|
@media (min-width: 28rem) {
|
|
nav li {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
img:not(.u-photo) {
|
|
display: block;
|
|
height: auto;
|
|
margin: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.u-photo {
|
|
vertical-align: -0.1em;
|
|
}
|
|
|
|
pre,
|
|
p code {
|
|
border: 1px solid #bbb;
|
|
padding: 0 0.25rem;
|
|
}
|
|
|
|
/* 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;
|
|
}
|