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

better theme color, shortcode update, expand redesign, gallery mask redesign, utterances better theme support

This commit is contained in:
zzossig 2020-01-09 02:58:15 +09:00
parent a94fecf221
commit 4f730fee5d
23 changed files with 202 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
README.ko.md
View File

@ -27,7 +27,7 @@ Zzo theme을 이용할 시 가장 매력적인 포인트 한가지는, 한글로
## Features ## Features
* 다양한 스킨 지원(dark, light, solarized, hacker) * 다양한 스킨 지원(dark, light, solarized, ...)
* 모바일 메뉴 * 모바일 메뉴
* 최신 HTML5, CSS 기술 이용 * 최신 HTML5, CSS 기술 이용
* 심플한 블로그 * 심플한 블로그
@ -222,7 +222,7 @@ description = "The Zzo theme for Hugo example site." # for SEO
custom_css = [] # custom_css = ["scss/custom.scss"] and then make file at root/assets/scss/custom.scss custom_css = [] # custom_css = ["scss/custom.scss"] and then make file at root/assets/scss/custom.scss
custom_js = [] # custom_js = ["js/custom.js"] and then make file at root/assets/js/custom.js custom_js = [] # custom_js = ["js/custom.js"] and then make file at root/assets/js/custom.js
themeOptions = ["dark", "light", "hacker", "solarized"] # select options for site color theme themeOptions = ["dark", "light", "hacker", "solarized", "kimbie"] # select options for site color theme
notAllowedTypesInHome = ["contact", "talks", "about"] # not allowed page types in home page. type can be set in front matter or default to folder name. notAllowedTypesInHome = ["contact", "talks", "about"] # not allowed page types in home page. type can be set in front matter or default to folder name.
# header # header
@ -424,9 +424,9 @@ series:
categories: categories:
- -
images: # when mode is one-by-one, images front-matter variable works images: # when mode is one-by-one, images front-matter variable works
- image: image1.jpg - image: image1.jpg # image path: static/gallery/anygalleryname/image1.jpg
caption: caption1 caption: caption1
- image: image2.jpg - image: image2.jpg # image path: static/gallery/anygalleryname/image2.jpg
caption: caption2 caption: caption2
... ...
--- ---
@ -954,34 +954,33 @@ libraries:
## Shortcodes ## Shortcodes
### warning ### alert
```bash ```bash
{{% alert theme="info" %}}**this** is a text{{% /alert %}} {{< alert theme="warning" >}} # warning, success, info, danger
{{% alert theme="success" %}}**Yeahhh !** is a text{{% /alert %}} **this** is a text
{{% alert theme="warning" %}}**Be carefull** is a text{{% /alert %}} {{< /alert >}}
{{% alert theme="danger" %}}**Beware !** is a text{{% /alert %}}
``` ```
### expand ### expand
```bash ```bash
{{%expand "Expand me" %}}Good job{{% /expand%}} {{< expand "Expand me" >}}Some Markdown Contents{{< /expand >}}
``` ```
### img ### img
```bash ```bash
// path: static/images/whoami/avatar.jpg, you can set width, height also // path: static/images/whoami/avatar.jpg
{{< img src="/images/whoami/avatar.jpg" title="Image4" caption="Image description" alt="image alt" >}} {{< img src="/images/whoami/avatar.jpg" title="Image4" caption="Image description" alt="image alt" width="50px" height="50px">}}
``` ```
### notice ### notice
```bash ```bash
{{% notice note %}} # note, info, tip, warning {{< notice note >}} # note, info, tip, warning
A notice disclaimer A notice disclaimer
{{% /notice %}} {{< /notice >}}
``` ```
### color ### color

27
README.md
View File

@ -27,7 +27,7 @@ Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(alw
## Features ## Features
* Multiple Skins(dark, light, solarized, hacker) * Multiple Skins(dark, light, solarized, ...)
* A mobile menu * A mobile menu
* CSS grid and flex for layout * CSS grid and flex for layout
* HTML5 * HTML5
@ -216,7 +216,7 @@ description = "The Zzo theme for Hugo example site." # for SEO
custom_css = [] # custom_css = ["scss/custom.scss"] and then make file at root/assets/scss/custom.scss custom_css = [] # custom_css = ["scss/custom.scss"] and then make file at root/assets/scss/custom.scss
custom_js = [] # custom_js = ["js/custom.js"] and then make file at root/assets/js/custom.js custom_js = [] # custom_js = ["js/custom.js"] and then make file at root/assets/js/custom.js
themeOptions = ["dark", "light", "hacker", "solarized"] # select options for site color theme themeOptions = ["dark", "light", "hacker", "solarized", "kimbie"] # select options for site color theme
notAllowedTypesInHome = ["contact", "talks", "about"] # not allowed page types in home page. type can be set in front matter or default to folder name. notAllowedTypesInHome = ["contact", "talks", "about"] # not allowed page types in home page. type can be set in front matter or default to folder name.
# header # header
@ -420,9 +420,9 @@ series:
categories: categories:
- -
images: # when mode is one-by-one, images front-matter variable works images: # when mode is one-by-one, images front-matter variable works
- image: image1.jpg - image: image1.jpg # image path: static/gallery/anygalleryname/image1.jpg
caption: caption1 caption: caption1
- image: image2.jpg - image: image2.jpg # image path: static/gallery/anygalleryname/image2.jpg
caption: caption2 caption: caption2
... ...
--- ---
@ -953,34 +953,33 @@ You can add some config option parameters at data/flowchartjs.json
## Shortcodes ## Shortcodes
### warning ### alert
```bash ```bash
{{% alert theme="info" %}}**this** is a text{{% /alert %}} {{< alert theme="warning" >}} # warning, success, info, danger
{{% alert theme="success" %}}**Yeahhh !** is a text{{% /alert %}} **this** is a text
{{% alert theme="warning" %}}**Be carefull** is a text{{% /alert %}} {{< /alert >}}
{{% alert theme="danger" %}}**Beware !** is a text{{% /alert %}}
``` ```
### expand ### expand
```bash ```bash
{{%expand "Expand me" %}}Good job{{% /expand%}} {{< expand "Expand me" >}}Some Markdown Contents{{< /expand >}}
``` ```
### img ### img
```bash ```bash
// path: static/images/whoami/avatar.jpg, you can set width, height also // path: static/images/whoami/avatar.jpg
{{< img src="/images/whoami/avatar.jpg" title="Image4" caption="Image description" alt="image alt" >}} {{< img src="/images/whoami/avatar.jpg" title="Image4" caption="Image description" alt="image alt" width="50px" height="50px">}}
``` ```
### notice ### notice
```bash ```bash
{{% notice note %}} # note, info, tip, warning {{< notice note >}} # note, info, tip, warning
A notice disclaimer A notice disclaimer
{{% /notice %}} {{< /notice >}}
``` ```
### color ### color

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

@ -3,7 +3,7 @@
font-family: $title-font; font-family: $title-font;
word-break: keep-all; word-break: keep-all;
padding: 0.5rem; padding: 0.5rem;
margin-bottom: 0.5rem; margin: 2rem 0;
border-radius: 0.5rem; border-radius: 0.5rem;
@include themify($themes) { @include themify($themes) {

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

@ -1,11 +1,15 @@
.expand { .expand {
position: relative; position: relative;
margin: 1.5rem 0;
border-radius: 0.25rem;
@include box-shadow(1px, 1px, 3px, 0, rgba(0, 0, 0, 0.125));
&__content { &__content {
padding: 0 18px; padding: 0 18px;
overflow: hidden; overflow: hidden;
max-height: 0; max-height: 0;
border-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
@include transition(all, 0.2s, ease); @include transition(all, 0.2s, ease);
@include themify($themes) { @include themify($themes) {
@ -21,11 +25,10 @@
outline: none; outline: none;
border: none; border: none;
padding: 0.125rem; padding: 0.125rem;
margin-top: 1.5rem;
margin-bottom: 0.125rem;
font-size: 1rem; font-size: 1rem;
font-family: $title-font; font-family: $title-font;
border-radius: 0.25rem; border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
@include flexbox(); @include flexbox();
@include align-items(center); @include align-items(center);

99
assets/sass/components/_notice.scss
View File

@ -1,80 +1,73 @@
div.notices { .notices {
margin: 2rem 0; margin: 2rem 0;
position: relative; position: relative;
border-radius: .125rem;
border-radius: .2rem;
color: #fff; color: #fff;
padding: .5rem 1rem .5rem 2rem; padding: .3rem 0.5rem .3rem 2rem;
position: relative font-size: 0.9rem;
}
div.notices p { &:first-child {
padding: 0px; &::before {
display: block;
font-size: 1rem;
margin-top: 0rem;
margin-bottom: 0rem;
}
div.notices p:first-child:before {
position: absolute; position: absolute;
top: -27px; top: -28.5px;
color: #fff; color: #fff;
content: '💡'; content: '💡';
left: 10px; left: 10px;
} }
div.notices p:first-child:after { &::after {
position: absolute; position: absolute;
top: -27px; top: -28.5px;
color: #fff; color: #fff;
left: 2rem; left: 2rem;
} }
div.notices.info p:first-child:after {
content: 'Info';
font-family: $title-font;
} }
div.notices.warning p:first-child:after { &.info {
content: 'Warning';
font-family: $title-font;
}
div.notices.note p:first-child:after {
content: 'Note';
font-family: $title-font;
}
div.notices.tip p:first-child:after {
content: 'Tip';
font-family: $title-font;
}
div.notices.note {
border-top: 30px solid #6bb1e0;
background: #e6f3fb;
color: rgba(47, 103, 141, 0.995) !important;
font-family: $content-font;
}
div.notices.info {
border-top: 30px solid #f1b37e; border-top: 30px solid #f1b37e;
background: #fefaf5; background: #fefaf5;
color: rgba(150, 90, 38, 0.995) !important; color: rgba(150, 90, 38, 0.995) !important;
font-family: $content-font; font-family: $content-font;
&:first-child::after {
content: 'Info';
font-family: $title-font;
}
} }
div.notices.tip { &.warning {
border-top: 30px solid #84c578;
background: #e8f7e6;
color: rgba(72, 125, 63, 0.995) !important;
font-family: $content-font;
}
div.notices.warning {
border-top: 30px solid #d58181; border-top: 30px solid #d58181;
background: #fbeded; background: #fbeded;
color: rgba(132, 56, 56, 0.995) !important; color: rgba(132, 56, 56, 0.995) !important;
font-family: $content-font; font-family: $content-font;
&:first-child::after {
content: 'Warning';
font-family: $title-font;
}
}
&.note {
border-top: 30px solid #6bb1e0;
background: #e6f3fb;
color: rgba(47, 103, 141, 0.995) !important;
font-family: $content-font;
&:first-child::after {
content: 'Note';
font-family: $title-font;
}
}
&.tip {
border-top: 30px solid #84c578;
background: #e8f7e6;
color: rgba(72, 125, 63, 0.995) !important;
font-family: $content-font;
&:first-child::after {
content: 'Tip';
font-family: $title-font;
}
}
} }

8
assets/sass/components/_toc.scss
View File

@ -79,3 +79,11 @@
} }
} }
} }
.expand__content {
#TableOfContents {
ul {
list-style-type: circle;
}
}
}

22
assets/sass/pages/_gallery.scss
View File

@ -77,7 +77,6 @@
&__desc { &__desc {
position: absolute; position: absolute;
display: none;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
@ -92,14 +91,33 @@
cursor: pointer; cursor: pointer;
@include truncate(350px); @include truncate(350px);
@include box-shadow(0, 4px, 4px, 0, rgba(0, 0, 0, 0.4)); @include box-shadow(0, 0, 0, 0, rgba(0, 0, 0, 0));
@include on-event { @include on-event {
@include box-shadow(0, 4px, 4px, 0, rgba(0, 0, 0, 0.4));
@include transition(all, 0.25s, ease); @include transition(all, 0.25s, ease);
@include themify($themes) { @include themify($themes) {
color: themed('gallery-mask-color'); color: themed('gallery-mask-color');
background-color: themed('gallery-mask-background-color'); background-color: themed('gallery-mask-background-color');
} }
} }
&--text {
position: absolute;
left: 50%;
top: 50%;
@include flexbox();
@include flex-direction(column);
@include align-items(center);
@include translate(-50%, -50%);
@include themify($themes) {
color: themed('link');
}
&::after {
content: "〰️🔍〰️";
}
}
} }
} }
} }

6
assets/sass/themes/_dark.scss
View File

@ -65,9 +65,9 @@ $dark: (
toc-title-color: #90a4ae, toc-title-color: #90a4ae,
toc-vertical-line: #727072, toc-vertical-line: #727072,
toc-vertical-line-active: #FF6188, toc-vertical-line-active: #FF6188,
toc-header-background-color: #403E41, toc-header-background-color: lighten(#2D2A2E, 6%),
toc-header-background-color-hover: darken(#403E41, 1.5%), toc-header-background-color-hover: lighten(#2D2A2E, 4%),
toc-body-background-color: lighten(#403E41, 5%), toc-body-background-color: lighten(#2D2A2E, 2%),
search-placeholder-color: #727072, search-placeholder-color: #727072,
search-color: #FCFCFA, search-color: #FCFCFA,
search-icon-color: #727072, search-icon-color: #727072,

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

@ -36,7 +36,7 @@ $hacker: (
taxo-categories-color: #AB9DF2, taxo-categories-color: #AB9DF2,
breadcrumb-item-color: #E08C48, breadcrumb-item-color: #E08C48,
breadcrumb-background-color: #252526, breadcrumb-background-color: #252526,
breadcrumb-item-active-color: #6B6B6B, breadcrumb-item-active-color: #bdbdbd,
list-header-title-color: #A1AD64, list-header-title-color: #A1AD64,
figcaption-color: #1FFF2A, figcaption-color: #1FFF2A,
figcaption-strong-color: #FCFCFA, figcaption-strong-color: #FCFCFA,
@ -48,7 +48,7 @@ $hacker: (
related-header-title-color: #FCFCFA, related-header-title-color: #FCFCFA,
related-link-color: #C7BA00, related-link-color: #C7BA00,
content-box-border-color: #dbdbdb, content-box-border-color: #dbdbdb,
content-box-background-color: #202420, content-box-background-color: #252526,
burger-menu-color: #dbdbdb, burger-menu-color: #dbdbdb,
social-icon-color: #9e9e9e, social-icon-color: #9e9e9e,
social-icon-hover-color: lighten(#9e9e9e, 20%), social-icon-hover-color: lighten(#9e9e9e, 20%),
@ -65,9 +65,9 @@ $hacker: (
toc-title-color: #727072, toc-title-color: #727072,
toc-vertical-line: #727072, toc-vertical-line: #727072,
toc-vertical-line-active: #E08C48, toc-vertical-line-active: #E08C48,
toc-header-background-color: #252526, toc-header-background-color: lighten(#151715, 7%),
toc-header-background-color-hover: darken(#252526, 1.5%), toc-header-background-color-hover: lighten(#151715, 5%),
toc-body-background-color: lighten(#252526, 4%), toc-body-background-color: lighten(#151715, 3%),
search-placeholder-color: #727072, search-placeholder-color: #727072,
search-color: #1FFF2A, search-color: #1FFF2A,
search-icon-color: #727072, search-icon-color: #727072,

11
assets/sass/themes/_kimbie.scss
View File

@ -4,7 +4,7 @@ $kimbie: (
link: #DC322F, link: #DC322F,
link-hover: #DC322F, link-hover: #DC322F,
title-color: #7c5021, title-color: #7c5021,
meta-color: #98676a, meta-color: #889b4a,
body-color: #e3b583, body-color: #e3b583,
hr-color: #7f5d38, hr-color: #7f5d38,
body-background-color: #221a0f, body-background-color: #221a0f,
@ -36,7 +36,7 @@ $kimbie: (
taxo-categories-color: #8ab1b0, taxo-categories-color: #8ab1b0,
breadcrumb-item-color: #DC322F, breadcrumb-item-color: #DC322F,
breadcrumb-background-color: #362712, breadcrumb-background-color: #362712,
breadcrumb-item-active-color: #bdbdbd, breadcrumb-item-active-color: #aaa,
list-header-title-color: #98676a, list-header-title-color: #98676a,
figcaption-color: #e3b583, figcaption-color: #e3b583,
figcaption-strong-color: #7e602c, figcaption-strong-color: #7e602c,
@ -48,7 +48,7 @@ $kimbie: (
related-link-color: #f06431, related-link-color: #f06431,
content-box-border-color: #6e583b, content-box-border-color: #6e583b,
content-box-background-color: #7c502166, content-box-background-color: #7c502166,
burger-menu-color: #a57a4c, burger-menu-color: #d3af86,
social-icon-color: #ccc, social-icon-color: #ccc,
social-icon-hover-color: #fff, social-icon-hover-color: #fff,
pagination-link-color: #DC322F, pagination-link-color: #DC322F,
@ -64,6 +64,9 @@ $kimbie: (
toc-title-color: #a57a4c, toc-title-color: #a57a4c,
toc-vertical-line: #a57a4c, toc-vertical-line: #a57a4c,
toc-vertical-line-active: #889b4a, toc-vertical-line-active: #889b4a,
toc-header-background-color: #362712,
toc-header-background-color-hover: lighten(#362712, 3%),
toc-body-background-color: lighten(#221a0f, 1.5%),
search-placeholder-color: #6e583b, search-placeholder-color: #6e583b,
search-color: #d3af86, search-color: #d3af86,
search-icon-color: #6e583b, search-icon-color: #6e583b,
@ -89,7 +92,7 @@ $kimbie: (
switch-button-color: #FCFCFA, switch-button-color: #FCFCFA,
switch-active-color: #dc3958, switch-active-color: #dc3958,
gallery-mask-color: #fff, gallery-mask-color: #fff,
gallery-mask-background-color: rgba(110, 88, 59, 0.6), gallery-mask-background-color: rgba(66, 53, 35, 0.85),
contact-input-color: #e3b583, contact-input-color: #e3b583,
contact-input-background-color: #362712, contact-input-background-color: #362712,
contact-button-background-color: #362712, contact-button-background-color: #362712,

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

@ -36,7 +36,7 @@ $light: (
taxo-categories-color: #424242, taxo-categories-color: #424242,
breadcrumb-item-color: #728fcb, breadcrumb-item-color: #728fcb,
breadcrumb-background-color: #eee, breadcrumb-background-color: #eee,
breadcrumb-item-active-color: #bdbdbd, breadcrumb-item-active-color: #aaa,
list-header-title-color: #424242, list-header-title-color: #424242,
figcaption-color: #bdbdbd, figcaption-color: #bdbdbd,
figcaption-strong-color: #424242, figcaption-strong-color: #424242,
@ -84,7 +84,7 @@ $light: (
archive-key-background-color: #607d8b, archive-key-background-color: #607d8b,
archive-type-background-color: #bdbdbd, archive-type-background-color: #bdbdbd,
archive-hover-line-color: #FF6188, archive-hover-line-color: #FF6188,
gtt-color: #424242, gtt-color: #727072,
gtt-background-color: #eeeeee, gtt-background-color: #eeeeee,
gtt-hover-color: #607d8b, gtt-hover-color: #607d8b,
gtt-hover-background-color: darken(#eeeeee, 10%), gtt-hover-background-color: darken(#eeeeee, 10%),
@ -92,7 +92,7 @@ $light: (
switch-button-color: #FCFCFA, switch-button-color: #FCFCFA,
switch-active-color: #FF6188, switch-active-color: #FF6188,
gallery-mask-color: #424242, gallery-mask-color: #424242,
gallery-mask-background-color: rgba(255, 255, 255, 0.7), gallery-mask-background-color: rgba(236, 239, 241, 0.85),
contact-input-color: #424242, contact-input-color: #424242,
contact-input-background-color: #eee, contact-input-background-color: #eee,
contact-button-background-color: #eee, contact-button-background-color: #eee,

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

@ -5,7 +5,7 @@ $solarized: (
link-hover: #268bd2, link-hover: #268bd2,
title-color: #cb4b16, title-color: #cb4b16,
meta-color: #B58900, meta-color: #B58900,
body-color: #424242, body-color: #586e75,
hr-color: #ffb300, hr-color: #ffb300,
body-background-color: #FDF7E3, body-background-color: #FDF7E3,
backdrop-background-color: #DDD6C7, backdrop-background-color: #DDD6C7,
@ -18,10 +18,10 @@ $solarized: (
navbar-border-bottom-color: #B58900, navbar-border-bottom-color: #B58900,
navbar-background-color: #EEE8D5, navbar-background-color: #EEE8D5,
navbar-mobile-background-color: darken(#EEE8D5, 2.5%), navbar-mobile-background-color: darken(#EEE8D5, 2.5%),
navbar-title-color: #555, navbar-title-color: #586e75,
navbar-title-hover-color: #B58900, navbar-title-hover-color: #B58900,
navbar-title-active-color: #B58900, navbar-title-active-color: #cb4b16,
navbar-menu-hover-background-color: darken(#FBF1D1, 5%), navbar-menu-hover-background-color: darken(#EEE8D5, 4%),
navbar-dropdown-item-hover-color: #B58900, navbar-dropdown-item-hover-color: #B58900,
sidebar-title-color: #2aa198, sidebar-title-color: #2aa198,
sidebar-li-color: #B58900, sidebar-li-color: #B58900,
@ -36,7 +36,7 @@ $solarized: (
taxo-categories-color: darken(#B58900, 7%), taxo-categories-color: darken(#B58900, 7%),
breadcrumb-item-color: #424242, breadcrumb-item-color: #424242,
breadcrumb-background-color: #FBF1D1, breadcrumb-background-color: #FBF1D1,
breadcrumb-item-active-color: #bdbdbd, breadcrumb-item-active-color: #aaa,
list-header-title-color: #424242, list-header-title-color: #424242,
figcaption-color: #ffb300, figcaption-color: #ffb300,
figcaption-strong-color: #B58900, figcaption-strong-color: #B58900,
@ -47,8 +47,8 @@ $solarized: (
related-header-title-color: #424242, related-header-title-color: #424242,
related-link-color: #2aa198, related-link-color: #2aa198,
content-box-border-color: #B58900, content-box-border-color: #B58900,
content-box-background-color: #FBF1D1, content-box-background-color: #f9fbe7,
burger-menu-color: #B58900, burger-menu-color: #586e75,
social-icon-color: lighten(#586e75, 5%), social-icon-color: lighten(#586e75, 5%),
social-icon-hover-color: darken(#586e75, 5%), social-icon-hover-color: darken(#586e75, 5%),
pagination-link-color: #455a64, pagination-link-color: #455a64,
@ -64,9 +64,9 @@ $solarized: (
toc-title-color: #727072, toc-title-color: #727072,
toc-vertical-line: #727072, toc-vertical-line: #727072,
toc-vertical-line-active: #268bd2, toc-vertical-line-active: #268bd2,
toc-header-background-color: darken(#FBF1D1, 4%), toc-header-background-color: #FBF1D1,
toc-header-background-color-hover: darken(#FBF1D1, 7%), toc-header-background-color-hover: darken(#FBF1D1, 3%),
toc-body-background-color: #FBF1D1, toc-body-background-color: #f9fbe7,
search-placeholder-color: #B58900, search-placeholder-color: #B58900,
search-color: #B58900, search-color: #B58900,
search-border-color: darken(#FBF1D1, 10%), search-border-color: darken(#FBF1D1, 10%),
@ -83,15 +83,15 @@ $solarized: (
archive-key-background-color: #B58900, archive-key-background-color: #B58900,
archive-type-background-color: darken(#FBF1D1, 12%), archive-type-background-color: darken(#FBF1D1, 12%),
archive-hover-line-color: #FF6188, archive-hover-line-color: #FF6188,
gtt-color: #ffb300, gtt-color: #B58900,
gtt-background-color: #EEE8D5, gtt-background-color: #EEE8D5,
gtt-hover-color: #B58900, gtt-hover-color: #cb4b16,
gtt-hover-background-color: darken(#EEE8D5, 5%), gtt-hover-background-color: darken(#EEE8D5, 5%),
switch-background-color: darken(#EEE8D5, 10%), switch-background-color: darken(#EEE8D5, 10%),
switch-button-color: #FCFCFA, switch-button-color: #FCFCFA,
switch-active-color: #FF6188, switch-active-color: #FF6188,
gallery-mask-color: #424242, gallery-mask-color: #424242,
gallery-mask-background-color: rgba(253, 247, 227, 0.7), gallery-mask-background-color: rgba(241, 248, 233, 0.85),
contact-input-color: #B58900, contact-input-color: #B58900,
contact-input-background-color: #FBF1D1, contact-input-background-color: #FBF1D1,
contact-button-background-color: #FBF1D1, contact-button-background-color: #FBF1D1,

6
assets/sass/themes/_solarizedcode.scss
View File

@ -61,9 +61,9 @@ $solarizedcode: '';
content-pre-main-color: #B58900, content-pre-main-color: #B58900,
content-pre-color: #344952, content-pre-color: #344952,
content-pre-number-color: #aaa, content-pre-number-color: #aaa,
content-pre-background-color: #faf1cd, content-pre-background-color: #f9fbe7,
content-pre-border-background-color: darken(#FBF1D1, 12%), content-pre-border-background-color: darken(#FBF1D1, 8%),
content-pre-header-background-color: darken(#FBF1D1, 6%), content-pre-header-background-color: darken(#FBF1D1, 2.5%),
content-pre-header-color: #344952, content-pre-header-color: #344952,
); );
} }

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

File diff suppressed because one or more lines are too long

12
layouts/gallery/single.html
View File

@ -16,7 +16,11 @@
{{ range .Params.Images }} {{ range .Params.Images }}
<div class="grid-item"> <div class="grid-item">
<img src="{{ $basename | relURL }}{{ .image }}" alt="{{ print .caption }}" /> <img src="{{ $basename | relURL }}{{ .image }}" alt="{{ print .caption }}" />
<div class="grid-item__desc hide">{{ .caption }}</div> <div class="grid-item__desc hide">
<span class="grid-item__desc--text">
{{ .caption }}
</span>
</div>
</div> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}
@ -34,7 +38,11 @@
{{ range (readDir (print "./static/" $basename)) }} {{ range (readDir (print "./static/" $basename)) }}
<div class="grid-item"> <div class="grid-item">
<img src="{{ $basename | relURL }}{{ .Name }}" alt="{{ index (split .Name ".") 0 }}"/> <img src="{{ $basename | relURL }}{{ .Name }}" alt="{{ index (split .Name ".") 0 }}"/>
<div class="grid-item__desc hide">{{ index (split .Name ".") 0 }}</div> <div class="grid-item__desc hide">
<span class="grid-item__desc--text">
{{ index (split .Name ".") 0 }}
</span>
</div>
</div> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}

26
layouts/partials/comments/utterances.html
View File

@ -1,3 +1,25 @@
<script src="https://utteranc.es/client.js" repo="{{ .Site.Params.utterances.owner }}/{{ .Site.Params.utterances.repo }}" issue-term="pathname" theme="photon-dark" crossorigin="anonymous" async> <div id="utterances"></div>
</script>
<noscript>Please enable JavaScript to view the <a href="https://github.com/utterance">comments powered by utterances.</a></noscript> <noscript>Please enable JavaScript to view the <a href="https://github.com/utterance">comments powered by utterances.</a></noscript>
<script>
document.addEventListener('DOMContentLoaded', function () {
{{ $owner:= .Site.Params.utterances.owner }}
var owner = JSON.parse({{ $owner | jsonify }});
{{ $repo:= .Site.Params.utterances.repo }}
var repo = JSON.parse({{ $repo | jsonify }});
var localTheme = localStorage.getItem('theme');
var utterTheme = localTheme === "dark" || localTheme === "hacker" ? 'photon-dark' : localTheme === 'kimbie' ? 'github-dark-orange' : 'github-light'
var myScript = document.createElement('script');
myScript.setAttribute('src', 'https://utteranc.es/client.js');
myScript.setAttribute('repo', `${owner}/${repo}`);
myScript.setAttribute('issue-term', 'pathname');
myScript.setAttribute('theme', utterTheme);
myScript.setAttribute('crossorigin', 'anonymous');
myScript.setAttribute('async', '');
myScript.onload = function() {
}
document.getElementById('utterances').appendChild(myScript);
});
</script>

2
layouts/partials/head/scripts.html
View File

@ -324,7 +324,7 @@
if (utterances) { if (utterances) {
utterances.contentWindow.postMessage({ utterances.contentWindow.postMessage({
type: 'set-theme', type: 'set-theme',
theme: selectedThemeVariant === "dark" || selectedThemeVariant === "hacker" ? 'photon-dark' : 'github-light', theme: selectedThemeVariant === "dark" || selectedThemeVariant === "hacker" ? 'photon-dark' : selectedThemeVariant === 'kimbie' ? 'github-dark-orange' : 'github-light',
}, 'https://utteranc.es'); }, 'https://utteranc.es');
} }
}); });

3
layouts/partials/script/gallery-script.html
View File

@ -23,12 +23,13 @@
document.querySelectorAll('.grid-item').forEach(function(elem) { document.querySelectorAll('.grid-item').forEach(function(elem) {
elem.addEventListener('mouseenter', function() { elem.addEventListener('mouseenter', function() {
elem.querySelector('.grid-item__desc').style.display = 'block'; elem.querySelector('.grid-item__desc').style.display = 'block';
elem.querySelector('.grid-item__desc').style.opacity = 1;
elem.querySelector('.grid-item__desc').onclick = function(e) { elem.querySelector('.grid-item__desc').onclick = function(e) {
e.target.previousElementSibling.click(); e.target.previousElementSibling.click();
} }
}); });
elem.addEventListener('mouseleave', function () { elem.addEventListener('mouseleave', function () {
elem.querySelector('.grid-item__desc').style.display = 'none'; elem.querySelector('.grid-item__desc').style.opacity = 0;
}); });
}); });

3
layouts/shortcodes/alert.html
View File

@ -1,7 +1,6 @@
{{ $_hugo_config := `{ "version": 1 }` }}
<div class="alert{{- " " -}}{{- if .IsNamedParams -}} <div class="alert{{- " " -}}{{- if .IsNamedParams -}}
{{- with .Get "theme" -}}alert-{{.}}{{- else -}}alert-info{{- end -}} {{- with .Get "theme" -}}alert-{{.}}{{- else -}}alert-info{{- end -}}
{{- else -}} {{- else -}}
{{- with .Get 0 -}}alert-{{.}}{{- else -}}alert-info{{- end -}} {{- with .Get 0 -}}alert-{{.}}{{- else -}}alert-info{{- end -}}
{{- end -}} {{- end -}}
" role="alert">{{- .Inner -}}</div> " role="alert">{{ .Inner | markdownify }}</div>

1
layouts/shortcodes/notice.html
View File

@ -1,2 +1 @@
{{ $_hugo_config := `{ "version": 1 }` }}
<div class="notices {{ .Get 0 }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>{{ .Inner }}</div> <div class="notices {{ .Get 0 }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>{{ .Inner }}</div>