From f2bfc4bc93f1f1bcdef3333235678f3e5595af56 Mon Sep 17 00:00:00 2001
From: sylhare <sylhare@outlook.com>
Date: Fri, 9 Dec 2022 22:23:39 -0500
Subject: [PATCH] Add categories scss

---
 _sass/layouts/_categories.scss | 87 ++++++++++++++++++++++++++++++++++
 _sass/type-on-strap.scss       |  1 +
 2 files changed, 88 insertions(+)
 create mode 100644 _sass/layouts/_categories.scss

diff --git a/_sass/layouts/_categories.scss b/_sass/layouts/_categories.scss
new file mode 100644
index 0000000000..4bf0761d06
--- /dev/null
+++ b/_sass/layouts/_categories.scss
@@ -0,0 +1,87 @@
+#categories {
+  .category-clouds {
+    margin: 30px 0 30px;
+
+    li {
+      background-color: var(--link);
+      display: inline-block;
+      margin-bottom: 10px;
+      margin-right: 3px;
+      padding: 0 15px;
+      border-radius: 20px;
+      color: var(--header-text);
+      font-weight: 600;
+      font-size: 0.8rem;
+      line-height: 35px;
+      letter-spacing: -0.03rem;
+
+      .category-number {
+        vertical-align: super;
+        font-size: 0.625rem;
+      }
+
+      .p {
+        opacity: 1;
+      }
+    }
+
+    li:hover {
+      background-color: var(--header-background) !important;
+      color: var(--header-text);
+    }
+
+    .category-anchor:hover {
+      text-decoration: none !important;
+      filter: none;
+    }
+  }
+
+  .category-group {
+    padding: 15px 0 10px;
+
+    .title {
+      margin-bottom: 10px;
+    }
+
+    .items {
+      padding-left: $padding-medium;
+
+      .item {
+        position: relative;
+        margin: 25px 0;
+
+        .meta {
+          color: var(--meta);
+          font-size: 0.85rem;
+        }
+
+        .title {
+          font-weight: 600;
+          color: var(--text);
+        }
+      }
+
+      .item::before {
+        content: "";
+        position: absolute;
+        left: -5%;
+        width: 8px;
+        background-color: var(--selection);
+        border-radius: 8px;
+        height: 100%;
+      }
+
+      .category-post-link:hover {
+        text-decoration: none;
+
+        .meta, .title {
+          color: var(--header-background);
+        }
+
+        .item::before {
+          background-color: var(--link);
+        }
+      }
+    }
+  }
+}
diff --git a/_sass/type-on-strap.scss b/_sass/type-on-strap.scss
index 18f33a8946..377597f46a 100644
--- a/_sass/type-on-strap.scss
+++ b/_sass/type-on-strap.scss
@@ -31,6 +31,7 @@
 /* Posts */
 // Linked with the html in the _layouts folder
 @import 'layouts/posts';
+@import 'layouts/categories';
 @import 'layouts/blog';
 @import 'layouts/page';
 @import 'layouts/tags';