jekyll-theme-chirpy-g 1.0.4 → 1.2.0

data/_sass/base/_base.scss

@@ -1,3 +1,4 @@
+@use 'sass:list';
 @use '../abstracts/variables' as v;
 @use '../abstracts/breakpoints' as bp;
 @use '../abstracts/mixins' as mx;
@@ -5,32 +6,36 @@
 @use '../themes/light';
 @use '../themes/dark';
 
-:root {
-  font-size: 16px;
+$enable-dual: not list.index(v.$theme-options, v.$theme);
+$enable-light: v.$theme == light or $enable-dual;
+$enable-dark: v.$theme == dark or $enable-dual;
+
+@if $enable-light {
+  :root[#{v.$theme-attr}='light'] {
+    @include light.styles;
+  }
 }
 
-html {
-  @media (prefers-color-scheme: light) {
-    &:not([data-mode]),
-    &[data-mode='light'] {
+@if $enable-dark {
+  :root[#{v.$theme-attr}='dark'] {
+    @include dark.styles;
+  }
+}
+
+@if $enable-dual {
+  :root:not([#{v.$theme-attr}]) {
+    @include mx.color-scheme(light) {
       @include light.styles;
     }
 
-    &[data-mode='dark'] {
+    @include mx.color-scheme(dark) {
       @include dark.styles;
     }
   }
+}
 
-  @media (prefers-color-scheme: dark) {
-    &:not([data-mode]),
-    &[data-mode='dark'] {
-      @include dark.styles;
-    }
-
-    &[data-mode='light'] {
-      @include light.styles;
-    }
-  }
+:root {
+  font-size: 16px;
 
   @include bp.lg {
     overflow-y: scroll;
@@ -369,7 +374,9 @@ main {
   box-shadow: none;
   border-color: var(--input-focus-border-color) !important;
   background: center !important;
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out;
 }
 
 .left {
@@ -391,8 +398,9 @@ main {
 
 /* MathJax */
 mjx-container {
-  overflow-y: hidden;
-  min-width: auto !important;
+  a {
+    display: inline-block;
+  }
 }
 
 @media (hover: hover) {

data/_sass/base/_syntax.scss

@@ -78,7 +78,7 @@ code {
   }
 
   a > &.highlighter-rouge {
-    padding-bottom: 0; /* show link's underlinke */
+    padding-bottom: 0; /* show link's underline */
     color: inherit;
   }
 
@@ -124,6 +124,87 @@ div[class^='language-'] {
   }
 
   .code-header {
+    @extend %no-cursor;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: v.$code-header-height;
+    margin-left: 0.75rem;
+    margin-right: 0.25rem;
+
+    /* the label block */
+    span {
+      color: var(--code-header-text-color);
+      line-height: v.$code-header-height;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      /* label icon */
+      i {
+        font-size: 1rem;
+        width: v.$code-icon-width;
+        color: var(--code-header-icon-color);
+
+        &.small {
+          font-size: 70%;
+        }
+      }
+
+      @at-root [file] #{&} > i {
+        position: relative;
+        top: 1px; /* center the file icon */
+      }
+
+      /* label text */
+      &::after {
+        content: attr(data-label-text);
+        font-size: 0.85rem;
+        font-weight: 600;
+      }
+    }
+
+    /* clipboard */
+    button {
+      @extend %cursor-pointer;
+      @extend %rounded;
+
+      border: 1px solid transparent;
+      height: 2rem;
+      width: 2rem;
+      margin-right: 0.125rem;
+      padding: 0;
+      background-color: inherit;
+
+      i {
+        color: var(--code-header-icon-color);
+      }
+
+      &[timeout] {
+        &:hover {
+          border-color: var(--clipboard-checked-color);
+        }
+
+        i {
+          font-size: 90%;
+          color: var(--clipboard-checked-color);
+        }
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:not([timeout]):hover {
+        background-color: rgb(128 128 128 / 37%);
+
+        i {
+          color: white;
+        }
+      }
+    }
+
     @include bp.sm {
       @include mx.ml-mr(0);
 
@@ -137,15 +218,19 @@ div[class^='language-'] {
         height: v.$code-dot-size;
         border-radius: 50%;
         background-color: var(--code-header-muted-color);
-        box-shadow: (v.$code-dot-size + v.$code-dot-gap) 0 0
+        box-shadow:
+          (v.$code-dot-size + v.$code-dot-gap) 0 0
             var(--code-header-muted-color),
           (v.$code-dot-size + v.$code-dot-gap) * 2 0 0
             var(--code-header-muted-color);
       }
 
       span {
-        // center the text of label
-        margin-left: calc(($dot-margin + v.$code-dot-size) / 2 * -1);
+        margin-left: v.$code-icon-width * -1; // center the label text
+        max-width: calc(
+          100% - $dot-margin - (v.$code-dot-gap + v.$code-dot-size) * 3 -
+            v.$code-icon-width * 4
+        );
       }
     }
   }
@@ -172,81 +257,3 @@ div {
     }
   }
 }
-
-.code-header {
-  @extend %no-cursor;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: v.$code-header-height;
-  margin-left: 0.75rem;
-  margin-right: 0.25rem;
-
-  /* the label block */
-  span {
-    line-height: v.$code-header-height;
-
-    /* label icon */
-    i {
-      font-size: 1rem;
-      width: v.$code-icon-width;
-      color: var(--code-header-icon-color);
-
-      &.small {
-        font-size: 70%;
-      }
-    }
-
-    @at-root [file] #{&} > i {
-      position: relative;
-      top: 1px; /* center the file icon */
-    }
-
-    /* label text */
-    &::after {
-      content: attr(data-label-text);
-      font-size: 0.85rem;
-      font-weight: 600;
-      color: var(--code-header-text-color);
-    }
-  }
-
-  /* clipboard */
-  button {
-    @extend %cursor-pointer;
-    @extend %rounded;
-
-    border: 1px solid transparent;
-    height: v.$code-header-height;
-    width: v.$code-header-height;
-    padding: 0;
-    background-color: inherit;
-
-    i {
-      color: var(--code-header-icon-color);
-    }
-
-    &[timeout] {
-      &:hover {
-        border-color: var(--clipboard-checked-color);
-      }
-
-      i {
-        color: var(--clipboard-checked-color);
-      }
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:not([timeout]):hover {
-      background-color: rgb(128 128 128 / 37%);
-
-      i {
-        color: white;
-      }
-    }
-  }
-}

data/_sass/components/_popups.scss

@@ -7,49 +7,41 @@
   @-webkit-keyframes popup {
     from {
       opacity: 0;
-      bottom: 0;
+      bottom: 10%;
     }
   }
 
   @keyframes popup {
     from {
       opacity: 0;
-      bottom: 0;
-    }
-  }
-
-  .toast-header {
-    background: none;
-    border-bottom: none;
-    color: inherit;
-  }
-
-  .toast-body {
-    font-family: Lato, sans-serif;
-    line-height: 1.25rem;
-
-    button {
-      font-size: 90%;
-      min-width: 4rem;
+      bottom: 10%;
     }
   }
 
   &.toast {
     &.show {
-      display: block;
-      min-width: 20rem;
-      border-radius: 0.5rem;
       -webkit-backdrop-filter: blur(10px);
       backdrop-filter: blur(10px);
-      background-color: rgb(255 255 255 / 50%);
-      color: #1b1b1eba;
       position: fixed;
       left: 50%;
-      bottom: 20%;
+      bottom: 30%;
       transform: translateX(-50%);
       -webkit-animation: popup 0.8s;
       animation: popup 0.8s;
     }
+
+    .toast-body {
+      line-height: 1.25rem;
+      font-family: v.$font-family-heading;
+    }
+
+    button[aria-label='Update'] {
+      font-size: 0.8rem;
+    }
+
+    .btn-close {
+      font-size: 0.625rem;
+    }
   }
 }
 
@@ -101,10 +93,7 @@
   }
 
   button {
-    > i {
-      font-size: 1.25rem;
-      vertical-align: middle;
-    }
+    font-size: 0.75rem;
 
     &:focus-visible {
       box-shadow: none;

data/_sass/layout/_sidebar.scss

@@ -17,7 +17,6 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
   overflow-y: auto;
   width: v.$sidebar-width;
   background: var(--sidebar-bg);
-  border-right: 1px solid var(--sidebar-border-color);
 
   /* Hide scrollbar for IE, Edge and Firefox */
   -ms-overflow-style: none; /* IE and Edge */
@@ -76,11 +75,12 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
   }
 
   .profile-wrapper {
-    @include mx.mt-mb(2.5rem);
     @extend %clickable-transition;
 
     padding-left: 2.5rem;
     padding-right: 1.25rem;
+    margin-top: 2.5rem;
+    margin-bottom: 1rem;
     width: 100%;
 
     @include bp.lg {
@@ -105,6 +105,8 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
     letter-spacing: 0.25px;
     margin-top: 1.25rem;
     margin-bottom: 0.5rem;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
     width: fit-content;
     color: var(--site-title-color);
   }
@@ -114,6 +116,7 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
     color: var(--site-subtitle-color);
     margin-top: 0.25rem;
     word-spacing: 1px;
+    height: 3rem;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -207,7 +210,7 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
       }
     }
 
-    a {
+    > a {
       @extend %button;
       @extend %sidebar-link-hover;
       @extend %clickable-transition;
@@ -227,13 +230,102 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
 
     #mode-toggle {
       @extend %button;
-      @extend %sidebar-links;
       @extend %sidebar-link-hover;
+      @extend %clickable-transition;
+
+      > i {
+        display: none;
+
+        @at-root :root[data-bs-theme='light'][data-theme-persisted]
+            &[data-theme-mode='light'] {
+          display: block;
+        }
+
+        @at-root :root[data-bs-theme='dark'][data-theme-persisted]
+            &[data-theme-mode='dark'] {
+          display: block;
+        }
+
+        @at-root :root:not([data-theme-persisted]) &[data-theme-mode='system'] {
+          display: block;
+        }
+      }
+
+      @-webkit-keyframes menu-pop {
+        from {
+          opacity: 0;
+          translate: 0 0.5rem;
+        }
+
+        to {
+          opacity: 1;
+          translate: 0 0;
+        }
+      }
+
+      @keyframes menu-pop {
+        from {
+          opacity: 0;
+          translate: 0 0.5rem;
+        }
+
+        to {
+          opacity: 1;
+          translate: 0 0;
+        }
+      }
+
+      + .dropdown-menu {
+        background-color: var(--menu-bg);
+        border-color: var(--menu-border-color);
+        box-shadow: var(--menu-shadow-color) 0 1px 4px;
+        border-radius: 0.75rem !important;
+
+        &.show {
+          display: flex;
+          flex-direction: column;
+          gap: 0.25rem;
+          left: -0.25rem !important;
+          -webkit-animation: menu-pop 0.2s ease-out;
+          animation: menu-pop 0.2s ease-out;
+        }
+
+        .dropdown-item {
+          border-radius: 0.5rem;
+          color: var(--sidebar-muted-color);
+          font-size: 90%;
+
+          &.active {
+            font-weight: 600;
+            color: var(--menu-active-color);
+
+            &::after {
+              content: '\f00c';
+              font: var(--fa-font-solid);
+              font-size: 0.75rem;
+              color: var(--sidebar-btn-color);
+              margin-left: auto;
+              padding-left: 1rem;
+            }
+          }
+
+          &:active,
+          &:hover,
+          &.active {
+            background-color: var(--menu-highlight-bg);
+          }
+
+          > i {
+            color: var(--sidebar-btn-color);
+            margin-right: 0.5rem;
+          }
+        }
+      }
     }
 
     .icon-border {
       @extend %no-cursor;
-      @include mx.ml-mr(calc((v.$sb-btn-gap - $btn-border-width) / 2));
+      @include mx.ml-mr(0.6rem);
 
       background-color: var(--sidebar-btn-color);
       content: '';
@@ -241,10 +333,6 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
       height: $btn-border-width;
       border-radius: 50%;
       margin-bottom: $btn-mb;
-
-      @include bp.xxxl {
-        @include mx.ml-mr(calc((v.$sb-btn-gap-lg - $btn-border-width) / 2));
-      }
     }
   } /* .sidebar-bottom */
 } /* #sidebar */

data/_sass/pages/_archives.scss

@@ -112,7 +112,7 @@
   }
 
   a {
-    /* post title in Archvies */
+    /* post title in Archives */
     margin-left: 2.5rem;
     position: relative;
     top: 0.1rem;

data/_sass/pages/_graph.scss

@@ -10,6 +10,43 @@
     align-items: center;
 }
 
+.graph-legend {
+    position: absolute;
+    bottom: 12px;
+    left: 12px;
+    display: flex;
+    gap: 16px;
+    background: var(--graph-tooltip-bg);
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    color: var(--graph-tooltip-text);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+    z-index: 5;
+
+    .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .legend-post {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: var(--graph-post-node-color);
+        border: 1.5px solid var(--graph-post-node-stroke-color);
+    }
+
+    .legend-tag {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--graph-tag-node-color);
+        border: 1.5px solid var(--graph-tag-node-stroke-color);
+    }
+}
+
 .post-node {
     r: 10;
     fill: var(--graph-post-node-color);
@@ -37,15 +74,69 @@
     text-anchor: middle;
     font-size: 12px;
     fill: var(--text-color);
+    opacity: 1;
+    pointer-events: none;
 }
   
 .tag-label {
     text-anchor: middle;
     font-size: 12px;
     fill: var(--text-color);
+    opacity: 1;
+    pointer-events: none;
 }
 
 .link {
     stroke: var(--graph-edges-color);
     stroke-opacity: 0.5;
+    transition: stroke-opacity 0.2s ease;
+}
+
+.node-group.dimmed {
+    opacity: 0.3;
+    transition: opacity 0.2s ease;
+
+    text {
+        opacity: 0;
+    }
+}
+
+.link.dimmed {
+    stroke-opacity: 0.1;
+}
+
+.graph-tooltip {
+    position: fixed;
+    background: var(--graph-tooltip-bg);
+    color: var(--graph-tooltip-text);
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    z-index: 10;
+    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+    line-height: 1.4;
+
+    .tooltip-date {
+        opacity: 0.7;
+        font-size: 11px;
+    }
+
+    .tooltip-tags {
+        font-size: 11px;
+        opacity: 0.8;
+    }
+
+    .tooltip-hint {
+        font-size: 10px;
+        opacity: 0.5;
+        font-style: italic;
+    }
+
+    .tooltip-count {
+        font-size: 11px;
+        opacity: 0.8;
+    }
 }

data/_sass/pages/_post.scss

@@ -148,6 +148,16 @@ header {
   }
 }
 
+.post-edit {
+  line-height: 1.2rem;
+
+  > a {
+    &:hover {
+      @extend %link-hover;
+    }
+  }
+}
+
 .post-navigation {
   @include bp.lt(bp.get(lg)) {
     @include mx.pl-pr(0);

data/_sass/themes/_dark.scss

@@ -30,6 +30,11 @@
     rgb(58 55 55 / 40%) 50%,
     rgb(255 255 255 / 0%) 100%
   );
+  --menu-bg: rgb(30 30 30);
+  --menu-border-color: rgb(77 77 77 / 60%);
+  --menu-shadow-color: rgb(4 4 4 / 42%);
+  --menu-active-color: rgb(240 248 255 / 63%);
+  --menu-highlight-bg: rgb(90 91 92 / 12%);
 
   /* Sidebar */
   --site-title-color: #717070;
@@ -67,8 +72,8 @@
   --btn-share-hover-color: #bfc1ca;
   --card-bg: #1e1e1e;
   --card-hover-bg: #464d51;
-  --card-shadow: rgb(21 21 21 / 72%) 0 6px 18px 0,
-    rgb(137 135 135 / 24%) 0 0 0 1px;
+  --card-shadow:
+    rgb(21 21 21 / 72%) 0 6px 18px 0, rgb(137 135 135 / 24%) 0 0 0 1px;
   --kbd-wrap-color: #6a6a6a;
   --kbd-text-color: #d3d3d3;
   --kbd-bg-color: #242424;
@@ -89,19 +94,21 @@
   --search-tag-bg: #292828;
 
   /* Graph */
-  --graph-border: #3B4F58;
-  --graph-tag-node-color: #f8f9fa;
-  --graph-post-node-color: #8AB4F8;
-  --graph-tag-node-hover-color: #dee2e6;
-  --graph-post-node-hover-color: #0d6efd;
-  --graph-edges-color: #0056b2;
-  --graph-edges-hover-color: #004085;
-  --graph-tag-node-stroke-color: var(--main-bg);
-  --graph-post-node-stroke-color: var(--main-bg);
+  --graph-border: #5c6370;
+  --graph-tag-node-color: #3b4048;
+  --graph-post-node-color: #8ab4f8;
+  --graph-tag-node-hover-color: #5c6370;
+  --graph-post-node-hover-color: #aecbfa;
+  --graph-edges-color: #5c6370;
+  --graph-edges-hover-color: #8ab4f8;
+  --graph-tag-node-stroke-color: #282c34;
+  --graph-post-node-stroke-color: #282c34;
   --graph-tag-node-stroke-hover-color: var(--tag-node-hover-color);
   --graph-post-node-stroke-hover-color: var(--post-node-hover-color);
-  --graph-tag-label-color: #585858;
-  --graph-post-label-color: #34343c;
+  --graph-tag-label-color: #abb2bf;
+  --graph-post-label-color: #e0e6f1;
+  --graph-tooltip-bg: #282c34;
+  --graph-tooltip-text: #e0e6f1;
 
   /* Categories */
   --categories-border: rgb(64 66 69 / 50%);