Skip to content

Commit

Permalink
📦 Accessibility improvements
Browse files Browse the repository at this point in the history
- Add content sectioning and aria roles to HTML
- Adjust confusing CSS class names
  • Loading branch information
victoriadrake committed Mar 1, 2020
1 parent b0b93c6 commit e8364ee
Show file tree
Hide file tree
Showing 15 changed files with 147 additions and 81 deletions.
44 changes: 44 additions & 0 deletions .github/workflows/build-to-docs.yml
Original file line number Diff line number Diff line change
@@ -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
10 changes: 6 additions & 4 deletions assets/sass/_elements.sass
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
line-height: 3rem
margin-bottom: 2rem

#content
margin: 2rem 0
article
width: 100%
line-height: 2em
letter-spacing: 2px
div
Expand All @@ -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
Expand Down Expand Up @@ -95,7 +96,7 @@
list-style: decimal outside
padding-left: 2rem
& .gist
width: 100%
max-width: 100%
td, th
text-align: left
border: 0
Expand All @@ -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))
Expand Down
15 changes: 9 additions & 6 deletions assets/sass/style.sass
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand All @@ -85,7 +89,7 @@ hr
position: relative
bottom: 0

.section
.flex-container
display: flex
flex-direction: column
justify-content: center
Expand All @@ -96,7 +100,6 @@ hr
flex-direction: column
justify-content: center
align-items: center
padding-top: 3rem
text-align: center

.footer
Expand All @@ -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
Expand Down
6 changes: 3 additions & 3 deletions exampleSite/content/about.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
4 changes: 2 additions & 2 deletions exampleSite/content/posts/image-post.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
```
```
Original file line number Diff line number Diff line change
@@ -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}
Original file line number Diff line number Diff line change
@@ -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="}}
28 changes: 20 additions & 8 deletions layouts/_default/baseof.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
8 changes: 4 additions & 4 deletions layouts/_default/list.html
Original file line number Diff line number Diff line change
@@ -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 }}
4 changes: 2 additions & 2 deletions layouts/gallery/list.html
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
51 changes: 25 additions & 26 deletions layouts/index.html
Original file line number Diff line number Diff line change
@@ -1,31 +1,30 @@
<!DOCTYPE html>
<html>
<head>
{{ partial "head.html" . }}
<title>{{ .Title }}</title>
</head>
<body>
<div class="section" id="splash">

{{ if .Site.Params.mainMenu }}
{{ range .Site.Params.mainMenu }}
<div class="big-link">
<a href="{{.link}}">
{{.text}}
</a>
</div>
{{ end }}
<head>
{{ partial "head.html" . }}
<title>{{ .Title }}</title>
</head>

<body>
<nav role="navigation" class="flex-container" id="splash">

{{ if .Site.Params.mainMenu }}
{{ range .Site.Params.mainMenu }}
<a href="{{.link}}" class="big-link">
{{.text}}
</a>
{{ end }}

{{ else }}
{{ range .Site.Sections }}
<a href="{{.RelPermalink}}" class="big-link">
{{.Title}}
</a>
{{ end }}
{{ end }}

</nav>
</body>

{{ else }}
{{ range .Site.Sections }}
<div class="big-link">
<a href="{{.RelPermalink}}">
{{.Title}}
</a>
</div>
{{ end }}
{{ end }}

</div>
</body>
</html>
2 changes: 1 addition & 1 deletion layouts/partials/bottom_menu.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
{{ end }}
{{ end }}
&#183;
<a href="{{.Page.Site.BaseURL}}">
<a href="{{ .Site.Home | relURL }}">
{{ .Page.Site.Params.homepage }}
</a>
{{ end }}
Expand Down
6 changes: 3 additions & 3 deletions layouts/partials/head/css.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,6 @@

<!-- Custom css -->
{{ range .Site.Params.customCSS -}}
{{ $style := resources.Get . }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}" crossorigin="anonymous" media="screen">
{{- end }}
{{ $style := resources.Get . }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}" crossorigin="anonymous" media="screen">
{{- end }}
8 changes: 5 additions & 3 deletions layouts/partials/head/metadata.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer">
{{ if .Site.Params.description }}<meta name="description" content="{{ .Site.Params.description }}">{{ end }}
{{ if .Site.Params.description }}
<meta name="description" content="{{ .Site.Params.description }}">{{ end }}
<title>
{{ .Title }}{{ if ne .Title .Site.Title }} - {{ .Site.Title }}{{ end }}
{{ .Title }}{{ if ne .Title .Site.Title }} - {{ .Site.Title }}{{ end }}
</title>
<!-- RSS -->
{{ with .OutputFormats.Get "RSS" }}<link href="{{ .RelPermalink }}" rel="alternate" type="application/rss+xml" title="{{ $.Site.Title }}" />{{ end }}
{{ with .OutputFormats.Get "RSS" }}
<link href="{{ .RelPermalink }}" rel="alternate" type="application/rss+xml" title="{{ $.Site.Title }}" />{{ end }}
Loading

0 comments on commit e8364ee

Please sign in to comment.