💄 Style: update summary delimiter style

hugo-fixit · Nov 15, 2024 · 9913731 · 9913731
1 parent aa1709f
commit 9913731
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 25 deletions.
diff --git a/assets/css/_core/_header.scss b/assets/css/_core/_header.scss
@@ -384,6 +384,8 @@ header {
       @include scrollbar-width(none, 0);
 
       [data-theme='dark'] & {
+        background: $header-background-color-dark;
+        border-top-color: $global-border-color-dark;
         @include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1));
       }
 
@@ -512,11 +514,6 @@ header {
       &.active {
         display: block;
       }
-
-      [data-theme='dark'] & {
-        background: $header-background-color-dark;
-        border-top-color: $global-border-color-dark;
-      }
     }
   }
 

diff --git a/assets/css/_core/_root.scss b/assets/css/_core/_root.scss
@@ -1,5 +1,9 @@
 :root {
   // Note: Custom variable values only support SassScript inside `#{}`.
+  // TODO migrate SCSS variables to CSS variables
+
+  --#{$prefix}global-font-color: #{$global-font-color};
+  --#{$prefix}global-border-color: #{$global-border-color};
 
   // Theme colors variables
   @each $color, $value in $theme-colors {
@@ -22,12 +26,13 @@
   --#{$prefix}scrollbar-track-color: transparent;
   --#{$prefix}scrollbar-width: thin;
   --#{$prefix}scrollbar-width-legacy: 12px;
-
-  // TODO  migrate SCSS variables to CSS variables
 }
 
 // Dark theme
 [data-theme=dark] {
+  --#{$prefix}global-font-color: #{$global-font-color-dark};
+  --#{$prefix}global-border-color: #{$global-border-color-dark};
+
   @each $color, $value in $theme-colors {
     --#{$prefix}#{$color}: #{darken($value, 5%)};
   }

diff --git a/assets/css/_page/_home.scss b/assets/css/_page/_home.scss
@@ -81,18 +81,26 @@
   }
 
   .summary {
-    padding-top: 1rem;
-    padding-bottom: 0.8rem;
-    color: $global-font-color;
-    border-bottom: 1px dashed $global-border-color;
+    padding-block: 1rem;
+    color: var(--#{$prefix}global-font-color);
 
-    &:first-of-type {
-      padding-top: 0;
+    &:not(:last-of-type)::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      padding: 2px;
+      transform: translateY(18px);
+      background: repeating-linear-gradient(
+        135deg,
+        var(--#{$prefix}hr-background-color) 0px,
+        var(--#{$prefix}hr-background-color) 4px,
+        transparent 4px,
+        transparent 8px
+      );
     }
 
-    [data-theme='dark'] & {
-      color: $global-font-color-dark;
-      border-bottom: 1px dashed $global-border-color-dark;
+    &:first-of-type {
+      padding-top: 0;
     }
 
     .featured-image-preview {
@@ -144,7 +152,7 @@
     }
 
     .post-footer {
-      margin-top: 0.4rem;
+      margin-block: 0.4rem 0;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -156,7 +164,7 @@
         padding: 0;
 
         @include link(true, true);
-        
+
         .post-tag:not(:last-child)::after {
           content: ',';
           margin-right: 0.25rem;

diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
@@ -97,15 +97,14 @@
   hr {
     position: relative;
     height: 1em;
+    margin-block: 1em;
     background: linear-gradient(to right, var(--#{$prefix}hr-background-color) 50%, transparent 50%);
     background-size: 10px 2px;
     background-position: center;
     background-repeat: repeat-x;
     border: none;
 
     &.awesome-hr {
-      margin-block: 0.5em;
-
       &::before {
         display: inline-block;
         font-weight: 600;
@@ -495,10 +494,6 @@
       }
     }
 
-    hr {
-      margin-block: 0;
-    }
-
     kbd {
       display: inline-block;
       padding: 0 0.25rem;

diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
@@ -39,6 +39,7 @@ $global-link-hover-color: #2983bb !default; // 潮蓝
 $global-link-hover-color-dark: #fff !default;
 
 // Color of the border
+// TODO refactor border colors
 $global-border-color: #f0f0f0 !default;
 $global-border-color-dark: #363636 !default;
 // ========== Global ========== //

diff --git a/layouts/partials/init/index.html b/layouts/partials/init/index.html
@@ -1,4 +1,4 @@
-{{- .Scratch.Set "version" "v0.3.16-fcb0f1ef" -}}
+{{- .Scratch.Set "version" "v0.3.16-aa1709fb" -}}
 {{- .Scratch.Set "this" dict -}}
 
 {{- partial "init/detection-env.html" . -}}