@geekity/cms 0.9.0 → 0.11.0

package/themes/default/partials/contact-form.njk

@@ -29,8 +29,26 @@
   {% else %}
   <h2 class="contact-form-title">Send a message</h2>
 
-  {% if contactForm.error %}
-  <p class="contact-error" role="alert">{{ contactForm.error }}</p>
+  {#
+    A refused submission leads with this, as the comment form does: what went
+    wrong, and a link to each field to put right. It is an alert and takes
+    focus on load; a field it links to is marked `aria-invalid` and names its
+    message with `aria-describedby`.
+  #}
+  {% set problems = contactForm.problems %}
+  {% if contactForm.error or problems.name or problems.email or problems.subject or problems.message %}
+  <div class="contact-error" role="alert" tabindex="-1" autofocus aria-labelledby="contact-error-heading">
+    <h3 id="contact-error-heading">{{ contactForm.error or 'Your message was not sent. Fix the fields marked below.' }}</h3>
+    {% if problems.name or problems.email or problems.subject or problems.message %}
+    <ul>
+      {% for key in ['name', 'email', 'subject', 'message'] %}
+      {% if problems[key] %}
+      <li><a href="#contact-{{ key }}">{{ problems[key] }}</a></li>
+      {% endif %}
+      {% endfor %}
+    </ul>
+    {% endif %}
+  </div>
   {% endif %}
 
   <form method="post" action="{{ contactForm.action }}">
@@ -49,34 +67,34 @@
 
     <p class="contact-field">
       <label for="contact-name">Name</label>
-      <input id="contact-name" name="{{ contactForm.fields.name }}" type="text" value="{{ contactForm.values.name }}" maxlength="{{ contactForm.nameLength }}" autocomplete="name" required />
-      {% if contactForm.problems.name %}
-      <span class="contact-field-error">{{ contactForm.problems.name }}</span>
+      <input id="contact-name" name="{{ contactForm.fields.name }}" type="text" value="{{ contactForm.values.name }}" maxlength="{{ contactForm.nameLength }}" autocomplete="name" required{% if problems.name %} aria-invalid="true" aria-describedby="contact-name-error"{% endif %} />
+      {% if problems.name %}
+      <span class="contact-field-error" id="contact-name-error">{{ problems.name }}</span>
       {% endif %}
     </p>
 
     <p class="contact-field">
       <label for="contact-email">Email</label>
-      <input id="contact-email" name="{{ contactForm.fields.email }}" type="email" value="{{ contactForm.values.email }}" autocomplete="email" required />
-      {% if contactForm.problems.email %}
-      <span class="contact-field-error">{{ contactForm.problems.email }}</span>
+      <input id="contact-email" name="{{ contactForm.fields.email }}" type="email" value="{{ contactForm.values.email }}" autocomplete="email" required{% if problems.email %} aria-invalid="true" aria-describedby="contact-email-error"{% endif %} />
+      {% if problems.email %}
+      <span class="contact-field-error" id="contact-email-error">{{ problems.email }}</span>
       {% endif %}
       <span class="contact-hint">So there is somewhere to reply to. It is never shown on the site.</span>
     </p>
 
     <p class="contact-field">
       <label for="contact-subject">Subject <span class="contact-optional">(optional)</span></label>
-      <input id="contact-subject" name="{{ contactForm.fields.subject }}" type="text" value="{{ contactForm.values.subject }}" maxlength="{{ contactForm.subjectLength }}" />
-      {% if contactForm.problems.subject %}
-      <span class="contact-field-error">{{ contactForm.problems.subject }}</span>
+      <input id="contact-subject" name="{{ contactForm.fields.subject }}" type="text" value="{{ contactForm.values.subject }}" maxlength="{{ contactForm.subjectLength }}"{% if problems.subject %} aria-invalid="true" aria-describedby="contact-subject-error"{% endif %} />
+      {% if problems.subject %}
+      <span class="contact-field-error" id="contact-subject-error">{{ problems.subject }}</span>
       {% endif %}
     </p>
 
     <p class="contact-field">
       <label for="contact-message">Message</label>
-      <textarea id="contact-message" name="{{ contactForm.fields.message }}" rows="8" maxlength="{{ contactForm.messageLength }}" required>{{ contactForm.values.message }}</textarea>
-      {% if contactForm.problems.message %}
-      <span class="contact-field-error">{{ contactForm.problems.message }}</span>
+      <textarea id="contact-message" name="{{ contactForm.fields.message }}" rows="8" maxlength="{{ contactForm.messageLength }}" required{% if problems.message %} aria-invalid="true" aria-describedby="contact-message-error"{% endif %}>{{ contactForm.values.message }}</textarea>
+      {% if problems.message %}
+      <span class="contact-field-error" id="contact-message-error">{{ problems.message }}</span>
       {% endif %}
     </p>
 

package/themes/default/static/style.css

@@ -175,7 +175,11 @@ dd {
 
 /* HTML elements */
 
+/* `scrollbar-gutter` keeps the scrollbar's room whether or not the page is
+   long enough to scroll, so moving from a short page to a long one does not
+   shift the column sideways. */
 html {
+  scrollbar-gutter: stable;
   font-size: var(--fontSize-root);
   line-height: var(--lineHeight-relaxed);
   -webkit-text-size-adjust: 100%;
@@ -245,6 +249,7 @@ h6 {
   font-weight: var(--fontWeight-bold);
   line-height: var(--lineHeight-tight);
   letter-spacing: -0.025em;
+  text-wrap: balance;
 }
 
 h1 {
@@ -329,6 +334,16 @@ a:focus-visible {
 
 /* Prose */
 
+/* Prose wraps `pretty`, which keeps a paragraph from ending on one short word;
+   headings wrap `balance` above. A browser without either wraps as it always
+   did. */
+
+p,
+li,
+dd {
+  text-wrap: pretty;
+}
+
 p {
   margin: var(--spacing-0) var(--spacing-0) var(--spacing-4) var(--spacing-0);
   padding: var(--spacing-0);
@@ -337,10 +352,8 @@ p {
 
 ul,
 ol {
-  margin-top: var(--spacing-0);
-  margin-right: var(--spacing-0);
-  margin-bottom: var(--spacing-8);
-  margin-left: var(--spacing-4);
+  margin-block: var(--spacing-0) var(--spacing-8);
+  margin-inline: var(--spacing-4) var(--spacing-0);
   padding: var(--spacing-0);
   list-style-position: inside;
   list-style-image: none;
@@ -349,7 +362,7 @@ ol {
 ul li,
 ol li {
   margin-bottom: var(--spacing-0);
-  padding-left: var(--spacing-0);
+  padding-inline-start: var(--spacing-0);
 }
 
 li > p {
@@ -361,7 +374,7 @@ li *:last-child {
 }
 
 details {
-  margin-left: var(--spacing-4);
+  margin-inline-start: var(--spacing-4);
 }
 
 details summary {
@@ -380,14 +393,17 @@ details summary {
 
 .hlist li {
   margin: 0;
-  padding: 0 0.5em 0 0;
+  padding: 0;
+  padding-inline-end: 0.5em;
   list-style-type: none;
 }
 
 blockquote {
-  margin: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-0);
-  padding: var(--spacing-0) var(--spacing-0) var(--spacing-0) var(--spacing-6);
-  border-left: var(--spacing-1) solid var(--color-secondary);
+  margin-block: var(--spacing-8);
+  margin-inline: var(--spacing-0) var(--spacing-8);
+  padding: var(--spacing-0);
+  padding-inline-start: var(--spacing-6);
+  border-inline-start: var(--spacing-1) solid var(--color-secondary);
   color: var(--color-secondary);
   font-size: var(--fontSize-2);
   font-style: italic;
@@ -555,10 +571,8 @@ pre code {
 .hljs-addition,
 .hljs-deletion {
   display: block;
-  margin-right: calc(-1 * var(--spacing-4));
-  margin-left: calc(-1 * var(--spacing-4));
-  padding-right: var(--spacing-4);
-  padding-left: var(--spacing-4);
+  margin-inline: calc(-1 * var(--spacing-4));
+  padding-inline: var(--spacing-4);
   color: var(--color-code-text);
   text-decoration: none;
 }
@@ -590,8 +604,8 @@ pre code {
   display: block;
   width: auto;
   height: auto;
-  top: var(--spacing-2);
-  left: var(--spacing-2);
+  inset-block-start: var(--spacing-2);
+  inset-inline-start: var(--spacing-2);
   padding: var(--spacing-4);
   clip-path: none;
   background-color: var(--color-base-3);
@@ -719,7 +733,7 @@ pre code {
 .bio-avatar {
   display: inline-block;
   min-width: 55px;
-  margin-right: var(--spacing-4);
+  margin-inline-end: var(--spacing-4);
   margin-bottom: var(--spacing-0);
   border: 3px solid var(--color-base-3);
   border-radius: 50%;
@@ -771,7 +785,7 @@ pre code {
 
 .post-categories a {
   display: inline-block;
-  margin-right: var(--spacing-2);
+  margin-inline-end: var(--spacing-2);
 }
 
 /* The categories are already small; inside the meta line they would be small
@@ -1071,7 +1085,7 @@ pre code {
 }
 
 .comment-list .children {
-  margin-left: var(--spacing-8);
+  margin-inline-start: var(--spacing-8);
 }
 
 .comment-body {
@@ -1225,6 +1239,19 @@ pre code {
   border-inline-start-color: var(--color-error);
 }
 
+/* A refused form's summary: what went wrong as its heading, then a link to
+   each field to put right. */
+.comment-error h3,
+.contact-error h3 {
+  margin: 0;
+  font-size: var(--fontSize-1);
+}
+
+.comment-error ul,
+.contact-error ul {
+  margin: var(--spacing-1) 0 0;
+}
+
 .comment-replying-to,
 .comment-signed-in {
   margin: 0 0 var(--spacing-4);
@@ -1251,6 +1278,40 @@ pre code {
   color: var(--color-error);
 }
 
+/* Target size. A link that stands on its own rather than inside a sentence,
+   and every button, is at least 24 by 24 CSS pixels, the WCAG 2.2 AA minimum
+   for something a finger or an unsteady pointer has to hit. A link inside a
+   sentence is exempt and keeps the line it sits on. `inline-flex` grows the
+   box without moving the text off the baseline it shares with its line. */
+
+.site-nav a,
+.post-categories a,
+.blog-post-nav a,
+.pagination a,
+.comment-metadata a,
+.reply a,
+.comment-error a,
+.contact-error a {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 24px;
+  min-inline-size: 24px;
+}
+
+.search-form button,
+.comment-respond .form-submit button,
+.comment-respond .form-submit input[type='submit'] {
+  min-block-size: 24px;
+  min-inline-size: 24px;
+}
+
+.comment-respond input[type='checkbox'] {
+  inline-size: 24px;
+  block-size: 24px;
+  margin: 0;
+  vertical-align: middle;
+}
+
 /*
   The honeypot. Taken out of the flow rather than `display: none`, because some
   form fillers skip fields a browser would not paint at all and this one is
@@ -1259,7 +1320,7 @@ pre code {
 .comment-trap,
 .contact-trap {
   position: absolute;
-  left: -10000px;
+  inset-inline-start: -10000px;
   width: 1px;
   height: 1px;
   overflow: hidden;
@@ -1273,13 +1334,13 @@ pre code {
   }
 
   .bio-avatar {
-    margin-right: var(--spacing-0);
+    margin-inline-end: var(--spacing-0);
     margin-bottom: var(--spacing-4);
   }
 
   blockquote {
-    margin-left: var(--spacing-0);
-    padding: var(--spacing-0) var(--spacing-0) var(--spacing-0) var(--spacing-4);
+    margin-inline-start: var(--spacing-0);
+    padding-inline-start: var(--spacing-4);
   }
 
   ul,
@@ -1288,6 +1349,30 @@ pre code {
   }
 
   .comment-list .children {
-    margin-left: var(--spacing-4);
+    margin-inline-start: var(--spacing-4);
+  }
+}
+
+/* Forced colours: Windows High Contrast and the like, where the reader's own
+   palette replaces every colour here. Borders and outlines survive that and
+   backgrounds do not, so anything drawn by a background alone takes a border
+   in a system colour: the buttons, which are otherwise a block of the primary
+   colour, the rule, which is a 1px background, and a block of code. Focus
+   needs nothing: every ring here is an outline, which the forced palette
+   redraws in its own colour. */
+
+@media (forced-colors: active) {
+  .search-form button,
+  .comment-respond .form-submit button,
+  .comment-respond .form-submit input[type='submit'] {
+    border: 1px solid ButtonText;
+  }
+
+  hr {
+    border-block-start: 1px solid CanvasText;
+  }
+
+  pre {
+    border: 1px solid CanvasText;
   }
 }