Merge pull request #26 from jazzominy/tags-page

updated layout in tags page
jazzominy · Sep 6, 2024 · 42ecb93 · 42ecb93
2 parents 82b4c4e + 5947d38
commit 42ecb93
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 8 deletions.
diff --git a/_sass/main.scss b/_sass/main.scss
@@ -3,6 +3,7 @@
 	--bg: #263238;
 	--text: #b0bec5;
 	--link: #f5f5dc;
+	--tag-border: #f5f5dc4f;
 	--link-hover-bg: #f5f5dc4d;
 	--link-hover-text: #f0ffff;
 	--link-active-bg: #f5f5dcd6;

diff --git a/_sass/mixins.scss b/_sass/mixins.scss
@@ -2,7 +2,7 @@
     font-size: 80%;
     font-weight: 600;
     text-decoration: none;
-    border: 0.0625rem solid #f5f5dc4f;
+    border: 0.0625rem solid var(--tag-border);
     border-radius: 1rem;
     padding: 0.1875rem 0.5rem;
     display: inline-block;

diff --git a/_sass/tags.scss b/_sass/tags.scss
@@ -1,9 +1,30 @@
 article.tags {
     padding: 0 2.5rem;
 
+    h1 {
+        margin-bottom: 2rem;
+    }
+
+    .tag-list {
+        display: flex;
+        flex-direction: column;
+        gap: 2.5rem;
+    }
+
+    .tag-box {
+        border: 0.0625rem solid var(--tag-border);
+        border-radius: .5rem;
+    }
+
     .tag {
         @include tag;
         font-size: 90%;
+        background-color: var(--link-hover-bg);
+        color: var(--link-hover-text);
+        position: relative;
+        top: -1rem;
+        left: 2rem;
+        margin-bottom: 0;
     }
 
     ul {

diff --git a/tags.html b/tags.html
@@ -7,12 +7,16 @@
 	<h1>Tags</h1>
 		{% assign sorted_tags = site.tags | sort %}
 
-		{% for tag in sorted_tags %}
-		<div class="tag">{{ tag[0] }}</div>
-		<ul>
-			{% for post in tag[1] %}
-			<li><a href="{{ post.url }}">{{ post.title }}</a></li>
+		<div class="tag-list">
+			{% for tag in sorted_tags %}
+			<div class="tag-box">
+				<div class="tag">{{ tag[0] }}</div>
+				<ul>
+					{% for post in tag[1] %}
+					<li><a href="{{ post.url }}">{{ post.title }}</a></li>
+					{% endfor %}
+				</ul>
+			</div>
 			{% endfor %}
-		</ul>
-		{% endfor %}
+		</div>
 </article>