leafee98/hugo-theme-flat
1
1
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Compare commits

base: leafee98:e4e2844c3ebad115f9b5de2ef69c6794263f2417
Branches Tags
leafee98:main
leafee98:asciidoc
leafee98:gh-page
...
compare: leafee98:ad98c7238d2e893ecd90c2711f92b89cafe15acd
Branches Tags
leafee98:main
leafee98:asciidoc
leafee98:gh-page

2 commits
e4e2844c3e ... ad98c7238d

Author SHA1 Message Date
leafee98 ad98c7238d narrowing the page, max-width from 1320px to 1140 2023-07-06 15:24:10 +08:00
leafee98 dbf5a656c2 use <nav> in header 2023-07-06 15:15:04 +08:00
2 changed files with 9 additions and 13 deletions
Show stats Expand all files Collapse all files

14
layouts/partials/header.html
View file

@ -2,21 +2,21 @@
<div class="header"> <div class="header">
<a class="site-title" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> <a class="site-title" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
<ul class="menu"> <nav class="menu">
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<li class="menu-item"> <div class="menu-item">
{{ if not .Children }} {{ if not .Children }}
<a href="{{ .URL }}">{{ .Name }}</a> <a href="{{ .URL }}">{{ .Name }}</a>
{{ else }} {{ else }}
<a>{{ .Name }}↓</a> <a>{{ .Name }}↓</a>
<ul class="sub-menu"> <nav class="sub-menu">
{{ range .Children }} {{ range .Children }}
<li class="menu-item"><a href="{{ .URL }}">{{ .Name }}</a></li> <div class="menu-item"><a href="{{ .URL }}">{{ .Name }}</a></div>
{{ end }} {{ end }}
</ul> </nav>
{{ end }} {{ end }}
</li> </div>
{{ end }} {{ end }}
</ul> </nav>
</div> </div>
</header> </header>

8
static/css/style.css
View file

@ -150,6 +150,7 @@ body {
.main { flex: 0 0 72%; width: 72%; } .main { flex: 0 0 72%; width: 72%; }
.side { flex: 0 0 28%; width: 28%; } .side { flex: 0 0 28%; width: 28%; }
/* mobile layout: place side to bottom */
@media (max-width: 991px) { @media (max-width: 991px) {
.main { padding: var(--len-4); } .main { padding: var(--len-4); }
.side { padding-left: 0; padding-top: var(--len-4); } .side { padding-left: 0; padding-top: var(--len-4); }
@ -183,8 +184,7 @@ body {
/********** set up break point **********/ /********** set up break point **********/
.main-wrapper, .header { max-width: 1320px; } .main-wrapper, .header { max-width: 1140px; }
@media (max-width: 1399px) { .main-wrapper, .header { max-width: 1140px; } }
@media (max-width: 1199px) { .main-wrapper, .header { max-width: 960px; } } @media (max-width: 1199px) { .main-wrapper, .header { max-width: 960px; } }
@media (max-width: 991px) { .main-wrapper, .header { max-width: 720px; } } @media (max-width: 991px) { .main-wrapper, .header { max-width: 720px; } }
@media (max-width: 767px) { .main-wrapper, .header { max-width: 540px; } } @media (max-width: 767px) { .main-wrapper, .header { max-width: 540px; } }
@ -259,10 +259,6 @@ body {
align-items: flex-start; align-items: flex-start;
} }
/* remove the unwanted default css in menus */
.header ul { list-style: none; margin: 0; padding: 0; }
.header li { list-style: none; }
/* set up spacing of menu items in menu and sub-menu */ /* set up spacing of menu items in menu and sub-menu */
.header .menu > * { margin-right: var(--len-3); } .header .menu > * { margin-right: var(--len-3); }
.header .menu > *:last-child { margin-right: 0; } .header .menu > *:last-child { margin-right: 0; }