yacloud/hugo-PaperMod
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move theme toggle to the end of menu

Browse Source
This commit is contained in:
Daniil Krymov 2022-02-12 21:40:52 +01:00
parent 2d2854f00d
commit f7f25920fd
No known key found for this signature in database
GPG Key ID: 49FF57C32BD36752
2 changed files with 64 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
assets/css/common/header.css
View File

@ -1,97 +1,96 @@
.nav { .nav {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
max-width: calc(var(--nav-width) + var(--gap) * 2); max-width: calc(var(--nav-width) + var(--gap) * 2);
margin-inline-start: auto; margin-inline-start: auto;
margin-inline-end: auto; margin-inline-end: auto;
line-height: var(--header-height); line-height: var(--header-height);
} }
.nav a { .nav a {
display: block; display: block;
} }
.logo, .logo,
#menu { #menu {
display: flex; display: flex;
margin: auto var(--gap); margin: auto var(--gap);
} }
.logo { .logo {
flex-wrap: inherit; flex-wrap: inherit;
} }
.logo a { .logo a {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
} }
.logo a img { .logo a img {
display: inline; display: inline;
vertical-align: middle; vertical-align: middle;
pointer-events: none; pointer-events: none;
transform: translate(0, -10%); transform: translate(0, -10%);
border-radius: 6px; border-radius: 6px;
margin-inline-end: 8px; margin-inline-end: 8px;
} }
#theme-toggle svg { #theme-toggle svg {
height: 18px; height: 18px;
} }
button#theme-toggle { button#theme-toggle {
font-size: 26px; margin: none;
margin: auto 4px;
} }
body.dark #moon { body.dark #moon {
vertical-align: middle; vertical-align: middle;
display: none; display: none;
} }
body:not(.dark) #sun { body:not(.dark) #sun {
display: none; display: none;
} }
#menu { #menu {
list-style: none; list-style: none;
word-break: keep-all; word-break: keep-all;
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
} }
#menu li + li { #menu li + li {
margin-inline-start: var(--gap); margin-inline-start: var(--gap);
} }
#menu a { #menu a {
font-size: 16px; font-size: 16px;
} }
#menu .active { #menu .active {
font-weight: 500; font-weight: 500;
border-bottom: 2px solid currentColor; border-bottom: 2px solid currentColor;
} }
.lang-switch li, .lang-switch li,
.lang-switch ul, .lang-switch ul,
.logo-switches { .logo-switches {
display: inline-flex; display: inline-flex;
margin: auto 4px; margin: auto 4px;
} }
.lang-switch { .lang-switch {
display: flex; display: flex;
flex-wrap: inherit; flex-wrap: inherit;
} }
.lang-switch a { .lang-switch a {
margin: auto 3px; margin: auto 3px;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
} }
.logo-switches { .logo-switches {
flex-wrap: inherit; flex-wrap: inherit;
} }

47
layouts/partials/header.html
View File

@ -53,29 +53,6 @@
</a> </a>
{{- end }} {{- end }}
<span class="logo-switches"> <span class="logo-switches">
{{- if (not .Site.Params.disableThemeToggle) }}
<button id="theme-toggle" accesskey="t" title="(Alt + T)">
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
<svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</button>
{{- end }}
{{- $lang := .Lang}} {{- $lang := .Lang}}
{{- $separator := or $label_text (not .Site.Params.disableThemeToggle)}} {{- $separator := or $label_text (not .Site.Params.disableThemeToggle)}}
{{- with $.Site.Home.AllTranslations }} {{- with $.Site.Home.AllTranslations }}
@ -116,6 +93,30 @@
</a> </a>
</li> </li>
{{- end }} {{- end }}
{{- if (not .Site.Params.disableThemeToggle) }}
<li>
<button id="theme-toggle" accesskey="t" title="(Alt + T)">
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
<svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</button>
</li>
{{- end }}
</ul> </ul>
</nav> </nav>
</header> </header>