bbaovanc/bobatheme
1
0
Fork 0
mirror of https://github.com/BBaoVanC/bobatheme.git synced 2024-12-22 04:13:17 -06:00
Code Issues Projects Releases Wiki Activity

Redesign navbar to be full width

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
assets/css/bobastyle.css
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,

4
layouts/_default/baseof.html
View File

@ -8,6 +8,8 @@
{{ partial "top.html" . }} {{ partial "top.html" . }}
<div class="center-body">
{{ if not .IsHome }} {{ if not .IsHome }}
{{ partial "breadcrumb.html" . }} {{ partial "breadcrumb.html" . }}
{{ end }} {{ end }}
@ -40,6 +42,8 @@
} }
</style> </style>
</noscript> </noscript>
</div>
</body> </body>
</html> </html>

10
layouts/partials/top.html
View File

@ -1,10 +1,11 @@
<header class="header"> <div class="top">
<header class="header">
<a class="heading-link" href="{{ .Site.Home.Permalink | absLangURL }}"> <a class="heading-link" href="{{ .Site.Home.Permalink | absLangURL }}">
{{ .Site.Title | markdownify }} {{ .Site.Title | markdownify }}
</a> </a>
</header> </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 }} {{ end }}
@ -19,4 +20,5 @@
{{ 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 }}
</nav> </nav>
</div>