Merge branch 'feature/improve-post-design'

_includes/refactor-content.html

@@ -118,16 +118,16 @@
       {% assign _left = _snippet | split: '><' | last%}
 
       {% if _left contains 'file="' %}
-        {% assign _text = _left | split: 'file="' | last | split: '"' | first %}
+        {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
         {% assign _label_icon = 'far fa-file-code' %}
       {% else %}
         {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
-        {% capture _text %}{% include language-alias.html language=_lang %}{% endcapture %}
+        {% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %}
         {% assign _label_icon = 'fas fa-code small' %}
       {% endif %}
 
       {% capture _label %}
-        <span text-data="{{ _text }}"><i class="fa-fw {{ _label_icon }}"></i></span>
+        <span label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
       {% endcapture %}
 
       {% assign _new_content = _new_content | append: _snippet

_layouts/post.html

@@ -10,6 +10,16 @@ tail_includes:
 
 {% include lang.html %}
 
+{% if page.image.src %}
+  {% capture bg %}
+    {% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
+  {% endcapture %}
+  <img src="{{ page.image.src }}" class="preview-img {{ bg | strip }}"
+      alt="{{ page.image.alt | default: "Preview Image" }}"
+      {% if page.image.width %}width="{{ page.image.width }}"{% endif %}
+      {% if page.image.height %}height="{{ page.image.height }}"{% endif %}>
+{% endif %}
+
 <h1 data-toc-skip>{{ page.title }}</h1>
 
 <div class="post-meta text-muted d-flex flex-column">
@@ -47,17 +57,7 @@ tail_includes:
 </div> <!-- .post-meta -->
 
 <div class="post-content">
-
-  {% if page.image.src %}
-  <img src="{{ page.image.src }}"
-      class="preview-img"
-      alt="{{ page.image.alt | default: "Preview Image" }}"
-      {% if page.image.width %}width="{{ page.image.width }}"{% endif %}
-      {% if page.image.height %}height="{{ page.image.height }}"{% endif %}>
-  {% endif %}
-
   {{ content }}
-
 </div>
 
 <div class="post-tail-wrapper text-muted">

_sass/addon/commons.scss

@@ -196,6 +196,33 @@ i { // fontawesome icons
   }
 }
 
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+img[data-src] {
+  margin: 0.5rem 0;
+
+  &[data-loaded=true] {
+    animation: fade-in linear 0.5s;
+  }
+
+  &.left {
+    float: left;
+    margin: 0.75rem 1rem 1rem 0;
+  }
+
+  &.right {
+    float: right;
+    margin: 0.75rem 0 1rem 1rem;
+  }
+
+  &.shadow {
+    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+  }
+}
+
 /* --- Panels --- */
 
 .access {
@@ -332,23 +359,6 @@ i { // fontawesome icons
   }
 }
 
-.post {
-  h1 {
-    margin-top: 3rem;
-    margin-bottom: 1rem;
-  }
-
-  em { /* MarkDown italic */
-    padding-right: 0.2rem;
-  }
-
-  a:hover {
-    code {
-      @extend %link-hover;
-    }
-  }
-}
-
 /* --- Begin of Markdown table style --- */
 
 .table-wrapper { // it will be created by Liquid
@@ -390,6 +400,39 @@ i { // fontawesome icons
 
 /* --- post --- */
 
+.post {
+  h1 {
+    margin-top: 3rem;
+    margin-bottom: 1rem;
+  }
+
+  em { // MarkDown italic
+    padding-right: 0.2rem;
+  }
+
+  a {
+    &.img-link {
+      @extend %no-cursor;
+    }
+
+    &.popup { // created by `_includes/img-extra.html`
+      cursor: zoom-in;
+
+      > img[data-src]:not(.normal):not(.left):not(.right) {
+        @include align-center;
+      }
+    }
+
+    &:hover {
+      code {
+        @extend %link-hover;
+      }
+    }
+
+  } // a
+
+}
+
 .pageviews .fa-spinner {
   font-size: 80%;
 }
@@ -418,47 +461,6 @@ i { // fontawesome icons
   overflow-wrap: break-word;
   word-wrap: break-word;
 
-  @mixin caption {
-    + em {
-      display: block;
-      text-align: center;
-      font-style: normal;
-      font-size: 80%;
-      padding: 0;
-      color: #6d6c6c;
-    }
-  }
-
-  @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  img[data-src] {
-    margin: 0.5rem 0;
-
-    &[data-loaded=true] {
-      animation: fade-in linear 0.5s;
-    }
-
-    &.left {
-      float: left;
-      margin: 0.75rem 1rem 1rem 0;
-    }
-
-    &.right {
-      float: right;
-      margin: 0.75rem 0 1rem 1rem;
-    }
-
-    &.shadow {
-      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
-    }
-
-    @include caption;
-
-  }
-
   a {
     &:not(.img-link) {
       @extend %link-underline;
@@ -468,21 +470,16 @@ i { // fontawesome icons
       }
     }
 
-    &.popup { // created by `_includes/img-extra.html`
+    &.img-link + em {
-      cursor: zoom-in;
+      display: block;
-
+      text-align: center;
-      > img[data-src]:not(.normal):not(.left):not(.right) {
+      font-style: normal;
-        @include align-center;
+      font-size: 80%;
-      }
+      padding: 0;
+      color: #6d6c6c;
     }
 
-    &.img-link {
+  }
-      @include caption;
-
-      @extend %no-cursor;
-    }
-
-  } // a
 
   ul {
     // attribute 'hide-bullet' was added by liquid

_sass/addon/syntax.scss

@@ -38,13 +38,8 @@ $code-radius: 6px;
 }
 
 %code-snippet-padding {
-  padding: 1.2rem;
+  padding-left: 1rem;
-}
+  padding-right: 1.5rem;
-
-div > pre {
-  @extend %code-snippet-bg;
-  @extend %code-snippet-radius;
-  @extend %code-snippet-padding;
 }
 
 .highlighter-rouge {
@@ -65,6 +60,8 @@ div > pre {
   }
 
   overflow: auto;
+  padding-top: 0.5rem;
+  padding-bottom: 1rem;
 
   pre {
     margin-bottom: 0;
@@ -74,20 +71,12 @@ div > pre {
   }
 
   table {
-    padding: 0;
-    border: 0;
-
     td pre {
       overflow: visible;  /* Fixed iOS safari overflow-x */
       word-break: normal; /* Fixed iOS safari linenos code break */
     }
   }
 
-  td {
-    padding: 0;
-    border: 0;
-  }
-
   .lineno {
     padding-right: 0.5rem;
     min-width: 2.2rem;
@@ -140,7 +129,7 @@ code {
 }
 
 td.rouge-code {
-  padding: 1.2rem 1.5rem 1.2rem 1rem;
+  @extend %code-snippet-padding;
 
   // Prevent some browser extends from
   // changing the URL string of code block.
@@ -164,62 +153,80 @@ div {
     }
 
     td.rouge-code {
-      @extend %code-snippet-padding;
+      padding-left: 1.5rem;
     }
   }
 }
 
 .code-header {
-  background: var(--code-header-bg);
+  @extend %no-cursor;
+
+  $code-header-height: 2.25rem;
+
   border-top-left-radius: $code-radius;
   border-top-right-radius: $code-radius;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  line-height: 1.85rem;
+  height: $code-header-height;
 
-  // icons
+  &::before {
-  i {
+    $dot-size: 0.75rem;
-    font-size: 1rem;
+    $dot-margin: 0.5rem;
-    color: var(--lang-badge-muted-color);
 
-    &.small {
+    content: "";
-      font-size: 70%;
+    display: inline-block;
-    }
+    margin-left: 1rem;
+    width: $dot-size;
+    height: $dot-size;
+    border-radius: 50%;
+    background-color: var(--code-header-muted-color);
+    box-shadow:
+      ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
+      ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
   }
 
   // the label block
   span {
-    padding-left: 0.35rem;
+    // label icon
-
-    &::after {
-      content: attr(text-data);
-      font-size: 0.85rem;
-      font-weight: 600;
-      color: var(--lang-badge-color);
-    }
-
     i {
-      margin: 0 0.5rem;
+      font-size: 1rem;
+      margin-right: 0.4rem;
+      color: var(--code-header-icon-color);
+
+      &.small {
+        font-size: 70%;
+      }
     }
 
     @at-root [file] #{&} > i {
       position: relative;
       top: 1px; // center the file icon
-      margin-left: 0.25rem;
     }
 
+    // label text
+    &::after {
+      content: attr(label-text);
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--code-header-text-color);
+    }
   }
 
   // clipboard
   button {
-    border: 1px solid var(--code-header-bg);
+    @extend %cursor-pointer;
+
+    border: 1px solid transparent;
     border-radius: $code-radius;
+    height: $code-header-height;
+    width: $code-header-height;
     padding: 0;
-    width: 1.95rem;
     background-color: inherit;
 
-    @extend %cursor-pointer;
+    i {
+      color: var(--code-header-icon-color);
+    }
 
     &[timeout] {
       &:hover {

_sass/colors/dark-syntax.scss

@@ -74,9 +74,9 @@
   --highlighter-rouge-color: #de6b18;
   --highlight-lineno-color: #6c6c6d;
   --inline-code-bg: #272822;
-  --code-header-bg: #353535;
+  --code-header-text-color: #6a6a6a;
-  --lang-badge-color: #858586;
+  --code-header-muted-color: rgb(60 60 60);
-  --lang-badge-muted-color: #6c6c6d;
+  --code-header-icon-color: rgb(86 86 86);
   --clipboard-checked-color: #2bcc2b;
 
   .highlight {

_sass/colors/dark-typography.scss

@@ -67,6 +67,7 @@
   --card-bg: rgb(39, 40, 43);
   --card-border-color: rgb(53, 53, 60);
   --card-box-shadow: var(--main-wrapper-bg);
+  --preview-img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%);
 
   /* tags */
   --tag-border: rgb(59, 79, 88);

_sass/colors/light-syntax.scss

@@ -71,9 +71,9 @@
   --highlighter-rouge-color: #2f2f2f;
   --highlight-lineno-color: #c2c6cc;
   --inline-code-bg: #f3f3f3;
-  --code-header-bg: #eaeaea;
+  --code-header-text-color: #a3a3b1;
-  --lang-badge-color: rgb(128 128 128 / 87%);
+  --code-header-muted-color: #ebebeb;
-  --lang-badge-muted-color: rgb(128 128 128 / 36%);
+  --code-header-icon-color: #d1d1d1;
   --clipboard-checked-color: #43c743;
 
 } // light-syntax

_sass/colors/light-typography.scss

@@ -66,6 +66,7 @@
   --tb-odd-bg: #fbfcfd;
   --tb-border-color: #eaeaea;
   --dash-color: silver;
+  --preview-img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(249 249 249) 100%);
 
   /* Categories */
   --categories-hover-bg: var(--btn-border-color);

_sass/layout/post.scss

@@ -31,12 +31,13 @@ h1 + .post-meta {
   }
 }
 
-.post-content {
+img.preview-img {
-  .preview-img {
+  margin-top: 3.75rem;
-    @include align-center;
+  margin-bottom: 0;
+  border-radius: 6px;
 
-    margin-top: 0;
+  &.bg[data-loaded=true] {
-    margin-bottom: 2.5rem !important;
+    background: var(--preview-img-bg);
   }
 }
 
@@ -321,6 +322,10 @@ nav[data-toggle=toc] {
 } // .license-wrapper
 
 @media all and (max-width: 576px) {
+  .preview-img[data-src] {
+    margin-top: 2.2rem;
+  }
+
   .post-tail-bottom {
     -ms-flex-wrap: wrap-reverse !important;
     flex-wrap: wrap-reverse !important;