feat(tag): supports little screen

1 files changed, 42 insertions, 0 deletions

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;
+    }
+  }
+}