feat(tag): supports little screen

main.go

@@ -79,6 +79,7 @@ func main() {
 	}
 
 	if dev {
+		slog.Info("Starting on http://localhost:8000/")
 		g.StartServer(":8000")
 	} else {
 		g.StartServer(":80")

scss/main.scss

@@ -1,7 +1,6 @@
 @use "../node_modules/reset-css/reset.css";
-
+@use "tag";
-$bp-mid: 1000px;
+@import "vars";
-$bp-little: 650px;
 
 :root {
   --text-color: #000;
@@ -69,6 +68,9 @@ main {
   padding: 2rem;
   border-radius: 32px;
   box-shadow: 0 0 70px 2px rgba(0,0,0,0.75);
+  transition: .3s;
+  max-height: 75vh;
+  overflow: auto;
   & h1, h2, h3 {
     margin: 0;
   }
@@ -79,6 +81,7 @@ main {
     box-sizing: border-box;
     width: 100%;
     min-height: 100vh;
+    max-height: none;
     border-radius: 0;
   }
 }
@@ -199,35 +202,6 @@ h4 {
   }
 }
 
-.tags {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  margin-top: 1rem;
-  column-gap: 2rem;
-  row-gap: 1rem;
-  & h4 {
-    //text-align: center;
-  }
-  & p {
-    display: none;
-  }
-}
-
-.tag {
-  cursor: pointer;
-  & h4:hover {
-    text-decoration: underline;
-  }
-  &.active {
-    & h4 {
-      margin-bottom: 0.5rem;
-    }
-    & p {
-      display: block;
-    }
-  }
-}
-
 .credits-legal {
   width: 70%;
 }

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

scss/vars.scss

@@ -0,0 +1,2 @@
+$bp-mid: 1000px;
+$bp-little: 650px;