1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-10 00:12:09 +00:00

Many style tweaks

- Fix unnecessarily excessive spacing around "li > article" entry data
  (was due to containment)
- Aesthetic tweak: ugly underline between microformat u-photo and p-name
- Make CSS file smaller by using some microformats2 classnames instead
  of microdata attributes.
This commit is contained in:
Rohan Kumar 2022-08-03 21:31:05 -07:00
parent 8953723a2f
commit d42f304f71
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
4 changed files with 44 additions and 19 deletions

View file

@ -66,7 +66,9 @@
}
/* Specified last so it overrides :visited. I chose this color because
* it's dimmer, so it's noticeable even without color vision. */
* it's dimmer, so it's noticeable even without color vision. However,
* it still meets the experimental SAPC-APCA threshold for "spot"
* contrast. */
a:active {
color: #f83;
}

View file

@ -4,18 +4,18 @@
* specific a11y, compatibility, or critical
* usability need.
*
* Two exceptions: I re-set the input styles so Safari wouldn't make
* them pill-shaped, and I tweaked some margins/paddings to make some
* things evenly aligned.
* Three exceptions:
* - I re-set the input styles so Safari wouldn't make them pill-shaped
* - I tweaked some margins/paddings to make some things evenly aligned
* - I made my IndieWeb profile photo align without an underline
* on the whitespace between the photo and my name.
*
* I also don't use any classes except when styling depends on
* *content* of an element rather than structure/semantics. Examples
* include images that look better with pixelated upscaling, and
* posts on the list of entries in the "notes" section that are tall
* I also don't use any non-microformats classes except when styling
* depends on *content* of an element rather than structure/semantics.
* Examples include images that look better with pixelated upscaling,
* and posts on the list of entries in the "notes" section that are tall
* and need a larger contain-intrinsic-size.
* One exception: a class for narrow width body text. My HTML contains
* microformats2 classnames for IndieWeb parsers, but I don't actually
* use those for styling.
* One exception: a class for narrow width body text.
*
* Some pages (e.g. post archives) are really long despite having a
* small download size. Rather than resort to pagination, I decided to
@ -104,7 +104,7 @@ html {
/* 45em is too wide for long body text.
* Typically meets SC 1.4.8, plus or minus a few characters. */
[itemprop="articleBody"],
.e-content,
[itemprop="dataFeedElement"],
.narrow {
margin: auto;
@ -140,6 +140,10 @@ html {
main > hr {
margin: 0 .5em;
}
/* containment has increased spacing of the first paragraph of h-feed
* entries; offset that. */
li .p-name + p,
header hr {
margin-bottom: 0;
}
@ -231,7 +235,7 @@ html {
aside > a, /* Used for section permalinks */
dt > a,
li > a,
[itemprop="comment"] dd > a,
.u-comment dd > a,
[itemprop="breadcrumb"] a,
[itemprop="breadcrumb"] > span {
padding: .75em .25em;
@ -262,7 +266,7 @@ html {
header > nav,
a[href="#h1"], /* skip link */
[itemprop="comment"] dd > a ,
.u-comment dd > a ,
footer > nav,
/* List items with direct hyperlink children should only have one
* hyperlink. */
@ -423,7 +427,7 @@ h1 {
/* Very narrow screens: full hyphenation.
* This is the typical width of a smart feature phone. */
@media (max-width: 250px) {
@media (max-width: 272px) {
body {
font-size: 100%;
-webkit-hyphens: auto;
@ -498,7 +502,7 @@ samp {
}
/* Remove list style from data feeds. */
[itemtype="https://schema.org/DataFeed"] > ol {
.h-feed > ol {
list-style-type: none;
padding: 0;
}
@ -507,7 +511,7 @@ samp {
* viewport, triggering horizontal scrolling. Allow breaking words in
* content I don't control (comments, names). For content I do control,
* I just add soft hyphens to the HTML. */
[itemprop="comment"],
.u-comment,
:not(pre) > code,
:not(pre) > samp,
span[itemtype="https://schema.org/Person"] {
@ -548,13 +552,27 @@ summary {
/* center standalone images; same justification as
* for centering the body contents. Also makes images easier to see
* for people holding a device with one hand. */
[itemprop="articleBody"] img {
.e-content img {
display: block;
height: auto;
margin: auto;
max-width: 100%;
}
.h-card .u-photo {
height: 1em;
width: 1em;
vertical-align: -.1em;
}
.h-card a.u-uid {
text-decoration: none;
}
a .p-name {
text-decoration: underline;
}
/* Stretch out audio elements so the progress meter is easier to use. */
audio {
width: 100%;

View file

@ -24,6 +24,11 @@
nav:not([itemprop="breadcrumb"]) a:not([rel="home"]) {
display: none;
}
[role="note"] p,
[role="doc-tip"] p {
margin: .25em 0;
}
}
/* Print: don't break up self-contained items. */

View file

@ -16,7 +16,7 @@ About me
<meta itemprop="url" content="https://seirdy.one" />
<div itemprop="author" itemscope="" itemtype="https://schema.org/Person" itemid="https://seirdy.one/#seirdy" class="p-author author h-card vcard" id="seirdy">
I'm <a itemprop="url" href="https://seirdy.one" rel="author me home canonical" class="u-url u-uid url"> {{% indieweb-icon %}} <span itemprop="name" class="p-name fn n"> <span itemprop="givenName" class="p-given-name given-name">Rohan</span>&#160;<span itemprop="familyName" class="p-family-name family-name">Kumar</span></span></a> (<span class="p-pronouns"><a href="https://pronoun.is/he/him" class="u-pronouns"><span class="p-pronoun">he</span>/<span class="p-pronoun">him</span></a></span>). I'm also known by my more casual online handle <span itemprop="alternateName" class="p-nickname nickname">Seirdy</span> (<span class="p-pronouns"><a href="https://pronoun.is/they/them" class="u-pronouns"><span class="p-pronoun">they</span>/<span class="p-pronoun">them</span></a></span>). Mixing them up is fine.
I'm <a itemprop="url" href="https://seirdy.one" rel="author me home canonical" class="u-url u-uid url">{{% indieweb-icon %}} <span itemprop="name" class="p-name fn n"> <span itemprop="givenName" class="p-given-name given-name">Rohan</span>&#160;<span itemprop="familyName" class="p-family-name family-name">Kumar</span></span></a> (<span class="p-pronouns"><a href="https://pronoun.is/he/him" class="u-pronouns"><span class="p-pronoun">he</span>/<span class="p-pronoun">him</span></a></span>). I'm also known by my more casual online handle <span itemprop="alternateName" class="p-nickname nickname">Seirdy</span> (<span class="p-pronouns"><a href="https://pronoun.is/they/them" class="u-pronouns"><span class="p-pronoun">they</span>/<span class="p-pronoun">them</span></a></span>). Mixing them up is fine.
The Director's Cut of my bio is at my [About page](./about/ "{itemprop='subjectOf'}").