jekyll-theme-chirpy-g 1.1.0 → 1.2.0

data/_sass/base/_syntax.scss

@@ -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);
 
@@ -145,8 +226,11 @@ div[class^='language-'] {
       }
 
       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
+        );
       }
     }
   }
@@ -173,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/_graph.scss

@@ -74,7 +74,7 @@
     text-anchor: middle;
     font-size: 12px;
     fill: var(--text-color);
-    opacity: 0;
+    opacity: 1;
     pointer-events: none;
 }
   
@@ -82,7 +82,7 @@
     text-anchor: middle;
     font-size: 12px;
     fill: var(--text-color);
-    opacity: 0;
+    opacity: 1;
     pointer-events: none;
 }
 
@@ -95,6 +95,10 @@
 .node-group.dimmed {
     opacity: 0.3;
     transition: opacity 0.2s ease;
+
+    text {
+        opacity: 0;
+    }
 }
 
 .link.dimmed {

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;

data/_sass/themes/_light.scss

@@ -27,6 +27,11 @@
     rgb(232 230 230 / 100%) 50%,
     rgb(250 250 250 / 0%) 100%
   );
+  --menu-bg: white;
+  --menu-border-color: white;
+  --menu-shadow-color: rgb(0 0 0 / 16%);
+  --menu-active-color: rgb(91 91 91);
+  --menu-highlight-bg: rgb(243 244 245 / 50%);
 
   /* Sidebar */
   --site-title-color: rgb(113 113 113);
@@ -59,8 +64,8 @@
   --btn-share-hover-color: #0d6efd;
   --card-bg: white;
   --card-hover-bg: #e2e2e2;
-  --card-shadow: rgb(104 104 104 / 5%) 0 2px 6px 0,
-    rgb(211 209 209 / 15%) 0 0 0 1px;
+  --card-shadow:
+    rgb(104 104 104 / 5%) 0 2px 6px 0, rgb(211 209 209 / 15%) 0 0 0 1px;
   --footnote-target-bg: lightcyan;
   --tb-odd-bg: #fbfcfd;
   --tb-border-color: #eaeaea;