feat(tag): better style and navbar to return home

package.json

@@ -3,10 +3,10 @@
   "module": "index.ts",
   "type": "module",
   "scripts": {
-    "build-sass": "sass --no-source-map --style=compressed scss/main.scss dist/styles.css",
-    "watch-sass": "sass --watch scss/main.scss dist/styles.css",
-    "build-js": "bun build ./index.ts --outdir ./dist --minify",
-    "build": "bun run build-sass && bun run build-js"
+    "build:sass": "sass --no-source-map --style=compressed scss/main.scss dist/styles.css",
+    "watch:sass": "sass --watch scss/main.scss dist/styles.css",
+    "build:js": "bun build ./index.ts --outdir ./dist --minify",
+    "build": "bun run build:sass && bun run build:js"
   },
   "devDependencies": {
     "@types/bun": "latest"

scss/main.scss

@@ -118,6 +118,17 @@ h4 {
   font-size: 1.35rem;
 }
 
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  @media only screen and (max-width: vars.$bp-little) {
+    flex-direction: column;
+    align-items: normal;
+    gap: 0.5rem;
+  }
+}
+
 .presentation {
   position: relative;
   display: flex;
@@ -139,6 +150,7 @@ h4 {
     gap: 0.5rem;
     @media only screen and (max-width: vars.$bp-little) {
       margin-right: 0;
+      text-align: center;
     }
     & p {
       margin: 0;
@@ -172,7 +184,7 @@ h4 {
   column-gap: 1rem;
   row-gap: 0.5rem;
   @media only screen and (max-width: vars.$bp-little) {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
     column-gap: 0.5rem;
     align-items: center;
     margin-bottom: 2rem;

scss/tag.scss

@@ -24,7 +24,7 @@
 .tag {
   cursor: pointer;
   padding: 0.5rem;
-  border-radius: 16px;
+  border-radius: 8px;
   @media only screen and (max-width: vars.$bp-little) {
     cursor: auto;
   }

templates/page/index.gohtml

@@ -12,7 +12,7 @@
         <p class="description">
             {{ .Description }}
         </p>
-        <div class="links" style="{{ .Color.Button.GetBackground }}{{ .Color.Button.GetTextColor }}">
+        <nav class="links" style="{{ .Color.Button.GetBackground }}{{ .Color.Button.GetTextColor }}">
             {{ range $link := .Links }}
                 <div class="link">
                     <a href="{{ .Link }}">{{ .Content }}</a>
@@ -21,6 +21,6 @@
             <div class="link">
                 <a href="/tags">Tags</a>
             </div>
-        </div>
+        </nav>
     </main>
 {{end}}

templates/page/legal.gohtml

@@ -2,7 +2,7 @@
     <div class="credits-legal">
         <h2>Legal information</h2>
         <p>
-            Legal information are available <a href="{{ .Legal.LegalInformationLink }}" target="_blank">here</a>.
+            Other legal information are available <a href="{{ .Legal.LegalInformationLink }}" target="_blank">here</a>.
         </p>
         <p>
             The software behind this website was made by <a href="https://www.anhgelus.world/" target="_blank">Anhgelus Morhtuuzh</a>.

templates/page/tags.gohtml

@@ -1,6 +1,11 @@
 {{define "body"}}
     <main style="{{ .GetBackground }}">
-        <h2>Tags</h2>
+        <div class="header">
+            <h2>Tags</h2>
+            <nav>
+                <a href="/">Home</a>
+            </nav>
+        </div>
         <div class="tags" style="{{ .Color.GetTagColor }}">
             {{ range $tag := .Person.Tags }}
                 <div class="tag" data-href="{{ .Link }}" title="{{ .Link }}">