💄 Style: modify collection list style

hugo-fixit · Dec 27, 2023 · 7c7b81f · 7c7b81f
1 parent d777b2c
commit 7c7b81f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 9 deletions.
diff --git a/assets/css/_partials/_single/_collections.scss b/assets/css/_partials/_single/_collections.scss
@@ -111,21 +111,35 @@
 
   .collection-summary {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    align-items: baseline;
+    gap: 0.25rem;
     padding: 0.2rem 0.5rem;
     background-color: darken($global-background-color, 3%);
 
     [data-theme='dark'] & {
       background-color: lighten($global-background-color-dark, 3%);
     }
-
-    .details-icon {
+    
+    > i.fa-layer-group {
       flex-shrink: 0;
     }
 
     .collection-name {
+      flex-grow: 1;
       font-weight: bold;
+
+      &::before {
+        content: attr(data-collections) '・';
+      }
+    }
+
+    .collection-count {
+      flex-shrink: 0;
+      @extend .text-secondary;
+    }
+
+    .details-icon {
+      flex-shrink: 0;
     }
 
     @include user-select(none);
@@ -195,7 +209,22 @@
         background-color: lighten($global-background-color-dark, 3%);
       }
 
+      a.collection-nav-item {
+        padding-inline: 2px;
+        border-radius: 50%;
+        @include transition(background-color 0.3s ease-out);
+
+        &:hover {
+          background-color: darken($global-background-color, 10%);
+
+          [data-theme='dark'] & {
+            background-color: lighten($global-background-color-dark, 10%);
+          }
+        }
+      }
+
       > i.collection-nav-item {
+        padding: 4px 2px;
         cursor: not-allowed;
       }
     }

diff --git a/layouts/partials/single/collection-list.html b/layouts/partials/single/collection-list.html
@@ -12,11 +12,9 @@
 
     <div class="details collection-details{{ if $open }} open{{ end }}">
       <div class="details-summary collection-summary">
-        <span class="collection-title">
-          {{ dict "Class" "fa-solid fa-layer-group fa-fw" | partial "plugin/icon.html" }}
-          <span class="collection-name">{{ T "collections" }}・{{ .LinkTitle }}</span>
-          <span class="text-secondary">{{ $pages.Len }}</span>
-        </span>
+        {{ dict "Class" "fa-solid fa-layer-group fa-fw" | partial "plugin/icon.html" }}
+        <span class="collection-name" data-collections="{{ T "collections" }}">{{ .LinkTitle }}</span>
+        <span class="collection-count">{{ $pages.Len }}</span>
         {{- dict "Class" "details-icon fa-solid fa-angle-right fa-fw" | partial "plugin/icon.html" -}}
       </div>
       <div class="details-content collection-content">