From 5eb59c4869a56f4420ac2082569f42a1c1949f56 Mon Sep 17 00:00:00 2001
From: Chris Basham <chris@bash.am>
Date: Mon, 16 Sep 2024 17:51:31 -0400
Subject: [PATCH] Work on article

---
 src/components/Aside.astro                 |  2 +-
 src/components/CodeFigure.astro            |  7 ++--
 src/components/Figure.astro                |  7 ++--
 src/components/ImpactMapFigure.astro       |  8 ++--
 src/content/writings/2024-08-22-usable.mdx | 45 ++++++++++++++++++++--
 src/styles/global.css                      | 22 ++++++++---
 6 files changed, 69 insertions(+), 22 deletions(-)

diff --git a/src/components/Aside.astro b/src/components/Aside.astro
index e6ac8a5..72081be 100644
--- a/src/components/Aside.astro
+++ b/src/components/Aside.astro
@@ -6,7 +6,7 @@
 
 <style>
 	aside {
-		border: var(--2px) solid var(--color-link);
+		border: var(--border);
 		border-radius: var(--4px);
 		margin-top: var(--16px);
 		padding: 0 var(--16px) var(--16px);
diff --git a/src/components/CodeFigure.astro b/src/components/CodeFigure.astro
index 60c23a5..7bb4fab 100644
--- a/src/components/CodeFigure.astro
+++ b/src/components/CodeFigure.astro
@@ -9,14 +9,13 @@ const { label } = Astro.props;
 
 <style>
 	figure {
-		border: var(--2px) solid var(--color-link);
+		border: var(--border);
 		border-radius: var(--4px);
+		padding: var(--2px);
 	}
 
 	figcaption {
-		background-color: var(--color-link);
-		border-bottom: var(--2px) solid var(--color-link);
-		color: var(--color-base);
+		background-color: var(--color-border);
 		padding: 0.5em 1em;
 	}
 
diff --git a/src/components/Figure.astro b/src/components/Figure.astro
index 0959caf..fe9ef06 100644
--- a/src/components/Figure.astro
+++ b/src/components/Figure.astro
@@ -11,14 +11,13 @@ const { label } = Astro.props;
 
 <style>
 	figure {
-		border: var(--2px) solid var(--color-link);
+		border: var(--border);
 		border-radius: var(--4px);
+		padding: var(--2px);
 	}
 
 	figcaption {
-		background-color: var(--color-link);
-		border-bottom: var(--2px) solid var(--color-link);
-		color: var(--color-base);
+		background-color: var(--color-border);
 		padding: 0.5em 1em;
 	}
 
diff --git a/src/components/ImpactMapFigure.astro b/src/components/ImpactMapFigure.astro
index a81fc9c..c873e34 100644
--- a/src/components/ImpactMapFigure.astro
+++ b/src/components/ImpactMapFigure.astro
@@ -11,14 +11,13 @@ const { label } = Astro.props;
 
 <style>
 	figure {
-		border: var(--2px) solid var(--color-link);
+		border: var(--border);
 		border-radius: var(--4px);
+		padding: var(--2px);
 	}
 
 	figcaption {
-		background-color: var(--color-link);
-		border-bottom: var(--2px) solid var(--color-link);
-		color: var(--color-base);
+		background-color: var(--color-border);
 		padding: 0.5em 1em;
 	}
 
@@ -38,6 +37,7 @@ const { label } = Astro.props;
 
 	.im li {
 		list-style-type: none;
+		margin-top: 0.5em;
 	}
 
 	.im li strong:first-child {
diff --git a/src/content/writings/2024-08-22-usable.mdx b/src/content/writings/2024-08-22-usable.mdx
index 3e9c8c6..ca068d1 100644
--- a/src/content/writings/2024-08-22-usable.mdx
+++ b/src/content/writings/2024-08-22-usable.mdx
@@ -30,7 +30,7 @@ Writing is accessible if readers have the ability to distinguish the content in
 
 Images and visualizations that convey information should have a text description. Audio and video should have captions, descriptions, and transcripts.
 
-For example, the alternative text for the image `tomatoes.jpg` could describe the quantity ("cluster"), quality ("ripe"), type ("cherry"), and location ("community garden") of the subject ("tomatoes"). It is rich in meaning, much more than if the alternative text was merely a statement of the subject ("Tomatoes").
+For example, the alternative text for the image `tomatoes.jpg` could describe the quantity ("cluster"), quality ("ripe"), type ("cherry"), and location ("community garden") of the subject ("tomatoes"). It more rich in meaning than if the alternative text was merely a statement of the subject ("Tomatoes").
 
 ```html
 <!-- Rich description -->
@@ -44,7 +44,7 @@ For example, the alternative text for the image `tomatoes.jpg` could describe th
 <img src="tomatoes.jpg">
 ```
 
-These text alternatives also help those who do not use assistive technology (like a screen reader or braille display). For example, those who are not hard of hearing can still benefit from captions when in a noisy room or in a situation in which they are trying to be quiet.
+These text alternatives also help those who do not use assistive technology, such as a screen reader or braille display. For example, those who are not hard of hearing can still benefit from captions when in a noisy room or in a situation in which they are trying to be quiet.
 
 See: [WCAG Success Criteria 1.1.1](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) (Level A)
 
@@ -52,11 +52,11 @@ See: [WCAG Success Criteria 1.1.1](https://www.w3.org/WAI/WCAG21/Understanding/n
 
 Don't just use color as the only way to distinguish content.
 
-For example, someone who is colorblind may need more than just red text coloring to understand what fields in a form is required.
+For example, someone who is colorblind may need more than just text colored red to understand what fields in a form is required.
 
 > Required fields are displayed in red
 
-Complement color with some visual redundancy like a symbol or unique pattern.
+Complement color with some visual redundancy like a symbol or unique background pattern.
 
 > Required fields are displayed in red and marked with an asterisks (*)
 
@@ -150,6 +150,43 @@ The Rivet visibility utilities allows you to control the visibility of content.
 
 ## Usable writing is navigable
 
+When landing on a webpage, you need to get oriented, move around, and navigate to other pages. This can be done with titles, headings, landmarks, and links.
+
+### Page title
+
+Parts of title should be ordered from more specific to less specific. Use a consistent delimiter between parts of the title (`-`, `|`, `·`).
+
+Example: `Employee Center | All IU Campuses | One.IU`
+
+See: [SC 2.4.2](https://www.w3.org/WAI/WCAG21/Understanding/page-titled)
+
+<ul>
+	<li>
+		<p>**Page title:** Parts of title should be ordered from more specific to less specific. Use a consistent delimiter between parts of the title (`-`, `|`, `·`).</p>
+		<p>Example: `Employee Center | All IU Campuses | One.IU`</p>
+		<p>See: [SC 2.4.2](https://www.w3.org/WAI/WCAG21/Understanding/page-titled)</p>
+	</li>
+	<li>
+		<p>**Headings:** Headings should be used, starting with the h1 element ("heading level 1"). The heading levels should stay consistent, in the right order and not skipped. They should proceed the content it describes. Its description should be relevant for its content. It should be succinct.</p>
+		<p>See: [SC 2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels), [SC 2.4.10](https://www.w3.org/WAI/WCAG21/Understanding/section-headings)</p>
+	</li>
+</ul>
+
+
+- **Page title:** Parts of title should be ordered from more specific to less specific. Use a consistent delimiter between parts of the title (`-`, `|`, `·`).
+- **Headings:** Headings should be used, starting with the h1 element, which stands for "heading level 1". The heading levels should stay consistent, in the right order and not skipped. They should proceed the content it describes. Its description should be relevant for its content. It should be succinct.  
+See: [SC 2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels), [SC 2.4.10](https://www.w3.org/WAI/WCAG21/Understanding/section-headings)
+
+<dl>
+	<dt>Page title</dt>
+	<dd>Parts of title should be ordered from more specific to less specific. Use a consistent delimiter between parts of the title (`-`, `|`, `·`).</dd>
+	<dd>Example: `Employee Center | All IU Campuses | One.IU`</dd>
+	<dd>See: [SC 2.4.2](https://www.w3.org/WAI/WCAG21/Understanding/page-titled)</dd>
+	<dt>Headings</dt>
+	<dd>Headings should be used, starting with the `h1` element ("heading level 1"). The heading levels should stay consistent, in the right order and not skipped. They should proceed the content it describes. Its description should be relevant for its content. It should be succinct.</dd>
+	<dd>See: [SC 2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels), [SC 2.4.10](https://www.w3.org/WAI/WCAG21/Understanding/section-headings)</dd>
+</dl>
+
 ## Usable writing is clear
 
 ## Usable writing is concise
diff --git a/src/styles/global.css b/src/styles/global.css
index 825c71a..dd8a5f2 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -7,6 +7,8 @@
 	--color-150-75: #7fc08c;
 	/* https://oklch.com/#15,0.2,255,100 */
 	--color-255-15: #000b1f;
+	/* https://oklch.com/#40,0.05,255,100 */
+	--color-255-40: oklch(40% 0.05 255);
 	/* https://oklch.com/#75,0.2,255,100 */
 	--color-255-75: #73b1ff;
 	/* https://oklch.com/#75,0.05,255,100 */
@@ -17,6 +19,7 @@
 	--color-285-75: #a6a1ff;
 
 	--color-base: var(--color-255-15);
+	--color-border: var(--color-255-40);
 	--color-code: var(--color-150-75);
 	--color-link: var(--color-255-75);
 	--color-mark: var(--color-80-75);
@@ -54,6 +57,8 @@
 
 	--font-main: "Libre Franklin Variable", sans-serif;
 	--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+
+	--border: var(--2px) solid var(--color-border);
 }
 
 *, *::before, *::after {
@@ -94,7 +99,7 @@ a:visited {
 }
 
 blockquote {
-	border-left: var(--2px) solid var(--color-link);
+	border-left: var(--border);
 	margin: 0;
 	padding: 0 0 0 1em;
 }
@@ -159,6 +164,12 @@ h2 {
 	font-size: var(--fs-3);
 }
 
+h2 {
+	border-top: var(--border);
+	margin-top: 2em;
+	padding-top: 2em;
+}
+
 h3 {
 	font-size: var(--fs-2);
 }
@@ -234,20 +245,21 @@ pre > code {
 }
 
 table {
-	border: var(--2px) solid var(--color-link);
+	border: var(--border);
 	border-radius: var(--4px);
 	border-spacing: 0;
-	padding: var(--8px);
+	padding: var(--2px);
 	width: 100%;
 }
 
 td,
 th {
-	padding: var(--8px);
+	padding: 0.5em 1em;
 }
 
 th {
-	color: var(--color-link);
+	background-color: var(--color-border);
+	font-size: var(--fs-0);
 }
 
 .list-inline {