long logo support, header text shadow option added, better search highlight

2020-01-10 15:13:21 +09:00 · 2020-01-10 15:13:21 +09:00 · a464d23a44
parent 00dc092011
commit a464d23a44
15 changed files with 56 additions and 17 deletions
--- a/README.ko.md
+++ b/README.ko.md
@ -218,6 +218,7 @@ You shoud make your own menu.

 ```bash
 logoText = "Zzo" # Logo text that appears in the site navigation bar.
+logoType = "short" # long, short -> short: squre shape includes logo text, long: rectangle shape not includes logo text
 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_js = [] # custom_js = ["js/custom.js"] and then make file at root/assets/js/custom.js
@ -347,7 +348,6 @@ commento = false
  gitlab = ""
  mastodon = ""
  jianshu = ""
-  zhihu = ""

 [donationOptions] 
  enable = false # if set, the donation button will show up on the single page.
@ -730,6 +730,8 @@ header:
      - HUGO
    subtitle:
      - The world’s fastest framework for building websites
+    titleColor:
+    titleShadow: false
    titleFontSize: 44
    subtitleFontSize: 16
    spaceBetweenTitleSubtitle: 20
--- a/README.md
+++ b/README.md
@ -212,6 +212,7 @@ You shoud make your own menu.

 ```bash
 logoText = "Zzo" # Logo text that appears in the site navigation bar.
+logoType = "short" # long, short -> short: squre shape includes logo text, long: rectangle shape not includes logo text
 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_js = [] # custom_js = ["js/custom.js"] and then make file at root/assets/js/custom.js
@ -341,7 +342,6 @@ commento = false
  gitlab = ""
  mastodon = ""
  jianshu = ""
-  zhihu = ""

 [donationOptions] 
  enable = false # if set, the donation button will show up on the single page.
@ -723,6 +723,8 @@ header:
      - HUGO
    subtitle:
      - The world’s fastest framework for building websites
+    titleColor:
+    titleShadow: false
    titleFontSize: 44
    subtitleFontSize: 16
    spaceBetweenTitleSubtitle: 20
--- a/archetypes/header.md
+++ b/archetypes/header.md
@ -11,6 +11,8 @@ header:
    subtitle:
      - header subtitle1
      - header subtitle2
+    titleColor: 
+    titleShadow: false
    titleFontSize: 44
    subtitleFontSize: 16
    spaceBetweenTitleSubtitle: 20
--- a/assets/sass/layout/_header.scss
+++ b/assets/sass/layout/_header.scss
@ -19,6 +19,15 @@
    line-height: 1.1;
    font-weight: 700;
    font-family: $title-font;
+
+    &--shadow {
+      @include themify($themes) {
+        text-shadow: 1px 1px 0 themed('terms-title-color'),
+          2px 2px 0 lighten(themed('terms-title-shadow-color'), 4%),
+          3px 3px 0 lighten(themed('terms-title-shadow-color'), 8%),
+          4px 4px 0 lighten(themed('terms-title-shadow-color'), 12%);
+      }
+    }
  }

  &__subtitle {
--- a/assets/sass/layout/_navigation.scss
+++ b/assets/sass/layout/_navigation.scss
@ -125,6 +125,17 @@
    }
  }

+  &__long {
+    &-link {
+      width: 100%;
+      height: 100%;
+      padding: 0.6rem 0.2rem;
+      margin: auto 0.25rem;
+      @include flex-shrink(0);
+      flex-shrink: 0;
+    }
+  }
+
  &__title {
    height: $grid_navbar_height;
    font-size: 1.5rem;
--- a/assets/sass/pages/_terms.scss
+++ b/assets/sass/pages/_terms.scss
@ -8,10 +8,10 @@
    margin: 2rem 0;
    @include themify($themes) {
      color: themed('terms-title-color');
-      text-shadow: 1px 1px 0 darken(themed('terms-title-color'), 10%), 
-        2px 2px 0 darken(themed('terms-title-color'), 14%), 
-        3px 3px 0 darken(themed('terms-title-color'), 18%),
-        4px 4px 0 darken(themed('terms-title-color'), 22%); 
+      text-shadow: 1px 1px 0 themed('terms-title-color'),
+        2px 2px 0 lighten(themed('terms-title-shadow-color'), 4%),
+        3px 3px 0 lighten(themed('terms-title-shadow-color'), 8%),
+        4px 4px 0 lighten(themed('terms-title-shadow-color'), 12%);
    }    
  }

--- a/assets/sass/themes/_dark.scss
+++ b/assets/sass/themes/_dark.scss
@ -57,6 +57,7 @@ $dark: (
    pagination-disabled-color: #757575,
    pagination-number-color: #FCFCFA,
    terms-title-color: #727072,
+    terms-title-shadow-color: #403E41,
    terms-tags-color: #78DCE8,
    terms-categories-color: #AB9DF2,
    terms-series-color: #EA9C77,
--- a/assets/sass/themes/_hacker.scss
+++ b/assets/sass/themes/_hacker.scss
@ -57,6 +57,7 @@ $hacker: (
    pagination-disabled-color: #424242,
    pagination-number-color: #FCFCFA,
    terms-title-color: #C7BA00,
+    terms-title-shadow-color: #252526,
    terms-tags-color: #78DCE8,
    terms-categories-color: #AB9DF2,
    terms-series-color: #EA9C77,
--- a/assets/sass/themes/_kimbie.scss
+++ b/assets/sass/themes/_kimbie.scss
@ -56,6 +56,7 @@ $kimbie: (
  pagination-disabled-color: #bdbdbd,
  pagination-number-color: #fff,
  terms-title-color: #889b4a,
+  terms-title-shadow-color: #362712,
  terms-tags-color: #f06431,
  terms-categories-color: #8ab1b0,
  terms-series-color: #dc3958,
--- a/assets/sass/themes/_light.scss
+++ b/assets/sass/themes/_light.scss
@ -55,7 +55,8 @@ $light: (
    pagination-background-color: #eee,
    pagination-disabled-color: #bdbdbd,
    pagination-number-color: #757575,
-    terms-title-color: #9e9e9e,
+    terms-title-color: #607d8b,
+    terms-title-shadow-color: #424242,
    terms-tags-color: #424242,
    terms-categories-color: #424242,
    terms-series-color: #424242,
--- a/assets/sass/themes/_solarized.scss
+++ b/assets/sass/themes/_solarized.scss
@ -55,7 +55,8 @@ $solarized: (
    pagination-background-color: #FBF1D1,
    pagination-disabled-color: #bdbdbd,
    pagination-number-color: #455a64,
-    terms-title-color: lighten(#B58900, 7%),
+    terms-title-color: #cb4b16,
+    terms-title-shadow-color: #455a64,
    terms-tags-color: lighten(#B58900, 5%),
    terms-categories-color: #cb4b16,
    terms-series-color: #859900,
--- a/exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
+++ b/exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
--- a/layouts/partials/head/scripts.html
+++ b/layouts/partials/head/scripts.html
@ -529,11 +529,17 @@
    }

    function generateHighlightedText(text, regions) {
-      if(!regions) return text;
+      if (!regions) {
+        return text;
+      }

      var content = '', nextUnhighlightedRegionStartingIndex = 0;

      regions.forEach(function(region) {
+        if (region[0] === region[1]) {
+          return null;
+        }
+        
        content += '' +
          text.substring(nextUnhighlightedRegionStartingIndex, region[0]) +
          '<span class="search__highlight">' +
--- a/layouts/partials/header/header-text.html
+++ b/layouts/partials/header/header-text.html
@ -5,7 +5,7 @@
      {{ $header := . }}
      {{ if .title }}            
        {{ range .title }}
-        <div class="site-header__title" style="font-size: {{ $header.titleFontSize }}px;">
+        <div class="site-header__title {{ if $header.titleShadow }}site-header__title--shadow{{ end }}" style="font-size: {{ $header.titleFontSize }}px; {{ with $header.titleColor }}color:{{ . }}{{ end }}">
          {{ . }}
        </div>
        {{ end }}      
--- a/layouts/partials/navbar/site-nav.html
+++ b/layouts/partials/navbar/site-nav.html
@ -1,13 +1,15 @@
 <nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar__brand">
    {{ if $.Param "logo" | default true }}
-    <a href="{{ "/" | relLangURL }}" title="{{ i18n "tooltip-home" }}" rel="home" class="navbar__logo-link">
+    <a href="{{ "/" | relLangURL }}" title="{{ i18n "tooltip-home" }}" rel="home" class="{{ if eq ($.Param "logoType") "short" }}navbar__logo-link{{ else }}navbar__long-link{{ end }}">
      <img data-src="{{ "/logo.png" | relURL }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48px' height='48px'%3E%3Cpath fill='%2337474f' d='M24.648,4l0.29,0.002c0.52,0.008,1.23,0.109,1.857,0.198c0.314,0.045,0.616,0.088,0.883,0.119 c0.164,0.024,0.715,0.227,1.043,0.348C29.468,4.941,32,6.875,32,6.875L31,5c0,0,1.563,0.445,2.125,0.875C34.247,6.733,34.354,7,35,7 h0.375L35,6c0.375,0.19,1.78,1.289,1.968,1.541L37,7.583l0.036,0.039c1.411,1.495,2.095,2.462,2.595,3.169 c0.339,0.48,0.945,0.822,1.243,1.21C41.225,12.454,42,14,42,14v-0.998c0,0,0.776,1.029,1.25,2.373C44,17.5,44,19,44,19 s-0.25-0.625-1-0.875C43,19,44,21,44,24.002v6c-0.74,0.57-0.989,1.443-1.214,2.386c-0.328,1.372-0.605,2.294-1.444,2.593L41,35.002 l-0.08,0.277c-0.533,0.662-0.994,1.351-1.439,2.018c-1.446,2.163-2.495,3.705-4.481,3.705c-1.041,0-2.044,0.167-2.441,0.559 C32.128,41.987,32,42.662,32,43.002c-1.012,0.377-2.167,1-8,1c-5,0-9.4-1.756-12.262-4.545c-0.965-0.785-2.272-1.669-2.857-2.273 C6.976,35.593,6.047,33.058,6,33.002c1.184,0.985,5.245,4.636,7.091,4.636l0,0C13.301,37.416,12,35.684,12,35.002 C13.429,37.162,17.405,40,23,40c4.125,0,3.892-0.73,6-1c4.875-0.625,7.492-5.439,8.214-6.816c0.05-0.096,0.202-1.02,0.24-1.092 c0.368-0.376,0.463-1.167,0.607-2.371C38.17,27.815,39,26.75,39,25.625S38,24,38,24s0-3-0.625-5.375 C37.25,18.151,36.738,16.409,34,13v1.002c-2.125-1.127-3.668-2.545-4.125-2.752C28.435,10.599,26.831,10,25,10c-4,0-4.625,1-8,2 c0,0,1.25,0,2,0c0,0-1.867,1.445-3,2.125c-1.875,1.125-4,5.034-4,7.875c0,3-2.485,4-4,4c-2.453,0-4-2-4-4 c0-1.133,0.45-2.5,0.886-3.425c0.411-0.873,0.799-1.697,0.795-2.581c0.031-0.106,0.274-0.383,0.435-0.566 c0.466-0.531,1.083-1.234,1.224-2.252c1.106-0.927,3.13-3.015,3.155-3.041c0.162-0.171,0.324-0.304,0.511-0.457 c0.324-0.265,0.728-0.594,1.221-1.205l0.423-0.525c0.798-0.428,2.222-1.035,2.776-1.271c0.342-0.146,0.602-0.258,0.716-0.313 L19.75,5.75C19.966,5.75,20,5.238,20,5c0-0.227,0.106-0.198,0.324-0.273C22.139,4.099,22.799,4,24.648,4L24.648,4'/%3E%3C/svg%3E" alt="Home" class="lazyload navbar__logo">
    </a>
    {{ end }}
+    {{ if eq .Site.Params.logoType "short" }}
      <a href="{{ "/" | relLangURL }}" title="{{ i18n "tooltip-home" }}" rel="home" class="navbar__title-link">
        <h6 class="navbar__title">{{ .Site.Params.logoText }}</h6>
      </a>
+    {{ end }}
  </div>
  
  {{ partial "navbar/select-theme-mobile" . }}