better support blog, exampleSite update

11 files changed, 100 insertions, 50 deletions

diff --git a/assets/sass/base/_helpers.scss b/assets/sass/base/_helpers.scss
index 808f377..e25282a 100644
--- a/assets/sass/base/_helpers.scss
+++ b/assets/sass/base/_helpers.scss
@@ -18,4 +18,16 @@
 
 .flexbox {
   @include flexbox();
+}
+
+.jc-center {
+  @include justify-content(center);
+}
+
+.ai-center {
+  @include align-items(center);
+}
+
+.flex-wrap {
+  @include flex-wrap(wrap);
 }
\ No newline at end of file
diff --git a/assets/sass/components/_breadcrumb.scss b/assets/sass/components/_breadcrumb.scss
index 7beb750..b900982 100644
--- a/assets/sass/components/_breadcrumb.scss
+++ b/assets/sass/components/_breadcrumb.scss
@@ -1,6 +1,18 @@
 .breadcrumb {
-  margin: 0 1rem;
-  padding: 0.5rem 0;
+  &[data-is-blog="true"] {
+    margin: 1.5rem 1rem 0 1rem;
+    padding-bottom: 1.5rem;
+
+    @include themify($themes) {
+      border-bottom: 1px solid themed('hr-color');
+      background-color: themed('breadcrumb-background-color');
+    }
+  }
+
+  &[data-is-blog="false"] {
+    margin: auto 1rem;
+    padding: 0.5rem 0;
+  }
 
   @include truncate($grid-body-width);
 
diff --git a/assets/sass/components/_summary.scss b/assets/sass/components/_summary.scss
index 50f64e2..83100c4 100644
--- a/assets/sass/components/_summary.scss
+++ b/assets/sass/components/_summary.scss
@@ -1,8 +1,7 @@
 .summary-card {
-  padding: 0.5rem;
+  padding: 1rem;
   padding-bottom: 0;
-  margin-top: 0.5rem;
-  margin-bottom: 2rem;
+  margin: 1.5rem 0;
   position: relative;
 
   @include themify($themes) {
@@ -11,13 +10,14 @@
   }
 
   .title {
+    text-align: center;
     a {
       font-family: $title-font;
       font-weight: 700;
       word-break: break-word;
 
       @include themify($themes) {
-        color: themed('title-color');
+        color: themed('link');
         @include on-event {
           color: themed('link-hover');
         }
@@ -26,8 +26,11 @@
   }
 
   .subtitle {
+    padding: 1rem 0;
+
     @include flexbox();
     @include align-items(center);
+    @include justify-content(center);
     @include themify($themes) {
       color: themed('meta-color');
     }
@@ -78,7 +81,7 @@
       height: 100%;
       width: auto;
       margin: 0 auto;
-      padding: 1rem;
+      padding: 1rem 0;
       padding-bottom: 0;
     }
   }
diff --git a/assets/sass/components/_tag.scss b/assets/sass/components/_tag.scss
new file mode 100644
index 0000000..f1c9590
--- /dev/null
+++ b/assets/sass/components/_tag.scss
@@ -0,0 +1,29 @@
+.tag {

+  display: inline-block;

+  margin: 0.25rem 0.4rem;

+  text-decoration: none !important;

+

+  @include themify($themes) {

+    color: darken(themed('subtitle-color'), 5%);

+    @include on-event {

+      color: themed('link-hover');

+    }

+  }

+

+  &__wrapper {

+    padding: 0.3rem 0;

+    margin: auto 0;

+  }

+

+  &__text {

+    font-size: 0.95rem;

+    font-weight: bold;

+    color: inherit;

+  }

+

+  &__num {

+    font-size: 0.75rem;

+    font-weight: bold;

+    color: inherit;

+  }

+}
\ No newline at end of file
diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss
index 389fbc9..82f87c8 100644
--- a/assets/sass/layout/_header.scss
+++ b/assets/sass/layout/_header.scss
@@ -10,15 +10,23 @@
   @include align-items(center);
   @include flex-direction(column);
 
-  .title {
-    font-family: $title-font;
-    font-weight: 900;
-  }
-
   &__wrapper {
     @include themify($themes) {
       border-bottom: 1px solid themed('border-line-color');
     }
+
+    .title {
+      font-size: 3rem;
+      font-weight: 900;
+      font-family: $title-font;
+      line-height: 3rem;
+      overflow-wrap: break-word;
+      margin: 2rem 1.5rem;
+
+      @include themify($themes) {
+        color: themed("title-color");
+      }
+    }
   }
 }
 
@@ -29,8 +37,15 @@
 
   &__title {
     line-height: 1.1;
-    font-weight: 700;
+    font-weight: 900;
     font-family: $title-font;
+    font-size: 3rem;
+    line-height: 3rem;
+    overflow-wrap: break-word;
+
+    @include themify($themes) {
+      color: themed("title-color");
+    }
   }
 
   &__subtitle {
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 77ea2ca..7cf133a 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -36,6 +36,7 @@ $light-link-hover-color: {{ .Site.Data.color.light_link_hover_color }};
 @import 'components/summary';
 @import 'components/expand';
 @import 'components/bgcolor';
+@import 'components/tag';
 
 @import 'layout/grid';
 @import 'layout/footer';
@@ -46,5 +47,4 @@ $light-link-hover-color: {{ .Site.Data.color.light_link_hover_color }};
 @import 'pages/home';
 @import 'pages/single';
 @import 'pages/list';
-@import 'pages/blog';
-@import 'pages/taxo';
\ No newline at end of file
+@import 'pages/blog';
\ No newline at end of file
diff --git a/assets/sass/pages/_blog.scss b/assets/sass/pages/_blog.scss
index 77ad526..734e1ea 100644
--- a/assets/sass/pages/_blog.scss
+++ b/assets/sass/pages/_blog.scss
@@ -14,4 +14,8 @@
     @include justify-content(center);
     @include align-items(center);
   }
+
+  .subtitle {
+    margin: 0.25rem 0;
+  }
 }
\ No newline at end of file
diff --git a/assets/sass/pages/_single.scss b/assets/sass/pages/_single.scss
index f340e65..214a8ab 100644
--- a/assets/sass/pages/_single.scss
+++ b/assets/sass/pages/_single.scss
@@ -23,10 +23,10 @@
     font-family: $title-font;
     line-height: 3rem;
     overflow-wrap: break-word;
-    margin: 1.5rem 1rem 0.5rem;
+    margin: 2rem 1rem 0.25rem;
 
     @include themify($themes) {
-      color: themed("single-header-title-color");
+      color: themed("title-color");
     }
   }
 
diff --git a/assets/sass/pages/_taxo.scss b/assets/sass/pages/_taxo.scss
deleted file mode 100644
index 8fbe791..0000000
--- a/assets/sass/pages/_taxo.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.taxo {
-  &__header {
-    height: 170px;
-    width: 100%;
-    font-size: 44px;
-    font-weight: bold;
-    text-transform: capitalize;
-    
-    @include flexbox();
-    @include align-items(center);
-    @include justify-content(center);
-  }
-
-  &__key {
-    margin: 0 1rem;
-    font-size: 1.5rem;
-  }
-
-  &__ul {
-    margin: 1rem;
-  }
-
-  &__li {
-    margin: 0.125rem 0;
-  }
-
-  &__title {
-    font-size: 1.25rem;
-
-  }
-}
\ No newline at end of file
diff --git a/assets/sass/themes/_dark.scss b/assets/sass/themes/_dark.scss
index 3ed5917..dd4bed4 100644
--- a/assets/sass/themes/_dark.scss
+++ b/assets/sass/themes/_dark.scss
@@ -3,6 +3,8 @@ $dark: (
   link-hover: $dark-link-hover-color,
   body-color: #FCFCFA,
   hr-color: #595B5C,
+  title-color: #FCFCFA,
+  subtitle-color: darken(#FCFCFA, 5%),
   border-line-color: rgba(243, 242, 241, 0.1),
   active-font-color: $dark-active-font-color,
   body-background-color: #2D2A2E,
@@ -35,10 +37,11 @@ $dark: (
   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,
   expand-background-color: darken(#2D2A2E, 2%),
   expand-background-color-hover: #212121,
+  tag-num-background-color: #595B5C,
+  tag-text-background-color: #595B5C,
 );
\ No newline at end of file
diff --git a/assets/sass/themes/_light.scss b/assets/sass/themes/_light.scss
index e8032de..cd4fa1a 100644
--- a/assets/sass/themes/_light.scss
+++ b/assets/sass/themes/_light.scss
@@ -3,6 +3,8 @@ $light: (
   link-hover: $light-link-hover-color,
   body-color: #242729,
   hr-color: #bdbdbd,
+  title-color: #424242,
+  subtitle-color: darken(#424242, 5%),
   border-line-color: rgba(12, 13, 14, 0.1),
   active-font-color: $light-active-font-color,
   body-background-color: #fff,
@@ -36,9 +38,10 @@ $light: (
   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,
   expand-background-color: #f7f8f9,
   expand-background-color-hover: darken(#f7f8f9, 3%),
+  tag-num-background-color: #bdbdbd,
+  tag-text-background-color: #eee,
 );
\ No newline at end of file