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.

assets/css/dark.css

@@ -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;
 	}

assets/css/main.css

@@ -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%;

assets/css/print.css

@@ -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. */

content/_index.md

@@ -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'}").