Merge pull request #89 from zendesk/andre_improve_headings

Improve page headings
zendesk · Jun 18, 2019 · bc64697 · bc64697
2 parents a2d23e6 + 8c713d8
commit bc64697
Show file tree

Hide file tree

Showing 20 changed files with 91 additions and 66 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Copenhagen",
   "author": "Zendesk",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "api_version": 1,
   "default_locale": "en-us",
   "settings": [{

diff --git a/style.css b/style.css
@@ -919,7 +919,7 @@ ul {
   }
 }
 
-.section h2 {
+.home-section h2 {
   margin-bottom: 10px;
   text-align: center;
 }
@@ -1130,6 +1130,8 @@ ul {
 
 .section-tree-title {
   margin-bottom: 0;
+  font-size: 18px;
+  font-weight: 600;
 }
 
 .section-tree-title a {
@@ -1658,6 +1660,8 @@ ul {
 .comment-heading {
   margin-bottom: 5px;
   margin-top: 0;
+  font-size: 18px;
+  font-weight: 600;
 }
 
 .comment-overview {
@@ -1991,6 +1995,11 @@ ul {
   text-align: center;
 }
 
+.community-footer-title {
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+
 .community-featured-posts, .community-activity {
   padding-top: 40px;
   width: 100%;
@@ -2000,8 +2009,9 @@ ul {
   margin-bottom: 30px;
 }
 
-.community-header h4 {
+.community-header h1 {
   margin-bottom: 0;
+  font-size: 16px;
 }
 
 .post-to-community {
@@ -2514,17 +2524,11 @@ ul {
   }
 }
 
-.post-sidebar h5 {
+.post-sidebar-title {
+  font-size: 18px;
   font-weight: 600;
 }
 
-@media (min-width: 1024px) {
-  .post-sidebar h5 {
-    border-bottom: 1px solid #ddd;
-    padding-bottom: 20px;
-  }
-}
-
 .post-comments {
   margin-bottom: 20px;
 }
@@ -3174,14 +3178,14 @@ ul {
   }
 }
 
-.request-sidebar h5 {
+.request-sidebar h2 {
   font-size: 15px;
   font-weight: 600;
   position: relative;
 }
 
 @media (min-width: 1024px) {
-  .request-sidebar h5 {
+  .request-sidebar h2 {
     display: none;
   }
 }
@@ -4077,6 +4081,11 @@ ul {
   }
 }
 
+.search-results-subheading {
+  font-size: 18px;
+  font-weight: 600;
+}
+
 .search-results-list {
   margin-bottom: 25px;
 }

diff --git a/styles/_category.scss b/styles/_category.scss
@@ -28,6 +28,8 @@
 
   &-title {
     margin-bottom: 0;
+    font-size: 18px;
+    font-weight: $font-weight-semibold;
 
     a { color: $text_color; }
   }

diff --git a/styles/_comments.scss b/styles/_comments.scss
@@ -7,6 +7,8 @@
   &-heading {
     margin-bottom: 5px;
     margin-top: 0;
+    font-size: 18px;
+    font-weight: $font-weight-semibold;
   }
 
   &-overview {

diff --git a/styles/_community.scss b/styles/_community.scss
@@ -8,6 +8,11 @@
   &-footer {
     padding-top: 50px;
     text-align: center;
+
+    &-title {
+      font-size: 16px;
+      margin-bottom: 20px;
+    }
   }
 
   &-featured-posts,
@@ -19,7 +24,10 @@
   &-header {
     margin-bottom: 30px;
 
-    h4 { margin-bottom: 0; }
+    h1 {
+      margin-bottom: 0;
+      font-size: 16px;
+    }
   }
 }
 

diff --git a/styles/_home-page.scss b/styles/_home-page.scss
@@ -8,7 +8,7 @@
   margin-bottom: 40px;
 }
 
-.section h2 {
+.home-section h2 {
   margin-bottom: 10px;
   text-align: center;
 }

diff --git a/styles/_post.scss b/styles/_post.scss
@@ -139,12 +139,8 @@
     padding: 30px 0;
     text-align: center;
 
-    h5 {
-      @include desktop {
-        border-bottom: 1px solid $border-color;
-        padding-bottom: 20px;
-      }
-
+    &-title {
+      font-size: 18px;
       font-weight: $font-weight-semibold;
     }
   }

diff --git a/styles/_request.scss b/styles/_request.scss
@@ -113,7 +113,7 @@
     flex: 1 0 auto;
     order: 0; //Bring to top
 
-    h5 {
+    h2 {
       @include desktop {
         display: none;
       }

diff --git a/styles/_search_results.scss b/styles/_search_results.scss
@@ -17,6 +17,11 @@
     flex: 1;
   }
 
+  &-subheading {
+    font-size: 18px;
+    font-weight: $font-weight-semibold;
+  }
+
   &-list {
     margin-bottom: 25px;
     > li {

diff --git a/styles/_status-label.scss b/styles/_status-label.scss
@@ -5,7 +5,7 @@
   border-radius: 4px;
   color: #fff;
   font-size: 12px;
-  font-weight: 600;
+  font-weight: $font-weight-semibold;
   margin-right: 2px;
   padding: 3px 10px;
   vertical-align: middle;

diff --git a/templates/article_page.hbs b/templates/article_page.hbs
@@ -6,11 +6,13 @@
   </nav>
 
   <div class="article-container" id="article-container">
-    <section class="article-sidebar">
+    <aside class="article-sidebar">
       {{#if settings.show_articles_in_section}}
-        <section class="section-articles collapsible-sidebar">
+        <div class="collapsible-sidebar">
           <button type="button" class="collapsible-sidebar-toggle" aria-labelledby="section-articles-title" aria-expanded="false"></button>
-          <h3 id="section-articles-title" class="collapsible-sidebar-title sidenav-title">{{t 'articles_in_section'}}</h3>
+          <h3 id="section-articles-title" class="collapsible-sidebar-title sidenav-title">
+            {{t 'articles_in_section'}}
+          </h3>
           <div class="collapsible-sidebar-body">
             <ul>
               {{#each section.articles}}
@@ -23,9 +25,9 @@
               <a href="{{section.url}}" class="article-sidebar-item">{{t 'see_more'}}</a>
             {{/if}}
           </div>
-        </section>
+        </div>
       {{/if}}
-    </section>
+    </aside>
 
     <article class="article">
       <header class="article-header">
@@ -135,9 +137,9 @@
         <div class="article-comments" id="article-comments">
           <section class="comments">
             <header class="comment-overview">
-              <h3 class="comment-heading">
+              <h2 class="comment-heading">
                 {{t 'comments'}}
-              </h3>
+              </h2>
               <p class="comment-callout">{{t 'comments_count' count=article.comment_count}}</p>
               {{#if comments}}
                 <div class="dropdown comment-sorter">

diff --git a/templates/category_page.hbs b/templates/category_page.hbs
@@ -17,9 +17,9 @@
       <div class="section-tree">
         {{#each sections}}
           <section class="section">
-            <h3 class="section-tree-title">
+            <h2 class="section-tree-title">
               <a href="{{url}}">{{name}}</a>
-            </h3>
+            </h2>
             {{#if articles}}
               <ul class="article-list">
                 {{#each articles}}

diff --git a/templates/community_post_list_page.hbs b/templates/community_post_list_page.hbs
@@ -10,7 +10,7 @@
   </nav>
 
   <header class="page-header community-header">
-    <h4>
+    <h1>
       <span class="dropdown">
         <button class="dropdown-toggle" aria-haspopup="true">
           {{t 'all_posts'}}
@@ -24,7 +24,7 @@
           {{/link}}
         </span>
       </span>
-    </h4>
+    </h1>
     <span class="post-to-community">
       {{link 'new_post' role='button' class='button-large'}}
     </span>
@@ -135,7 +135,7 @@
   </section>
 
   <section class="container community-footer">
-    <h4>{{t 'suggest_new_post'}}</h4>
+    <h2 class="community-footer-title">{{t 'suggest_new_post'}}</h2>
     {{link 'new_post' role='button' class='button-large'}}
   </section>
 </div>
diff --git a/templates/community_post_page.hbs b/templates/community_post_page.hbs
@@ -106,21 +106,21 @@
       </article>
 
       <section class="comment-overview" id="comment-overview">
-          <h3 class="comment-heading">
-            {{t 'comments'}}
-          </h3>
-          <p class="comment-callout">{{t 'comments_count' count=post.comment_count}}</p>
-          {{#if comments}}
-            <div class="dropdown comment-sorter">
-              <button class="dropdown-toggle" aria-haspopup="true">
-                {{t 'sort_by'}}
-              </button>
-              <span class="dropdown-menu" role="menu">
-                {{#each comment_sorters}}
-                  <a aria-selected="{{selected}}" href="{{url}}" role="menuitem">{{name}}</a>
-                {{/each}}
-              </span>
-            </div>
+        <h2 class="comment-heading">
+          {{t 'comments'}}
+        </h2>
+        <p class="comment-callout">{{t 'comments_count' count=post.comment_count}}</p>
+        {{#if comments}}
+          <div class="dropdown comment-sorter">
+            <button class="dropdown-toggle" aria-haspopup="true">
+              {{t 'sort_by'}}
+            </button>
+            <span class="dropdown-menu" role="menu">
+              {{#each comment_sorters}}
+                <a aria-selected="{{selected}}" href="{{url}}" role="menuitem">{{name}}</a>
+              {{/each}}
+            </span>
+          </div>
         {{/if}}
       </section>
 
@@ -210,7 +210,7 @@
     </div>
 
     <section class="post-sidebar">
-      <h3 class="sidebar-title">{{t 'suggest_new_post'}}</h3>
+      <h2 class="post-sidebar-title">{{t 'suggest_new_post'}}</h2>
       <span class="post-to-community">
         {{link 'new_post' role='button' class='button-large'}}
       </span>

diff --git a/templates/community_topic_list_page.hbs b/templates/community_topic_list_page.hbs
@@ -10,7 +10,7 @@
   </nav>
 
   <header class="page-header community-header">
-    <h4>
+    <h1>
       <span class="dropdown">
         <button class="dropdown-toggle" aria-haspopup="true">
           {{t 'community_topics'}}
@@ -24,7 +24,7 @@
           {{/link}}
         </span>
       </span>
-    </h4>
+    </h1>
     <span class="post-to-community">
       {{link 'new_post' role='button' class='button-large'}}
     </span>
@@ -81,7 +81,7 @@
   </section>
 
   <section class="container community-footer">
-    <h4>{{t 'suggest_new_post'}}</h4>
+    <h2 class="community-footer-title">{{t 'suggest_new_post'}}</h2>
     {{link 'new_post' role='button' class='button-large'}}
   </section>
 </div>
diff --git a/templates/community_topic_page.hbs b/templates/community_topic_page.hbs
@@ -104,6 +104,6 @@
 </div>
 
 <section class="container community-footer">
-  <h4>{{t 'suggest_new_post'}}</h4>
+  <h2 class="community-footer-title">{{t 'suggest_new_post'}}</h2>
   {{link 'new_post' role='button' class='button-large'}}
 </section>
diff --git a/templates/home_page.hbs b/templates/home_page.hbs
@@ -54,7 +54,7 @@
   </section>
 
   {{#if help_center.community_enabled}}
-    <section class="section community">
+    <section class="section home-section community">
       <h2>{{t 'community'}}</h2>
       {{#link 'community' class='community-link'}}
         {{t 'join_conversation'}}
@@ -64,7 +64,7 @@
     </section>
   {{/if}}
 
-  <section class="section activity">
+  <section class="section home-section activity">
     {{#if settings.show_recent_activity}}
       {{recent_activity}}
     {{/if}}