Skip to content

refactor: respect HTML Semantic Elements and clean style #1024

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
frenck merged 2 commits into from
Feb 5, 2026
Merged

refactor: respect HTML Semantic Elements and clean style #1024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
248175f
refactor: respect HTML Semantic Elements and clean style
Quentame Oct 27, 2025
c4bb1f8
fix: non breakable footer items
Quentame Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 24 additions & 21 deletions site/src/_layouts/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/" />
Expand Down Expand Up @@ -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
Expand All @@ -86,7 +89,7 @@
>
Learn more about how this data is gathered
</a>
</div>
</footer>
</div>
</body>
</html>
33 changes: 4 additions & 29 deletions site/src/_static/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,7 @@ a {
}

.nav-title {
color: var(--primary-text-color) !important;
}

.content {
margin: 32px 0;
color: var(--primary-text-color);
}

.container {
Expand All @@ -73,37 +69,22 @@ a {
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 {
Expand Down Expand Up @@ -133,19 +114,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;
}
}