mobile grid bug fixed, header customization support

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
+homeHeaderType = "img" # text, img, slide
-swiperCount = 3 # only works when homeHeaderType = slide
 
 # body
 enableBreadcrumb = true
@@ -235,13 +234,13 @@ archivePaginate = 20
 paginateWindow = 1
 
 # whoami
-myname = "zzossig"
+myname = ""
-email = "zzossig@gmail.com"
+email = ""
-whoami = "Web Developer"
+whoami = ""
 useGravatar = false
-location = "Seoul, Korea"
+location = ""
-organization = "Hugo"
+organization = ""
-link = "https://github.com/zzossig/hugo-theme-zzo"
+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
+```yaml
-This project use swiper library for slider header component.
+---
+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
+      - paddingX: 50
-
+        paddingY: 0
-  1. Set homeHeaderType param to "img"
+        align: right
-
+        image: images/header/background.png
-  2. Add image to static/images/header/background.jpg. Filename must be background
+        title:
-
+          - header title3
-  3. If you want add some contents, make a file at layouts/partials/header/header-img-content.html and edit as you want.
+        subtitle:
-
+          - header subtitle3
-* Text
+        titleFontSize: 44
-
+        subtitleFontSize: 16
-  1. Make a file at layouts/partials/header/header-text.html
+        spaceBetweenTitleSubtitle: 20
-
+---
-  2. Edit the file as you want.
+```
 
+3. Edit params as you wish.
 
 ### custom grid
 

assets/sass/components/_hr.scss

@@ -1,22 +1,13 @@
-.fade-1 {
+.hr-fade {
-  height: 1px;
+  height: 1px;  
-  $color: #595B5C;
-  color: $color;
-  background-image: linear-gradient(
-    90deg,
-    rgba($color, 0),
-    rgba($color, 1) 50%,
-    rgba($color, 0) 100%);
-}
 
-.fade-2 {
+  @include themify($themes) {
-  border-width: 0 0 1px;
+    color: themed('hr-color');
-  $color: #595B5C;
+    background-image: linear-gradient(
-  color: $color;
+      90deg,
-  border-image: linear-gradient(
+      transparent,
-    90deg,
+      themed('hr-color') 50%,
-    rgba($color, 0),
+      transparent 100%
-    rgba($color, 1) 50%,
+    );
-    rgba($color, 0) 100%) 0 0 100%;
+  }  
-  border-style: solid;
 }

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);
     }
 }
 

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);
   }
 }

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%), 

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

layouts/index.webmanifest

@@ -1,4 +1,3 @@
-{{- $scr := .Scratch -}}
 {
   "name": "{{site.Title}}",
   "short_name": "{{site.Title}}",

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();
-      }
+      }      
-      
     }
   });
 </script>

layouts/partials/header/header-img-content.html

@@ -1 +0,0 @@
-{{ partial "header/slide-1" . }}

layouts/partials/header/header-img.html

@@ -1,3 +1,37 @@
-<div class="header__image">
+{{ if $.Params.header }}  
-  {{ partial "header/header-img-content" . }}
+  {{ range $.Params.header }}
-</div>
+    {{ if eq .type "img" }}
+    <div class="custom-header custom-header__align-{{ .align }}" style="background-image: url('{{.image | relURL }}'); width: 100%; height: {{ .height }}px; padding: {{ .paddingY }}px {{ .paddingX }}px;">
+      {{ $header := . }}
+      {{ if .title }}            
+        {{ range .title }}
+        <div class="custom-header__title" style="font-size: {{ $header.titleFontSize }}px;">
+          {{ . }}
+        </div>
+        {{ end }}      
+      {{ end }}
+      {{ if .spaceBetweenTitleSubtitle }}
+        <div style="height: {{ .spaceBetweenTitleSubtitle }}px"></div>
+      {{ end }}
+      {{ if .subtitle }}
+        {{ range .subtitle }} 
+        <div class="custom-header__subtitle" style="font-size: {{ $header.subtitleFontSize }}px;">
+          {{ . }}
+        </div>
+        {{ end }}      
+      {{ end }}
+    </div>
+    {{ 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 }}
+  <div style="background-image: url('{{$.Scratch.Get "header_background" | relURL }}'); width: 100%; height: 235px;">
+    {{ partial "header/slide-1" . }}
+  </div>
+{{ end }}

layouts/partials/header/header-slide.html

@@ -1,15 +1,48 @@
+{{ if $.Params.header }}
 <div class="swiper-container">
   <div class="swiper-wrapper">
-    {{ if .Site.Params.swiperCount }}
+  {{ range $.Params.header }}
-    {{ range $idx, $seq :=  (seq .Site.Params.swiperCount) }}
+    {{ if eq .type "slide" }}
-    <div class="swiper-slide">
+      {{ $height := .height }}
-      {{ partial (print "header/slide-" $seq) . }}
+      {{ range .slide }}
-    </div>
+        <div class="swiper-slide custom-header custom-header__align-{{ .align }}" style="background-image: url('{{.image | relURL }}'); height: {{ $height }}px;">
+          {{ $header := . }}
+          {{ if .title }}            
+            {{ range .title }}
+            <div class="custom-header__title" style="font-size: {{ $header.titleFontSize }}px; padding: {{ $header.paddingY }}px {{ $header.paddingX }}px;">
+              {{ . }}
+            </div>
+            {{ end }}      
+          {{ end }}
+          {{ if .spaceBetweenTitleSubtitle }}
+            <div style="height: {{ .spaceBetweenTitleSubtitle }}px"></div>
+          {{ end }}
+          {{ if .subtitle }}
+            {{ range .subtitle }} 
+            <div class="custom-header__subtitle" style="font-size: {{ $header.subtitleFontSize }}px; padding: {{ $header.paddingY }}px {{ $header.paddingX }}px;">
+              {{ . }}
+            </div>
+            {{ end }}      
+          {{ end }}
+        </div>
+      {{ end }}
     {{ end }}
+  {{ end }}
+  </div>
+  <div class="swiper-pagination"></div>
+</div>
+{{ else }}
+<div class="swiper-container">
+  <div class="swiper-wrapper">
+    {{ range $idx, $seq :=  (seq 3) }}
+      <div class="swiper-slide">
+        {{ partial (print "header/slide-" $seq) . }}
+      </div>
     {{ end }}
   </div>
   <div class="swiper-pagination"></div>
 </div>
+{{ end }}
 
 {{ $js := .Site.Data.lib.js }}
 {{ $css := .Site.Data.lib.css }}
@@ -18,7 +51,7 @@
 {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"swiper\"></script>" $js.swiper.url $js.swiper.sri | safeHTML }}
 
 <script>
-  {{ $swiper:= .Site.Data.swiper }}
+  {{ $swiper := .Site.Data.swiper }}
   var options = JSON.parse({{ $swiper | jsonify }});
 
   var mySwiper = new Swiper('.swiper-container', options);

layouts/partials/header/header-text.html

@@ -1,5 +1,32 @@
+{{ if $.Params.header }}  
+  {{ range $.Params.header }}
+    {{ if eq .type "text" }}
+    <div class="custom-header custom-header__align-{{ .align }}" style="width: 100%; height: {{ .height }}px; padding: {{ .paddingY }}px {{ .paddingX }}px;">
+      {{ $header := . }}
+      {{ if .title }}            
+        {{ range .title }}
+        <div class="custom-header__title" style="font-size: {{ $header.titleFontSize }}px;">
+          {{ . }}
+        </div>
+        {{ end }}      
+      {{ end }}
+      {{ if .spaceBetweenTitleSubtitle }}
+        <div style="height: {{ .spaceBetweenTitleSubtitle }}px"></div>
+      {{ end }}
+      {{ if .subtitle }}
+        {{ range .subtitle }} 
+        <div class="custom-header__subtitle" style="font-size: {{ $header.subtitleFontSize }}px;">
+          {{ . }}
+        </div>
+        {{ end }}      
+      {{ end }}
+    </div>
+    {{ end }}
+  {{ end }}
+{{ else }}
 <div class="features-text">
   <div class="features-text__item h2">
     {{ .Site.Params.Title }}
   </div>
-</div>
+</div>
+{{ end }}

layouts/partials/sidebar/sidebar-home.html

@@ -19,13 +19,13 @@
     {{ end }}
 </div>
 
-<hr class="fade-1 sidebar-hr" />
+<hr class="hr-fade sidebar-hr" />
 <div class="taxo-root">
 {{ partial "taxonomy/taxonomy-tags" . }}
 {{ partial "taxonomy/taxonomy-categories" . }}
 {{ partial "taxonomy/taxonomy-series" . }}
 </div>
-<hr class="fade-1 sidebar-hr" />
+<hr class="hr-fade sidebar-hr" />
 {{ partial "sidebar/site-subs" . }}
 
 {{ end }}

layouts/partials/sidebar/site-bio.html

@@ -68,5 +68,5 @@
     {{ end }}
   </div>
 </div>
-<hr class="fade-1 sidebar-hr"/>
+<hr class="hr-fade sidebar-hr"/>
 {{ end }}