From c2b10a6c997766419deacd61ded468a65a4ea47c Mon Sep 17 00:00:00 2001
From: BBaoVanC <bbaovanc@bbaovanc.com>
Date: Wed, 27 Aug 2025 10:50:04 -0500
Subject: [PATCH] Use hierarchical naming on top and its elements

Any element that can't stand on its own as a self-contained component
should have its naming nested under whatever parent it's supposed to
have.

Fixes #109
---
 assets/css/bobastyle.css   | 12 ++++++------
 layouts/_partials/top.html |  8 ++++----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css
index 4d22809..0f481c7 100644
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -340,7 +340,7 @@ body {
    * or it will need its hover background to be chopped off on the left */
 }
 
-.brand {
+.top-brand {
   flex-grow: 1;
   margin: 8px var(--page-margin);
   font-size: 1.25em;
@@ -348,27 +348,27 @@ body {
   align-items: center;
 }
 
-.brand a {
+.top-brand > a {
   color: inherit;
   font-weight: bold;
 }
 
-.navbar {
+.top-navbar {
   display: flex;
   flex-wrap: wrap;
 }
 
-.navbar-item {
+.top-navbar-item {
   padding: 12px var(--page-margin);
   white-space: nowrap;
 }
 
-.navbar-item:hover {
+.top-navbar-item:hover {
   background-color: var(--background-2);
   text-decoration: none;
 }
 
-.navbar-item.active {
+.top-navbar-item--active {
   font-weight: bold;
 }
 
diff --git a/layouts/_partials/top.html b/layouts/_partials/top.html
index c533280..a32aa22 100644
--- a/layouts/_partials/top.html
+++ b/layouts/_partials/top.html
@@ -1,13 +1,13 @@
 <header class="top">
-    <div class="brand">
+    <div class="top-brand">
         <a href="{{ .Site.Home.Permalink | absLangURL }}">
             {{ .Site.Title | markdownify }}
         </a>
     </div>
 
-    <nav class="navbar" aria-label="{{ i18n "aria_navbar" }}">
+    <nav class="top-navbar" aria-label="{{ i18n "aria_navbar" }}">
         {{ with .Site.Home }}
-            <a class="navbar-item{{ if $.IsHome }} active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title | markdownify }}</a>
+            <a class="top-navbar-item{{ if $.IsHome }} top-navbar-item--active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title | markdownify }}</a>
         {{ end }}
 
         {{ range .Site.Menus.main }}
@@ -16,7 +16,7 @@
             {{ if or ($.HasMenuCurrent .Menu .) (eq .Page $) }}
                 {{ $isActive = true }}
             {{ end }}
-            <a class="navbar-item{{ if $isActive }} active{{ end }}"
+            <a class="top-navbar-item{{ if $isActive }} top-navbar-item--active{{ end }}"
                {{ if strings.HasPrefix .URL "http" }}target="_blank" rel="noopener"{{ end }}
                href="{{ .URL }}">{{ .Name }}</a>
         {{ end }}