feat(compatibility): improve compatibility for Hugo basic version (#352)

assets/css/_core/_media.scss

@@ -51,7 +51,14 @@
 
   .page {
     width: 100%;
-    padding-top: $page-padding-top-mobile;
+
+    [header-mobile] & {
+      padding-top: $header-height;
+    }
+
+    [header-mobile=normal] & {
+      padding-top: 0;
+    }
 
     .categories-card {
       .card-item {

assets/css/_mixin/_index.scss

@@ -1,5 +1,4 @@
 @import "_compatibility";
 @import "_link";
 @import "_blur";
-@import "_summary";
 @import "_details";

assets/css/_page/_home.scss

@@ -1,77 +1,178 @@
-@mixin page-home($profile, $posts) {
-  .home {
-    @if $profile {
-      .home-profile {
-        @include transform(translateY(if($posts, 0, 16vh)));
-        padding: if($posts, 2rem, 0) 0 .5rem;
-        text-align: center;
-
-        .home-avatar {
-          padding: 0.6rem;
-
-          img {
-            display: inline-block;
-            width: if($posts, 6rem, 8rem);
-            height: auto;
-            margin: 0 auto;
-            @include border-radius(100%);
-            @include box-shadow(0 0 0 .3618em rgba(0, 0, 0, .05));
-            @include transition(all 0.4s ease);
-
-            &:hover {
-              position: relative;
-              @include transform(translateY(-.75rem));
-            }
-          }
-        }
+.home {
+  .home-profile {
+    @include transform(translateY( 16vh));
+    padding: 0 0 .5rem;
+    text-align: center;
 
-        .home-title {
-          font-size: 1.2rem;
-          font-weight: bold;
-          margin: 0;
-          padding: .4rem;
-        }
+    .home-avatar {
+      padding: .5rem;
+
+      img {
+        display: inline-block;
+        width: 8rem;
+        height: auto;
+        margin: 0 auto;
+        @include border-radius(100%);
+        @include box-shadow(0 0 0 .3618em rgba(0, 0, 0, .05));
+        @include transition(all 0.4s ease);
 
-        .home-subtitle {
-          font-size: 1rem;
-          font-weight: normal;
-          margin: 0;
-          padding: .4rem;
+        &:hover {
+          position: relative;
+          @include transform(translateY(-.75rem));
         }
+      }
+    }
+
+    .home-title {
+      font-size: 1.25rem;
+      font-weight: bold;
+      margin: 0;
+      padding: .5rem;
+    }
+
+    .home-subtitle {
+      font-size: 1rem;
+      font-weight: normal;
+      margin: 0;
+      padding: .5rem;
+    }
+
+    .social-links {
+      padding: .5rem;
+      font-size: 1.5rem;
+
+      a * {
+        vertical-align: text-bottom;
+      }
+
+      img {
+        height: 1.5rem;
+        padding: 0 .25rem;
+      }
+    }
+
+    .home-disclaimer {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      font-weight: normal;
+      margin: 0;
+      padding: .5rem;
+      color: $global-font-secondary-color;
+
+      [theme=dark] & {
+        color: $global-font-secondary-color-dark;
+      }
+    }
+  }
+}
+
+.home[posts] {
+  .home-profile {
+    @include transform(translateY(0));
+    padding-top: 2rem;
+  }
+
+  .home-avatar img {
+    width: 6rem;
+  }
+
+  .summary {
+    padding-top: 1rem;
+    padding-bottom: .8rem;
+    color: $global-font-color;
+    border-bottom: 1px dashed $global-border-color;
+
+    [theme=dark] & {
+      color: $global-font-color-dark;
+      border-bottom: 1px dashed $global-border-color-dark;
+    }
+
+    .featured-image-preview {
+      width: 100%;
+      padding: 30% 0 0;
+      position: relative;
+      margin: 0.6rem auto;
+      @include transition(transform 0.4s ease);
+
+      img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        @include object-fit(cover);
+      }
+
+      &:hover {
+        @include transform(scale(1.01));
+      }
+    }
+
+    .single-title {
+      font-size: 1.25rem;
+      line-height: 140%;
+      margin: 0.4rem 0;
+    }
 
-        .social-links {
-          padding: .4rem .2rem;
-          font-size: 1.6rem;
+    .content {
+      @include box(vertical);
+      -webkit-line-clamp: 3;
+      margin-top: .3rem;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      @include overflow-wrap(break-word);
+      color: $global-font-secondary-color;
 
-          a * {
-            vertical-align: text-bottom;
-          }
+      [theme=dark] & {
+        color: $global-font-secondary-color-dark;
+      }
+
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
+        font-size: 1rem;
+        line-height: 1.5;
+        display: inline;
 
-          img {
-            height: 1.4rem;
-            padding: 0 .25rem;
-          }
+        &::after {
+          content: "\A";
+          white-space: pre;
         }
+      }
+
+      h2 {
+        font-size: 1.125rem;
+      }
+
+      @include link(false, true);
 
-        .home-disclaimer {
-          font-size: 1rem;
-          line-height: 1.4rem;
-          font-weight: normal;
-          margin: 0;
-          padding: .4rem;
-          color: $global-font-secondary-color;
-
-          [theme=dark] & {
-            color: $global-font-secondary-color-dark;
-          }
+      b, strong {
+        color: $global-font-secondary-color;
+
+        [theme=dark] & {
+          color: $global-font-secondary-color-dark;
         }
       }
     }
 
-    @if $posts {
-      @include summary;
+    .post-footer {
+      margin-top: .4rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: .875rem;
+
+      @include link(false, false);
+
+      .post-tags {
+        padding: 0;
+
+        @include link(true, true);
+      }
     }
   }
 }
-
-@include page-home($home-profile, $home-posts);

assets/css/_page/_index.scss

@@ -3,7 +3,14 @@
   max-width: 800px;
   width: 60%;
   margin: 0 auto;
-  padding-top: $page-padding-top-desktop;
+
+  [header-desktop] & {
+    padding-top: $header-height;
+  }
+
+  [header-desktop=normal] & {
+    padding-top: 0;
+  }
 
   @include blur;
 }