fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-10 00:12:09 +00:00
Code Issues Projects Releases Wiki Activity

Refactor stylesheet a bit

Browse source 
- More comments
- Remove redundancy; shaves off a few bytes
This commit is contained in:
Rohan Kumar 2022-02-28 15:05:14 -08:00
parent 7a54e7ec2e
commit f8d4b6170d
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
1 changed files with 29 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
assets/css/main.css
View file

@ -4,7 +4,7 @@
* 1. sans-serif instead of serif for low-res screens. * 1. sans-serif instead of serif for low-res screens.
* 2. Consistent font size; <pre> and <code> shouldn't be smaller than * 2. Consistent font size; <pre> and <code> shouldn't be smaller than
* regular text. * regular text.
* 3. max text width for readability * 3. max content width for readability
* 4. single-row nav links widescreen, multiline nav on narrow screens * 4. single-row nav links widescreen, multiline nav on narrow screens
* 5. Soft border around code and images to disginguish from the * 5. Soft border around code and images to disginguish from the
* surrounding page. Images with white/black or transparent * surrounding page. Images with white/black or transparent
@ -30,6 +30,7 @@ html {
padding: 0 3%; padding: 0 3%;
} }
/* narrow screens: no margin for blockquotes and figures */
blockquote { blockquote {
border-left: 6px solid #bbb; border-left: 6px solid #bbb;
margin-left: 0; margin-left: 0;
@ -47,7 +48,6 @@ nav li {
/* Lists without bullets; navlinks, posts lists, webmentions */ /* Lists without bullets; navlinks, posts lists, webmentions */
.unstyled-list { .unstyled-list {
margin: 0;
padding: 0; padding: 0;
} }
@ -63,21 +63,6 @@ nav li {
} }
} }
/* center images that aren't my indieweb icon */
img:not(.u-photo) {
display: block;
height: auto;
margin: auto;
max-width: 100%;
}
/* Distinguish images from the background in case their color is
* too similar to the page background color */
img,
pre {
border: 1px solid #bbb;
}
code, code,
pre { pre {
/* browsers make <pre> small for some dumb legacy reason /* browsers make <pre> small for some dumb legacy reason
@ -89,21 +74,20 @@ pre {
/* stylelint-enable */ /* stylelint-enable */
} }
/* don't put a border around code within a <pre> block, /* Narrow screens: long words can cause content to flow out of the
* just put the border around the <code> */ * viewport, triggering horizontal scrolling. Allow breaking words in
* content I don't control (comments). For content I do control, I just
* add soft hyphens to the HTML. */
.u-comment,
:not(pre) > code { :not(pre) > code {
border: 1px solid #bbb; overflow-wrap: break-word;
/* borders shouldn't touch text */
padding: 0 0.1em; padding: 0 0.1em;
overflow-wrap: break-word;
} }
/* some webmentions contain full URLs, and these should be broken to fit /* Narrow screens: allow horizontal scroll in a pre block, but don't
* the viewport on narrow screens */ * clip it vertically */
.u-comment .h-cite {
overflow-wrap: break-word;
}
/* Allow horizontal scroll in a pre block, but don't clip it vertically */
pre { pre {
/* csslint ignore:start */ /* csslint ignore:start */
overflow: auto visible; overflow: auto visible;
@ -111,3 +95,20 @@ pre {
/* csslint ignore:end */ /* csslint ignore:end */
padding: 0.5em; padding: 0.5em;
} }
/* Distinguish images from the background in case their color is
* too similar to the page background color. Also put a border around
* <pre> so that it looks just like <code> (see below). */
img,
pre,
:not(pre) > code {
border: 1px solid #bbb;
}
/* center images that aren't my indieweb icon */
img:not(.u-photo) {
display: block;
height: auto;
margin: auto;
max-width: 100%;
}