Redesign navbar to be full width
This commit is contained in:
parent
fde24f7438
commit
f94307cdbf
GPG Key ID:
18089E4E3CCF1D3A
|
|
@ -173,13 +173,17 @@ html {
|
|||
body {
|
||||
background-color: var(--background-0);
|
||||
color: var(--text-0);
|
||||
overflow-wrap: break-word;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.center-body {
|
||||
margin: 20px;
|
||||
max-width: 720px;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
body {
|
||||
.center-body {
|
||||
margin: 20px auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -308,12 +312,7 @@ h1 svg.icon {
|
|||
/* }}} */
|
||||
|
||||
|
||||
/* Heading formatting (website title and article section headers) {{{ */
|
||||
|
||||
.header {
|
||||
margin: 16px 0;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
/* Heading formatting (article section titles) {{{ */
|
||||
|
||||
/* this is also used i.e. in page-title */
|
||||
.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 {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
background-color: var(--background-1);
|
||||
border-radius: 8px;
|
||||
margin-top: 5px;
|
||||
padding: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
padding: 8px 12px;
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.navbar-item:hover {
|
||||
background-color: var(--background-3);
|
||||
background-color: var(--background-teal-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -946,7 +955,7 @@ aside.quote {
|
|||
|
||||
/* Print compatibility {{{ */
|
||||
@media print {
|
||||
.top,
|
||||
.top > .navbar,
|
||||
.section-header-link,
|
||||
.post-meta-edit-history,
|
||||
.prevnext,
|
||||
|
|
|
|||
|
|
@ -8,38 +8,42 @@
|
|||
|
||||
{{ partial "top.html" . }}
|
||||
|
||||
{{ if not .IsHome }}
|
||||
{{ partial "breadcrumb.html" . }}
|
||||
{{ end }}
|
||||
<div class="center-body">
|
||||
|
||||
<main>
|
||||
{{ block "main" . }}
|
||||
THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
|
||||
{{ if not .IsHome }}
|
||||
{{ partial "breadcrumb.html" . }}
|
||||
{{ end }}
|
||||
</main>
|
||||
|
||||
{{ if or .Site.Copyright .Site.Params.footer }}
|
||||
<footer>
|
||||
{{ with .Site.Copyright }}
|
||||
<p>{{ . | safeHTML }}</p>
|
||||
<main>
|
||||
{{ block "main" . }}
|
||||
THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
|
||||
{{ end }}
|
||||
</main>
|
||||
|
||||
{{ with .Site.Params.footer }}
|
||||
{{ . | $.RenderString (dict "display" "block") }}
|
||||
{{ end }}
|
||||
</footer>
|
||||
{{ end }}
|
||||
{{ if or .Site.Copyright .Site.Params.footer }}
|
||||
<footer>
|
||||
{{ with .Site.Copyright }}
|
||||
<p>{{ . | safeHTML }}</p>
|
||||
{{ end }}
|
||||
|
||||
<a id="back-to-top" href="#top" aria-label="{{ i18n "aria_back_to_top_button" }}">
|
||||
{{ partial "icon.html" "chevron-up" }}
|
||||
</a>
|
||||
<noscript>
|
||||
<style>
|
||||
#back-to-top {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
{{ with .Site.Params.footer }}
|
||||
{{ . | $.RenderString (dict "display" "block") }}
|
||||
{{ end }}
|
||||
</footer>
|
||||
{{ end }}
|
||||
|
||||
<a id="back-to-top" href="#top" aria-label="{{ i18n "aria_back_to_top_button" }}">
|
||||
{{ partial "icon.html" "chevron-up" }}
|
||||
</a>
|
||||
<noscript>
|
||||
<style>
|
||||
#back-to-top {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
<header class="header">
|
||||
<a class="heading-link" href="{{ .Site.Home.Permalink | absLangURL }}">
|
||||
{{ .Site.Title | markdownify }}
|
||||
</a>
|
||||
</header>
|
||||
<div class="top">
|
||||
<header class="header">
|
||||
<a class="heading-link" href="{{ .Site.Home.Permalink | absLangURL }}">
|
||||
{{ .Site.Title | markdownify }}
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<nav class="navbar" aria-label="{{ i18n "aria_navbar" }}">
|
||||
{{ with .Site.Home }}
|
||||
<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 }}
|
||||
<nav class="navbar" aria-label="{{ i18n "aria_navbar" }}">
|
||||
{{ with .Site.Home }}
|
||||
<a class="navbar-item{{ if $.IsHome }} active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title | markdownify }}</a>
|
||||
{{ 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>
|
||||
|
||||
{{ 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 }}
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue