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

whoami ui edited, mobile gtt, site-header edited, logoText, itemsPerCategory added

This commit is contained in:
zzossig 2019-11-11 12:11:03 +09:00
parent 34dc110dbc
commit 8f40a67b67
18 changed files with 98 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@ -1,8 +1,6 @@
# Zzo theme for Hugo
**Zzo** is a blog theme for Hugo with many features.
It uses HTML5 with a modern CSS grid and flex layout. Recent versions of all the mayor browsers support it, see [Can I use css grid](http://caniuse.com/#search=grid).
Thank you for click this theme. Zzo theme is free(always), and has many features. If you find any bugs, or wanna share your custom color skin, or have some good idea to share with me and others that use this theme, feel free to open [github](https://github.com/zzossig/hugo-theme-zzo/issues) issue or pull request so that I can make this theme better.
## Table of contents
@ -57,7 +55,6 @@ Zzo theme is using this library.
* jquery@3.4.1
* mark.js
* clipboard.js
* fetch-inject
* lazysizes
* masonry
* lunr
@ -65,7 +62,6 @@ Zzo theme is using this library.
* photoswipe
* prism
* shave.js
* perfect-scrollbar
## Minimum Hugo version
@ -218,6 +214,7 @@ You shoud make your own menu.
5. params.toml
```bash
logoText = "Zzo"
description = "The Zzo theme for Hugo example site."
custom_css = ["css/custom.css", "css/custom.css"]
custom_js = ["js/custom.js"]
@ -237,6 +234,7 @@ enableWhoami = true
enableSidebarTags = true
enableSidebarSeries = true
enableSidebarCategories = true
itemsPerCategory = 5
# comment
enableComment = false
@ -404,6 +402,8 @@ other = "태그"
## Customizing
It's better idea not to modify zzo theme's folder if you wanna future support and upgrade. (You can modify if it doesn't matter) If you want more customizing options, open an issue.
### custom css
1. Add this line of code to your params.toml file
@ -481,6 +481,21 @@ themeOptions = ["custom", "dark", ...]
4. Once you change the font.toml file, restart hugo.
### custom header
You may want to change home page header. To do this, just make a file at layouts/partials/header/site-header.html
and edit this file. Don't forget adding grid class. That's it.
```bash
{{ if .IsHome }}
<header class="header">
...
Your custom header here.
...
</header>
{{ end }}
```
## Shortcodes
### warning

2
assets/css/perfect-scrollbar.min.css vendored
View File

@ -1,2 +0,0 @@
/* perfect-scrollbar v0.6.14 */
.ps-container{-ms-touch-action:auto;touch-action:auto;overflow:hidden !important;-ms-overflow-style:none}@supports (-ms-overflow-style: none){.ps-container{overflow:auto !important}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.ps-container{overflow:auto !important}}.ps-container.ps-active-x>.ps-scrollbar-x-rail,.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block;background-color:transparent}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{background-color:#eee;opacity:.9}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#999;height:11px}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{background-color:#eee;opacity:.9}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#999;width:11px}.ps-container>.ps-scrollbar-x-rail{display:none;position:absolute;opacity:0;-webkit-transition:background-color .2s linear, opacity .2s linear;-o-transition:background-color .2s linear, opacity .2s linear;-moz-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;bottom:0px;height:15px}.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x{position:absolute;background-color:#aaa;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;-o-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;-moz-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;bottom:2px;height:6px}.ps-container>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x,.ps-container>.ps-scrollbar-x-rail:active>.ps-scrollbar-x{height:11px}.ps-container>.ps-scrollbar-y-rail{display:none;position:absolute;opacity:0;-webkit-transition:background-color .2s linear, opacity .2s linear;-o-transition:background-color .2s linear, opacity .2s linear;-moz-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;right:0;width:15px}.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{position:absolute;background-color:#aaa;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;-o-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;-moz-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;right:2px;width:6px}.ps-container>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y,.ps-container>.ps-scrollbar-y-rail:active>.ps-scrollbar-y{width:11px}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{background-color:#eee;opacity:.9}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#999;height:11px}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{background-color:#eee;opacity:.9}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#999;width:11px}.ps-container:hover>.ps-scrollbar-x-rail,.ps-container:hover>.ps-scrollbar-y-rail{opacity:.6}.ps-container:hover>.ps-scrollbar-x-rail:hover{background-color:#eee;opacity:.9}.ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#999}.ps-container:hover>.ps-scrollbar-y-rail:hover{background-color:#eee;opacity:.9}.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#999}

21
assets/js/zzo.js
View File

@ -23,8 +23,8 @@ $(document).ready(function() {
navbar.removeClass('navbar--show');
}
if (scroll > 500 && gtt.hasClass('hide')) {
gtt.removeClass('hide');
if (scroll > 500) {
gtt.show(200);
}
$(".single__contents :header").each(function () {
@ -47,8 +47,8 @@ $(document).ready(function() {
navbar.addClass('navbar--show');
}
if (scroll < 500 && !gtt.hasClass('hide')) {
gtt.addClass('hide');
if (scroll < 500) {
gtt.hide(200);
}
$(".single__contents :header").each(function () {
@ -72,7 +72,7 @@ $(document).ready(function() {
enquire.register("screen and (max-width: 769px)", {
match: function () {
$('main').removeClass('main-main').removeClass('main').addClass('main');
$('aside').removeClass('main-side').removeClass('hide').addClass('hide');
$('aside').removeClass('main-side').removeClass('hide').addClass('hide');
},
unmatch: function () {
if ($('aside').length > 0) {
@ -85,12 +85,13 @@ $(document).ready(function() {
setup: function () { },
deferSetup: true,
destroy: function () { },
}).register("screen and (max-width: 1120px)", {
match: function () {
$('#gtt').removeClass('hide').addClass('hide');
})
enquire.register("screen and (min-width: 1120px)", {
match: function () {
$('#gtt').show(200);
},
unmatch: function () {
$('#gtt').removeClass('hide');
unmatch: function () {
$('#gtt').hide(200);
},
setup: function () { },
deferSetup: true,

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

@ -1,7 +1,7 @@
.gtt {
position: fixed;
right: 1rem;
bottom: 1rem;
right: 0.5rem;
bottom: 0.5rem;
width: 40px;
height: 40px;
border-radius: 50%;

2
assets/sass/components/_taxo.scss
View File

@ -1,6 +1,6 @@
.taxo {
padding: 0.25rem;
margin: 1.5rem 0;
margin: 2.5rem 0;
&__title {
font-weight: 700;

11
assets/sass/components/_whoami.scss
View File

@ -2,15 +2,12 @@
padding: 1rem;
margin: 4rem 0;
border-radius: 0.25rem;
@include flexbox();
@include themify($themes) {
border: 2px dashed themed('whoami-border-color');
}
@include flexbox();
&__image {
width: 100%;
height: 100%;
object-fit: contain;
object-fit: contain;
&-wrapper {
border-radius: 50%;
@ -24,6 +21,10 @@
&__title {
font-weight: 700;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
@include themify($themes) {
border-bottom: 2px dashed themed('whoami-border-color');
}
}
&__desc {

23
assets/sass/layout/_header.scss
View File

@ -1,12 +1,33 @@
.header {
padding: 1rem;
@include flexbox();
@include align-items(center);
@include justify-content(center);
@include flex-direction(column);
margin: 1rem;
.title {
font-family: $header_title_font;
font-weight: 900;
}
&__whoami {
@include flexbox();
@include flex-direction(column);
@include align-items(center);
width: 100%;
&--image {
max-width: 64px;
max-height: 64px;
}
&--name {
}
&--desc {
margin: 0.25rem 0;
}
}
}

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

@ -116,12 +116,16 @@
&__title {
height: $nav-height;
@include flexbox();
@include align-items(center);
@include align-items(center);
&-link {
@include themify($themes) {
color: themed("navbar-title-color");
}
@include on-event {
text-decoration: none;
color: themed("navbar-title-color");
}
}
}
}

4
assets/sass/themes/_hacker.scss
View File

@ -91,8 +91,8 @@ $hacker: (
archive-type-background-color: #855E78,
archive-hover-line-color: #FF6188,
gtt-color: #9e9e9e,
gtt-background-color: #403e41,
gtt-background-color: #252526,
gtt-hover-color: #E3CD26,
gtt-hover-background-color: lighten(#403e41, 5%),
gtt-hover-background-color: lighten(#252526, 5%),
whoami-border-color: #996287,
);

4
assets/sass/themes/_light.scss
View File

@ -88,8 +88,8 @@ $light: (
archive-type-background-color: #bdbdbd,
archive-hover-line-color: #FF6188,
gtt-color: #424242,
gtt-background-color: #FCFCFA,
gtt-background-color: #eeeeee,
gtt-hover-color: #607d8b,
gtt-hover-background-color: darken(#FCFCFA, 5%),
gtt-hover-background-color: darken(#eeeeee, 10%),
whoami-border-color: #607d8b,
);

4
assets/sass/themes/_solarized.scss
View File

@ -91,8 +91,8 @@ $solarized: (
archive-type-background-color: $secondary-color,
archive-hover-line-color: #FF6188,
gtt-color: $secondary-color,
gtt-background-color: #FBF1D1,
gtt-background-color: #EEE8D5,
gtt-hover-color: $primary-color,
gtt-hover-background-color: darken(#FBF1D1, 5%),
gtt-hover-background-color: darken(#EEE8D5, 5%),
whoami-border-color: $primary-color,
);

6
data/_config/_default/params.toml
View File

@ -1,6 +1,9 @@
logoText = "Zzo"
description = "The Zzo theme for Hugo example site."
custom_css = ["css/custom.css", "scss/custom.scss"]
custom_js = ["js/custom.js"]
myname = "zzossig"
whoami = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet cursus massa. Vestibulum eu posuere est. Suspendisse erat purus, mollis in leo quis, hendrerit fringilla felis."
# body
enableToc = true
@ -8,11 +11,14 @@ enableBreadcrumb = true
enablePhotoSwipe = true
enableSearch = true
enableMark = true
enableGoToTop = true
enableWhoami = true
# sidebar
enableSidebarTags = true
enableSidebarSeries = true
enableSidebarCategories = true
itemsPerCategory = 5
# footer
showPoweredBy = true

2
exampleSite/config.toml
View File

@ -24,6 +24,7 @@ rssLimit = 100
series = "series"
[params]
logoText = "Zzo"
description = "The Zzo theme for Hugo example site."
custom_css = ["css/custom.css", "scss/custom.scss"]
custom_js = ["js/custom.js"]
@ -43,6 +44,7 @@ rssLimit = 100
enableSidebarTags = true
enableSidebarSeries = true
enableSidebarCategories = true
itemsPerCategory = 5
# footer
showPoweredBy = 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

12
layouts/partials/header/site-header.html
View File

@ -1,5 +1,13 @@
{{ if .IsHome }}
<header class="header">
<h1 class="h1 title">{{ .Site.Title }}</h1>
<header class="header">
<div class="header__whoami">
<img src="{{ "/images/whoami/photo.png" | relURL }}" alt="{{ .Site.Params.myname }}" class="header__whoami--image">
<div class="header__whoami--name h6">
Hi, I'm {{ .Site.Params.myname }}
</div>
<div class="header__whoami--desc p2">
</div>
</div>
</header>
{{ end }}

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

@ -2,11 +2,11 @@
<div class="navbar__brand">
{{ if $.Param "logo" | default true }}
<a href="{{ "/" | relLangURL }}" title="Home" rel="home" class="navbar__logo-link">
<img data-src="{{ "/logo.png" | relURL }}" alt="Home" class="lazyload navbar__logo">
<img src="{{ "/logo.png" | relURL }}" alt="Home" class="navbar__logo">
</a>
{{ end }}
<a href="{{ "/" | relLangURL }}" title="Home" rel="home" class="navbar__title-link">
<h6 class="navbar__title h6">{{ .Site.Title }}</h6>
<h6 class="navbar__title h6">{{ .Site.Params.logoText }}</h6>
</a>
</div>
<a role="button" class="navbar__burger" aria-label="menu" aria-expanded="false">

2
layouts/partials/sidebar/sidebar-home.html
View File

@ -7,7 +7,7 @@
<section class="sidebar-home">
<a href="{{ .RelPermalink }}" class="sidebar-home__title p2">{{ .Title }}</a>
<ul class="sidebar-home__ul">
{{ range .Pages }}
{{ range first .Site.Params.itemsPerCategory .Pages }}
<li><a href="{{ .RelPermalink }}" class="sidebar-home__a p2">{{ .Title }}</a>
</li>
{{ end }}

1
static/css/images/clippy.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="#9e9e9e" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 289 B