Compare commits
2 commits
e4e2844c3e
...
ad98c7238d
Author | SHA1 | Date | |
---|---|---|---|
ad98c7238d | |||
dbf5a656c2 |
|
@ -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>
|
||||||
|
|
|
@ -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; }
|
||||||
|
|
Loading…
Reference in a new issue