From aa53cfd1e91d61b81e3aa93b12abd4d3b8531bef Mon Sep 17 00:00:00 2001 From: zzossig Date: Mon, 18 Nov 2019 21:14:32 +0900 Subject: [PATCH] mobile grid bug fixed, header customization support --- README.md | 110 +++++++++++++----- assets/sass/components/_hr.scss | 31 ++--- assets/sass/layout/_grid.scss | 2 +- assets/sass/layout/_header.scss | 33 +++++- assets/sass/pages/_terms.scss | 2 +- exampleSite/config/_default/params.toml | 1 - layouts/index.webmanifest | 1 - layouts/partials/footer/select-theme.html | 7 +- .../partials/header/header-img-content.html | 1 - layouts/partials/header/header-img.html | 40 ++++++- layouts/partials/header/header-slide.html | 45 ++++++- layouts/partials/header/header-text.html | 29 ++++- layouts/partials/sidebar/sidebar-home.html | 4 +- layouts/partials/sidebar/site-bio.html | 2 +- ...s_e680761d791774b6351b18d537b957bb.content | 2 +- static/images/header/background.png | Bin 0 -> 1601205 bytes 16 files changed, 236 insertions(+), 74 deletions(-) delete mode 100644 layouts/partials/header/header-img-content.html create mode 100644 static/images/header/background.png diff --git a/README.md b/README.md index b7ebcb1..00139d2 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Zzo theme for Hugo -Thank you for click me!. Zzo theme is a blog theme for Hugo with free(always), and 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 who 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. +Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(always), and many features. ## Table of contents @@ -219,8 +219,7 @@ custom_css = [] custom_js = [] # header -homeHeaderType = "slide" # text, img, slide -swiperCount = 3 # only works when homeHeaderType = slide +homeHeaderType = "img" # text, img, slide # body enableBreadcrumb = true @@ -235,13 +234,13 @@ archivePaginate = 20 paginateWindow = 1 # whoami -myname = "zzossig" -email = "zzossig@gmail.com" -whoami = "Web Developer" +myname = "" +email = "" +whoami = "" useGravatar = false -location = "Seoul, Korea" -organization = "Hugo" -link = "https://github.com/zzossig/hugo-theme-zzo" +location = "" +organization = "" +link = "" # sidebar enableBio = true @@ -553,33 +552,86 @@ single_contents = "'Merriweather', serif" You may want to change home page header. There are 4 options which is slider, image, text, empty. -* Empty +1. Set param at config/_default/params.toml(homeHeaderType) - 1. Set params at config/_default/params.toml(homeHeaderType=""). Empty string or just delete it. +2. Make _index.md file at root/content/_index.md and copy & paste below. -* Slider -This project use swiper library for slider header component. +```yaml +--- +header: + - type: text + height: 235 + paddingX: 50 + paddingY: 0 + align: left + title: + - header title1 + - header title2 + subtitle: + - header subtitle1 + - header subtitle2 + titleFontSize: 44 + subtitleFontSize: 16 + spaceBetweenTitleSubtitle: 20 - 1. Set params at config/_default/params.toml(homeHeaderType="slide", swiperCount). + - type: img + image: images/header/background.png + height: 235 + paddingX: 50 + paddingY: 0 + align: center + title: + - header title1 + - header title2 + subtitle: + - header subtitle1 + - header subtitle2 + titleFontSize: 44 + subtitleFontSize: 16 + spaceBetweenTitleSubtitle: 20 - 2. Make slide-{number}.html file to layouts/partials/header folder. + - type: slide + height: 235 + slide: + - paddingX: 50 + paddingY: 0 + align: left + image: images/header/background.png + title: + - header title1 + subtitle: + - header subtitle1 + titleFontSize: 44 + subtitleFontSize: 16 + spaceBetweenTitleSubtitle: 20 - 3. Make swiper.json file that contains options to data folder. + - paddingX: 50 + paddingY: 0 + align: center + image: images/header/background.png + title: + - header title2 + subtitle: + - header subtitle2 + titleFontSize: 44 + subtitleFontSize: 16 + spaceBetweenTitleSubtitle: 20 -* Image - - 1. Set homeHeaderType param to "img" - - 2. Add image to static/images/header/background.jpg. Filename must be background - - 3. If you want add some contents, make a file at layouts/partials/header/header-img-content.html and edit as you want. - -* Text - - 1. Make a file at layouts/partials/header/header-text.html - - 2. Edit the file as you want. + - paddingX: 50 + paddingY: 0 + align: right + image: images/header/background.png + title: + - header title3 + subtitle: + - header subtitle3 + titleFontSize: 44 + subtitleFontSize: 16 + spaceBetweenTitleSubtitle: 20 +--- +``` +3. Edit params as you wish. ### custom grid diff --git a/assets/sass/components/_hr.scss b/assets/sass/components/_hr.scss index 23f636c..11c4438 100644 --- a/assets/sass/components/_hr.scss +++ b/assets/sass/components/_hr.scss @@ -1,22 +1,13 @@ -.fade-1 { - height: 1px; - $color: #595B5C; - color: $color; - background-image: linear-gradient( - 90deg, - rgba($color, 0), - rgba($color, 1) 50%, - rgba($color, 0) 100%); -} +.hr-fade { + height: 1px; -.fade-2 { - border-width: 0 0 1px; - $color: #595B5C; - color: $color; - border-image: linear-gradient( - 90deg, - rgba($color, 0), - rgba($color, 1) 50%, - rgba($color, 0) 100%) 0 0 100%; - border-style: solid; + @include themify($themes) { + color: themed('hr-color'); + background-image: linear-gradient( + 90deg, + transparent, + themed('hr-color') 50%, + transparent 100% + ); + } } \ No newline at end of file diff --git a/assets/sass/layout/_grid.scss b/assets/sass/layout/_grid.scss index 42e61c8..d1c7f50 100644 --- a/assets/sass/layout/_grid.scss +++ b/assets/sass/layout/_grid.scss @@ -12,7 +12,7 @@ $grid_column_gap: $grid_column_gap_width + $grid_column_gap_unit; grid-column-gap: $grid_column_gap; grid-row-gap: $grid_row_gap; @include respond-to(sm) { - grid-template-columns: minmax(350px, $grid_main_main) minmax(0, $grid_main_side); + grid-template-columns: minmax(0, $grid_main_main) minmax(0, $grid_main_side); } } diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss index d103e59..29c01d9 100644 --- a/assets/sass/layout/_header.scss +++ b/assets/sass/layout/_header.scss @@ -13,10 +13,39 @@ background-image: url("../images/header/background.jpg"), url("../images/header/background.png"); width: 100%; - height: 300px; + height: 235px; background-size: cover; background-repeat: no-repeat; position: relative; - margin-bottom: 2rem; + margin-bottom: 0.5rem; + } +} + +.custom-header { + @include flexbox(); + @include justify-content(center); + @include flex-direction(column); + + &__title { + line-height: 1.1; + font-weight: 700; + font-family: $header_title_font; + } + + &__subtitle { + line-height: 1.2; + font-family: $header_title_font; + } + + &__align-left { + @include align-items(flex-start); + } + + &__align-center { + @include align-items(center); + } + + &__align-right { + @include align-items(flex-end); } } \ No newline at end of file diff --git a/assets/sass/pages/_terms.scss b/assets/sass/pages/_terms.scss index 766ecf1..5b9d93b 100644 --- a/assets/sass/pages/_terms.scss +++ b/assets/sass/pages/_terms.scss @@ -5,7 +5,7 @@ width: 100%; &__title { - margin-top: 2rem; + margin: 2rem 0; @include themify($themes) { color: themed('terms-title-color'); text-shadow: 1px 1px 0 darken(themed('terms-title-color'), 10%), diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 0be8200..f7f4dbb 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -5,7 +5,6 @@ custom_js = [] # header homeHeaderType = "slide" # text, img, slide -swiperCount = 3 # only works when homeHeaderType = slide # body enableBreadcrumb = true diff --git a/layouts/index.webmanifest b/layouts/index.webmanifest index 2f6dec6..1ff1499 100644 --- a/layouts/index.webmanifest +++ b/layouts/index.webmanifest @@ -1,4 +1,3 @@ -{{- $scr := .Scratch -}} { "name": "{{site.Title}}", "short_name": "{{site.Title}}", diff --git a/layouts/partials/footer/select-theme.html b/layouts/partials/footer/select-theme.html index 7c318d2..47fb822 100644 --- a/layouts/partials/footer/select-theme.html +++ b/layouts/partials/footer/select-theme.html @@ -49,16 +49,15 @@ } } }); - - if (mermaid) { + + if (window.mermaid) { if (selectedThemeVariant === "dark" || selectedThemeVariant === "hacker") { mermaid.initialize({ theme: 'dark' }); location.reload(); } else { mermaid.initialize({ theme: 'default' }); location.reload(); - } - + } } }); \ No newline at end of file diff --git a/layouts/partials/header/header-img-content.html b/layouts/partials/header/header-img-content.html deleted file mode 100644 index 3517eec..0000000 --- a/layouts/partials/header/header-img-content.html +++ /dev/null @@ -1 +0,0 @@ -{{ partial "header/slide-1" . }} \ No newline at end of file diff --git a/layouts/partials/header/header-img.html b/layouts/partials/header/header-img.html index f6b9852..1d6d3de 100644 --- a/layouts/partials/header/header-img.html +++ b/layouts/partials/header/header-img.html @@ -1,3 +1,37 @@ -
- {{ partial "header/header-img-content" . }} -
\ No newline at end of file +{{ if $.Params.header }} + {{ range $.Params.header }} + {{ if eq .type "img" }} +
+ {{ $header := . }} + {{ if .title }} + {{ range .title }} +
+ {{ . }} +
+ {{ end }} + {{ end }} + {{ if .spaceBetweenTitleSubtitle }} +
+ {{ end }} + {{ if .subtitle }} + {{ range .subtitle }} +
+ {{ . }} +
+ {{ end }} + {{ end }} +
+ {{ end }} + {{ end }} +{{ else }} + {{ if (fileExists "static/images/header/background.png") }} + {{ $.Scratch.Set "header_background" "images/header/background.png" }} + {{ else if (fileExists "static/images/header/background.jpg") }} + {{ $.Scratch.Set "header_background" "images/header/background.jpg" }} + {{ else }} + {{ $.Scratch.Set "header_background" "images/header/background.png" }} + {{ end }} +
+ {{ partial "header/slide-1" . }} +
+{{ end }} \ No newline at end of file diff --git a/layouts/partials/header/header-slide.html b/layouts/partials/header/header-slide.html index 2b49034..a7fa469 100644 --- a/layouts/partials/header/header-slide.html +++ b/layouts/partials/header/header-slide.html @@ -1,15 +1,48 @@ +{{ if $.Params.header }}
- {{ if .Site.Params.swiperCount }} - {{ range $idx, $seq := (seq .Site.Params.swiperCount) }} -
- {{ partial (print "header/slide-" $seq) . }} -
+ {{ range $.Params.header }} + {{ if eq .type "slide" }} + {{ $height := .height }} + {{ range .slide }} +
+ {{ $header := . }} + {{ if .title }} + {{ range .title }} +
+ {{ . }} +
+ {{ end }} + {{ end }} + {{ if .spaceBetweenTitleSubtitle }} +
+ {{ end }} + {{ if .subtitle }} + {{ range .subtitle }} +
+ {{ . }} +
+ {{ end }} + {{ end }} +
+ {{ end }} {{ end }} + {{ end }} +
+
+
+{{ else }} +
+
+ {{ range $idx, $seq := (seq 3) }} +
+ {{ partial (print "header/slide-" $seq) . }} +
{{ end }}
+{{ end }} {{ $js := .Site.Data.lib.js }} {{ $css := .Site.Data.lib.css }} @@ -18,7 +51,7 @@ {{ printf "" $js.swiper.url $js.swiper.sri | safeHTML }}