From e6c5ecc4693a3170a2bf8960ea46f7e146527f0d Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Tue, 4 Feb 2025 09:29:44 +0000
Subject: [PATCH] a11y: ARIA text for footer line

+ fixed indentation on some view sources
---
 admin/components/credits/addcredit.html |  2 +-
 admin/components/tracks/addtrack.html   |  2 +-
 views/404.html                          | 18 +++---
 views/footer.html                       |  6 +-
 views/header.html                       | 76 ++++++++++++-------------
 views/layout.html                       | 20 +++----
 views/prideflag.html                    | 30 +++++-----
 7 files changed, 77 insertions(+), 77 deletions(-)

diff --git a/admin/components/credits/addcredit.html b/admin/components/credits/addcredit.html
index 32c43fa..c09a550 100644
--- a/admin/components/credits/addcredit.html
+++ b/admin/components/credits/addcredit.html
@@ -1,6 +1,6 @@
 <dialog id="addcredit">
     <header>
-        <h2>Add artist credit</h2>
+        <h2>Add Artist Credit</h2>
     </header>
 
     <ul>
diff --git a/admin/components/tracks/addtrack.html b/admin/components/tracks/addtrack.html
index f402763..a6dd433 100644
--- a/admin/components/tracks/addtrack.html
+++ b/admin/components/tracks/addtrack.html
@@ -1,6 +1,6 @@
 <dialog id="addtrack">
     <header>
-        <h2>Add track</h2>
+        <h2>Add Track</h2>
     </header>
 
     <ul>
diff --git a/views/404.html b/views/404.html
index b9007bd..19a0957 100644
--- a/views/404.html
+++ b/views/404.html
@@ -6,16 +6,16 @@
 
 {{define "content"}}
 <main>
-        <h1>
-                # 404 - not found!
-        </h1>
+    <h1>
+        # 404 - not found!
+    </h1>
 
-        <p>
-                the page you're looking for does not exist.
-                <br>
-                if you like, you can head back <a href="/">home</a> or <a href="{{.Target}}">try again!</a>
-        </p>
+    <p>
+    the page you're looking for does not exist.
+    <br>
+    if you like, you can head back <a href="/">home</a> or <a href="{{.Target}}">try again!</a>
+    </p>
 
-        <p><small>status: ERR_NOT_FOUND</small></p>
+    <p><small>status: ERR_NOT_FOUND</small></p>
 </main>
 {{end}}
diff --git a/views/footer.html b/views/footer.html
index a3ed996..217c4b5 100644
--- a/views/footer.html
+++ b/views/footer.html
@@ -1,9 +1,9 @@
 {{define "footer"}}
 
 <footer>
-        <div id="footer">
-                <small><em>*made with ♥ by ari, 2025*</em></small>
-        </div>
+  <div id="footer">
+    <small><em>*made with <span aria-label="love">♥</span> by ari, 2025*</em></small>
+  </div>
 </footer>
 
 {{end}}
diff --git a/views/header.html b/views/header.html
index db8987d..291b8ac 100644
--- a/views/header.html
+++ b/views/header.html
@@ -1,44 +1,44 @@
 {{define "header"}}
 
 <header>
-        <nav>
-                <div id="header-home">
-                        <img src="/img/favicon.png" id="header-icon" width="100" height="100" alt="">
-                        <div id="header-text">
-                                <h1>ari melody</h1>
-                                <h2>your local SPACEGIRL 💫</h2>
-                        </div>
-                </div>
-                <a id="header-links-toggle">
-                        <svg viewBox="0 0 70 50" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-                                <rect y="00" width="70" height="10" rx="5" fill="#eee" />
-                                <rect y="20" width="70" height="10" rx="5" fill="#eee" />
-                                <rect y="40" width="70" height="10" rx="5" fill="#eee" />
-                        </svg>
-                </a>
-                <ul id="header-links">
-                        <li>
-                                <a href="/" preload="mouseover">home</a>
-                        </li>
-                        <li>
-                                <a href="/music" preload="mouseover">music</a>
-                        </li>
-                        <li>
-                                <a href="https://git.arimelody.me/ari/arimelody.me" target="_blank">source</a>
-                        </li>
-                        <li>
-                                <!-- coming later! -->
-                                <span title="coming later!">blog</span>
-                        </li>
-                        <li>
-                                <!-- coming later! -->
-                                <span title="coming later!">art</span>
-                        </li>
-                        <li id="toggle-crt">
-                                <a href="javascript:void(0)">crt</a>
-                        </li>
-                </ul>
-        </nav>
+    <nav>
+        <div id="header-home">
+            <img src="/img/favicon.png" id="header-icon" width="100" height="100" alt="">
+            <div id="header-text">
+                <h1>ari melody</h1>
+                <h2>your local SPACEGIRL 💫</h2>
+            </div>
+        </div>
+        <a id="header-links-toggle">
+            <svg viewBox="0 0 70 50" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+                <rect y="00" width="70" height="10" rx="5" fill="#eee" />
+                <rect y="20" width="70" height="10" rx="5" fill="#eee" />
+                <rect y="40" width="70" height="10" rx="5" fill="#eee" />
+            </svg>
+        </a>
+        <ul id="header-links">
+            <li>
+                <a href="/" preload="mouseover">home</a>
+            </li>
+            <li>
+                <a href="/music" preload="mouseover">music</a>
+            </li>
+            <li>
+                <a href="https://git.arimelody.me/ari/arimelody.me" target="_blank">source</a>
+            </li>
+            <li>
+                <!-- coming later! -->
+                <span title="coming later!">blog</span>
+            </li>
+            <li>
+                <!-- coming later! -->
+                <span title="coming later!">art</span>
+            </li>
+            <li id="toggle-crt">
+                <a href="javascript:void(0)">crt</a>
+            </li>
+        </ul>
+    </nav>
 </header>
 
 {{end}}
diff --git a/views/layout.html b/views/layout.html
index a9b7940..753e4bf 100644
--- a/views/layout.html
+++ b/views/layout.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
+    <head>
         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -10,25 +10,25 @@
         {{block "head" .}}{{end}}
 
         <script type="module", src="/script/main.js"></script>
-</head>
+    </head>
 
-<body>
+    <body>
         {{template "header"}}
 
         {{block "content" .}}
         <main>
-                <h1>
-                        # hello, world!
-                </h1>
-                <p>
-                        this is a default page!
-                </p>
+            <h1>
+                # hello, world!
+            </h1>
+            <p>
+            this is a default page!
+            </p>
         </main>
         {{end}}
 
         {{template "footer"}}
         <div id="overlay"></div>
         {{template "prideflag"}}
-</body>
+    </body>
 
 </html>
diff --git a/views/prideflag.html b/views/prideflag.html
index 5e25f70..47ce4c7 100644
--- a/views/prideflag.html
+++ b/views/prideflag.html
@@ -1,21 +1,21 @@
 {{define "prideflag"}}
 <a href="https://github.com/arimelody/prideflag" target="_blank" id="prideflag">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120" hx-preserve="true">
-                <path id="red" d="M120,80 L100,100 L120,120 Z" style="fill:#d20605"/>
-                <path id="orange" d="M120,80 V40 L80,80 L100,100 Z" style="fill:#ef9c00"/>
-                <path id="yellow" d="M120,40 V0 L60,60 L80,80 Z" style="fill:#e5fe02"/>
-                <path id="green" d="M120,0 H80 L40,40 L60,60 Z" style="fill:#09be01"/>
-                <path id="blue" d="M80,0 H40 L20,20 L40,40 Z" style="fill:#081a9a"/>
-                <path id="purple" d="M40,0 H0 L20,20 Z" style="fill:#76008a"/>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120" hx-preserve="true">
+        <path id="red" d="M120,80 L100,100 L120,120 Z" style="fill:#d20605"/>
+        <path id="orange" d="M120,80 V40 L80,80 L100,100 Z" style="fill:#ef9c00"/>
+        <path id="yellow" d="M120,40 V0 L60,60 L80,80 Z" style="fill:#e5fe02"/>
+        <path id="green" d="M120,0 H80 L40,40 L60,60 Z" style="fill:#09be01"/>
+        <path id="blue" d="M80,0 H40 L20,20 L40,40 Z" style="fill:#081a9a"/>
+        <path id="purple" d="M40,0 H0 L20,20 Z" style="fill:#76008a"/>
 
-                <rect id="black" x="60" width="60" height="60" style="fill:#010101"/>
-                <rect id="brown" x="70" width="50" height="50" style="fill:#603814"/>
-                <rect id="lightblue" x="80" width="40" height="40" style="fill:#73d6ed"/>
-                <rect id="pink" x="90" width="30" height="30" style="fill:#ffafc8"/>
-                <rect id="white" x="100" width="20" height="20" style="fill:#fff"/>
+        <rect id="black" x="60" width="60" height="60" style="fill:#010101"/>
+        <rect id="brown" x="70" width="50" height="50" style="fill:#603814"/>
+        <rect id="lightblue" x="80" width="40" height="40" style="fill:#73d6ed"/>
+        <rect id="pink" x="90" width="30" height="30" style="fill:#ffafc8"/>
+        <rect id="white" x="100" width="20" height="20" style="fill:#fff"/>
 
-                <rect id="intyellow" x="110" width="10" height="10" style="fill:#fed800"/>
-                <circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/>
-        </svg>
+        <rect id="intyellow" x="110" width="10" height="10" style="fill:#fed800"/>
+        <circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/>
+    </svg>
 </a>
 {{end}}