kienan
/
hugo-theme-zzo
mirror of https://github.com/zzossig/hugo-theme-zzo.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

footer ui changed, navbar theme select added,

This commit is contained in:
zzossig 2019-11-22 20:12:02 +09:00
parent 4b94f7fac2
commit c7fedf9cb4
17 changed files with 366 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
assets/js/zzo.js
View File

@ -7,11 +7,11 @@ $(document).ready(function() {
// go-to-top // go-to-top
if ($(window).scrollTop() === 0) { if ($(window).scrollTop() === 0) {
$('.gtt').hide(); $('.gtt').hide(200);
} else if ($(this).scrollTop() > $(document).height() - $(window).height() - 250) { // near the bottom } else if ($(this).scrollTop() > $(document).height() - $(window).height() - 250) { // near the bottom
$('.gtt').show(); $('.gtt').show(200);
} else { } else {
$('.gtt').hide(); $('.gtt').hide(200);
} }
// scroll // scroll
@ -22,9 +22,9 @@ $(document).ready(function() {
var scroll = $(window).scrollTop(); var scroll = $(window).scrollTop();
if (scroll > position) { // scroll down if (scroll > position) { // scroll down
if (scroll < 250) { if (scroll < 250) {
$('.gtt').hide(); $('.gtt').hide(200);
} else { } else {
$('.gtt').show(); $('.gtt').show(200);
} }
if (scroll < 45) { if (scroll < 45) {
@ -56,7 +56,7 @@ $(document).ready(function() {
}); });
} else { // scroll up } else { // scroll up
if (scroll < 250) { if (scroll < 250) {
$('.gtt').hide(); $('.gtt').hide(200);
} }
if (navbar.hasClass('navbar--hide')) { if (navbar.hasClass('navbar--hide')) {
@ -99,7 +99,7 @@ $(document).ready(function() {
} }
$('.navbar__burger').removeClass('is-active'); $('.navbar__burger').removeClass('is-active');
$('.navbar__menu').removeClass('is-active'); $('.navbar__menu').removeClass('is-active');
$('.mobile-search').hide(); $('.mobile-search').hide(200);
}, },
setup: function () { }, setup: function () { },
deferSetup: true, deferSetup: true,
@ -139,7 +139,7 @@ $(document).ready(function() {
}); });
// mobile search // mobile search
$('.mobile-search').hide(); $('.mobile-search').hide(200);
$('#mobileSearchBtn').click(function() { $('#mobileSearchBtn').click(function() {
$('#search-mobile-container').fadeIn(250); $('#search-mobile-container').fadeIn(250);
$('#search-mobile').focus(); $('#search-mobile').focus();

7
assets/sass/components/_search.scss
View File

@ -184,18 +184,19 @@
&__btn { &__btn {
position: absolute; position: absolute;
top: 0; top: 0;
right: $grid_navbar_height; right: 35px;
width: $grid_navbar_height; width: 35px;
height: $grid_navbar_height; height: $grid_navbar_height;
padding: 0.25rem; padding: 0.25rem;
cursor: pointer; cursor: pointer;
display: none; display: none;
z-index: z('search-btn'); z-index: z('search-btn');
@include animation('slide-in-down .5s .25s 1 ease both');
@include respond-to(sm) { @include respond-to(sm) {
@include flexbox(); @include flexbox();
@include align-items(center); @include align-items(center);
@include justify-content(flex-end); @include justify-content(center);
} }
@include themify($themes) { @include themify($themes) {

57
assets/sass/layout/_footer.scss
View File

@ -15,22 +15,6 @@
} }
} }
&__theme {
padding: 0.5rem 0;
@include flex-grow(1);
@include flexbox();
@include align-items(center);
@include flex-direction(column);
}
&__lang {
padding: 0.5rem 0;
@include flex-grow(1);
@include flexbox();
@include align-items(center);
@include flex-direction(column);
}
&__feed { &__feed {
padding: 0.5rem 0; padding: 0.5rem 0;
@include flex-grow(1); @include flex-grow(1);
@ -59,24 +43,33 @@
} }
.dropdown { .dropdown {
position: relative; position: absolute;
display: inline-block; left: 0.5rem;
border-radius: 0.125rem; bottom: 0.5rem;
width: 40px;
height: 40px;
border-radius: 50%;
@include flexbox();
@include align-items(center);
@include justify-content(center);
@include themify($themes) { @include themify($themes) {
border: 1px solid themed('dropdown-border-color'); color: themed('gtt-color');
background-color: themed('gtt-background-color');
@include on-event {
color: themed('gtt-hover-color');
background-color: themed('gtt-hover-background-color');
}
} }
&-trigger { &-trigger {
border-radius: 50%;
cursor: pointer;
border: none; border: none;
border-radius: 0.15rem; width: 100%;
height: 100%;
@include flexbox(); color: inherit;
@include align-items(center); background-color: inherit;
@include justify-content(center);
@include themify($themes) {
color: themed('dropdown-footer-item-color');
background-color: themed('dropdown-title-background-color');
}
} }
&-content { &-content {
@ -84,7 +77,6 @@
bottom: 100%; bottom: 100%;
left: 0; left: 0;
display: none; display: none;
width: inherit;
height: auto; height: auto;
z-index: z("dropdown"); z-index: z("dropdown");
border-top-left-radius: 0.15rem; border-top-left-radius: 0.15rem;
@ -102,8 +94,8 @@
.is-active { .is-active {
@include themify($themes) { @include themify($themes) {
background-color: themed("dropdown-item-active-background-color"); background-color: themed("dropdown-item-active-background-color");
} }
} }
} }
@ -160,6 +152,7 @@
} }
.social { .social {
margin: 0.25rem;
a { a {
@include themify($themes) { @include themify($themes) {
text-decoration: none; text-decoration: none;

203
assets/sass/layout/_navigation.scss
View File

@ -45,12 +45,13 @@
display: none; display: none;
position: relative; position: relative;
@include animation('slide-in-down .5s .0s 1 ease both');
@include respond-to(sm) { @include respond-to(sm) {
cursor: pointer; cursor: pointer;
margin-left: auto; margin-left: auto;
position: relative; position: relative;
height: $grid_navbar_height; height: $grid_navbar_height;
width: $grid_navbar_height; width: 35px;
@include flexbox(); @include flexbox();
@include align-items(center); @include align-items(center);
@ -145,7 +146,6 @@
@include align-items(center); @include align-items(center);
@include justify-content(flex-end); @include justify-content(flex-end);
height: $grid_navbar_height; height: $grid_navbar_height;
position: relative;
@include respond-to(sm) { @include respond-to(sm) {
display: none; display: none;
@ -172,7 +172,6 @@
@include respond-to(sm) { @include respond-to(sm) {
border-bottom: none; border-bottom: none;
} }
} }
&.active { &.active {
color: themed('navbar-title-active-color') !important; color: themed('navbar-title-active-color') !important;
@ -246,12 +245,6 @@
display: block; display: block;
font-size: 1rem; font-size: 1rem;
// @for $i from 1 through 4 {
// &:nth-child(#{$i}) {
// @include animation('slide-in-down .25s #{$i * .1}s 1 ease both');
// }
// }
@include themify($themes) { @include themify($themes) {
color: themed("dropdown-item-color"); color: themed("dropdown-item-color");
@include on-event { @include on-event {
@ -276,3 +269,195 @@
.navbar__dropdown:hover .navbar__dropdown--content { .navbar__dropdown:hover .navbar__dropdown--content {
display: block; display: block;
} }
.theme {
@include flexbox();
@include align-items(center);
@include justify-content(flex-end);
@include animation('slide-in-down .5s .0s 1 ease both');
@include respond-to(sm) {
display: none;
}
.dropdown {
@include flexbox();
@include align-items(center);
@include justify-content(center);
@include themify($themes) {
color: themed('burger-menu-color');
@include on-event {
color: themed('navbar-title-hover-color');
background-color: themed('navbar-menu-hover-background-color');
border-bottom: 1px solid themed('navbar-border-bottom-color');
}
}
&-trigger {
padding: 0.5rem;
cursor: pointer;
border: none;
outline: none;
width: $grid_navbar_height;
height: $grid_navbar_height;
color: inherit;
background-color: inherit;
}
&-content {
position: absolute;
top: 100%;
right: 0;
display: none;
height: auto;
z-index: z("dropdown");
border-top-left-radius: 0.15rem;
border-top-right-radius: 0.15rem;
a {
font-size: 0.9rem;
}
@include box-shadow(0, 1px, 3px, 0, rgba(0, 0, 0, 0.4));
@include themify($themes) {
border-top: 4px solid themed("dropdown-border-top-color");
background-color: themed("dropdown-content-background-color");
}
.is-active {
@include themify($themes) {
background-color: themed("dropdown-item-active-background-color");
}
}
}
&-item {
padding: 0.25rem 0.75rem;
height: 100%;
text-decoration: none;
display: block;
font-size: 1rem;
@include themify($themes) {
color: themed("dropdown-item-color");
@include on-event {
color: themed("dropdown-item-hover-color");
background-color: themed("dropdown-item-hover-background-color");
text-decoration: none;
&:first-child {
border-top-left-radius: 0.15rem;
border-top-right-radius: 0.15rem;
}
}
}
}
}
.dropdown:hover .dropdown-content {
display: block;
}
}
.theme-mobile {
display: none;
outline: none;
position: absolute;
top: 0;
right: 35px * 2;
width: 35px;
height: $grid_navbar_height;
padding: 0.25rem;
cursor: pointer;
z-index: z('modal');
@include animation('slide-in-down .5s .4s 1 ease both');
@include themify($themes) {
color: themed('burger-menu-color');
@include on-event {
color: themed('link-hover');
background-color: inherit;
border-bottom: none;
}
}
@include respond-to(sm) {
@include flexbox();
@include align-items(center);
@include justify-content(flex-end);
}
.dropdown {
@include themify($themes) {
color: themed('burger-menu-color');
@include on-event {
color: themed('link-hover');
background-color: inherit;
border-bottom: none;
}
}
&-trigger {
padding: 0.25rem;
cursor: pointer;
border: none;
outline: none;
width: 35px;
height: $grid_navbar_height;
color: inherit;
background-color: inherit;
}
&-content {
position: absolute;
top: 100%;
right: 0;
display: none;
height: auto;
z-index: z("dropdown");
border-top-left-radius: 0.15rem;
border-top-right-radius: 0.15rem;
a {
font-size: 0.9rem;
}
@include box-shadow(0, 1px, 3px, 0, rgba(0, 0, 0, 0.4));
@include themify($themes) {
border-top: 4px solid themed("dropdown-border-top-color");
background-color: themed("dropdown-content-background-color");
}
.is-active {
@include themify($themes) {
background-color: themed("dropdown-item-active-background-color");
}
}
}
&-item {
padding: 0.25rem 0.75rem;
height: 100%;
text-decoration: none;
display: block;
font-size: 1rem;
@include themify($themes) {
color: themed("dropdown-item-color");
@include on-event {
color: themed("dropdown-item-hover-color");
background-color: themed("dropdown-item-hover-background-color");
text-decoration: none;
&:first-child {
border-top-left-radius: 0.15rem;
border-top-right-radius: 0.15rem;
}
}
}
}
}
.dropdown:hover .dropdown-content {
display: block;
}
}

2
exampleSite/config/_default/params.toml
View File

@ -45,7 +45,7 @@ showFeedLinks = true
showSocialLinks = true showSocialLinks = true
enableLangChange = true enableLangChange = true
enableThemeChange = true enableThemeChange = true
themeOptions = ["dark", "light", "hacker", "solarized", "custom"] themeOptions = ["dark", "light", "hacker", "solarized"]
# comment # comment
enableComment = true enableComment = true

2
exampleSite/resources/_gen/assets/scss/sass/main.scss_e680761d791774b6351b18d537b957bb.content
View File

File diff suppressed because one or more lines are too long

2
layouts/partials/footer/go-to-top.html
View File

@ -1,7 +1,7 @@
{{ if $.Param "enableGoToTop" }} {{ if $.Param "enableGoToTop" }}
<div id="gtt"> <div id="gtt">
<div class="gtt"> <div class="gtt">
{{ partial "svgs/arrow/keyboard-arrow-up.svg" (dict "width" 25 "height" 25) }} {{ partial "svgs/arrow/keyboard-arrow-up.svg" (dict "width" 32 "height" 32) }}
</div> </div>
</div> </div>

1
layouts/partials/footer/links-social.html
View File

@ -1,6 +1,5 @@
{{ if $.Param "showSocialLinks" }} {{ if $.Param "showSocialLinks" }}
<div class="footer__social"> <div class="footer__social">
<label class="label p2">{{ i18n "footer-social" }}</label>
<div class="social"> <div class="social">
{{ range $name, $path := $.Param "socialOptions" }} {{ range $name, $path := $.Param "socialOptions" }}
{{ if $path }} {{ if $path }}

38
layouts/partials/footer/select-lang.html
View File

@ -1,28 +1,24 @@
{{ if $.Param "enableLangChange" }} {{ if $.Param "enableLangChange" }}
<div class="footer__lang"> <div class="dropdown">
<label class="label p2">{{ i18n "footer-language" }}</label> <button class="dropdown-trigger">
<div class="dropdown"> {{ partial "svgs/etc/translate.svg" (dict "width" 24 "height" 24) }}
<button class="dropdown-trigger"> </button>
<span class="select-lang__label caption">{{ .Site.Language.LanguageName }}</span> <div class="dropdown-content">
{{ partial "svgs/arrow/keyboard-arrow-up.svg" (dict "width" 20 "height" 20) }} {{ $siteLanguages := .Site.Languages}}
</button> {{ $pageLang := .Page.Lang}}
<div class="dropdown-content"> {{ range .Page.AllTranslations }}
{{ $siteLanguages := .Site.Languages}} {{ $translation := .}}
{{ $pageLang := .Page.Lang}} {{ range $siteLanguages }}
{{ range .Page.AllTranslations }} {{ if eq $translation.Lang .Lang }}
{{ $translation := .}} {{ $selected := false }}
{{ range $siteLanguages }} {{ if eq $pageLang .Lang}}
{{ if eq $translation.Lang .Lang }} <a href="{{ $translation.Permalink }}" data-lang="{{ .Lang }}" class="dropdown-item is-active">{{ .LanguageName }}</a>
{{ $selected := false }} {{ else }}
{{ if eq $pageLang .Lang}} <a href="{{ $translation.Permalink }}" data-lang="{{ .Lang }}" class="dropdown-item">{{ .LanguageName }}</a>
<a href="{{ $translation.Permalink }}" data-lang="{{ .Lang }}" class="dropdown-item is-active">{{ .LanguageName }}</a>
{{ else }}
<a href="{{ $translation.Permalink }}" data-lang="{{ .Lang }}" class="dropdown-item">{{ .LanguageName }}</a>
{{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> {{ end }}
</div> </div>
</div> </div>
{{ end }} {{ end }}

67
layouts/partials/footer/select-theme.html
View File

@ -1,67 +0,0 @@
{{ if $.Param "enableThemeChange" }}
<div class="footer__theme">
<label class="label p2">{{ i18n "footer-theme" }}</label>
<div class="dropdown">
<button class="dropdown-trigger">
<span class="select-theme__label caption">
{{ if .Site.Params.themeOptions }}
{{ index .Site.Params.themeOptions 0 }}
{{ end }}
</span>
{{ partial "svgs/arrow/keyboard-arrow-up.svg" (dict "width" 20 "height" 20) }}
</button>
<div class="dropdown-content select-theme">
{{ if .Site.Params.themeOptions }}
{{ range $index, $value := .Site.Params.themeOptions }}
<a href="#" class="dropdown-item select-theme__item {{ if (eq $index 0) }}is-active{{ end }}">
{{ . }}
</a>
{{ end }}
{{ end }}
</div>
</div>
</div>
{{ end }}
<script>
// theme change
var localTheme = localStorage.getItem('theme');
if (localTheme) {
$('.select-theme__label').text(localTheme);
$('.select-theme__item').each(function() {
$(this).removeClass('is-active');
});
$(`.select-theme a:contains("${localTheme}")`).addClass('is-active');
}
$('.select-theme__item').click(function (e) {
var selectedThemeVariant = $(e.target).text().trim();
var currentThemeVariant = $('.select-theme__label').text().trim();
localStorage.setItem('theme', selectedThemeVariant);
$('.select-theme__label').text(selectedThemeVariant);
$('#root').removeClass(`theme__${currentThemeVariant}`).addClass(`theme__${selectedThemeVariant}`);
var nodes = $('.select-theme').children('.dropdown-item');
nodes.each(function () {
if ($(this).text().trim() === selectedThemeVariant) {
if (!$(this).hasClass('is-active')) {
$(this).addClass('is-active');
}
} else {
if ($(this).hasClass('is-active')) {
$(this).removeClass('is-active');
}
}
});
if (window.mermaid) {
if (selectedThemeVariant === "dark" || selectedThemeVariant === "hacker") {
mermaid.initialize({ theme: 'dark' });
location.reload();
} else {
mermaid.initialize({ theme: 'default' });
location.reload();
}
}
});
</script>

1
layouts/partials/footer/site-footer.html
View File

@ -1,6 +1,5 @@
<footer class="footer"> <footer class="footer">
<div class="footer__wrapper"> <div class="footer__wrapper">
{{ partial "footer/select-theme" . }}
{{ partial "footer/select-lang" . }} {{ partial "footer/select-lang" . }}
{{ partial "footer/links-social.html" . }} {{ partial "footer/links-social.html" . }}
</div> </div>

18
layouts/partials/navbar/select-theme-mobile.html Normal file
View File

@ -0,0 +1,18 @@
{{ if $.Param "enableThemeChange" }}
<div class="theme-mobile">
<div class="dropdown">
<button class="dropdown-trigger navbar__slide-down">
{{ partial "svgs/etc/invert-colors.svg" (dict "width" 22 "height" 22) }}
</button>
<div class="dropdown-content select-theme">
{{ if .Site.Params.themeOptions }}
{{ range $index, $value := .Site.Params.themeOptions }}
<a href="#" class="dropdown-item select-theme__item {{ if (eq $index 0) }}is-active{{ end }}">
{{ . }}
</a>
{{ end }}
{{ end }}
</div>
</div>
</div>
{{ end }}

18
layouts/partials/navbar/select-theme.html Normal file
View File

@ -0,0 +1,18 @@
{{ if $.Param "enableThemeChange" }}
<div class="theme">
<div class="dropdown">
<button class="dropdown-trigger navbar__slide-down">
{{ partial "svgs/etc/invert-colors.svg" (dict "width" 22 "height" 22) }}
</button>
<div class="dropdown-content select-theme">
{{ if .Site.Params.themeOptions }}
{{ range $index, $value := .Site.Params.themeOptions }}
<a href="#" class="dropdown-item select-theme__item {{ if (eq $index 0) }}is-active{{ end }}">
{{ . }}
</a>
{{ end }}
{{ end }}
</div>
</div>
</div>
{{ end }}

50
layouts/partials/navbar/site-nav.html
View File

@ -9,13 +9,18 @@
<h6 class="navbar__title">{{ .Site.Params.logoText }}</h6> <h6 class="navbar__title">{{ .Site.Params.logoText }}</h6>
</a> </a>
</div> </div>
{{ partial "navbar/select-theme-mobile" . }}
{{ partial "navbar/site-search-mobile" . }} {{ partial "navbar/site-search-mobile" . }}
<a role="button" class="navbar__burger" aria-label="menu" aria-expanded="false"> <a role="button" class="navbar__burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
</a> </a>
<div class="navbar__menu"> <div class="navbar__menu">
{{ partial "navbar/select-theme" . }}
{{ range .Site.Menus.main -}} {{ range .Site.Menus.main -}}
{{ if .HasChildren }} {{ if .HasChildren }}
<div class="navbar__dropdown navbar__slide-down"> <div class="navbar__dropdown navbar__slide-down">
@ -37,3 +42,48 @@
{{ end }} {{ end }}
</div> </div>
</nav> </nav>
<script>
// theme change
var localTheme = localStorage.getItem('theme');
if (localTheme) {
$('.select-theme__item').each(function() {
$(this).removeClass('is-active');
});
$(`.select-theme a:contains("${localTheme}")`).addClass('is-active');
}
$('.select-theme__item').click(function (e) {
var selectedThemeVariant = $(e.target).text().trim();
localStorage.setItem('theme', selectedThemeVariant);
if ($(this).attr('class').trim() === selectedThemeVariant) {
return null;
}
$('#root').removeAttr('class').addClass(`theme__${selectedThemeVariant}`);
var nodes = $('.select-theme').children('.dropdown-item');
nodes.each(function () {
if ($(this).text().trim() === selectedThemeVariant) {
if (!$(this).hasClass('is-active')) {
$(this).addClass('is-active');
}
} else {
if ($(this).hasClass('is-active')) {
$(this).removeClass('is-active');
}
}
});
if (window.mermaid) {
if (selectedThemeVariant === "dark" || selectedThemeVariant === "hacker") {
mermaid.initialize({ theme: 'dark' });
location.reload();
} else {
mermaid.initialize({ theme: 'default' });
location.reload();
}
}
});
</script>

1
layouts/partials/svgs/etc/invert-colors.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentColor" d="M6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19 0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41 0L6.34 7.93zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 438 B

2
resources/_gen/assets/scss/sass/main.scss_e680761d791774b6351b18d537b957bb.content
View File

File diff suppressed because one or more lines are too long