diff --git a/README.md b/README.md index 43a50cd..886eada 100644 --- a/README.md +++ b/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 diff --git a/assets/sass/components/_summary.scss b/assets/sass/components/_summary.scss index ad58d53..11bb2b6 100644 --- a/assets/sass/components/_summary.scss +++ b/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'); + } + } +} diff --git a/assets/sass/themes/_dark.scss b/assets/sass/themes/_dark.scss index 6e928a7..50a5177 100644 --- a/assets/sass/themes/_dark.scss +++ b/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, diff --git a/assets/sass/themes/_light.scss b/assets/sass/themes/_light.scss index f1aa170..6fda7a3 100644 --- a/assets/sass/themes/_light.scss +++ b/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, diff --git a/assets/sass/themes/_solarized.scss b/assets/sass/themes/_solarized.scss index 55f49da..eb7e77a 100644 --- a/assets/sass/themes/_solarized.scss +++ b/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, diff --git a/data/_config/_default/params.toml b/data/_config/_default/params.toml index d971e50..e72c565 100644 --- a/data/_config/_default/params.toml +++ b/data/_config/_default/params.toml @@ -13,6 +13,7 @@ enableSearch = true enableMark = true enableGoToTop = true enableWhoami = true +summaryShape = "classic" # card, classic # sidebar enableSidebarTags = true diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 474d99e..b51d26f 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -39,6 +39,7 @@ rssLimit = 100 enableMark = true enableGoToTop = true enableWhoami = true + summaryShape = "card" # card, classic # sidebar enableSidebarTags = true diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html index ad1c2e4..33ec70c 100644 --- a/layouts/_default/summary.html +++ b/layouts/_default/summary.html @@ -1,34 +1,67 @@ -
+{{ if eq (lower .Site.Params.summaryShape) "card" }} +
{{ .Title }}
-
๐Ÿ•“ {{ .Date.Format (i18n "summary-dateformat") }} ยท โ˜•{{ .ReadingTime }} min read
+
๐Ÿ•“ {{ .Date.Format (i18n "summary-dateformat") }} ยท โ˜•{{ .ReadingTime }} min read
{{ $params := .Params }} -
-
+
+
{{ with $params.Description }} {{ . }} {{ else }} {{ .Summary }} {{ end }}
- {{ if $params.featured_image }} -
- {{ with (print "images/" $params.featured_image) }} - {{ print $params.featured_image }} - {{ end }} -
- {{ else if $params.featured_video }} - {{ with print ("videos/poster/" | relURL) $params.featured_video_poster }} -
- -
+ {{ if $params.featured_image }} +
+ {{ with (print "images/" $params.featured_image) }} + {{ print $params.featured_image }} {{ end }} - {{ end }} +
+ {{ else if $params.featured_video }} + {{ with print ("videos/poster/" | relURL) $params.featured_video_poster }} +
+ +
+ {{ end }} + {{ end }}
-
-
\ No newline at end of file +
+
+{{ else if eq (lower .Site.Params.summaryShape) "classic" }} +
+
+ {{ $params := .Params }} + {{ if $params.featured_image }} +
+ {{ with (print "images/" $params.featured_image) }} + {{ print $params.featured_image }} + {{ end }} +
+ {{ end }} +
+
+
{{ .Title }}
+
๐Ÿ•“ {{ .Date.Format (i18n "summary-dateformat") }} ยท โ˜•{{ .ReadingTime }} min read +
+
+
+
+ {{ with $params.Description }} + {{ . }} + {{ else }} + {{ .Summary }} + {{ end }} +
+
+
+
+
+
+{{ else }} +{{ end }} \ No newline at end of file diff --git a/static/images/tree.jpg b/static/images/tree.jpg new file mode 100644 index 0000000..b7b1908 Binary files /dev/null and b/static/images/tree.jpg differ diff --git a/static/videos/1.mp4 b/static/videos/1.mp4 new file mode 100644 index 0000000..9754f6e Binary files /dev/null and b/static/videos/1.mp4 differ diff --git a/static/videos/poster/1.jpg b/static/videos/poster/1.jpg new file mode 100644 index 0000000..ac45ec2 Binary files /dev/null and b/static/videos/poster/1.jpg differ