card, classic summary mode surpport

README.md

@@ -1,6 +1,7 @@
 # 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.
+![zzo theme for Hugo](https://user-images.githubusercontent.com/52706977/68638044-ace72a80-0543-11ea-94d9-329ef0228f4f.gif)
 
 ## Table of contents
 
@@ -229,6 +230,7 @@ enableSearch = true
 enableMark = true
 enableGoToTop = true
 enableWhoami = true
+summaryShape = "classic" # card, classic
 
 # sidebar
 enableSidebarTags = true

assets/sass/components/_summary.scss

@@ -1,4 +1,4 @@
-.summary {  
+.summary-card {
   padding: 0 1rem;
   .title {    
     a {
@@ -45,7 +45,7 @@
     }
   }
 
-  .video {
+  &__video {
     width: 100%;
     max-height: 500px;
     object-fit: contain;
@@ -70,3 +70,66 @@
     }
   }
 }
+
+.summary-classic {
+  padding: 0 1rem;
+  .title {
+    font-size: 24px;    
+    a {
+      font-family: $summary_title_font;
+      font-weight: 700;
+      @include themify($themes) {
+          color: themed('title-color');
+          @include on-event {
+            color: themed('link-hover');
+          }
+      }
+    }
+  }
+
+  .subtitle {
+    font-family: $summary_subtitle_font;
+    @include themify($themes) {
+      color: themed('meta-color');
+    }
+  }
+
+  &__flex-box {
+    @include flexbox();
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  &__content {
+    @include flexbox();
+    @include flex-direction(column);
+    @include justify-content(flex-start);
+    padding-left: 1rem;
+  }
+
+  &__text {
+    margin-top: 1rem;
+    line-height: 1.7rem;
+    font-family: $summary_text_font;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    
+    &-wrapper {
+      max-height: 170px;
+      max-width: 170px;
+      min-width: 170px;
+      @include align-self(center);
+    }
+  }
+
+  hr {
+    border-radius: 5rem;
+    @include themify($themes) {      
+      border-top: 1px solid themed('hr-color');
+    }
+  }
+}

assets/sass/themes/_dark.scss

@@ -6,7 +6,7 @@ $dark: (
     title-color: #ffd866,
     meta-color: #FCFCFA,
     body-color: #FCFCFA,
-    hr-color: #fcfcfa,
+    hr-color: #403E41,
     body-background-color: #2D2A2E,
     backdrop-background-color: #212121,
     dropdown-border-color: #212121,

assets/sass/themes/_light.scss

@@ -6,7 +6,7 @@ $light: (
     title-color: #607d8b,
     meta-color: #424242,
     body-color: #424242,
-    hr-color: #fcfcfa,
+    hr-color: #eeeeee,
     body-background-color: #fafafa,
     backdrop-background-color: #e0e0e0,
     dropdown-border-color: #bdbdbd,

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: $secondary-color,
+    hr-color: lighten($secondary-color, 25%),
     body-background-color: #FDF7E3,
     backdrop-background-color: #DDD6C7,
     dropdown-border-color: $primary-color,

data/_config/_default/params.toml

@@ -13,6 +13,7 @@ enableSearch = true
 enableMark = true
 enableGoToTop = true
 enableWhoami = true
+summaryShape = "classic" # card, classic
 
 # sidebar
 enableSidebarTags = true

exampleSite/config.toml

@@ -39,6 +39,7 @@ rssLimit = 100
   enableMark = true
   enableGoToTop = true
   enableWhoami = true
+  summaryShape = "card" # card, classic
   
   # sidebar
   enableSidebarTags = true

layouts/_default/summary.html

@@ -1,11 +1,12 @@
-<article class="summary">
+{{ if eq (lower .Site.Params.summaryShape) "card" }}
+<article class="summary-card">
   <header>
     <h5 class="title h5"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h5>
     <h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} · ☕{{ .ReadingTime }} min read</h6>
   </header>
   {{ $params := .Params }}
-  <div class="summary__content">
+  <div class="summary-card__content">
-    <div class="summary__text p2">
+    <div class="summary-card__text p2">
       {{ with $params.Description }}
       {{ . }}
       {{ else }}
@@ -13,15 +14,15 @@
       {{ end }}
     </div>
     {{ if $params.featured_image }}
-      <div class="summary__image-wrapper">
+    <div class="summary-card__image-wrapper">
       {{ with (print "images/" $params.featured_image) }}
-        <img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary__image">
+      <img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-card__image">
       {{ end }}
     </div>
     {{ else if $params.featured_video }}
     {{ with print ("videos/poster/" | relURL) $params.featured_video_poster }}
-      <div class="video-wrapper">
+    <div class="summary-card__video-wrapper">
-        <video class="video" controls preload='none' poster='{{ . | relURL }}' data-setup='{"fluid": true}'>
+      <video class="summary-card__video" controls preload='none' poster='{{ . | relURL }}' data-setup='{"fluid": true}'>
         {{ with print ("videos/" | relURL) $params.featured_video }}
         <source src="{{ . | relURL }}" type='video/mp4'>
         {{ end }}
@@ -32,3 +33,35 @@
   </div>
   <hr />
 </article>
+{{ else if eq (lower .Site.Params.summaryShape) "classic" }}
+<article class="summary-classic">
+  <div class="summary-classic__flex-box">
+    {{ $params := .Params }}
+    {{ if $params.featured_image }}
+    <div class="summary-classic__image-wrapper">
+      {{ with (print "images/" $params.featured_image) }}
+      <img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-classic__image">
+      {{ end }}
+    </div>    
+    {{ end }}
+    <div class="summary-classic__content">
+      <header>
+        <h5 class="title h5"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h5>
+        <h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} · ☕{{ .ReadingTime }} min read
+        </h6>
+      </header>
+      <div>
+        <div class="summary-classic__text p2">
+          {{ with $params.Description }}
+          {{ . }}
+          {{ else }}
+          {{ .Summary }}
+          {{ end }}
+        </div>
+      </div>
+    </div>    
+  </div>
+  <hr />
+</article>
+{{ else }}
+{{ end }}