refactor: move breadcrumb style to its component

since the breadcrumbs navigation is a well-encapsulated component that can be directly included in any page, it's reasonable to move its style from a global css file to its component file

1 files changed, 112 insertions, 119 deletions

diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss
index a818ab52..db5f83d5 100644
--- a/assets/css/components/_pages.scss
+++ b/assets/css/components/_pages.scss
@@ -3,28 +3,34 @@
 .posts-list {
     min-height: 600px;
 
-    & > section:nth-child(1) > ul:nth-child(3) > li.first-post > div > div.posts-title.col-xs-9.col-sm-10 > div {
-      align-items: flex-start;
+    &
+        > section:nth-child(1)
+        > ul:nth-child(3)
+        > li.first-post
+        > div
+        > div.posts-title.col-xs-9.col-sm-10
+        > div {
+        align-items: flex-start;
     }
 
     .posts-year-section {
-      --section-height: 9rem;
-      min-height: var(--section-height);
-      position: relative;
-      margin: 2rem 0;
+        --section-height: 9rem;
+        min-height: var(--section-height);
+        position: relative;
+        margin: 2rem 0;
 
-      .posts-year-title {
-        font-size: 2rem;
-        font-weight: 900;
-        position: absolute;
-        right: 0;
-        color: var(--text-color);
-        opacity: 0.25;
-        font-size: calc(var(--section-height) / 2);
-        margin: 0;
-        line-height: 1;
-        z-index: -1;
-      }
+        .posts-year-title {
+            font-size: 2rem;
+            font-weight: 900;
+            position: absolute;
+            right: 0;
+            color: var(--text-color);
+            opacity: 0.25;
+            font-size: calc(var(--section-height) / 2);
+            margin: 0;
+            line-height: 1;
+            z-index: -1;
+        }
     }
 
     ul {
@@ -33,42 +39,41 @@
         padding: 0;
 
         .posts-line {
-          font-size: 1.2rem;
-          margin: 12px 0;
+            font-size: 1.2rem;
+            margin: 12px 0;
 
-          &.featured-post a.posts-title-link {
-            font-weight: 800;
-            display: block;
-          }
+            &.featured-post a.posts-title-link {
+                font-weight: 800;
+                display: block;
+            }
 
-          .posts-date {
-            font-family: var(--mono-font-family);
-            color: var(--secondary-text-color)
-          }
+            .posts-date {
+                font-family: var(--mono-font-family);
+                color: var(--secondary-text-color);
+            }
 
-          .posts-categories {
-            font-size: 0.8rem;
-            text-align: center;
-          }
-
-          .posts-category {
-            padding: 3px 0;
-            border: var(--border-color) 2px solid;
-            border-radius: 5px;
-            background-color: var(--background-color);
-          }
+            .posts-categories {
+                font-size: 0.8rem;
+                text-align: center;
+            }
+
+            .posts-category {
+                padding: 3px 0;
+                border: var(--border-color) 2px solid;
+                border-radius: 5px;
+                background-color: var(--background-color);
+            }
         }
     }
 
     hr {
-      border: 1px solid var(--border-color);
-      margin: 3rem 0;
+        border: 1px solid var(--border-color);
+        margin: 3rem 0;
     }
 }
 
-
 .posts-subtitle {
-  color: var(--secondary-text-color)
+    color: var(--secondary-text-color);
 }
 
 /* post series */
@@ -76,7 +81,7 @@
 #post-series-list {
     display: flex;
     justify-content: center;
-    gap: .5rem;
+    gap: 0.5rem;
 
     @media screen and (min-width: 768px) {
         margin: 1rem;
@@ -87,7 +92,7 @@
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        transition: .3s;
+        transition: 0.3s;
         cursor: pointer;
 
         @include bordered;
@@ -108,8 +113,8 @@
 
         &:hover {
             text-decoration: none;
-            box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.2);
-            transform: translateY(-.5rem)
+            box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
+            transform: translateY(-0.5rem);
         }
     }
 }
@@ -118,42 +123,42 @@
 
 .termlist-page {
     .termlist-title {
-      font-size: 2rem;
-      text-align: center;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      background-color: var(--block-background-color);
-      padding: 0.5rem 1rem;
-      border-radius: 1rem;
-      width: fit-content;
-      margin: 2rem auto;
-      margin-bottom: 0;
-
-      &::before,
-      &::after {
-        margin: 0.5rem 0;
-        color: var(--secondary-text-color);
-        font-size: 0.75em
-      }
-
-      &::before {
-        content: "《";
-      }
-
-      &::after {
-        content: "》";
-      }
+        font-size: 2rem;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        background-color: var(--block-background-color);
+        padding: 0.5rem 1rem;
+        border-radius: 1rem;
+        width: fit-content;
+        margin: 2rem auto;
+        margin-bottom: 0;
+
+        &::before,
+        &::after {
+            margin: 0.5rem 0;
+            color: var(--secondary-text-color);
+            font-size: 0.75em;
+        }
+
+        &::before {
+            content: "《";
+        }
+
+        &::after {
+            content: "》";
+        }
     }
 
     .termlist-subscribe {
         text-align: center;
-        font-size: .9rem;
+        font-size: 0.9rem;
         a {
             color: var(--secondary-text-color);
             &:hover {
-                text-decoration: none
+                text-decoration: none;
             }
         }
     }
@@ -168,17 +173,19 @@ section.taxonomy {
 .taxonomy-tags {
     display: flex;
     flex-wrap: wrap;
-    gap: .5rem;
+    gap: 0.5rem;
 
     .taxonomy-tags-item {
         display: inline-flex;
         align-items: center;
-        gap: .3rem;
+        gap: 0.3rem;
 
-        padding: .25rem .75rem;
+        padding: 0.25rem 0.75rem;
         background-color: var(--block-background-color);
-        transition: color, background .3s;
-        border-radius: .3rem;
+        transition:
+            color,
+            background 0.3s;
+        border-radius: 0.3rem;
 
         &:hover {
             text-decoration: none;
@@ -187,7 +194,7 @@ section.taxonomy {
         }
 
         .tag-count {
-            font-size: .8rem;
+            font-size: 0.8rem;
             color: var(--secondary-text-color);
         }
     }
@@ -198,28 +205,28 @@ section.taxonomy {
 }
 
 @media screen and (max-width: 600px) {
-  .posts-line {
-    font-size: 16px;
-  }
-
-  .markdown-body {
-    font-size: 16px;
-  }
-  .post-title {
-    font-size: 2rem;
-  }
-  .post-content p {
-    letter-spacing: 0.05em;
-  }
-  .post-content .post-gallery img {
-    width: 100%;
-  }
+    .posts-line {
+        font-size: 16px;
+    }
+
+    .markdown-body {
+        font-size: 16px;
+    }
+    .post-title {
+        font-size: 2rem;
+    }
+    .post-content p {
+        letter-spacing: 0.05em;
+    }
+    .post-content .post-gallery img {
+        width: 100%;
+    }
 }
 
 @media screen and (max-width: 48em) {
-  .posts-category {
-    display: none;
-  }
+    .posts-category {
+        display: none;
+    }
 }
 
 /* posts archive */
@@ -231,14 +238,14 @@ section.taxonomy {
         align-items: center;
         small {
             color: var(--secondary-text-color);
-            font-size: .8rem;
+            font-size: 0.8rem;
         }
     }
 
     .posts-year-archive {
         .posts-year-title {
             border-bottom: 2px solid var(--border-color);
-            padding: .5rem 0;
+            padding: 0.5rem 0;
             font-size: 1.5rem;
             @include section-title;
         }
@@ -267,24 +274,10 @@ section.taxonomy {
     width: fit-content;
     margin: 2rem auto;
 
-    &::before, &::after {
+    &::before,
+    &::after {
         content: "-";
         margin: 0 0.5rem;
         text-decoration: none;
     }
 }
-
-ol.breadcrumb {
-    list-style-type: none;
-    display: flex;
-    padding-inline-start: 0;
-    font-family: var(--mono-font-family);
-
-    li {
-        &:not(:last-child)::after {
-            content: "/";
-            color: var(--secondary-text-color);
-            margin: 0 0.5rem;
-        }
-    }
-}