Redesign navbar to be full width

This commit is contained in:
BBaoVanC 2023-10-15 01:22:04 -05:00
parent fde24f7438
commit f94307cdbf
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
3 changed files with 80 additions and 65 deletions

View File

@ -173,13 +173,17 @@ html {
body { body {
background-color: var(--background-0); background-color: var(--background-0);
color: var(--text-0); color: var(--text-0);
overflow-wrap: break-word;
margin: 0;
}
.center-body {
margin: 20px; margin: 20px;
max-width: 720px; max-width: 720px;
overflow-wrap: break-word;
} }
@media (min-width: 760px) { @media (min-width: 760px) {
body { .center-body {
margin: 20px auto; margin: 20px auto;
} }
} }
@ -308,12 +312,7 @@ h1 svg.icon {
/* }}} */ /* }}} */
/* Heading formatting (website title and article section headers) {{{ */ /* Heading formatting (article section titles) {{{ */
.header {
margin: 16px 0;
font-size: 1.5em;
}
/* this is also used i.e. in page-title */ /* this is also used i.e. in page-title */
.heading-link { .heading-link {
@ -328,26 +327,36 @@ h1 svg.icon {
/* }}} */ /* }}} */
/* Navbar formatting {{{ */ /* Top bar formatting {{{ */
.top {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
background-color: var(--background-1);
}
.header {
flex-grow: 1;
margin: 8px 16px;
font-size: 1.25em;
display: flex;
align-items: center;
}
.navbar { .navbar {
display: flex; display: flex;
flex-grow: 1; flex-wrap: wrap;
overflow: auto;
background-color: var(--background-1);
border-radius: 8px;
margin-top: 5px;
padding: 4px;
} }
.navbar-item { .navbar-item {
padding: 8px 12px; padding: 12px 16px;
border-radius: 12px;
white-space: nowrap; white-space: nowrap;
} }
.navbar-item:hover { .navbar-item:hover {
background-color: var(--background-3); background-color: var(--background-teal-2);
text-decoration: none; text-decoration: none;
} }
@ -946,7 +955,7 @@ aside.quote {
/* Print compatibility {{{ */ /* Print compatibility {{{ */
@media print { @media print {
.top, .top > .navbar,
.section-header-link, .section-header-link,
.post-meta-edit-history, .post-meta-edit-history,
.prevnext, .prevnext,

View File

@ -8,38 +8,42 @@
{{ partial "top.html" . }} {{ partial "top.html" . }}
{{ if not .IsHome }} <div class="center-body">
{{ partial "breadcrumb.html" . }}
{{ end }}
<main> {{ if not .IsHome }}
{{ block "main" . }} {{ partial "breadcrumb.html" . }}
THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
{{ end }} {{ end }}
</main>
{{ if or .Site.Copyright .Site.Params.footer }} <main>
<footer> {{ block "main" . }}
{{ with .Site.Copyright }} THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
<p>{{ . | safeHTML }}</p>
{{ end }} {{ end }}
</main>
{{ with .Site.Params.footer }} {{ if or .Site.Copyright .Site.Params.footer }}
{{ . | $.RenderString (dict "display" "block") }} <footer>
{{ end }} {{ with .Site.Copyright }}
</footer> <p>{{ . | safeHTML }}</p>
{{ end }} {{ end }}
<a id="back-to-top" href="#top" aria-label="{{ i18n "aria_back_to_top_button" }}"> {{ with .Site.Params.footer }}
{{ partial "icon.html" "chevron-up" }} {{ . | $.RenderString (dict "display" "block") }}
</a> {{ end }}
<noscript> </footer>
<style> {{ end }}
#back-to-top {
display: block; <a id="back-to-top" href="#top" aria-label="{{ i18n "aria_back_to_top_button" }}">
} {{ partial "icon.html" "chevron-up" }}
</style> </a>
</noscript> <noscript>
<style>
#back-to-top {
display: block;
}
</style>
</noscript>
</div>
</body> </body>
</html> </html>

View File

@ -1,22 +1,24 @@
<header class="header"> <div class="top">
<a class="heading-link" href="{{ .Site.Home.Permalink | absLangURL }}"> <header class="header">
{{ .Site.Title | markdownify }} <a class="heading-link" href="{{ .Site.Home.Permalink | absLangURL }}">
</a> {{ .Site.Title | markdownify }}
</header> </a>
</header>
<nav class="navbar" aria-label="{{ i18n "aria_navbar" }}"> <nav class="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="navbar-item{{ if $.IsHome }} active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title | markdownify }}</a>
{{ end }}
{{ range .Site.Menus.main }}
{{ $isActive := false }}
{{/* https://discourse.gohugo.io/t/ismenucurrent-not-working-with-using-sectionpagesmenu/46687/2?u=bbaovanc */}}
{{ if or ($.HasMenuCurrent .Menu .) (eq .Page $) }}
{{ $isActive = true }}
{{ end }} {{ end }}
<a class="navbar-item{{ if $isActive }} active{{ end }}"
{{ if strings.HasPrefix .URL "http" }}target="_blank" rel="noopener"{{ end }} {{ range .Site.Menus.main }}
href="{{ .URL }}">{{ .Name }}</a> {{ $isActive := false }}
{{ end }} {{/* https://discourse.gohugo.io/t/ismenucurrent-not-working-with-using-sectionpagesmenu/46687/2?u=bbaovanc */}}
</nav> {{ if or ($.HasMenuCurrent .Menu .) (eq .Page $) }}
{{ $isActive = true }}
{{ end }}
<a class="navbar-item{{ if $isActive }} active{{ end }}"
{{ if strings.HasPrefix .URL "http" }}target="_blank" rel="noopener"{{ end }}
href="{{ .URL }}">{{ .Name }}</a>
{{ end }}
</nav>
</div>