From 42edbe27329cb094895b8e9c558639ff52611eca Mon Sep 17 00:00:00 2001
From: Anhgelus Morhtuuzh <anhgelus.morhtuuzh@proton.me>
Date: Wed, 13 Nov 2024 10:17:46 +0100
Subject: feat(tag): supports little screen

---
 scss/tag.scss | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 scss/tag.scss

(limited to 'scss/tag.scss')

diff --git a/scss/tag.scss b/scss/tag.scss
new file mode 100644
index 0000000..9c36f3d
--- /dev/null
+++ b/scss/tag.scss
@@ -0,0 +1,42 @@
+@import "vars";
+
+.tags {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-top: 1rem;
+  column-gap: 2rem;
+  row-gap: 1rem;
+  @media only screen and (max-width: $bp-little) {
+    grid-template-columns: 1fr;
+    row-gap: 2rem;
+  }
+  & h4 {
+    @media only screen and (max-width: $bp-little) {
+      margin-bottom: 0.5rem;
+    }
+  }
+  & p {
+    display: none;
+    @media only screen and (max-width: $bp-little) {
+      display: block;
+    }
+  }
+}
+
+.tag {
+  cursor: pointer;
+  @media only screen and (max-width: $bp-little) {
+    cursor: auto;
+  }
+  & h4:hover {
+    text-decoration: underline;
+  }
+  &.active {
+    & h4 {
+      margin-bottom: 0.5rem;
+    }
+    & p {
+      display: block;
+    }
+  }
+}
-- 
cgit v1.2.3