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

48
assets/sass/components/_gtt.scss
View File

@ -1,25 +1,25 @@
.gtt {
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
@include flexbox();
@include align-items(center);
@include justify-content(center);
@include themify($themes) {
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');
}
}
@include respond-to(sm) {
position: fixed;
}
.gtt {
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
@include flexbox();
@include align-items(center);
@include justify-content(center);
@include themify($themes) {
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');
}
}
@include respond-to(sm) {
position: fixed;
}
}

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

@ -184,18 +184,19 @@
&__btn {
position: absolute;
top: 0;
right: $grid_navbar_height;
width: $grid_navbar_height;
right: 35px;
width: 35px;
height: $grid_navbar_height;
padding: 0.25rem;
cursor: pointer;
display: none;
z-index: z('search-btn');
@include animation('slide-in-down .5s .25s 1 ease both');
@include respond-to(sm) {
@include flexbox();
@include align-items(center);
@include justify-content(flex-end);
@include justify-content(center);
}
@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 {
padding: 0.5rem 0;
@include flex-grow(1);
@ -59,24 +43,33 @@
}
.dropdown {
position: relative;
display: inline-block;
border-radius: 0.125rem;
position: absolute;
left: 0.5rem;
bottom: 0.5rem;
width: 40px;
height: 40px;
border-radius: 50%;
@include flexbox();
@include align-items(center);
@include justify-content(center);
@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 {
border-radius: 50%;
cursor: pointer;
border: none;
border-radius: 0.15rem;
@include flexbox();
@include align-items(center);
@include justify-content(center);
@include themify($themes) {
color: themed('dropdown-footer-item-color');
background-color: themed('dropdown-title-background-color');
}
width: 100%;
height: 100%;
color: inherit;
background-color: inherit;
}
&-content {
@ -84,7 +77,6 @@
bottom: 100%;
left: 0;
display: none;
width: inherit;
height: auto;
z-index: z("dropdown");
border-top-left-radius: 0.15rem;
@ -102,8 +94,8 @@
.is-active {
@include themify($themes) {
background-color: themed("dropdown-item-active-background-color");
}
background-color: themed("dropdown-item-active-background-color");
}
}
}
@ -160,6 +152,7 @@
}
.social {
margin: 0.25rem;
a {
@include themify($themes) {
text-decoration: none;

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

@ -45,12 +45,13 @@
display: none;
position: relative;
@include animation('slide-in-down .5s .0s 1 ease both');
@include respond-to(sm) {
cursor: pointer;
margin-left: auto;
position: relative;
height: $grid_navbar_height;
width: $grid_navbar_height;
width: 35px;
@include flexbox();
@include align-items(center);
@ -145,7 +146,6 @@
@include align-items(center);
@include justify-content(flex-end);
height: $grid_navbar_height;
position: relative;
@include respond-to(sm) {
display: none;
@ -172,7 +172,6 @@
@include respond-to(sm) {
border-bottom: none;
}
}
&.active {
color: themed('navbar-title-active-color') !important;
@ -246,12 +245,6 @@
display: block;
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) {
color: themed("dropdown-item-color");
@include on-event {
@ -276,3 +269,195 @@
.navbar__dropdown:hover .navbar__dropdown--content {
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
enableLangChange = true
enableThemeChange = true
themeOptions = ["dark", "light", "hacker", "solarized", "custom"]
themeOptions = ["dark", "light", "hacker", "solarized"]
# comment
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" }}
<div id="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>

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

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

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

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

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

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

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

@ -9,13 +9,18 @@
<h6 class="navbar__title">{{ .Site.Params.logoText }}</h6>
</a>
</div>
{{ partial "navbar/select-theme-mobile" . }}
{{ partial "navbar/site-search-mobile" . }}
<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>
</a>
<div class="navbar__menu">
</a>
<div class="navbar__menu">
{{ partial "navbar/select-theme" . }}
{{ range .Site.Menus.main -}}
{{ if .HasChildren }}
<div class="navbar__dropdown navbar__slide-down">
@ -37,3 +42,48 @@
{{ end }}
</div>
</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