bbaovanc/bobatheme
1
0
Fork 0
mirror of https://github.com/BBaoVanC/bobatheme.git synced 2025-08-31 00:57:33 -05:00
Code Issues Projects Releases Wiki Activity

Use hierarchical naming on top and its elements

Browse Source 
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
This commit is contained in:
BBaoVanC
2025-08-27 10:50:04 -05:00
parent c7c1ee0f0a
commit c2b10a6c99
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
assets/css/bobastyle.css
View File

@@ -340,7 +340,7 @@ body {
* or it will need its hover background to be chopped off on the left */ * or it will need its hover background to be chopped off on the left */
} }
.brand { .top-brand {
flex-grow: 1; flex-grow: 1;
margin: 8px var(--page-margin); margin: 8px var(--page-margin);
font-size: 1.25em; font-size: 1.25em;
@@ -348,27 +348,27 @@ body {
align-items: center; align-items: center;
} }
.brand a { .top-brand > a {
color: inherit; color: inherit;
font-weight: bold; font-weight: bold;
} }
.navbar { .top-navbar {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.navbar-item { .top-navbar-item {
padding: 12px var(--page-margin); padding: 12px var(--page-margin);
white-space: nowrap; white-space: nowrap;
} }
.navbar-item:hover { .top-navbar-item:hover {
background-color: var(--background-2); background-color: var(--background-2);
text-decoration: none; text-decoration: none;
} }
.navbar-item.active { .top-navbar-item--active {
font-weight: bold; font-weight: bold;
} }

8
layouts/_partials/top.html
View File

@@ -1,13 +1,13 @@
<header class="top"> <header class="top">
<div class="brand"> <div class="top-brand">
<a href="{{ .Site.Home.Permalink | absLangURL }}"> <a href="{{ .Site.Home.Permalink | absLangURL }}">
{{ .Site.Title | markdownify }} {{ .Site.Title | markdownify }}
</a> </a>
</div> </div>
<nav class="navbar" aria-label="{{ i18n "aria_navbar" }}"> <nav class="top-navbar" aria-label="{{ i18n "aria_navbar" }}">
{{ with .Site.Home }} {{ 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 }} {{ end }}
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
@@ -16,7 +16,7 @@
{{ if or ($.HasMenuCurrent .Menu .) (eq .Page $) }} {{ if or ($.HasMenuCurrent .Menu .) (eq .Page $) }}
{{ $isActive = true }} {{ $isActive = true }}
{{ end }} {{ 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 }} {{ if strings.HasPrefix .URL "http" }}target="_blank" rel="noopener"{{ end }}
href="{{ .URL }}">{{ .Name }}</a> href="{{ .URL }}">{{ .Name }}</a>
{{ end }} {{ end }}