title, breadcrumb in post position changed

assets/sass/base/_typography.scss

@@ -9,13 +9,13 @@
 }
 
 body {
-  font-size: 16px;
+  font-size: 1rem;
   font-family: $text-font-stack;
 }
 
 code,
 pre {
-  font-size: 13.8px;
+  font-size: 0.85rem;
   font-family: $code-font-stack;
 }
 

assets/sass/components/_bgcolor.scss

@@ -0,0 +1,11 @@
+.bgcolor {
+  @include themify($themes) {
+    &__header {
+      background-color: themed('single-header-title-background-color');
+    }
+
+    &__breadcrumb {
+      background-color: themed('breadcrumb-background-color');
+    }
+  }
+}

assets/sass/components/_breadcrumb.scss

@@ -1,12 +1,8 @@
 .breadcrumb {
-  margin: 1.5rem 1rem 0 1rem;
-  padding-bottom: 1.5rem;
+  margin: 0 1rem;
+  padding: 0.5rem 0;
 
   @include truncate($grid-body-width);
-  @include themify($themes) {
-    border-bottom: 1px solid themed('hr-color');
-    background-color: themed('breadcrumb-background-color');
-  }
 
   ol {
     @include flexbox();

assets/sass/layout/_header.scss

@@ -1,3 +1,9 @@
+.top {
+  @include themify($themes) {
+    background-color: themed('single-header-title-background-color');
+  }
+}
+
 .header {
   @include flexbox();
   @include justify-content(center);
@@ -8,6 +14,12 @@
     font-family: $title-font;
     font-weight: 900;
   }
+
+  &__wrapper {
+    @include themify($themes) {
+      border-bottom: 1px solid themed('border-line-color');
+    }
+  }
 }
 
 .blog-header {

assets/sass/layout/_navbar.scss

@@ -197,7 +197,7 @@
       @include align-items(center);
       @include justify-content(center);
       @include themify($themes) {
-        color: themed('body-color');
+        color: themed('landing-button-default');
         @include on-event {
           background-color: themed('dropdown-hover-background-color');
         }

assets/sass/main.scss

@@ -35,6 +35,7 @@ $light-link-hover-color: {{ .Site.Data.color.light_link_hover_color }};
 @import 'components/button';
 @import 'components/summary';
 @import 'components/expand';
+@import 'components/bgcolor';
 
 @import 'layout/grid';
 @import 'layout/footer';

assets/sass/pages/_single.scss

@@ -5,7 +5,6 @@
 }
 
 .single {
-  padding: 0 1rem;
   position: relative;
   width: 100%;
   overflow-wrap: break-word;
@@ -19,13 +18,13 @@
   }
 
   &__title {
-    font-size: 2.5rem;
+    font-size: 3rem;
     font-weight: 900;
     font-family: $title-font;
     line-height: 3rem;
     overflow-wrap: break-word;
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
+    padding: 1rem;
+    margin: 1rem 0;
 
     @include themify($themes) {
       color: themed("single-header-title-color");
@@ -76,12 +75,12 @@
     h6 {
       position: relative;      
       line-height: 1.25;
+      padding: 0 1rem;
       font-family: $title-font;
     }
 
     h1,
     h2 {
-      padding: 0;
       color: inherit;
       font-weight: 900;
       text-rendering: optimizeLegibility; 
@@ -136,8 +135,8 @@
       line-height: 1.5;
 
       @include themify($themes) {
-        border-top: 1px solid themed('hr-color');
-        border-bottom: 1px solid themed('hr-color');
+        border-top: 1px solid themed('border-line-color');
+        border-bottom: 1px solid themed('border-line-color');
 
         @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
         @include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
@@ -166,59 +165,6 @@
       }
     }
 
-    code + .copy-to-clipboard {
-      position: absolute;
-      right: 4px;
-      top: 5px;
-      border-radius: 2px;
-      z-index: z('clipboard');
-      @include transition(all, 0.2s, ease);
-    }
-
-    .copy-to-clipboard {
-      background-position: 50% 50%;
-      background-size: 16px 16px;
-      background-repeat: no-repeat;
-      width: 27px;
-      height: 1.45rem;
-      top: -1px;
-      vertical-align: middle;
-      position: relative;      
-      margin-left: -0.2rem;
-      cursor: pointer;
-      border-radius: 0 2px 2px 0;
-      margin-bottom: 1px;
-      opacity: 0;
-
-      @include clippy();
-      @include transition(all, 0.2s, ease);
-    }
-    .copy-to-clipboard:hover {
-      @include translateY(-0.1rem);
-    }
-    .chroma .copy-to-clipboard {
-      position: absolute;
-      right: 4px;
-      top: 5px;      
-      border-radius: 2px;
-      z-index: z('clipboard');
-      @include transition(all, 0.2s, ease);
-    }
-    .chroma .copy-to-clipboard:hover {
-      @include translateY(-0.1rem);
-    }
-    .language-code .copy-to-clipboard {
-      position: absolute;
-      right: 4px;
-      top: 5px;      
-      border-radius: 2px;
-      z-index: z('clipboard');
-      @include transition(all, 0.2s, ease);
-    }
-    .language-code .copy-to-clipboard:hover {
-      @include translateY(-0.1rem);
-    }
-
     blockquote {
       margin: 0 1.75rem 1.75rem 1.5rem;
       padding: 0 0 0 1.42188rem;
@@ -248,8 +194,8 @@
     }
 
     p {
-      margin: 0 0 1rem 0;
-      padding: 0;      
+      margin: 0 0 10px 0;
+      padding: 0 1rem;      
 
       code:not([class^=language]) {
         padding: 3px 7px;
@@ -269,7 +215,6 @@
 
     li {
       margin-left: 2rem;
-      margin-bottom: calc(1rem / 2);
 
       & > code {
         padding: 2px 7px;
@@ -283,8 +228,7 @@
     }
 
     hr {
-      margin: 0 0 calc(1.25rem - 1px) 0;
-      padding: 0;
+      margin: 10px 1rem;
       border: none;
       height: 1px;
       @include themify($themes) {

assets/sass/themes/_dark.scss

@@ -32,4 +32,11 @@ $dark: (
   pagination-link-color: #82aaff,
   pagination-disabled-color: #757575,
   pagination-number-color: #FCFCFA,
+  breadcrumb-background-color: #2D2A2E,
+  single-hr-background-color: #727072,
+  single-blockquote-border-color: #FCFCFA,
+  single-header-title-color: #FCFCFA,
+  single-contents-title-color: #ccc,
+  single-header-title-background-color: #212121,
+  single-contents-subtitle-color: #FCFCFA,
 );

assets/sass/themes/_light.scss

@@ -33,4 +33,10 @@ $light: (
   pagination-background-color: #eee,
   pagination-disabled-color: #bdbdbd,
   pagination-number-color: #757575,
+  breadcrumb-background-color: #fff,
+  single-hr-background-color: #bdbdbd,
+  single-blockquote-border-color: #bdbdbd,
+  single-header-title-color: #424242,
+  single-header-title-background-color: #eee,
+  single-contents-title-color: #607d8b,
 );

assets/sass/themes/_lightcode.scss

@@ -3,8 +3,8 @@ $lightcode: (
   content-pre-main-color: #607d8b,
   content-pre-color: #344952,
   content-pre-number-color: #aaa,
-  content-pre-background-color: #eceff1,
-  content-pre-border-background-color: darken(#eceff1, 7%),
-  content-pre-header-background-color: darken(#eceff1, 3.5%),
+  content-pre-background-color: #f7f8f9,
+  content-pre-border-background-color: darken(#f7f8f9, 7%),
+  content-pre-header-background-color: darken(#f7f8f9, 3.5%),
   content-pre-header-color: #344952,
 );

layouts/_default/list.searchindex.json

@@ -1,3 +1,4 @@
+{{ .Scratch.Delete "searchindex" }}
 {{- $.Scratch.Add "searchindex" slice -}}
 {{- range $index, $element := (where .Site.Pages "Kind" "page") -}}
   {{ with $element.Plain }}

layouts/_default/section.html

@@ -1,3 +1,6 @@
+{{ define "header" }}
+  {{ partial "main/header.html" . }}
+{{ end }}
 {{ define "main" }}
   {{ partial "main/list.html" . }}
 {{ end }}

layouts/_default/single.html

@@ -1,3 +1,6 @@
+{{ define "header" }}
+ {{ partial "main/header.html" . }}
+{{ end }}
 {{ define "main" }}
   {{ partial "main/single.html" . }}
 {{ end }}

layouts/_default/single.searchindex.json

@@ -1,3 +1,4 @@
+{{ .Scratch.Delete "searchindex" }}
 {{- $.Scratch.Add "searchindex" slice -}}
 {{- range $index, $element := (where .Site.Pages "Kind" "page") -}}
   {{ with $element.Plain }}

layouts/_default/terms.searchindex.json

@@ -1,3 +1,4 @@
+{{ .Scratch.Delete "searchindex" }}
 {{- $.Scratch.Add "searchindex" slice -}}
 {{- range $index, $element := (where .Site.Pages "Kind" "page") -}}
   {{ with $element.Plain }}

layouts/index.json

@@ -1,3 +1,4 @@
+{{ .Scratch.Delete "searchindex" }}
 {{- $.Scratch.Add "searchindex" slice -}}
 {{- range $index, $element := (where .Site.Pages "Kind" "page") -}}
   {{ with $element.Plain }}

layouts/partials/main/header.html

@@ -0,0 +1,19 @@
+<div class="top">
+  <div class="header__wrapper bgcolor__header">
+    <div class="divider">
+      <div class="lmr">
+        <h2 class="single__title">{{ .Title }}</h2>
+      </div>
+    </div>
+  </div>
+
+  <div class="header__wrapper bgcolor__breadcrumb">
+    <div class="divider">
+      <div class="lmr">
+        {{ if $.Param "enableBreadcrumb" }}
+          {{ partial "main/component/breadcrumb.html" . }}
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</div>

layouts/partials/main/list.html

@@ -8,9 +8,6 @@
     </nav>
 
     <article id="list-main" class="m">
-      {{ if $.Param "enableBreadcrumb" }}
-        {{ partial "main/component/breadcrumb.html" . }}
-      {{ end }}
       {{ partial "main/sections/list-main.html" . }}
       {{ partial "main/component/pagination-single.html" . }}
     </article>

layouts/partials/main/sections/list-main.html

@@ -1,10 +1,10 @@
 <div class="single" data-display="block">
-  <h2 class="single__title">{{ .Title }}</h2>
   {{ if eq .Type "blog" }}
     <div class="single__meta">
       {{ partial "main/component/article-meta.html" . }}
     </div>
   {{ end }}
+
   <article class="single__contents">
     {{ .Content }}
   </article>

layouts/partials/main/single.html

@@ -8,10 +8,6 @@
     </nav>
 
     <article id="list-main" class="m">
-      {{ if $.Param "enableBreadcrumb" }}
-        {{ partial "main/component/breadcrumb.html" . }}
-      {{ end }}
-
       {{ partial "main/sections/list-main.html" . }}
       {{ partial "main/component/pagination-single.html" . }}
       {{ partial "comments/comments.html" . }}