fix(UX): code colours and elements

3 files changed, 32 insertions, 23 deletions

diff --git a/content/assets/stylesheets/_utilities.scss b/content/assets/stylesheets/_utilities.scss
index fbfcbb62..840fa89b 100644
--- a/content/assets/stylesheets/_utilities.scss
+++ b/content/assets/stylesheets/_utilities.scss
@@ -1,5 +1,5 @@
 ---
-version: 5
+version: 6
 ---
 
 @import "variables";
@@ -12,6 +12,18 @@ version: 5
   min-width: $sidebar-width;
 }
 
+@mixin code-color {
+  color: $code-color;
+  background-color: $code-background-color;
+}
+
+@mixin code-styles {
+  @include code-color;
+  word-wrap: normal;
+  word-break: normal;
+  white-space: pre;
+}
+
 .text-decoration-underline {
   text-decoration: underline;
 }
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index b78941fd..108dd44f 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 99
+version: 100
 ---
 
 @import "variables";
@@ -135,15 +135,15 @@ blockquote {
   }
 }
 
+kbd {
+  @include code-styles;
+}
+
 pre {
   background-color: $pre-background-color;
   position: relative;
   code {
-    color: $code-color;
-    background-color: $code-background-color;
-    word-wrap: normal;
-    word-break: normal;
-    white-space: pre;
+    @include code-styles;
   }
   .clip-btn {
     display: inline-block;
@@ -182,8 +182,7 @@ code span {
 p code,
 li code,
 table code {
-  color: $code-color;
-  background-color: $code-background-color;
+  @include code-color;
 }
 
 a>code {
@@ -205,8 +204,7 @@ h6 {
   line-height: 1.4;
   padding-bottom: 5px;
   code {
-    color: $code-color;
-    background-color: $code-background-color;
+    @include code-color;
   }
   @media all and (min-width: $sm-width) {
     .anchor {
@@ -235,6 +233,13 @@ h1 {
   @media (max-width: $sm-width) {
     font-size: 26px;
   }
+  code {
+    @include code-color;
+  }
+
+  .anchor {
+    display: none;
+  }
 }
 
 h2 {
@@ -758,6 +763,9 @@ h6 {
 
 .gl-breadcrumb-item>a {
   color: $gds-gray-1000;
+  code {
+    @include code-color;
+  }
 }
 
 @media (max-width:575.98px) {
@@ -829,12 +837,6 @@ h6 {
   margin-bottom: 15px;
 }
 
-.article-content {
-  >h1:first-of-type {
-    display: none;
-  }
-}
-
 // Embedded video
 .video-container {
   width: 560px;
diff --git a/layouts/default.html b/layouts/default.html
index 0255dd8a..4893ac19 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -47,12 +47,7 @@
           </div>
           <main>
             <div class="row">
-              <div class="col">
-                <% if @item[:title] %>
-                  <h1 class="article-title" itemprop="name">
-                    <%= @item[:title] %><%= @item[:title_badge] %>
-                  </h1>
-                <% end %>      
+              <div class="col">     
                 <div class="article-metadata">
                   <% if @item[:author] and @item[:author_gitlab] %>
                   Article written by <a href="https://gitlab.com/<%= @item[:author_gitlab] %>" target="_blank"><%= @item[:author] %></a>