feat(style): simplify blockquote style and rm fa-fw for fontawesome s…

…yntax (#257)
pogor-dev · Apr 24, 2020 · 41a92c6 · 41a92c6
1 parent 7ab1c10
commit 41a92c6
Show file tree

Hide file tree

Showing 20 changed files with 200 additions and 209 deletions.
diff --git a/README.md b/README.md
@@ -88,8 +88,8 @@ I hope you will LoveIt ❤️!
 * **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
 * **Valine** comment system supported by [Valine](https://valine.js.org/)
 * **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
-* **Telegram Comments** system supported by [Telegram Comments](https://comments.app/)
-* **Commento comments** system supported by [Commento](https://commento.io/)
+* **Telegram comments** system supported by [Telegram Comments](https://comments.app/)
+* **Commento** comments system supported by [Commento](https://commento.io/)
 
 ### Extended Features
 

diff --git a/README.zh-cn.md b/README.zh-cn.md
@@ -83,7 +83,7 @@
 * 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
 * 支持 **[Valine](https://valine.js.org/)** 评论系统
 * 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
-* 支持 **[Telegram Comments](https://comments.app/) 评论**系统
+* 支持 **[Telegram comments](https://comments.app/) 评论**系统
 * 支持 **[Commento](https://commento.io/)** 评论系统
 
 ### 扩展功能

diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
@@ -235,46 +235,15 @@
     }
 
     blockquote {
-      font-size: 1rem;
       display: block;
-      border-width: 1px 0;
-      border-style: solid;
-      border-color: $global-border-color;
-      padding: 1.5em 1.2em 0.5em 1.2em;
-      margin: 0 0 2em 0;
-      position: relative;
-
-      &::before {
-        content: '\201C';
-        position: absolute;
-        top: 0em;
-        left: 50%;
-        @include transform(translate(-50%, -50%));
-        width: 3rem;
-        height: 2rem;
-        font: 6em/1.08em 'PT Sans', sans-serif;
-        color: $single-link-color;
-        text-align: center;
-
-        .dark & {
-          color: $single-link-color-dark;
-        }
-      }
-
-      &::after {
-        content: '#blockquote' attr(cite);
-        display: block;
-        text-align: right;
-        font-size: 0.875em;
-        color: $single-link-color;
-
-        .dark & {
-          color: $single-link-color-dark;
-        }
-      }
+      border-left: .5rem solid $blockquote-color;
+      background-color: rgba($blockquote-color, .2);
+      padding: .25rem .75rem;
+      margin: 1rem 0;
 
       .dark & {
-        border-color: $global-border-color-dark;
+        border-left-color: $blockquote-color-dark;
+        background-color: rgba($blockquote-color-dark, .2);
       }
     }
 

diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
@@ -97,6 +97,10 @@ $table-background-color-dark: #272c34 !default;
 // Color of the table thead
 $table-thead-color: #ededed !default;
 $table-thead-color-dark: #20252b !default;
+
+// Color of the blockquote
+$blockquote-color: #6bd6fd !default;
+$blockquote-color-dark: #59c5ec !default;
 // ========== Single Content ========== //
 
 // ========== Pagination ========== //

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -651,9 +651,6 @@ enableEmoji = true
     # whether to enable lightgallery
     # 是否使用 lightgallery
     lightgallery = false
-    # whether to show the copy button of the code block
-    # 是否显示代码块的复制按钮
-    copyCode = true
     # whether to enable the ruby extended syntax
     # 是否使用 ruby 扩展语法
     ruby = true
@@ -675,6 +672,12 @@ enableEmoji = true
       # whether to make the table of the contents automatically collapsed
       # 是否使目录自动折叠展开
       auto = true
+    # Code config
+    # 代码配置
+    [params.page.code]
+      # whether to show the copy button of the code block
+      # 是否显示代码块的复制按钮
+      copy = true
     # KaTeX mathematical formulas config (KaTeX https://katex.org/)
     # KaTeX 数学公式配置 (KaTeX https://katex.org/)
     [params.page.math]
@@ -802,7 +805,7 @@ enableEmoji = true
       # Commento comments config (https://commento.io/)
       # Commento comments 评论系统设置 (https://commento.io/)
       [params.page.comment.commento]
-        enable = true
+        enable = false
     # SEO config
     # SEO 配置
     [params.page.seo]

diff --git a/exampleSite/content/about.en.md b/exampleSite/content/about.en.md
@@ -15,7 +15,7 @@ math:
 [![GitHub stars](https://img.shields.io/github/stars/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt)
 [![GitHub forks](https://img.shields.io/github/forks/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt/fork)
 
-[:(far fa-kiss-wink-heart): LoveIt](https://github.com/dillonzq/LoveIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Dillon](https://dillonzq.com).
+[:(far fa-kiss-wink-heart fa-fw): LoveIt](https://github.com/dillonzq/LoveIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Dillon](https://dillonzq.com).
 
 It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) and [KeepIt Theme](https://github.com/liuzc/LeaveIt/).
 
@@ -25,55 +25,56 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a
 
 #### Performance and SEO
 
-* :(fas fa-rocket): Optimized for **performance**: [99]/[100] on mobile and [100]/[100] on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
-* :(fab fa-searchengin): Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
-* :(fab fa-google): **[Google Analytics](https://analytics.google.com/analytics)** supported
-* :(far fa-chart-bar): **[Fathom Analytics](https://usefathom.com/)** supported
-* :(fas fa-search): Search engine **verification** supported (Google, Bind, Yandex and Baidu)
-* :(fas fa-tachometer-alt): **CDN** for third-party libraries supported
-* :(fas fa-cloud-download-alt): Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes)
+* :(fas fa-rocket fa-fw): Optimized for **performance**: [99]/[100] on mobile and [100]/[100] on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
+* :(fab fa-searchengin fa-fw): Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
+* :(fab fa-google fa-fw): **[Google Analytics](https://analytics.google.com/analytics)** supported
+* :(far fa-chart-bar fa-fw): **[Fathom Analytics](https://usefathom.com/)** supported
+* :(fas fa-search fa-fw): Search engine **verification** supported (Google, Bind, Yandex and Baidu)
+* :(fas fa-tachometer-alt fa-fw): **CDN** for third-party libraries supported
+* :(fas fa-cloud-download-alt fa-fw): Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes)
 
 #### Appearance and Layout
 
 * [:(fas fa-desktop):]/[:(fas fa-mobile):] **Responsive** layout
 * [:(fas fa-sun):]/[:(fas fa-moon):] **[Light]/[Dark]** mode
-* :(fas fa-layer-group): Globally consistent **design language**
-* :(fas fa-ellipsis-h): **Pagination** supported
-* :(far fa-list-alt): Easy-to-use and self-expanding **table of contents**
-* :(fas fa-language): **Multilanguage** supported and i18n ready
-* :(fab fa-css3-alt): Beautiful **CSS animation**
+* :(fas fa-layer-group fa-fw): Globally consistent **design language**
+* :(fas fa-ellipsis-h fa-fw): **Pagination** supported
+* :(far fa-list-alt fa-fw): Easy-to-use and self-expanding **table of contents**
+* :(fas fa-language fa-fw): **Multilanguage** supported and i18n ready
+* :(fab fa-css3-alt fa-fw): Beautiful **CSS animation**
 
 #### Social and Comment Systems
 
-* :(far fa-user): **Gravatar** supported by [Gravatar](https://gravatar.com)
-* :(fas fa-user-circle): Local **Avatar** supported
-* :(far fa-id-card): Up to **64** social links supported
-* :(fas fa-share-square): Up to **28** share sites supported
-* :(far fa-comment): **Disqus** comment system supported by [Disqus](https://disqus.com)
-* :(far fa-comment-dots): **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
-* :(far fa-comment-alt): **Valine** comment system supported by [Valine](https://valine.js.org/)
-* :(far fa-comments): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
-* :(fas fa-comments): **Telegram Comments** system supported by [Comments](https://comments.app/)
+* :(far fa-user fa-fw): **Gravatar** supported by [Gravatar](https://gravatar.com)
+* :(fas fa-user-circle fa-fw): Local **Avatar** supported
+* :(far fa-id-card fa-fw): Up to **64** social links supported
+* :(fas fa-share-square fa-fw): Up to **28** share sites supported
+* :(far fa-comment fa-fw): **Disqus** comment system supported by [Disqus](https://disqus.com)
+* :(far fa-comment-dots fa-fw): **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
+* :(far fa-comment-alt fa-fw): **Valine** comment system supported by [Valine](https://valine.js.org/)
+* :(far fa-comments fa-fw): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
+* :(fas fa-comment fa-fw): **Telegram comments** system supported by [Comments](https://comments.app/)
+* :(fas fa-comment-dots fa-fw): **Commento** comments system supported by [Commento](https://commento.io/)
 
 #### Extended Features
 
-* :(fas fa-search): **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
-* :(fas fa-code): Automatically **highlighting** code
-* :(far fa-copy): **Copy code** to clipboard with one click
-* :(far fa-images): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
-* :(fab fa-font-awesome): Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
-* :(far fa-sticky-note): Extended Markdown syntax for **ruby annotation**
-* :(fas fa-percentage): Extended Markdown syntax for **fraction**
-* :(fas fa-square-root-alt): **Mathematical formula** supported by [$ \KaTeX $](https://katex.org/)
-* :(fas fa-project-diagram): **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
-* :(fas fa-chart-pie): **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
-* :(fas fa-map-marked-alt): **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
-* :(fas fa-music): **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
-* :(fas fa-video): **Bilibili player** shortcode
-* :(far fa-bell): Kinds of **admonitions** shortcode
-* :(fas fa-align-left): **Custom style** shortcode
-* :(fas fa-i-cursor): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
-* :(fas fa-arrow-down): **Dynamic scroll** supported by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
+* :(fas fa-search fa-fw): **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
+* :(fas fa-code fa-fw): Automatically **highlighting** code
+* :(far fa-copy fa-fw): **Copy code** to clipboard with one click
+* :(far fa-images fa-fw): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
+* :(fab fa-font-awesome fa-fw): Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
+* :(far fa-sticky-note fa-fw): Extended Markdown syntax for **ruby annotation**
+* :(fas fa-percentage fa-fw): Extended Markdown syntax for **fraction**
+* :(fas fa-square-root-alt fa-fw): **Mathematical formula** supported by [$ \KaTeX $](https://katex.org/)
+* :(fas fa-project-diagram fa-fw): **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
+* :(fas fa-chart-pie fa-fw): **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
+* :(fas fa-map-marked-alt fa-fw): **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
+* :(fas fa-music fa-fw): **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
+* :(fas fa-video fa-fw): **Bilibili player** shortcode
+* :(far fa-bell fa-fw): Kinds of **admonitions** shortcode
+* :(fas fa-align-left fa-fw): **Custom style** shortcode
+* :(fas fa-i-cursor fa-fw): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
+* :(fas fa-arrow-down fa-fw): **Dynamic scroll** supported by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
 * ...
 
 ### License