use better class names

layouts/_default/single.html

@@ -2,18 +2,20 @@
 {{ define "main" }}
   <div class="flex-l mt2 mw8 center">
     <article class="center cf pv5 ph3 ph4-ns mw7">
-      <p class="f6 b helvetica tracked">
-        {{ humanize .Section | upper  }}
-      </p>
-      <h1 class="f1">
-        {{ .Title }}
-      </h1>
-      <section class="nested-copy-line-height lh-copy f4 nested-links nested-img mid-gray">
+      <header>
+        <p class="f6 b helvetica tracked">
+          {{ humanize .Section | upper  }}
+        </p>
+        <h1 class="f1">
+          {{ .Title }}
+        </h1>
+      </header>
+      <div class="nested-copy-line-height lh-copy f4 nested-links nested-img mid-gray">
         {{ .Content }}
-      </section>
+      </div>
     </article>
-    <div class="ph3 mt2 mt6-ns">
+    <aside class="ph3 mt2 mt6-ns">
       {{ partial "menu-contextual.html" . }}
-    </div>
+    </aside>
   </div>
 {{ end }}

layouts/_default/taxonomy.html

@@ -1,7 +1,6 @@
 {{ define "main" }}
   <article class="cf pa3 pa4-m pa4-l">
     <div class="measure-wide-l center f4 lh-copy nested-copy-line-height nested-links nested-img mid-gray">
-
       <p>Below you will find pages that utilize the taxonomy term “{{ .Title }}”</p>
     </div>
   </article>

layouts/index.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
-  <main class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray">
+  <article class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray">
     {{ .Content }}
-  </main>
+  </article>
   {{/* Define a section to pull recent posts from. For Hugo 0.20 this will default to the section with the most number of pages. */}}
   {{ $mainSections := .Site.Params.mainSections | default (slice "post") }}
   {{/* Create a variable with that section to use in multiple places. */}}

layouts/partials/menu-contextual.html

@@ -6,7 +6,7 @@
 {{ $i := sub ($currentSection | len) 1 }}
 {{/* So we can only show this menu if there are one or more other entries  */}}
 {{ if ge $i 1 }}
-  <aside class="bg-light-gray pa3">
+  <div class="bg-light-gray pa3">
     <ul>
       <li class="list b mb3">{{/* Return the section name, make it readable (humanize) and if there are 2 or more entries, make the section name plural (pluralize).  */}}
         {{ $i }} More {{ if ge $i 2 }}{{ .Section | humanize | pluralize }}{{ else }}{{ .Section | humanize }}{{end}}
@@ -20,5 +20,5 @@
         </li>
       {{ end }}
     </ul>
-  </aside>
+  </div>
 {{ end }}

layouts/shortcodes/form-contact.html

@@ -1,7 +1,7 @@
 {{ $.Scratch.Add "labelClasses" "f6 b db mb1 mt3 sans-serif mid-gray" }}
 {{ $.Scratch.Add "inputClasses" "w-100 f5 pv3 ph3 bg-light-gray bn" }}
 
-<form class="black-80 sans-serif" accept-charset="UTF-8" action="{{ .Get "action" }}" method="POST">
+<form class="black-80 sans-serif" accept-charset="UTF-8" action="{{ .Get "action" }}" method="POST" role="form">
 
     <label class="{{ $.Scratch.Get "labelClasses" }}"  for="name">Your Name</label>
     <input type="text" id="name" name="name" class="{{ $.Scratch.Get "inputClasses" }}"  required placeholder=" "  aria-labelledby="name"/>