Merge pull request creativecommons#362 from creativecommons/refactor

Remove multiple instances of title class

Author: Dhruvi16

themes/vocabulary_theme/templates/blog.html

@@ -5,10 +5,10 @@
 
 {% block body %}
   <div class="blog-page">
-    <div class="blog-page-header">
+    <div class="title">
       <div class="container">
         <h1>{{ this.title }}</h1>
-        <div class="blog-page-description column is-9 is-paddingless">{{ this.description }}</div>
+        <div class="description column is-9 is-paddingless">{{ this.description }}</div>
       </div>
     </div>
     <div class="container blog-page-posts">

themes/vocabulary_theme/templates/community_team_list.html

@@ -1,14 +1,14 @@
 {% extends "layout.html" %}
 
 {% block body %}
-  <div class="community-team-members">
+  <div>
     <div class="title">
       <div class="container">
         <h1>{{ this.title }}</h1>
-        <p class="description column is-9">This is a list of all CC Community Team members, and their roles and privileges. For more information about CC Community Team, please see <a href="/community/community-team/">the Community Team Page</a>.</p>
+        <p class="description column is-9 is-paddingless">This is a list of all CC Community Team members, and their roles and privileges. For more information about CC Community Team, please see <a href="/community/community-team/">the Community Team Page</a>.</p>
       </div>
     </div>
-    <div class="body container">
+    <div class="container padding-horizontal-big padding-bottom-xl">
       <h2 class="padding-top-bigger">Project Teams</h2>
       {% for project in bag('community_team_members.projects') %}
         <h3 class="b-header padding-vertical-normal">{{ project.name }}</h3>

themes/vocabulary_theme/templates/page-with-toc.html

@@ -2,7 +2,7 @@
 
 {% block body %}
   <div class="code-guidelines">
-    <header class="code-guidelines-title">
+    <header class="title">
       <div class="container is-paddingless">
         <h1>{{ this.title }}</h1>
         <div class="description column is-9 is-paddingless">

themes/vocabulary_theme/templates/search_roadmap.html

@@ -5,7 +5,7 @@
     <div class="title">
       <div class="container">
         <h1>{{ this.title }}</h1>
-        <p class="description column is-9">The largest open source product in CC’s portfolio is CC Search: a search engine for CC licensed and public domain creative works.</p>
+        <p class="description column is-9 is-paddingless">The largest open source product in CC’s portfolio is CC Search: a search engine for CC licensed and public domain creative works.</p>
       </div>
     </div>
     <div class="body container">

webpack/sass/main.scss

@@ -1,18 +1,20 @@
 @import "../node_modules/@creativecommons/vocabulary/scss/vocabulary.scss";
 
-// links
+// Links
 a {
   color: $color-forest-green;
   text-decoration: none;
 }
 
+// Code
 code {
   color: $color-dark-slate-gray;
   background-color: $color-lighter-gray;
   border: 1px solid $color-lighter-gray;
   border-radius: 0.25rem;
 }
 
+// Navbar
 .navbar-item {
   &.has-dropdown {
     .navbar-dropdown {
@@ -26,19 +28,21 @@ code {
   }
 }
 
+// Breadcrumb
 .breadcrumb-container {
   border-top: 4px solid $color-forest-green;
   background-color: $color-lighter-gray;
 
   .breadcrumb {
-    @extend .padding-bigger;
+    @extend .padding-big;
 
     .link {
       @extend .has-color-forest-green;
     }
   }
 }
 
+// Hero section - Home page
 .hero {
   @extend .margin-top-large;
 
@@ -68,6 +72,7 @@ code {
   }
 }
 
+// Get-involved section - Home page
 .get-involved {
   background-color: $color-lighter-gray;
 
@@ -106,6 +111,7 @@ code {
   }
 }
 
+// Recent-posts section - Home page
 .recent-posts {
   background-color: rgba(4, 166, 53, 0.1);
 
@@ -134,6 +140,7 @@ code {
   }
 }
 
+// Featured-projects section - Home page
 .featured-projects {
   @extend .padding-vertical-xxl;
 
@@ -183,23 +190,27 @@ code {
   }
 }
 
-.blog-page {
-  .blog-page-header {
-    @extend .padding-top-bigger;
-    @extend .padding-bottom-xl;
+// Common Title section
+.title {
+  background-color: $color-lighter-gray;
 
-    background-color: $color-lighter-gray;
+  .container {
+    @extend .padding-horizontal-big;
+    @extend .padding-bottom-xl;
 
-    .container {
-      @extend .padding-horizontal-big;
-    }
+    word-wrap: break-word;
 
-    .blog-page-description {
+    .description {
+      @extend .body-bigger;
       @extend .padding-top-normal;
-      @extend .body-big;
+
+      line-height: 1.8125;
     }
   }
+}
 
+// Blog page
+.blog-page {
   .blog-page-posts {
     @extend .padding-top-normal;
 
@@ -210,6 +221,7 @@ code {
   }
 }
 
+// Single Post page
 .single-post {
   .container {
     @extend .padding-horizontal-xxl;
@@ -317,14 +329,10 @@ code {
   }
 }
 
+// Author Post page
 .author-posts {
   .title {
-    background-color: $color-lighter-gray;
-
     .container {
-      @extend .padding-horizontal-big;
-      @extend .padding-bottom-xl;
-
       .image {
         width: 9.5rem;
         height: 9.5rem;
@@ -349,16 +357,8 @@ code {
   }
 }
 
+// Series page
 .all-series {
-  .title {
-    background-color: $color-lighter-gray;
-
-    .container {
-      @extend .padding-horizontal-big;
-      @extend .padding-bottom-xl;
-    }
-  }
-
   .series-list {
     @extend .padding-horizontal-big;
     @extend .padding-top-xl;
@@ -384,34 +384,17 @@ code {
   }
 }
 
+// Categories page
 .all-categories {
-  .title {
-    background-color: $color-lighter-gray;
-    overflow-wrap: break-word;
-
-    .container {
-      @extend .padding-horizontal-big;
-      @extend .padding-bottom-xl;
-    }
-  }
-
   .categories-list {
     @extend .padding-horizontal-big;
     @extend .padding-top-xl;
     @extend .padding-bottom-xxl;
   }
 }
 
+// All Authors page
 .all-authors {
-  .title {
-    background-color: $color-lighter-gray;
-
-    .container {
-      @extend .padding-horizontal-big;
-      @extend .padding-bottom-xl;
-    }
-  }
-
   .authors-list {
     @extend .padding-horizontal-big;
     @extend .padding-top-xl;
@@ -453,22 +436,8 @@ code {
   }
 }
 
+// Guidelines page
 .code-guidelines {
-  .code-guidelines-title {
-    background-color: $color-lighter-gray;
-
-    .container {
-      @extend .padding-horizontal-bigger;
-
-      word-wrap: break-word;
-
-      .description {
-        @extend .body-bigger;
-        @extend .padding-top-small;
-        @extend .padding-bottom-xl;
-      }
-    }
-  }
   .code-guidelines-body {
     @extend .padding-horizontal-big;
 
@@ -493,24 +462,8 @@ code {
   }
 }
 
+// Project List page
 .project-list {
-  .title {
-    background-color: $color-lighter-gray;
-
-
-    .container {
-      @extend .padding-horizontal-big;
-
-      .description {
-        @extend .padding-top-normal;
-        @extend .padding-bottom-xl;
-        @extend .body-bigger;
-
-        line-height: 1.4375;
-      }
-    }
-  }
-
   .body {
     @extend .padding-horizontal-big;
     @extend .body-big;
@@ -534,38 +487,19 @@ code {
   }
 }
 
+// CC Search Guidelines page
 .cc-search-guide {
-  .title {
-    background-color: $color-lighter-gray;
-
-    .container {
-      @extend .padding-horizontal-big;
-      @extend .padding-bottom-xl;
-    }
-  }
-
   .body {
     @extend .padding-horizontal-big;
     @extend .padding-top-xl;
     @extend .padding-bottom-xxl;
   }
 }
 
+// Project Ideas page
 .project-ideas {
   .title {
-    background-color: $color-lighter-gray;
-
     .container {
-      @extend .padding-horizontal-big;
-      @extend .padding-bottom-xl;
-
-      .description {
-        @extend .padding-top-normal;
-        @extend .body-bigger;
-
-        line-height: 2.0625;
-      }
-
       .filter-labels {
         @extend .padding-top-xl;
 
@@ -652,23 +586,8 @@ code {
   }
 }
 
+// CC Search Roadmap
 .cc-search-roadmap {
-  .title {
-    background-color: $color-lighter-gray;
-
-    .container {
-      @extend .padding-horizontal-big;
-      @extend .padding-bottom-xl;
-
-      .description {
-        @extend .padding-top-normal;
-        @extend .body-bigger;
-
-        line-height: 1.4375;
-      }
-    }
-  }
-
   .body {
     @extend .padding-horizontal-big;
     @extend .padding-top-xl;
@@ -688,20 +607,3 @@ code {
     }
   }
 }
-
-.community-team-members {
-  .container {
-    @extend .padding-horizontal-big;
-    @extend .padding-bottom-xl;
-  }
-  
-  .title {
-    background-color: $color-lighter-gray;
-    overflow-wrap: break-word;
-
-      .description {
-        @extend .body-bigger;
-        @extend .padding-top-small;
-      }
-  }
-}