Improve heading structure

_includes/author.html

@@ -1,14 +1,15 @@
 {% assign author = include.author %}
+
+{% include blog_super_title.html %}
+
 <div class="author grid-x grid-margin">
     <div class="cell large-2 avatar grid-x grid-margin-y">
+
         <div class="cell large-offset-3">
             {% include author_picture.html %}
         </div>
         {% if author.author-summary %}
-            <div class="author-name cell large-offset-3">
-                <div class="blog">Blog</div>
-                <h2>{{ author.name }}</h2>
-            </div>
+            <h1 class="author-name cell large-offset-3">{{ author.name }}</h1>
         {% endif %}
     </div>
 
@@ -18,7 +19,6 @@ <h2>{{ author.name }}</h2>
     </div>
     {% else %}
     <div class="author-name cell large-6">
-        <h2 class="blog">Blog</h2>
         <h1>{{ author.name }}</h1>
     </div>
     {% endif %}

_includes/author_list.html

@@ -1,6 +1,6 @@
 {% assign currentAuthorName = include.currentAuthorName %}
 <div class="author-list cell">
-    <h4>Authors</h4>
+    <h2 class="side-lists__heading">Authors</h2>
     <ul>
         {% comment %}
             Create an array of maps to make the full name of authors the top level property.

_includes/blog_super_title.html

@@ -0,0 +1,2 @@
+<p class="super-title"><a href="{{ site.baseurl }}/index.html">Blog</a></p>
+

_includes/category_list.html

@@ -1,6 +1,6 @@
 {% assign selectedIndex = include.selectedIndex %}
 <div class="category-list cell">
-    <h4>Categories</h4>
+    <h2 class="side-lists__heading">Categories</h2>
     <ul>
         {% for category in site.data.categories %}
             <li>

_includes/post_index.html

@@ -12,13 +12,14 @@
 {% endif %}
 <div class="post-index grid-container">
   {% if categoryName == "Latest Articles" %}
-  <h1 class="super-title">Blog</h1>
-  <h2 class="cell sub-title">Our thoughts on technology and design</h2>
+  <h1>Blog</h1>
+  <p class="cell sub-title sub-title">Our thoughts on technology and design</p>
   {% else %}
-  <h2 class="super-title"><a href="{{ site.github.url }}">Blog</a></h2>
-  <h1 class="sub-title">{{ categoryName }}</h1>
+    {% include blog_super_title.html %}
+    <h1 class="title">{{ categoryName }}</h1>
   {% endif %}
   <div class="hide-for-large">{% include category_list_compact.html selectedIndex=categoryIndex %}</div>
+  <h2 class="visually-hidden">Posts</h2>
   {% include featured_posts.html postsToFilter=allPosts categoryName=categoryName %}
   <div class="cell grid-x">
     <div class="cell large-7 large-offset-1">

_includes/post_summary.html

@@ -6,10 +6,10 @@
         {% unless hideCategory %}
             {% include category_display.html post = post %}
         {% endunless %}
-        <div class="title">
+        <h3 class="title">
             <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
             {% include post_summary_social.html post=post %}
-        </div>
+        </h3>
         <div class="cell">
             {% if post.summary %}
             {{ post.summary }}

_includes/site-header.html

@@ -33,7 +33,7 @@
     <div class="grid-container">
         <div class="grid-x grid-padding-x">
             <div class="large-6 medium-6 cell">
-                <h1 class="brand"><a href="{{site.scottlogic.url}}">Scott Logic / Altogether Smarter</a></h1>
+                <p class="brand"><a href="{{site.scottlogic.url}}">Scott Logic / Altogether Smarter</a></p>
             </div>
             <div class="large-6 medium-6 cell">
                 <div class="header-nav_top">

_layouts/default_author.html

@@ -26,6 +26,7 @@
         <div class="cell">
             {% include author.html author=author %}
         </div>
+        <h2 class="visually-hidden">Posts</h2>
         <div class="cell">
             {% include featured_posts.html postsToFilter=featuredPosts %}
         </div>
@@ -36,7 +37,7 @@
             <div class="cell large-auto">
                 <div id="feed">
                     {% if allEvents != empty %}
-                        <h4>Talks</h4>
+                        <h2>Talks</h2>
                     {% endif %}
                     {% for event in allEvents %}
                         <div class="talk">

_layouts/default_post.html

@@ -103,10 +103,12 @@ <h1 class="title">{{ page.title }}</h1>
       {% include recruitment.html page=page %}
     </div>
     <div class="side-lists cell large-3 large-offset-1 show-for-large grid-padding-y">
+      <h2 class="visually-hidden">Contributors</h2>
       {% include author_summary.html author-id=page.author %}
       {% for contributorId in page.contributors %}
         {% include author_summary.html author-id=contributorId %}
       {% endfor %}
+
       {% include category_list.html selectedIndex=0 %}
       <div class="back cell">
         <a href="{{ site.baseurl }}/index.html">Back to all posts</a>

_layouts/video_post.html

@@ -79,6 +79,7 @@ <h1 class="title">{{ page.title }}</h1>
 
     </div>
     <div class="side-lists cell large-3 large-offset-1 show-for-large grid-padding-y">
+      <h2 class="visually-hidden">Contributors</h2>
       {% include author_summary.html author-id=page.author %}
       {% for contributorId in page.contributors %}
         {% include author_summary.html author-id=contributorId %}

scss/_404.scss

@@ -1,10 +1,5 @@
 .error-page {
 
-	padding-top: 80px;
-	@include breakpoint(large) {
-		padding-top: 150px;
-	}
-
   h1 {
     font-size: 3rem;
   }

scss/_author.scss

@@ -24,8 +24,6 @@
 }
 
 .author {
-    padding-top: 150px;
-
     img {
         border-radius: 50%;
         filter: grayscale(100%);
@@ -53,17 +51,13 @@
       }
     }
 
-  .blog {
-    margin-bottom: 0;
-    color: colours.$teal;
-    font-weight: $font-bold;
-  }
-
   .avatar > div {
     text-align: left;
   }
+}
 
-  .author-name > h1, h2 {
-    text-align: left;
-  }
+.author-name {
+  font-size: 24px;
+  font-weight: 700;
+  text-align: left;
 }

scss/_default-post.scss

@@ -22,11 +22,6 @@
     @include article-colour-scheme(colours.$yellow, colours.$black);
   }
 
-  padding-top: 80px;
-  @include breakpoint(large) {
-    padding-top: 150px;
-  }
-
   .hero {
 
     margin-bottom: 1rem;
@@ -65,25 +60,6 @@
     text-align: left;
   }
 
-  .side-lists {
-
-    a:hover {
-      color: colours.$black;
-    }
-
-    .back, .author-social-media-link {
-      a:hover {
-        color: colours.$white;
-      }
-    }
-
-    ul {
-      margin: 0;
-      padding: 0;
-      list-style-type: none;
-    }
-  }
-
   .post-content {
 
     a {

scss/_post-index.scss

@@ -2,37 +2,6 @@
 
 .post-index {
 
-	padding-top: 125px;
-	@include breakpoint(large) {
-		padding-top: 150px;
-	}
-
-	h1, h2 {
-		text-align: center;
-	}
-
-	h2 {
-		font-weight: $font-regular;
-	}
-
-	.sub-title {
-		margin-bottom: 2rem;
-		@include breakpoint(large) {
-			margin-bottom: 3rem;
-		}
-	}
-
-	h2.super-title {
-		font-size: $baseFontSize;
-		> a {
-			color: colours.$teal;
-			&:hover {
-				color: colours.$white;
-				background-color: colours.$teal;
-			}
-		}
-	}
-
 	.main-content > div {
 		display: inline-block;
 	}

scss/_side-lists.scss

@@ -0,0 +1,26 @@
+@use "colours";
+
+.side-lists {
+  a:hover {
+    color: colours.$black;
+  }
+
+  .back, .author-social-media-link {
+    a:hover {
+      color: colours.$white;
+    }
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+}
+
+.side-lists__heading {
+  font-size: 16px;
+  font-weight: 700;
+  text-align: left;
+}
+

scss/_sub-title.scss

@@ -0,0 +1,10 @@
+.sub-title {
+  font-size: 24px;
+  font-weight: 400;
+  text-align: center;
+  margin-bottom: 2rem;
+  @include breakpoint(large) {
+    margin-bottom: 3rem;
+  }
+}
+

scss/_super-title.scss

@@ -0,0 +1,15 @@
+@use "colours";
+
+.super-title {
+  font-size: $baseFontSize;
+  text-align: center;
+  font-weight: $font-regular;
+  > a {
+    color: colours.$teal;
+    &:hover {
+      color: colours.$white;
+      background-color: colours.$teal;
+    }
+  }
+}
+

scss/_title.scss

@@ -0,0 +1,10 @@
+.title {
+  font-size: 40px;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 2rem;
+  @include breakpoint(large) {
+    margin-bottom: 3rem;
+  }
+}
+

scss/_utils.scss

@@ -0,0 +1,11 @@
+/* From https://www.a11yproject.com/posts/how-to-hide-content/ */
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+

scss/graft-studio/_site-header.scss

@@ -18,7 +18,10 @@ header {
   max-width: 1400px;
 
 
-  h1.brand {
+  .brand {
+    font-size: 2.5rem;
+    font-weight: 700;
+    text-align: center;
     display: block;
     margin: auto;
     padding: 0;

scss/style.scss

@@ -24,10 +24,23 @@
 @import "article-colour-scheme";
 @import "default-post";
 @import "footer";
+@import "side-lists";
+@import "sub-title";
+@import "super-title";
 @import "syntax-highlight";
+@import "title";
 @import "code";
 @import "video-post";
 @import "read-more";
 @import "applause-button";
 @import "cookie-consent";
 @import "table";
+@import "utils";
+
+header + * {
+  padding-top: 125px;
+  @include breakpoint(large) {
+    padding-top: 150px;
+  }
+}
+