whoami redesign, tag taxo redesign, mobile search in progress

assets/js/zzo.js

@@ -71,7 +71,7 @@ $(document).ready(function() {
   enquire.register("screen and (max-width: 769px)", {
     match: function () {
       $('main').removeClass('main-main').removeClass('main').addClass('main');
-      $('aside').removeClass('main-side').removeClass('hide').addClass('hide');     
+      $('aside').removeClass('main-side').removeClass('hide').addClass('hide');      
     },
     unmatch: function () {      
       if ($('aside').length > 0) {
@@ -79,7 +79,7 @@ $(document).ready(function() {
         $('aside').removeClass('main-side').removeClass('hide').addClass('main-side');
       }
       $('.navbar__burger').removeClass('is-active');
-      $('.navbar__menu').removeClass('is-active');
+      $('.navbar__menu').removeClass('is-active');      
     },
     setup: function () { },
     deferSetup: true,
@@ -117,4 +117,10 @@ $(document).ready(function() {
       $(this).attr('data-content', 'Code');
     }
   });
+
+  // mobile search
+  $('.mobile-search').hide();
+  $('#mobileSearchBtn').click(function() {
+    $('#mobileSearchContainer').show();
+  });
 });

assets/sass/base/_animation.scss

@@ -0,0 +1,5 @@
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}

assets/sass/base/_helpers.scss

@@ -63,4 +63,4 @@
 
 .grow {
   @include flex-grow(1);
-}
+}

assets/sass/components/_hr.scss

@@ -1,5 +1,6 @@
 .hr-fade {
-  height: 1px;  
+  height: 1px;
+  width: 100%;
 
   @include themify($themes) {
     color: themed('hr-color');
@@ -10,4 +11,50 @@
       transparent 100%
     );
   }  
+}
+
+.hr-slash {
+  width: 100%;
+  height: 10px;
+  background-size: 10px 10px;
+    
+  @include themify($themes) {
+    color: themed('hr-color');
+    background-image: linear-gradient(-45deg,
+      transparent,
+      transparent 25%,
+      currentColor 25%,
+      currentColor 50%,
+      transparent 50%,
+      transparent 75%,
+      currentColor 75%
+    );    
+  } 
+}
+
+.hr-dots {
+  @include themify($themes) {
+    $color: themed('hr-color');
+    color: $color;
+    width: 100%;
+    border-width: 0 0 7px;
+    border-style: solid;
+    border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1" width="8" height="4"><circle fill="#{$color}" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;   
+  }
+}
+
+.hr-vertical-lines {
+  height: 5px;
+  @include themify($themes) {
+    $color: themed('hr-color');
+    color: $color;
+  }  
+  background-image: linear-gradient(
+    90deg,
+    currentColor,
+    currentColor 33.33%,
+    transparent 33.33%,
+    transparent 100%);
+  background-size: 3px 100%;
+  width: 75%;
 }

assets/sass/components/_pagination.scss

@@ -59,13 +59,13 @@
   margin: 1rem 0;
 
   &__left,
-  &__right {    
+  &__right {
     @include truncate($grid_max_width + $grid_max_unit);
     @include flexbox();
     @include align-items(center);
     @include justify-content(center);
-
+    
-    padding: 0.125rem;  
+    padding: 0.25rem;
     border-radius: 0.125rem;
     &-title {
       padding-bottom: 0.3rem;

assets/sass/components/_related.scss

@@ -2,12 +2,13 @@
   margin: 5rem 0;
   padding: 0.5rem;
   width: 100%;
+  position: relative;
+
   @include flexbox();
   @include align-items(center);
   @include flex-direction(column);
 
-  &-title {
+  &__title {
-    @include align-self(center);
     @include themify($themes) {
       color: themed('related-header-title-color');
     }
@@ -18,7 +19,7 @@
     list-style-type: disc;
   }
 
-  &-link {
+  &__link {
     @include themify($themes) {
       color: themed('related-link-color');
     }

assets/sass/components/_search.scss

@@ -107,4 +107,20 @@
       }
     }    
   }
+}
+
+.mobile-search {
+  position: absolute;
+  z-index: z('navbar');
+  width: 100vw;
+  height: 100vh;
+  background-color: red;
+
+  &__input-wrapper {
+    position: absolute;
+    top: 0;
+    width: 100vw;
+    height: $grid_navbar_height;
+    border: 5px solid blue;    
+  }
 }

assets/sass/components/_taxo.scss

@@ -1,5 +1,4 @@
 .taxo {
-  padding: 0.25rem;
   margin: 2.5rem 0;
   z-index: z('taxo');
 
@@ -24,7 +23,30 @@
   }
 
   &__link {
-       
+    text-decoration: none !important;   
+  }
+
+  &__text {
+    padding: 0.125rem 0.25rem;
+
+    @include on-event {        
+      text-decoration: underline !important;   
+    }
+    @include themify($themes) {
+      color: inherit;
+      background-color: themed('taxo-tags-background-color');
+    }
+  }
+
+  &__num {
+    border-top-right-radius: 0.175rem;
+    border-bottom-right-radius: 0.175rem;
+    padding: 0.125rem 0.25rem;
+
+    @include themify($themes) {
+      color: themed('taxo-num-color');
+      background-color: themed('taxo-num-background-color');    
+    }
   }
 
   .title {
@@ -47,38 +69,26 @@
   }
 
   .is-tags {
-    padding: 0.25rem;
+    border-radius: 0.175rem;
-    border-radius: 0.25rem;
     @include themify($themes) {
       color: themed('taxo-tags-color');
       background-color: themed('taxo-tags-background-color');
-      @include on-event {
-        background-color: themed('taxo-background-color-hover');
-      }
     }
   }  
 
   .is-categories {
-    padding: 0.25rem;
+    border-radius: 0.175rem;
-    border-radius: 0.25rem;
     @include themify($themes) {
       color: themed('taxo-categories-color');
       background-color: themed('taxo-categories-background-color');
-      @include on-event {
-        background-color: themed('taxo-background-color-hover');
-      }
     }
   }
 
   .is-series {
-    padding: 0.25rem;
+    border-radius: 0.175rem;
-    border-radius: 0.25rem;
     @include themify($themes) {
       color: themed('taxo-series-color');
       background-color: themed('taxo-series-background-color');
-      @include on-event {
-        background-color: themed('taxo-background-color-hover');
-      }
     }
   }
 }

assets/sass/components/_whoami.scss

@@ -1,22 +1,34 @@
 .whoami {
-  padding: 1rem;
+  padding: 0 1rem;
-  margin: 4rem 0;
+  margin: 1rem 0;
   border-radius: 0.25rem;
+  width: 100%;
+  
   @include flexbox();
-  @include themify($themes) {
+  
-    border-top: 2px dashed themed('whoami-border-color');
+  // @include themify($themes) {
-    border-bottom: 2px dashed themed('whoami-border-color');
+  //   border-top: 2px dashed themed('whoami-border-color');
-  }
+  //   border-bottom: 2px dashed themed('whoami-border-color');
+  // }
 
   &__image {    
     width: 100%;
     height: 100%;
-    border-radius: 0.5rem;
+    object-fit: cover;
-    object-fit: contain;
+    border-radius: 0.25rem;
+    
+    @include themify($themes) {
+      border-bottom: 4px solid themed('content-pre-main-color');
+    }        
 
-    &-wrapper {      
+    &-wrapper {
-      margin-right: 1rem;      
+      min-width: 150px;
-      max-width: 150px;      
+      max-width: 200px;
+      height: auto;     
+      margin-right: 1rem;
+      
+      @include flexbox();
+      @include flex-direction(column);
     }
   }
 
@@ -24,10 +36,33 @@
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
-    padding-bottom: 0.5rem;    
+    padding-bottom: 0.5rem;
+
+    @include themify($themes) {
+      text-decoration: underline double themed('content-pre-main-color');
+    }    
   }
   
   &__desc {
     font-size: 1rem;
+    padding-left: 0.25rem;
+  }
+
+  &__gutter {
+    height: 2.5rem;
+  }
+
+  &__social {
+    margin-top: 0.5rem;
+    a {
+      @include themify($themes) {        
+        text-decoration: none;
+        color: themed('social-icon-color');
+        &:hover {
+          color: themed('social-icon-hover-color');
+          transition: color 0.2s ease;
+        }        
+      }   
+    }
   }
 }

assets/sass/layout/_navigation.scss

@@ -25,11 +25,42 @@
     top: 0;
   }
 
+  &__mobile {
+    &--search {
+      display: none;
+      margin: auto;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: calc(100% - 50px);
+      height: $grid_navbar_height;
+      padding: 0 1rem;
+      font-size: 0.95rem;
+      font-family: 'Montserrat', sans-serif;
+      cursor: pointer;
+      
+      @include respond-to(sm) {
+        @include flexbox();
+        @include align-items(center);        
+      }
+
+      &-icon {
+        @include flexbox();
+        @include align-items(center);
+        margin-right: 0.5rem;
+      }
+    }
+  }
+
   &__brand {
+    height: $grid_navbar_height;
+
     @include flexbox();
     @include align-items(center);
-    @include flex-shrink(0);
+    @include flex-shrink(0);    
-    height: $grid_navbar_height;
+    @include respond-to(sm) {
+      display: none;
+    }
   }
 
   &__burger {        
@@ -126,7 +157,7 @@
             text-decoration: none;
             color: themed("navbar-title-color");
         }
-      }      
+      }
     }
   }
 

assets/sass/main.scss

@@ -61,11 +61,12 @@ $navbar_dropdown_item_hover_background_color: {{ $scr.Get "navbar_dropdown_item_
 $sidebar_title_color: {{ $scr.Get "sidebar_title_color" }};
 $sidebar_li_color: {{ $scr.Get "sidebar_li_color" }};
 $taxo_title_color: {{ $scr.Get "taxo_title_color" }};
+$taxo_num_color: {{ $scr.Get "taxo_num_color" }};
+$taxo_num_background_color: {{ $scr.Get "taxo_num_background_color" }};
 $taxo_tags_background_color: {{ $scr.Get "taxo_tags_background_color" }};
 $taxo_tags_color: {{ $scr.Get "taxo_tags_color" }};
 $taxo_series_background_color: {{ $scr.Get "taxo_series_background_color" }};
 $taxo_series_color: {{ $scr.Get "taxo_series_color" }};
-$taxo_background_color_hover: {{ $scr.Get "taxo_background_color_hover" }};
 $taxo_categories_background_color: {{ $scr.Get "taxo_categories_background_color" }};
 $taxo_categories_color: {{ $scr.Get "taxo_categories_color" }};
 $breadcrumb_item_color: {{ $scr.Get "breadcrumb_item_color" }};
@@ -144,6 +145,7 @@ $avatar_background_color: {{ $scr.Get "avatar_background_color" }};
 @import 'base/fonts';
 @import 'base/helpers';
 @import 'base/typography';
+@import 'base/animation';
 
 @import 'layout/navigation';
 @import 'layout/grid';

assets/sass/themes/_custom.scss

@@ -29,13 +29,14 @@ $custom: (
   sidebar-title-color: $sidebar_title_color,
   sidebar-li-color: $sidebar_li_color,
   taxo-title-color: $taxo_title_color,
+  taxo-num-color: $taxo_num_color,
+  taxo-num-background-color: $taxo_num_background_color,
   taxo-tags-background-color: $taxo_tags_background_color,
   taxo-tags-color: $taxo_tags_color,
   taxo-series-background-color: $taxo_series_background_color,
   taxo-series-color: $taxo_series_color,
   taxo-categories-background-color: $taxo_categories_background_color,
   taxo-categories-color: $taxo_categories_color,
-  taxo-background-color-hover: $taxo_background_color_hover,
   breadcrumb-item-color: $breadcrumb_item_color,
   breadcrumb-background-color: $breadcrumb_background_color,
   breadcrumb-item-active-color: $breadcrumb_item_active_color,

assets/sass/themes/_dark.scss

@@ -29,13 +29,14 @@ $dark: (
     sidebar-title-color: #aed581,
     sidebar-li-color: #FCFCFA,
     taxo-title-color: #bdbdbd,
-    taxo-tags-background-color: #212121,
+    taxo-num-color: #FCFCFA,
+    taxo-num-background-color: #212121,
+    taxo-tags-background-color: lighten(#212121, 10%),
     taxo-tags-color: #78DCE8,
     taxo-series-background-color: #212121,
     taxo-series-color: #EA9C77,
     taxo-categories-background-color: #212121,
     taxo-categories-color: #AB9DF2,
-    taxo-background-color-hover: darken(#212121, 5%),
     breadcrumb-item-color: #82aaff,
     breadcrumb-background-color: #212121,
     breadcrumb-item-active-color: #bdbdbd,
@@ -79,7 +80,7 @@ $dark: (
     search-icon-color: #727072,
     search-content-color: inherit,
     search-background-color: #212121,
-    search-content-background-color: #595B5C,
+    search-content-background-color: lighten(#403E41, 5%),
     search-hover-background-color: #727072,
     mark-color: #FCFCFA,
     mark-background-color: #FF6188,

assets/sass/themes/_hacker.scss

@@ -32,13 +32,14 @@ $hacker: (
     sidebar-title-color: #E3CD26,
     sidebar-li-color: $primary-color,
     taxo-title-color: #996287,
+    taxo-num-color: #E3CD26,
+    taxo-num-background-color: #252526,
     taxo-tags-background-color: lighten(#151715, 10%),
     taxo-tags-color: $primary-color,
     taxo-series-background-color: lighten(#151715, 10%),
     taxo-series-color: $primary-color,
     taxo-categories-background-color: lighten(#151715, 10%),
     taxo-categories-color: $primary-color,
-    taxo-background-color-hover: lighten(#151715, 20%),
     breadcrumb-item-color: #E08C48,
     breadcrumb-background-color: #252526,
     breadcrumb-item-active-color: #6B6B6B,

assets/sass/themes/_light.scss

@@ -29,13 +29,14 @@ $light: (
     sidebar-title-color: #424242,
     sidebar-li-color: #424242,
     taxo-title-color: #607d8b,
+    taxo-num-color: #424242,
+    taxo-num-background-color: #dbdbdb,
     taxo-tags-background-color: #eeeeee,
     taxo-tags-color: #424242,
     taxo-series-background-color: #eeeeee,
     taxo-series-color: #424242,
     taxo-categories-background-color: #eeeeee,
     taxo-categories-color: #424242,
-    taxo-background-color-hover: darken(#eeeeee, 5%),
     breadcrumb-item-color: #424242,
     breadcrumb-background-color: #eeeeee,
     breadcrumb-item-active-color: #bdbdbd,

assets/sass/themes/_solarized.scss

@@ -32,13 +32,14 @@ $solarized: (
     sidebar-title-color: $secondary-color,
     sidebar-li-color: #424242,
     taxo-title-color: $primary-color,
+    taxo-num-color: $primary-color,
+    taxo-num-background-color: darken(#FBF1D1, 7%),
     taxo-tags-background-color: #FBF1D1,
     taxo-tags-color: $primary-color,
     taxo-series-background-color: #FBF1D1,
     taxo-series-color: $primary-color,
     taxo-categories-background-color: #FBF1D1,
     taxo-categories-color: $primary-color,
-    taxo-background-color-hover: darken(#FBF1D1, 5%),
     breadcrumb-item-color: #424242,
     breadcrumb-background-color: #FBF1D1,
     breadcrumb-item-active-color: #bdbdbd,

data/_config/_default/config.toml

@@ -1,23 +0,0 @@
-baseURL = "http://example.org/"
-title = "Hugo Zzo Theme"
-theme = "zzo"
-
-defaultContentLanguage = "en"
-defaultContentLanguageInSubdir = true
-hasCJKLanguage = true
-
-summaryLength = 70
-
-copyright = "©{year}, All Rights Reserved"
-timeout = 10000
-enableEmoji = true
-paginate = 7
-rssLimit = 100
-
-[outputs]
-  home = [ "HTML", "RSS", "JSON" ]
-
-[taxonomies]
-  category = "categories"
-  tag = "tags"
-  series = "series"

data/_config/_default/languages.toml

@@ -1,9 +0,0 @@
-[en]
-  title = "Hugo Zzo Theme"
-  languageName = "English"
-  weight = 1
-
-[ko]
-  title = "Hugo Zzo Theme"
-  languageName = "한국어"
-  weight = 2

data/_config/_default/menus.en.toml

@@ -1,39 +0,0 @@
-[[main]]
-  identifier = "about"
-  name = "about"
-  url = "about"
-  weight = 1
-
-[[main]]
-  identifier = "archive"
-  name = "archive"
-  url = "archive"
-  weight = 2
-
-[[main]]
-  identifier = "gallery"
-  name = "gallery"
-  url = "gallery"
-  weight = 3
-    
-[[main]]
-  parent = "gallery"
-  name = "cartoon"
-  url = "gallery/cartoon"
-
-[[main]]
-  parent = "gallery"
-  name = "photo"
-  url = "gallery/photo"
-
-[[main]]
-  identifier = "posts"
-  name = "posts"
-  url = "posts"
-  weight = 4
-    
-[[main]]
-  identifier = "notes"
-  name = "notes"
-  url = "notes"
-  weight = 5

data/_config/_default/params.toml

@@ -1,68 +0,0 @@
-logoText = "Zzo"
-description = "The Zzo theme for Hugo example site."
-custom_css = []
-custom_js = []
-
-# header
-homeHeaderType = "slide" # text, img, slide
-swiperCount = 3 # only works when homeHeaderType = slide
-
-# body
-enableBreadcrumb = true
-enablePhotoSwipe = true
-enableSearch = true
-enableMark = true
-enableGoToTop = true
-enableWhoami = true
-summaryShape = "card" # card, classic, compact
-archiveGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
-archivePaginate = 20
-paginateWindow = 1
-
-# whoami
-myname = "zzossig"
-email = "zzossig@gmail.com"
-whoami = "Web Developer"
-useGravatar = false
-location = "Seoul, Korea"
-organization = "Hugo"
-link = "https://github.com/zzossig/hugo-theme-zzo"
-
-# sidebar
-enableBio = true
-enableSidebar = true
-enableSidebarTags = true
-enableSidebarSeries = true
-enableSidebarCategories = true
-enableToc = true
-enableTocSwitch = true
-itemsPerCategory = 5
-enableSideSubscribe = false
-searchLanguages = ['en']
-
-# footer
-showPoweredBy = true
-showFeedLinks = true
-showSocialLinks = true
-enableLangChange = true
-enableThemeChange = true
-themeOptions = ["dark", "light", "hacker", "solarized", "custom"]
-
-[marketing]
-  google_analytics = ""
-  google_tag_manager = ""
-
-[socialOptions]
-  email = "mailto:your@email.com"
-  facebook = "http://example.org/"
-  twitter = "http://example.org/"
-  github = "http://example.org/"
-  stack-overflow = ""
-  instagram = ""
-  google-plus = ""
-  youtube = ""
-  medium = ""
-  tumblr = ""
-  linkedin = ""
-  pinterest = ""
-  stack-exchange = ""

data/skin.toml

@@ -28,13 +28,14 @@ navbar_dropdown_item_hover_background_color = "inherit"
 sidebar_title_color = "inherit"
 sidebar_li_color = "inherit"
 taxo_title_color = "inherit"
+taxo_num_color = "inherit"
+taxo_num_background_color = "inherit"
 taxo_tags_background_color = "inherit"
 taxo_tags_color = "inherit"
 taxo_series_background_color = "inherit"
 taxo_series_color = "inherit"
 taxo_categories_background_color = "inherit"
 taxo_categories_color = "inherit"
-taxo_background_color_hover = "inherit"
 breadcrumb_item_color = "inherit"
 breadcrumb_background_color = "inherit"
 breadcrumb_item_active_color = "inherit"

i18n/en.toml

@@ -1,5 +1,5 @@
 [search-placeholder]
-other = "Search..."
+other = "Search"
 
 [summary-dateformat]
 other = "Jan 2, 2006"

i18n/ko.toml

@@ -1,5 +1,5 @@
 [search-placeholder]
-other = "검색..."
+other = "검색"
 
 [summary-dateformat]
 other = "2006년 01월 02일"

layouts/partials/body/related.html

@@ -1,11 +1,17 @@
 <div class="related">
     {{ $related := .Site.RegularPages.Related . | first 5 }}
     {{ with $related }}
-    <h1 class="title is-1 related-title">{{ i18n "single-related" }}</h1>
+    <h1 class="related__title">
+      <hr class="hr-dots" />
+      <div>
+        {{ i18n "single-related" }}
+      </div>
+      <hr class="hr-dots"/>
+    </h1>
     <ul class="related-ul">
         {{ range . }}
         <li>
-          <a href="{{ .RelPermalink }}" class="title is-5 related-link">{{ .Title }}</a>
+          <a href="{{ .RelPermalink }}" class="related__link">{{ .Title }}</a>
         </li>
         {{ end }}
     </ul>

layouts/partials/body/whoami.html

@@ -1,5 +1,7 @@
 {{ if $.Param "enableWhoami" }}
-<div class="whoami">
+<div class="whoami__gutter"></div>
+<hr class="hr-slash"/>
+<div class="whoami">  
   <div class="whoami__image-wrapper">
     {{ $src := "" }}
     {{ if site.Params.useGravatar }}    
@@ -20,8 +22,18 @@
       {{ .Site.Params.myname }}
     </div>
     <div class="whoami__desc">
-      {{ .Site.Params.whoami }}
+      {{ .Site.Params.whoami }}      
+    </div>
+    <div class="whoami__social">
+      {{ range $name, $path := $.Param "socialOptions" }}
+      {{ if $path }}
+      <a href="{{ $path | safeURL }}" title="{{ $name }}" aria-label="{{ $name }}">
+        {{ partial (print "svgs/social/" $name ".svg") (dict "width" 25 "height" 25) }}
+      </a>
+      {{ end }}
+      {{ end }}
     </div>
   </div>
 </div>
+<hr class="hr-slash" />
 {{ end }}

layouts/partials/functions/parse_theme.html

@@ -31,11 +31,12 @@
 {{- $scr.Set "sidebar_title_color" $skin.sidebar_title_color -}}
 {{- $scr.Set "sidebar_li_color" $skin.sidebar_li_color -}}
 {{- $scr.Set "taxo_title_color" $skin.taxo_title_color -}}
+{{- $scr.Set "taxo_num_color" $skin.taxo_num_color -}}
+{{- $scr.Set "taxo_num_background_color" $skin.taxo_num_background_color -}}
 {{- $scr.Set "taxo_tags_background_color" $skin.taxo_tags_background_color -}}
 {{- $scr.Set "taxo_tags_color" $skin.taxo_tags_color -}}
 {{- $scr.Set "taxo_series_background_color" $skin.taxo_series_background_color -}}
 {{- $scr.Set "taxo_series_color" $skin.taxo_series_color -}}
-{{- $scr.Set "taxo_background_color_hover" $skin.taxo_background_color_hover -}}
 {{- $scr.Set "taxo_categories_background_color" $skin.taxo_categories_background_color -}}
 {{- $scr.Set "taxo_categories_color" $skin.taxo_categories_color -}}
 {{- $scr.Set "breadcrumb_item_color" $skin.breadcrumb_item_color -}}

layouts/partials/navbar/site-nav-mobile.html

@@ -0,0 +1,11 @@
+<div id="mobileSearchBtn" class="navbar__mobile--search">
+  <div class="navbar__mobile--search-icon">
+    {{ partial "svgs/etc/search.svg" (dict "width" 22 "height" 22) }}
+  </div>
+  {{T "search-placeholder"}}
+</div>
+
+<div id="mobileSearchContainer" class="mobile-search hide">
+  <div class="mobile-search__input-wrapper">    
+  </div>
+</div>

layouts/partials/navbar/site-nav.html

@@ -9,6 +9,7 @@
       <h6 class="navbar__title">{{ .Site.Params.logoText }}</h6>
     </a>    
   </div>
+  <!-- {{ partial "navbar/site-nav-mobile" . }} -->
   <a role="button" class="navbar__burger" aria-label="menu" aria-expanded="false">
     <span aria-hidden="true"></span>
     <span aria-hidden="true"></span>

layouts/partials/pagination/pagination-single.html

@@ -1,14 +1,17 @@
 <div class="pagination-single">
   {{ if .PrevPage }}
+  <hr class="hr-vertical-lines" />
     <a href="{{ .PrevPage.Permalink }}" class="pagination-single__left">
-      {{ partial "svgs/arrow/keyboard-arrow-left.svg" (dict "width" 25 "height" 25) }}
+      {{ partial "svgs/arrow/arrow-back.svg" (dict "width" 30 "height" 30) }}
       <div class="pagination-single__left-title p1">{{ .PrevPage.Title }}</div>      
     </a>
+    <hr class="hr-vertical-lines"/>
   {{ end }}
   {{ if .NextPage }}
     <a href="{{ .NextPage.Permalink }}" class="pagination-single__right">      
       <div class="pagination-single__right-title p1">{{ .NextPage.Title }}</div>    
-      {{ partial "svgs/arrow/keyboard-arrow-right.svg" (dict "width" 25 "height" 25) }}
+      {{ partial "svgs/arrow/arrow-forward.svg" (dict "width" 30 "height" 30) }}
     </a>
+    <hr class="hr-vertical-lines" />
   {{ end }}
 </div>

layouts/partials/svgs/arrow/arrow-back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>

layouts/partials/svgs/arrow/arrow-forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="currentColor" d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>

layouts/partials/taxonomy/taxonomy-categories.html

@@ -10,7 +10,12 @@
         {{ if $index }}
             <span class="tag">
                 <a href="{{ $element.Page.RelPermalink }}" class="is-categories taxo__link">
-                    {{ $element.Page.Title }} · {{ printf "%#v" (len $element) }}
+                    <span class="taxo__text">
+                        {{ $element.Page.Title }}
+                    </span>
+                    <span class="taxo__num">
+                        {{ printf "%#v" (len $element) }}
+                    </span>
                 </a>
             </span>
         {{ end }}

layouts/partials/taxonomy/taxonomy-series.html

@@ -10,7 +10,12 @@
         {{ if $index }}
             <span class="tag">
                 <a href="{{ $element.Page.RelPermalink }}" class="is-series taxo__link">
-                    {{ $element.Page.Title }} · {{ printf "%#v" (len $element) }}
+                    <span class="taxo__text">
+                        {{ $element.Page.Title }}
+                    </span>
+                    <span class="taxo__num">
+                        {{ printf "%#v" (len $element) }}
+                    </span>
                 </a>
             </span>
         {{ end }}

layouts/partials/taxonomy/taxonomy-tags.html

@@ -10,7 +10,12 @@
         {{ if $index }}
             <span class="tag">
                 <a href="{{ $element.Page.RelPermalink }}" class="is-tags taxo__link">
-                    {{ $element.Page.Title }} · {{ printf "%#v" (len $element) }}
+                    <span class="taxo__text">
+                        {{ $element.Page.Title }}
+                    </span>
+                    <span class="taxo__num">
+                        {{ printf "%#v" (len $element) }}
+                    </span>
                 </a>
             </span>
         {{ end }}