📦 Accessibility improvements

- Add content sectioning and aria roles to HTML
- Adjust confusing CSS class names

Author: victoriadrake

.github/workflows/build-to-docs.yml

@@ -0,0 +1,44 @@
+name: Build exampleSite to docs/ with hugo-latest-cd
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🛎 Check out master
+        uses: actions/checkout@master
+        with:
+          fetch-depth: 1
+      - name: 🔧 Install tools
+        run: sudo apt install curl jq
+      - name: 🤵 Install Hugo
+        run: |
+          HUGO_VERSION=$(curl -s https://api.github.com/repos/gohugoio/hugo/releases/latest | jq -r '.tag_name')
+          mkdir tmp/ && cd tmp/
+          curl -sSL https://github.com/gohugoio/hugo/releases/download/${HUGO_VERSION}/hugo_extended_${HUGO_VERSION: -6}_Linux-64bit.tar.gz | tar -xvzf-
+          sudo mv hugo /usr/local/bin/
+          cd .. && rm -rf tmp/
+          hugo version
+      - name: 🧹 Clean site
+        run: |
+          if [ -d "docs" ]; then
+            rm -rf docs/*
+          fi
+      - name: 🍳 Build site
+        run: |
+          cd exampleSite
+          HUGO_THEME="hugo-theme-sam" hugo --themesDir ../.. -v -d ../docs/
+      - name: 🚀 Deploy build
+        run: |
+          git config user.name "${GITHUB_ACTOR}"
+          git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
+          git add .
+          git commit -am "🚀 Deploy with ${GITHUB_WORKFLOW}"
+          git push --all -f https://${{ secrets.GITHUB_TOKEN }}@github.com/${GITHUB_REPOSITORY}.git
+          

assets/sass/_elements.sass

@@ -20,8 +20,8 @@
     line-height: 3rem
     margin-bottom: 2rem
 
-#content
-    margin: 2rem 0
+article
+    width: 100%
     line-height: 2em
     letter-spacing: 2px
     div
@@ -32,8 +32,9 @@
         margin: 1em 0em
         text-align: left
     & p
+        display: block
         margin-bottom: 1em
-        line-height: 1.8
+        line-height: 1.6
         letter-spacing: 1.5px
         opacity: 0.8
     & .highlight
@@ -95,7 +96,7 @@
         list-style: decimal outside
         padding-left: 2rem
     & .gist
-        width: 100%
+        max-width: 100%
         td, th
             text-align: left
             border: 0
@@ -111,6 +112,7 @@
     opacity: 0.6
 
 .grid
+    margin: 1em auto
     display: grid
     grid-gap: 20px
     grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))

assets/sass/style.sass

@@ -24,10 +24,12 @@ body
     justify-content: space-between
     align-items: center
     opacity: 1
+    padding: 6em 1em
+    @media screen and (max-width: 736px)
+        padding: 3em 1em
 
 h1,h2,h3
     margin-bottom: 0.5em
-    text-align: center
     font-family: 'Didact Gothic', sans-serif
     opacity: 0.6
 
@@ -66,12 +68,14 @@ hr
     +skinny-hr
     opacity: 0.3
 
+nav
+    margin: 1em auto
+
 .wrap
     margin: 0 auto
-    margin-top: 6rem
     width: 45%
+    max-width: 64em
     @media screen and (max-width: 736px)
-        padding: 1rem
         width: 100%
 
 .tag-container
@@ -85,7 +89,7 @@ hr
     position: relative
     bottom: 0
 
-.section
+.flex-container
     display: flex
     flex-direction: column
     justify-content: center
@@ -96,7 +100,6 @@ hr
     flex-direction: column
     justify-content: center
     align-items: center
-    padding-top: 3rem
     text-align: center
 
 .footer
@@ -108,7 +111,7 @@ hr
     background-color: transparent
     position: relative
     bottom: 0
-    padding: 3rem 1rem
+    padding: 1rem
     font-family: $font
     font-size: 1rem
     line-height: 1em

exampleSite/content/about.md

@@ -3,12 +3,12 @@ title: "About"
 date: 2018-02-13T13:42:49-05:00
 ---
 
-Hello, I'm Sam. I'm a theme for [Hugo](https://gohugo.io/). I'm an extremely customizable, content-focused theme that lets you showcase your work your way.
+Hello, I'm Sam. I'm a theme for [Hugo](https://gohugo.io/). I'm an extremely customizable, content-focused theme that lets you showcase your work your way. I'm [open source on GitHub](https://github.com/victoriadrake/hugo-theme-sam/).
 
 I have slick minimalist templates for list pages (such as a list of blog posts) and single pages (a page to read one blog post). You can use tags on your content, and view content by tags.
 
 I also have a simple responsive gallery built with CSS grid. It'll look great on any screen, and all you have to do is provide a folder of images.
 
-I'm built and maintained by [Victoria Drake](https://victoria.dev). Here's her [GitHub](https://github.com/victoriadrake).
+I'm built and maintained by [Victoria Drake](https://victoria.dev) and a lovely team of [contributors](https://github.com/victoriadrake/hugo-theme-sam/graphs/contributors).
 
-This page uses the default `single.html` template.
+This page uses the default `baseof.html` template.

exampleSite/content/posts/image-post.md

@@ -11,9 +11,9 @@ Hello! I'm a blog post with an image. Thanks to Open Graph and Twitter metadata,
 
 ![Ideas](/posts/ideas.png)
 
-To make this happen, set the `images` parameter in your post's [front-matter](https://gohugo.io/content-management/front-matter/), like this:
+To make this happen, set the `images` parameter in your post's [front-matter](https://gohugo.io/content-management/front-matter/), like this YAML example:
 
 ```yaml
 images:
     - /posts/ideas.png
-```
+```

exampleSite/resources/_gen/assets/sass/sass/style.sass_ed49e085717c1c90f2122c5f5731b8cc.content

@@ -1 +1 @@
-*{margin:0;padding:0;box-sizing:border-box}html{background-color:#39424e;font-family:didact gothic,sans serif;font-size:16px}body{font-size:16px;font-family:didact gothic,sans serif;color:#fff;line-height:2rem;letter-spacing:1.5px;text-shadow:none;display:flex;flex-direction:column;justify-content:space-between;align-items:center;opacity:1}h1,h2,h3{margin-bottom:.5em;text-align:center;font-family:didact gothic,sans-serif;opacity:.6}li{opacity:.8}li a{opacity:.9}ul{list-style-type:none}p{display:inline;opacity:.8}a{color:#ccc;text-decoration:none;border-bottom:2px solid #ccc;transition:.5s ease}a:hover{color:#fff;font-style:none}a:active{color:#ccc}button{padding:20px;border:0;border-radius:5px;background:#fff}button:hover{box-shadow:5px 5px #111}hr{margin:1rem 0;background-color:transparent;width:50%;border-style:solid;border-width:1px;opacity:.3}.wrap{margin:0 auto;margin-top:6rem;width:45%}@media screen and (max-width:736px){.wrap{padding:1rem;width:100%}}.tag-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.tag{background-color:transparent;position:relative;bottom:0}.section{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.bottom-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:3rem;text-align:center}.footer{width:100%;display:flex;justify-content:center;align-items:center;text-align:center;background-color:transparent;position:relative;bottom:0;padding:3rem 1rem;font-family:didact gothic,sans serif;font-size:1rem;line-height:1em;opacity:.8}.footer a{border-bottom:none;display:contents}#splash{margin:auto 0;height:100vh;width:45%;overflow:hidden}@media screen and (max-width:736px){#splash{width:90%}}.big-link{font-family:didact gothic,sans serif;font-size:3rem;font-weight:300;margin-bottom:2rem;line-height:1.5em}#title{margin-top:3rem;font-family:didact gothic,sans serif;font-size:2rem;line-height:3rem;margin-bottom:2rem}#content{margin:2rem 0;line-height:2em;letter-spacing:2px}#content div{width:100%;height:100%;margin-bottom:1em}#content h1,#content h2,#content h3{margin:1em 0;text-align:left}#content p{margin-bottom:1em;line-height:1.8;letter-spacing:1.5px;opacity:.8}#content .highlight{width:100%}#content pre{line-height:2rem;border-radius:3px;padding:1rem;overflow-x:auto;background-color:#000004;width:100%;margin-bottom:1em}#content pre>code{border:none}#content code{font-size:.9rem;font-family:source code pro,monospace;padding:.1rem;border-radius:3px;border:1px solid #ccc}#content img{width:100%;max-width:100%;display:block;margin:2rem auto;opacity:1}#content blockquote{background-color:#ccc;color:#39424e;padding:2rem;margin:2rem 1rem;border-radius:3px}#content blockquote a{color:#111}#content blockquote ul{margin-top:1rem}#content blockquote li{list-style:disc}#content table{width:100%;border-collapse:collapse;margin:1rem 0;overflow-x:auto}#content table th{font-size:.9rem}#content table td,#content table th{padding:2px 5px;text-align:center;border:1px solid #ccc}#content li{line-height:2;padding-left:.4rem}#content li:last-child{margin-bottom:1rem}#content ul{list-style:disc outside;padding-left:2rem}#content ol{list-style:decimal outside;padding-left:2rem}#content .gist{width:100%}#content .gist td,#content .gist th{text-align:left;border:0}#content .gist .gist-meta{background-color:transparent;color:#fff}#content .gist .gist-meta a{color:#fff}.tag{padding:.25em 0;margin-right:.5em;opacity:.6}.grid{display:grid;grid-gap:20px;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));grid-auto-rows:400px}@media screen and (max-width:736px){.grid{grid-template-columns:repeat(auto-fit,minmax(100%,1fr))}}.grid>div{background-color:transparent;overflow:hidden}.grid>div>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;opacity:1}.grid>div>a>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;opacity:1}.go-left{justify-content:flex-start;align-items:flex-start}.go-right{justify-content:flex-end;align-items:flex-end}.go-center{justify-content:center;align-items:center}
+*{margin:0;padding:0;box-sizing:border-box}html{background-color:#39424e;font-family:didact gothic,sans serif;font-size:16px}body{font-size:16px;font-family:didact gothic,sans serif;color:#fff;line-height:2rem;letter-spacing:1.5px;text-shadow:none;display:flex;flex-direction:column;justify-content:space-between;align-items:center;opacity:1;padding:6em 1em}@media screen and (max-width:736px){body{padding:3em 1em}}h1,h2,h3{margin-bottom:.5em;font-family:didact gothic,sans-serif;opacity:.6}li{opacity:.8}li a{opacity:.9}ul{list-style-type:none}p{display:inline;opacity:.8}a{color:#ccc;text-decoration:none;border-bottom:2px solid #ccc;transition:.5s ease}a:hover{color:#fff;font-style:none}a:active{color:#ccc}button{padding:20px;border:0;border-radius:5px;background:#fff}button:hover{box-shadow:5px 5px #111}hr{margin:1rem 0;background-color:transparent;width:50%;border-style:solid;border-width:1px;opacity:.3}nav{margin:1em auto}.wrap{margin:0 auto;width:45%;max-width:64em}@media screen and (max-width:736px){.wrap{width:100%}}.tag-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.tag{background-color:transparent;position:relative;bottom:0}.flex-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.bottom-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.footer{width:100%;display:flex;justify-content:center;align-items:center;text-align:center;background-color:transparent;position:relative;bottom:0;padding:1rem;font-family:didact gothic,sans serif;font-size:1rem;line-height:1em;opacity:.8}.footer a{border-bottom:none;display:contents}#splash{margin:auto 0;height:100vh;width:45%;overflow:hidden}@media screen and (max-width:736px){#splash{width:90%}}.big-link{font-family:didact gothic,sans serif;font-size:3rem;font-weight:300;margin-bottom:2rem;line-height:1.5em}#title{margin-top:3rem;font-family:didact gothic,sans serif;font-size:2rem;line-height:3rem;margin-bottom:2rem}article{width:100%;line-height:2em;letter-spacing:2px}article div{width:100%;height:100%;margin-bottom:1em}article h1,article h2,article h3{margin:1em 0;text-align:left}article p{display:block;margin-bottom:1em;line-height:1.6;letter-spacing:1.5px;opacity:.8}article .highlight{width:100%}article pre{line-height:2rem;border-radius:3px;padding:1rem;overflow-x:auto;background-color:#000004;width:100%;margin-bottom:1em}article pre>code{border:none}article code{font-size:.9rem;font-family:source code pro,monospace;padding:.1rem;border-radius:3px;border:1px solid #ccc}article img{width:100%;max-width:100%;display:block;margin:2rem auto;opacity:1}article blockquote{background-color:#ccc;color:#39424e;padding:2rem;margin:2rem 1rem;border-radius:3px}article blockquote a{color:#111}article blockquote ul{margin-top:1rem}article blockquote li{list-style:disc}article table{width:100%;border-collapse:collapse;margin:1rem 0;overflow-x:auto}article table th{font-size:.9rem}article table td,article table th{padding:2px 5px;text-align:center;border:1px solid #ccc}article li{line-height:2;padding-left:.4rem}article li:last-child{margin-bottom:1rem}article ul{list-style:disc outside;padding-left:2rem}article ol{list-style:decimal outside;padding-left:2rem}article .gist{max-width:100%}article .gist td,article .gist th{text-align:left;border:0}article .gist .gist-meta{background-color:transparent;color:#fff}article .gist .gist-meta a{color:#fff}.tag{padding:.25em 0;margin-right:.5em;opacity:.6}.grid{margin:1em auto;display:grid;grid-gap:20px;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));grid-auto-rows:400px}@media screen and (max-width:736px){.grid{grid-template-columns:repeat(auto-fit,minmax(100%,1fr))}}.grid>div{background-color:transparent;overflow:hidden}.grid>div>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;opacity:1}.grid>div>a>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;opacity:1}.go-left{justify-content:flex-start;align-items:flex-start}.go-right{justify-content:flex-end;align-items:flex-end}.go-center{justify-content:center;align-items:center}

exampleSite/resources/_gen/assets/sass/sass/style.sass_ed49e085717c1c90f2122c5f5731b8cc.json

@@ -1 +1 @@
-{"Target":"css/main.min.81bbafc4df93b11c1c3e2449464373c384aa4903731b4fc7a77dfcdd979e184f.css","MediaType":"text/css","Data":{"Integrity":"sha256-gbuvxN+TsRwcPiRJRkNzw4SqSQNzG0/Hp3383ZeeGE8="}}
+{"Target":"css/main.min.4321edce0de245f4b1d32680d89ac669940fe5dec17e1791c721d9a0954987b4.css","MediaType":"text/css","Data":{"Integrity":"sha256-QyHtzg3iRfSx0yaA2JrGaZQP5d7BfheRxyHZoJVJh7Q="}}

layouts/_default/baseof.html

@@ -17,17 +17,29 @@
 </head>
 
 <body>
-    {{ block "main" . }}<div class="wrap">
-        {{ block "section_title" . }}<div class="section" id="title">{{ .Title }}</div>{{ end }}
-
-        {{ block "section_content" . }}<div class="section" id="content">{{ .Content }}</div>{{ end }}
+    {{ block "main" . }}
+    {{ block "section_title" . }}
+    <header class="wrap flex-container">
+        <h1>{{ .Title }}</h1>
+    </header>
+    {{ end }}
+    <main class="wrap">
+        {{ block "section_content" . }}
+        <article role="article" class="flex-container">{{ .Content }}</article>
+        {{ end }}
 
         {{ block "bottom-menu" . }}
-        {{ if .Site.Params.mainMenu }}<div class="section bottom-menu">{{ partial "bottom_menu.html" (dict "Page" . "show_back_menu_item" false) }}</div>{{ end }}
+        {{ if .Site.Params.mainMenu }}
+        <nav role="navigation" class="flex-container bottom-menu">
+            {{ partial "bottom_menu.html" (dict "Page" . "show_back_menu_item" false) }}
+        </nav>
         {{ end }}
-
-        {{ block "footer" . }}<div class="section footer">{{ partial "footer.html" . }}</div>{{ end }}
-    </div>{{ end }}
+        {{ end }}
+    </main>
+    {{ block "footer" . }}
+    <footer class="flex-container footer">{{ partial "footer.html" . }}</footer>
+    {{ end }}
+    {{ end }}
 </body>
 
 </html>

layouts/_default/list.html

@@ -1,19 +1,19 @@
 {{ define "section_content" }}
-<div class="section" id="content">
+<article class="flex-container">
     {{ .Content }}
+</article>
+<nav role="navigation">
     <ul>
         {{ range .Data.Pages }}
         <li>
             {{ if .Params.showDate }}
-
             {{ .Date.Format (.Site.Params.dateForm | default "Mon Jan 02, 2006")}} --
-
             {{ end }}
             <a href="{{.RelPermalink}}">
                 {{.Title}}
             </a>
         </li>
         {{ end }}
     </ul>
-</div>
+</nav>
 {{ end }}

layouts/gallery/list.html

@@ -1,7 +1,7 @@
 {{ define "section_content" }}
-<div class="section" id="content">
+<article role="article" class="flex-container">
     {{ .Content }}
-</div>
+</article>
 
 {{ if .Params.clickablePhotos }}
     <div class="grid">