From e8364ee6fb1449222cfbe8ff98ead2a0e4bae1bd Mon Sep 17 00:00:00 2001 From: Victoria Drake Date: Sun, 1 Mar 2020 13:59:15 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=A6=20Accessibility=20improvements?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add content sectioning and aria roles to HTML - Adjust confusing CSS class names --- .github/workflows/build-to-docs.yml | 44 ++++++++++++++++ assets/sass/_elements.sass | 10 ++-- assets/sass/style.sass | 15 +++--- exampleSite/content/about.md | 6 +-- exampleSite/content/posts/image-post.md | 4 +- ...s_ed49e085717c1c90f2122c5f5731b8cc.content | 2 +- ...sass_ed49e085717c1c90f2122c5f5731b8cc.json | 2 +- layouts/_default/baseof.html | 28 +++++++--- layouts/_default/list.html | 8 +-- layouts/gallery/list.html | 4 +- layouts/index.html | 51 +++++++++---------- layouts/partials/bottom_menu.html | 2 +- layouts/partials/head/css.html | 6 +-- layouts/partials/head/metadata.html | 8 +-- layouts/posts/single.html | 38 +++++++------- 15 files changed, 147 insertions(+), 81 deletions(-) create mode 100644 .github/workflows/build-to-docs.yml diff --git a/.github/workflows/build-to-docs.yml b/.github/workflows/build-to-docs.yml new file mode 100644 index 00000000..4befe78b --- /dev/null +++ b/.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 + \ No newline at end of file diff --git a/assets/sass/_elements.sass b/assets/sass/_elements.sass index 9e5497d5..a8fff087 100755 --- a/assets/sass/_elements.sass +++ b/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)) diff --git a/assets/sass/style.sass b/assets/sass/style.sass index 74a8477c..525656cc 100755 --- a/assets/sass/style.sass +++ b/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 diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md index 5849900d..a304b29c 100755 --- a/exampleSite/content/about.md +++ b/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. \ No newline at end of file +This page uses the default `baseof.html` template. diff --git a/exampleSite/content/posts/image-post.md b/exampleSite/content/posts/image-post.md index 5b1cba2b..873c227a 100755 --- a/exampleSite/content/posts/image-post.md +++ b/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 -``` \ No newline at end of file +``` diff --git a/exampleSite/resources/_gen/assets/sass/sass/style.sass_ed49e085717c1c90f2122c5f5731b8cc.content b/exampleSite/resources/_gen/assets/sass/sass/style.sass_ed49e085717c1c90f2122c5f5731b8cc.content index 2d91dd97..14d168da 100644 --- a/exampleSite/resources/_gen/assets/sass/sass/style.sass_ed49e085717c1c90f2122c5f5731b8cc.content +++ b/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} \ No newline at end of file +*{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} \ No newline at end of file diff --git a/exampleSite/resources/_gen/assets/sass/sass/style.sass_ed49e085717c1c90f2122c5f5731b8cc.json b/exampleSite/resources/_gen/assets/sass/sass/style.sass_ed49e085717c1c90f2122c5f5731b8cc.json index 6ad195a5..17db9c49 100644 --- a/exampleSite/resources/_gen/assets/sass/sass/style.sass_ed49e085717c1c90f2122c5f5731b8cc.json +++ b/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="}} \ No newline at end of file +{"Target":"css/main.min.4321edce0de245f4b1d32680d89ac669940fe5dec17e1791c721d9a0954987b4.css","MediaType":"text/css","Data":{"Integrity":"sha256-QyHtzg3iRfSx0yaA2JrGaZQP5d7BfheRxyHZoJVJh7Q="}} \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 42ac9d1b..1c2313f9 100755 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -17,17 +17,29 @@ - {{ block "main" . }}
- {{ block "section_title" . }}
{{ .Title }}
{{ end }} - - {{ block "section_content" . }}
{{ .Content }}
{{ end }} + {{ block "main" . }} + {{ block "section_title" . }} +
+

{{ .Title }}

+
+ {{ end }} +
+ {{ block "section_content" . }} +
{{ .Content }}
+ {{ end }} {{ block "bottom-menu" . }} - {{ if .Site.Params.mainMenu }}
{{ partial "bottom_menu.html" (dict "Page" . "show_back_menu_item" false) }}
{{ end }} + {{ if .Site.Params.mainMenu }} + {{ end }} - - {{ block "footer" . }}
{{ partial "footer.html" . }}
{{ end }} -
{{ end }} + {{ end }} + + {{ block "footer" . }} + + {{ end }} + {{ end }} \ No newline at end of file diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 6f336703..1dc3f784 100755 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,13 +1,13 @@ {{ define "section_content" }} -
+
{{ .Content }} +
+
+ {{ end }} \ No newline at end of file diff --git a/layouts/gallery/list.html b/layouts/gallery/list.html index 6779b203..ad7a64bc 100755 --- a/layouts/gallery/list.html +++ b/layouts/gallery/list.html @@ -1,7 +1,7 @@ {{ define "section_content" }} -
+
{{ .Content }} -
+ {{ if .Params.clickablePhotos }}
diff --git a/layouts/index.html b/layouts/index.html index 3649c2ff..9cad30d7 100755 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,31 +1,30 @@ - - {{ partial "head.html" . }} - {{ .Title }} - - -
- {{ if .Site.Params.mainMenu }} - {{ range .Site.Params.mainMenu }} -
- - {{.text}} - -
- {{ end }} + + {{ partial "head.html" . }} + {{ .Title }} + + + + + - {{ else }} - {{ range .Site.Sections }} -
- - {{.Title}} - -
- {{ end }} - {{ end }} - -
- \ No newline at end of file diff --git a/layouts/partials/bottom_menu.html b/layouts/partials/bottom_menu.html index 34cc98e6..4aaf93c5 100755 --- a/layouts/partials/bottom_menu.html +++ b/layouts/partials/bottom_menu.html @@ -22,7 +22,7 @@ {{ end }} {{ end }} · - + {{ .Page.Site.Params.homepage }} {{ end }} diff --git a/layouts/partials/head/css.html b/layouts/partials/head/css.html index a331c5bd..7ebfa424 100644 --- a/layouts/partials/head/css.html +++ b/layouts/partials/head/css.html @@ -13,6 +13,6 @@ {{ range .Site.Params.customCSS -}} - {{ $style := resources.Get . }} - -{{- end }} \ No newline at end of file +{{ $style := resources.Get . }} + +{{- end }} \ No newline at end of file diff --git a/layouts/partials/head/metadata.html b/layouts/partials/head/metadata.html index ab1aded0..b41da485 100644 --- a/layouts/partials/head/metadata.html +++ b/layouts/partials/head/metadata.html @@ -4,9 +4,11 @@ -{{ if .Site.Params.description }}{{ end }} +{{ if .Site.Params.description }} +{{ end }} -{{ .Title }}{{ if ne .Title .Site.Title }} - {{ .Site.Title }}{{ end }} + {{ .Title }}{{ if ne .Title .Site.Title }} - {{ .Site.Title }}{{ end }} -{{ with .OutputFormats.Get "RSS" }}{{ end }} +{{ with .OutputFormats.Get "RSS" }} +{{ end }} \ No newline at end of file diff --git a/layouts/posts/single.html b/layouts/posts/single.html index ca06abbd..5b6074b0 100755 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -1,24 +1,28 @@ {{ define "section_content" }} -
- {{ .Date.Format (.Site.Params.dateForm | default "Mon Jan 02, 2006") }} · {{ .WordCount }} words -
- {{ range $term := .Params.tags }} - {{ with $.Site.GetPage (printf "/%s/%s" "tags" $term | urlize) }} - - - {{ $term }} - - - {{ end }} - {{ end }} -
-
- {{ .Content }} +
+ +
+
+ {{ .Content }} +
{{ end }} {{ define "bottom-menu" }} -
+
+ {{ end }} \ No newline at end of file