sidebar subs added, gallery mask, mode added,

README.md

@@ -238,6 +238,7 @@ enableSidebarSeries = true
 enableSidebarCategories = true
 enableToc = true
 itemsPerCategory = 5
+enableSideSubscribe = false
 
 # comment
 enableComment = false
@@ -312,7 +313,34 @@ The CSS grid layout are in `assets/sass/layout/_grid.scss`. A lot can be done by
 
 ## Gallery
 
-Follow the steps below if you want to make gallery
+There are two ways to make gallery. You can specify **mode** at frontmatter.
+
+```bash
+content/gallery/mygallery/index.md
+
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+description: 
+type: gallery
+mode: one-by-one # at-once or one-by-one
+tags:
+-
+series:
+-
+categories:
+-
+images: # when mode is one-by-one, images front matter works
+  - image: image1.jpg
+    caption: caption1
+  - image: image2.jpg
+    caption: caption2
+    ...
+---
+
+```
+
+If you set the mode to one-by-one, list.html page will use images frontmatter above. If you set the mode to at-once, list.html page will not use images frontmatter and just read all files under the static/gallery/mygallery folder.
 
 1. Make a gallery folder under the content folder
 

archetypes/gallery.md

@@ -3,10 +3,14 @@ title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
 description: 
 type: gallery
+mode: at-once # at-once or one-by-one
 tags:
 -
 series:
 -
 categories:
 -
+images: # when mode is one-by-one, images front matter works
+  - image: 
+    caption: 
 ---

assets/sass/abstracts/_variables.scss

@@ -6,7 +6,7 @@ $code-font-stack: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "
   "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
   monospace !default;
 
-$z-indexes: ("modal", "navbar", "dropdown", "header", "grid", "search", "content", "footer", "taxo", "toc");
+$z-indexes: ("modal", "navbar", "dropdown", "header", "grid", "search", "content", "footer", "taxo", "toc", "gallery-mask");
 $ls: (
   base: -10,
   heading: 10,

assets/sass/components/_subs.scss

@@ -15,22 +15,57 @@
   &__form {
     @include flexbox();
     @include align-items(center);
+    margin-bottom: 0.25rem;
+  }
+
+  &__icon {
+    padding: 0.3rem;
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;    
+
+    @include flexbox();
+    @include align-items(center);
+    @include themify($themes) {
+      color: themed("search-icon-color");
+      background-color: themed("search-background-color");
+    }
   }
 
   &__input {
     height: 32px;
     width: 100%;
     padding: 0.25rem;
-    border-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
     margin-right: 1rem;
-    background-color: #212121;
+    border: none;
-    border: 1px solid #212121;
-    color: red;
-    border-left: none;
     outline: none;
+    @include themify($themes) {
+      color: themed("search-color");
+      background-color: themed("search-background-color");
+      @include input-placeholder {
+          font-family: $search_placeholder_font;
+          color: themed("search-placeholder-color");
+      }      
+    }
   }
 
   &__button {
+    border-radius: 0.125rem;
+    border: none;
+    outline: none;
+    height: 25px;
+    width: auto;
+    min-width: 60px;    
+    cursor: pointer;
 
+    @include transition(all, 0.25s, ease);
+    @include themify($themes) {
+      color: themed('subs-button-color');
+      background-color:themed('subs-button-background-color');
+      @include on-event {
+        background-color:themed('subs-button-hover-background-color');
+      }
+    }
   }
 }

assets/sass/main.scss

@@ -124,6 +124,11 @@ $whoami_border_color: {{ $scr.Get "whoami_border_color" }};
 $switch_background_color: {{ $scr.Get "switch_background_color" }};
 $switch_button_color: {{ $scr.Get "switch_button_color" }};
 $switch_active_color: {{ $scr.Get "switch_active_color" }};
+$subs_button_color: {{ $scr.Get "subs_button_color" }};
+$subs_button_background_color: {{ $scr.Get "subs_button_background_color" }};
+$subs_button_hover_background_color: {{ $scr.Get "subs_button_hover_background_color" }};
+$gallery_mask_color: {{ $scr.Get "gallery_mask_color" }};
+$gallery_mask_background_color: {{ $scr.Get "gallery_mask_background_color" }};
 
 @import 'abstracts/variables';
 @import 'abstracts/mixins';

assets/sass/pages/_gallery.scss

@@ -35,11 +35,7 @@
 .grid-sizer,
 .grid-item {
   width: 33.333%;
-  padding: 0.25rem;
+  padding: 0.5rem;  
-  
-  img {
-      border-radius: 0.25rem;
-  }
 }
 
 .grid-item {
@@ -62,4 +58,37 @@
       font-size: 1rem;
       text-align: center;
   }
+
+  .grid-item {
+    position: relative;
+    opacity: 1;
+    height: auto;
+    cursor: pointer;
+
+    &__desc {
+      position: absolute;
+      display: none;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      padding: 0.5rem;
+      width: calc(100% - 1rem);
+      height: calc(100% - 1rem);
+      border-radius: 0.25rem;      
+      z-index: z('gallery-mask');
+      font-family: $single_title_font;
+      font-weight: 700;
+      cursor: pointer;      
+
+      @include box-shadow(0, 4px, 4px, 0, rgba(0, 0, 0, 0.4));
+      @include on-event {
+        @include themify($themes) {
+          color: themed('gallery-mask-color');
+          background-color: themed('gallery-mask-background-color');
+        }
+      }
+    }
+  }
 }

assets/sass/themes/_custom.scss

@@ -94,4 +94,9 @@ $custom: (
   switch-background-color: $switch_background_color,
   switch-button-color: $switch_button_color,
   switch-active-color: $switch_active_color,
+  subs-button-color: $subs_button_color,
+  subs-button-background-color: $subs_button_background_color,
+  subs-button-hover-background-color: $subs_button_hover_background_color,
+  gallery-mask-color: $gallery_mask_color,
+  gallery-mask-background-color: $gallery_mask_background_color,
 ) !default;

assets/sass/themes/_dark.scss

@@ -95,4 +95,9 @@ $dark: (
     switch-background-color: #403E41,
     switch-button-color: #FCFCFA,
     switch-active-color: #FF6188,
+    subs-button-color: #FCFCFA,
+    subs-button-background-color: #FF6188,
+    subs-button-hover-background-color: darken(#FF6188, 5%),
+    gallery-mask-color: #FCFCFA,
+    gallery-mask-background-color: rgba(0, 0, 0, 0.7),
 );

assets/sass/themes/_hacker.scss

@@ -98,4 +98,9 @@ $hacker: (
     switch-background-color: #403E41,
     switch-button-color: #FCFCFA,
     switch-active-color: #FF6188,
+    subs-button-color: $primary-color,
+    subs-button-background-color: #252526,
+    subs-button-hover-background-color: lighten(#252526, 5%),
+    gallery-mask-color: #FCFCFA,
+    gallery-mask-background-color: rgba(0, 0, 0, 0.7),
 );

assets/sass/themes/_light.scss

@@ -95,4 +95,9 @@ $light: (
     switch-background-color: #bdbdbd,
     switch-button-color: #FCFCFA,
     switch-active-color: #FF6188,
+    subs-button-color: #607d8b,
+    subs-button-background-color: #eeeeee,
+    subs-button-hover-background-color: darken(#eeeeee, 5%),
+    gallery-mask-color: #424242,
+    gallery-mask-background-color: rgba(255, 255, 255, 0.7),
 );

assets/sass/themes/_solarized.scss

@@ -9,7 +9,7 @@ $solarized: (
     title-color: $primary-color,
     meta-color: lighten($primary-color, 5%),
     body-color: #424242,
-    hr-color: $primary-color,
+    hr-color: $secondary-color,
     body-background-color: #FDF7E3,
     backdrop-background-color: #DDD6C7,
     dropdown-border-color: $primary-color,
@@ -98,4 +98,9 @@ $solarized: (
     switch-background-color: darken(#EEE8D5, 10%),
     switch-button-color: #FCFCFA,
     switch-active-color: #FF6188,
+    subs-button-color: #FCFCFA,
+    subs-button-background-color: $secondary-color,
+    subs-button-hover-background-color: darken($secondary-color, 3%),
+    gallery-mask-color: #424242,
+    gallery-mask-background-color: rgba(253, 247, 227, 0.7),
 );

data/_config/_default/params.toml

@@ -22,6 +22,7 @@ enableSidebarSeries = true
 enableSidebarCategories = true
 enableToc = true
 itemsPerCategory = 5
+enableSideSubscribe = false
 
 # footer
 showPoweredBy = true

data/skin.toml

@@ -94,3 +94,8 @@ whoami_border_color = "inherit"
 switch_background_color = "inherit"
 switch_button_color = "inehrit"
 switch_active_color = "inehrit"
+subs_button_color = "inherit"
+subs_button_background_color = "inherit"
+subs_button_hover_background_color = "inherit"
+gallery_mask_color = "inherit"
+gallery_mask_background_color = "inherit"

exampleSite/config.toml

@@ -48,6 +48,7 @@ rssLimit = 100
   enableSidebarCategories = true
   enableToc = true
   itemsPerCategory = 5
+  enableSideSubscribe = false
   
   # footer
   showPoweredBy = true

exampleSite/content/gallery/photo/index.ko.md

@@ -2,5 +2,9 @@
 title: "Photo"
 date: 2018-10-12T10:20:16+09:00
 type: "gallery"
+mode: "one-by-one"
 description: "포토 갤러리"
+images:
+  - image: owl.jpg
+    caption: owl caption
 ---

exampleSite/content/gallery/photo/index.md

@@ -2,5 +2,9 @@
 title: "Photo"
 date: 2018-10-12T10:20:16+09:00
 type: "gallery"
+mode: "one-by-one"
 description: "photo gallery"
+images:
+  - image: owl.jpg
+    caption: owl caption
 ---

i18n/en.toml

@@ -37,8 +37,11 @@ other = "What's on this Page"
 [subs-label]
 other = "Subscribe"
 
-[subs-placeholder]
+[subs-placeholder-email]
 other = "Your email address"
 
+[subs-placeholder-name]
+other = "Your name"
+
 [subs-button]
 other = "Join"

i18n/ko.toml

@@ -37,8 +37,11 @@ other = "목차"
 [subs-label]
 other = "구독"
 
-[subs-placeholder]
+[subs-placeholder-email]
-other = "이메일 주소 입력"
+other = "이메일 주소"
+
+[subs-placeholder-name]
+other = "이름"
 
 [subs-button]
 other = "구독하기"

layouts/archive/list.html

@@ -10,7 +10,7 @@
 </span>
 <main class="main archive">
   <div>
-    {{ range (and (where .Site.RegularPages "Type" "!=" "about") (where .Site.RegularPages "Type" "!=" "archive")).GroupByDate .Site.Params.archiveGroupByDate }}
+    {{ range (and (where .Site.RegularPages "Type" "!=" "about") (where .Site.RegularPages "Type" "!=" "archive")).GroupByDate (.Site.Params.archiveGroupByDate | default 2006) }}
     <span class="archive__key">{{ .Key }}</span>
     <ul class="archive__ul">
       {{ range .Pages }}

layouts/gallery/single.html

@@ -5,18 +5,45 @@
     {{ .Content }}
   </div>
 </header>
+
+{{ if in (lower .Params.Mode) "one" }}
+
 <main class="gallery main">
   <div class="grid single__contents">
     <div class="grid-sizer"></div>
+    {{ if .File.Dir }}
       {{ $basename := (replace .File.Dir "\\" "/") }}
-    {{ range (readDir (print "./static/" $basename)) }}
+      {{ range .Params.Images }}
       <div class="grid-item">
-      <img src="{{ $basename | relURL }}{{ .Name }}" alt="{{ .Name }}">
+        <img src="{{ $basename | relURL }}{{ .image }}" alt="{{ print .caption }}"/>
+        <div class="grid-item__desc hide">{{ .caption }}</div>
       </div>
       {{ end }}
+    {{ end }}
   </div>
   {{ partial "pagination/pagination-single" . }}
 </main>
+
+{{ else }}
+
+<main class="gallery main">
+  <div class="grid single__contents">
+    <div class="grid-sizer"></div>
+    {{ if .File.Dir }}
+      {{ $basename := (replace .File.Dir "\\" "/") }}
+      {{ range (readDir (print "./static/" $basename)) }}
+      <div class="grid-item">
+        <img src="{{ $basename | relURL }}{{ .Name }}" alt="{{ index (split .Name ".") 0 }}"/>
+        <div class="grid-item__desc hide">{{ index (split .Name ".") 0 }}</div>
+      </div>
+      {{ end }}
+    {{ end }}
+  </div>
+  {{ partial "pagination/pagination-single" . }}
+</main>
+
+{{ end }}
+
 {{ partial "body/photoswipe" . }}
 
 {{ $masonry := resources.Get `js/masonry.pkgd.min.js` | resources.Fingerprint }}
@@ -35,6 +62,14 @@
       $grid.masonry();
     });
 
+    $('.grid-item').mouseenter(function () {
+      $(this).children('.grid-item__desc').show();
+    });
+
+    $('.grid-item').mouseleave(function () {
+      $(this).children('.grid-item__desc').hide();
+    });
+
     enquire.register("screen and (max-width:500px)", {
       match: function () {
         $('.grid-item').addClass('full');

layouts/partials/body/photoswipe.html

@@ -83,16 +83,27 @@
     var imgElements = $('.single__contents').find('img');
     var items = [];
 
+    {{ $mode:= .Params.Mode }}
+    var mode = JSON.parse({{ $mode | jsonify }});    
+
     imgElements.each(function (i, v) {
-      $(this).click(function (e) {
+      $(this).siblings().click(function (e) {
         initGallery(i);
       });
       $(this).css('cursor', 'pointer');
+
+      var caption = null;
+      if (mode && mode.toLowerCase().includes('one')) {        
+        caption = $(this).attr('alt');
+      } else {
+        caption = filename(v['src']);
+      }
+
       items.push({
         src: v['src'],
         w: 0,
         h: 0,
-        title: filename(v['src']),
+        title: caption,
       });
     });
   

layouts/partials/functions/parse_theme.html

@@ -96,3 +96,8 @@
 {{- $scr.Set "switch_background_color" $skin.switch_background_color -}}
 {{- $scr.Set "switch_button_color" $skin.switch_button_color -}}
 {{- $scr.Set "switch_active_color" $skin.switch_active_color -}}
+{{- $scr.Set "subs_button_color" $skin.subs_button_color -}}
+{{- $scr.Set "subs_button_background_color" $skin.subs_button_background_color -}}
+{{- $scr.Set "subs_button_hover_background_color" $skin.subs_button_hover_background_color -}}
+{{- $scr.Set "gallery_mask_color" $skin.gallery_mask_color -}}
+{{- $scr.Set "gallery_mask_background_color" $skin.gallery_mask_background_color -}}

layouts/partials/head/scripts.html

@@ -13,10 +13,12 @@
 {{ $zzo := resources.Get "js/zzo.js" | resources.Minify | resources.Fingerprint }}
 <script defer src="{{ $zzo.RelPermalink }}"></script>
 
-{{ range .Site.Params.custom_js -}}
+{{ if .Site.Params.custom_js }}
+{{ range .Site.Params.custom_js }}
   {{ $custom_template := resources.Get . }}
   {{ if $custom_template }}
     {{ $custom_js := $custom_template | resources.Minify | resources.Fingerprint }}
     <script defer src="{{ $custom_js.RelPermalink }}"></script>
   {{ end }}
-{{- end }}
+{{ end }}
+{{ end }}

layouts/partials/head/styles.html

@@ -3,10 +3,12 @@
 {{ $main_style := $main_template | resources.ExecuteAsTemplate "main_parsed.scss" . | toCSS $main_options | resources.Minify }}
 <link rel="stylesheet" href="{{ $main_style.RelPermalink }}">
 
-{{ range .Site.Params.custom_css -}}
+{{ if .Site.Params.custom_css }}
+{{ range .Site.Params.custom_css }}
   {{ $custom_template := resources.Get . }}
   {{ if $custom_template }}
     {{ $custom_style := $custom_template | resources.ToCSS | resources.Minify }}
     <link rel="stylesheet" href="{{ $custom_style.RelPermalink }}">
   {{ end }}
-{{- end }}
+{{ end }}
+{{ end }}

layouts/partials/header/site-header.html

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

layouts/partials/sidebar/sidebar-home.html

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

layouts/partials/sidebar/sidebar-list.html

@@ -5,6 +5,7 @@
 {{ with .File }}{{ $currentID = .UniqueID }}{{ end }}
 <div class="sidebar">
     {{ partial "sidebar/site-search" . }}
+    {{ if .Site.Params.itemsPerCategory }}
     {{ range first .Site.Params.itemsPerCategory .Pages }}
     <section class="sidebar-list">
         <a href="{{ .RelPermalink }}" class="sidebar-list__title p1 {{ if eq $currentSection .Section }}active{{ end }}">{{ .Title }}</a>
@@ -16,6 +17,7 @@
         </ul>
     </section>
     {{ end }}
+    {{ end }}
 </div>
 
 {{ partial "taxonomy/taxonomy-tags" . }}

layouts/partials/sidebar/site-subs.html

@@ -5,13 +5,18 @@
       {{ i18n "subs-label" }}
     </div>
     <div class="subs__form">
-      <input type="text" class="subs__input" placeholder="{{ T "subs-placeholder" }}"/>      
+      <span class="subs__icon">
+        {{ partial "svgs/etc/person.svg" (dict "width" 22 "height" 22) }}
+      </span>
+      <input id="subs-name" type="text" class="subs__input" placeholder="{{ T "subs-placeholder-name" }}"/>
     </div>
-    <button class="subs__button">{{ T "subs-button" }}</button>
+    <div class="subs__form">
+      <span class="subs__icon">
+        {{ partial "svgs/social/email.svg" (dict "width" 22 "height" 22) }}
+      </span>
+      <input id="subs-email" type="text" class="subs__input" placeholder="{{ T "subs-placeholder-email" }}"/>      
+    </div>
+    <button id="subs-button" class="subs__button">{{ T "subs-button" }}</button>
   </aside>
 </div>
-
-<script>
-
-</script>
 {{ end }}

layouts/partials/summary/card.html

@@ -15,7 +15,7 @@
     {{ if $params.featured_image }}
     <div class="summary-card__image-wrapper">
       {{ with (print "images/" $params.featured_image) }}
-      <img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-card__image">
+        <img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-card__image"/>
       {{ end }}
     </div>
     {{ else if $params.featured_video }}

layouts/partials/svgs/etc/person.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z"/></svg>

layouts/partials/svgs/etc/visibility.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>