refactor: respect HTML Semantic Elements and clean style

Quentame · Quentame · commit 87c862dc75b5 · 2025-11-25T09:42:28.000+01:00
diff --git a/site/src/_layouts/base.html b/site/src/_layouts/base.html
@@ -18,10 +18,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{% if title %}{{title}} | {% endif %}Home Assistant Analytics</title>
+    <title>{% if title %}{{ title }} | {% endif %}Home Assistant Analytics</title>
     <meta
       property="og:title"
-      content="{% if title %}{{title}} | {% endif %}Home Assistant Analytics"
+      content="{% if title %}{{ title }} | {% endif %}Home Assistant Analytics"
     />
     <meta property="og:site_name" content="Home Assistant Analytics" />
     <meta property="og:url" content="https://analytics.home-assistant.io/" />
@@ -53,30 +53,33 @@
       href="https://brands.home-assistant.io/analytics/icon.png"
     />
     <link href="/static/styles.css" rel="stylesheet" />
-    {{extra_head_contents}}
+    {{ extra_head_contents }}
   </head>
   <body>
     <div class="container">
-      <div class="nav-bar">
+      <header class="nav-bar">
         <a href="/"><h1 class="nav-title">Home Assistant Analytics</h1></a>
-        <ul>
-          {% for nav in navigation %}
-          <li>
-            <a
-              class="{% if page.filePathStem == nav.matchPath or page.filePathStem == nav.path %}active{% endif %}"
-              href="{{ nav.path }}"
-              >{{ nav.name }}</a
-            >
-          </li>
-          {% endfor %}
-        </ul>
-      </div>
-    </div>
+        <nav>
+          <ul>
+            {% for nav in navigation %}
+            <li>
+              <a
+                class="{% if page.filePathStem == nav.matchPath or page.filePathStem == nav.path %}active{% endif %}"
+                href="{{ nav.path }}"
+                >
+                {{ nav.name }}
+              </a>
+            </li>
+            {% endfor %}
+          </ul>
+        </nav>
+      </header>
 
-    <div class="container content">{{ content }}</div>
+      <main>
+        {{ content }}
+      </main>
 
-    <div class="container">
-      <div class="footer">
+      <footer class="footer">
         <span>Home Assistant Analytics</span>
         <span class="serperator">–</span>
         <a
@@ -86,7 +89,7 @@
         >
           Learn more about how this data is gathered
         </a>
-      </div>
+      </footer>
     </div>
   </body>
 </html>
diff --git a/site/src/_static/styles.css b/site/src/_static/styles.css
@@ -49,11 +49,7 @@ a {
 }
 
 .nav-title {
-  color: var(--primary-text-color) !important;
-}
-
-.content {
-  margin: 32px 0;
+  color: var(--primary-text-color);
 }
 
 .container {
@@ -69,41 +65,22 @@ a {
   text-align: center;
 }
 
-.footer > * {
-  white-space: nowrap;
-}
-
-.footer .initiative {
-  font-style: italic;
-  margin-top: 16px;
-}
-
 .nav-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.nav-bar .logo {
-  width: 60%;
-}
-.nav-bar img {
-  max-height: 48px;
-  max-width: 100%;
-}
 .nav-bar ul {
   display: flex;
-  justify-content: space-between;
   padding: 0;
-}
-.nav-bar ul li {
+  margin-top: 0;
   list-style: none;
 }
 .nav-bar li a {
   display: inline-block;
   padding: 4px;
   margin: 0 4px;
   color: var(--secondary-text-color);
-  text-decoration: none;
   border-bottom: 2px solid transparent;
 }
 .nav-bar a.active {
@@ -133,19 +110,13 @@ a {
   .nav-bar {
     flex-direction: column;
   }
-
   .nav-bar > * {
     margin-top: -8px;
   }
-
-  .nav-bar .logo {
+  .nav-bar nav {
     width: 100%;
   }
-
   .nav-bar ul {
-    width: 100%;
-  }
-  .nav-bar ul li {
-    padding-top: 8px;
+    justify-content: space-between;
   }
 }
