jekyll-theme-mint 1.0.3 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 635dc454d6e47e79c86f7df5acd9e7b810638648a33dc652ad6a90abfb9cb053
-  data.tar.gz: 7f3f3d9f3c93035a0d8b4e35babf20d5f85365e08cd8430b392510fde8e74ef5
+  metadata.gz: 72fba37aeb7c0a32546d11b56d91ffe4867871b1f3f446f3e83276ae22fc4f63
+  data.tar.gz: fdd70aae96f4f879ddc8f47b2b81d6faca3da5930689ad0af5b58a59a4b20c5c
 SHA512:
-  metadata.gz: 3ab9b325a905948465e55009706d2c437280f6f0ff51059f078821c5ec3977ccdbe463492a143ef09c94ba1c904e49c1b7d2e3ed2763267d0d8b462a1979b33f
-  data.tar.gz: deff5e9cf73839561cdab1ad5fc1c7c0c567b15ed2884015c6c7898da6916621dd24e34728a8f680f3e06b97a82b946bf21a21f3656d39369af8e08a9b17d8a1
+  metadata.gz: fe56561aaab9412dce1af9bbe67fef697f35c9f2547c5e278b522e929030610db57d803481420b25796ad13530d1d55d22bbd65204060c0b1f12cfc57550a80e
+  data.tar.gz: aec2dc324745d57eaf31fadad90a0ffc7b63f7bae7c7b0d2860c9decfbda2aa8e0c2d770d9598c191f672ed23480981122122f6c254fe10cc57b6e4df5a68eaa

data/README.md

@@ -28,6 +28,22 @@ Or install it yourself as:
 
 ## Usage
 
+### Theme
+
+Edit `_config.yml` file to change blog theme.
+
+```yaml
+blog_theme: light  # use light theme
+
+# or
+
+blog_theme: dark # use dark theme
+
+# or
+
+blog_theme: auto # auto change the theme when your system and browser supported
+```
+
 ### Add social links
 
 Edit `_config.yml` file to add your social links.

data/_includes/head.html

@@ -2,7 +2,17 @@
   <meta charset='utf-8'>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
   {% seo %}
-  <link rel='stylesheet' href='{{ '/assets/main.css' | relative_url }}'>
+
+  {% case site.blog_theme %}
+    {% when 'light' %}
+      <link rel='stylesheet' href='{{ '/assets/light.css' | relative_url }}'>
+    {% when 'dark' %}
+      <link rel='stylesheet' href='{{ '/assets/dark.css' | relative_url }}'>
+    {% when 'auto' %}
+      <link rel='stylesheet' href='{{ '/assets/light.css' | relative_url }}'>
+      <link rel='stylesheet' href='{{ '/assets/dark.css' | relative_url }}' media="(prefers-color-scheme: dark)">
+  {% endcase %}
+
   {% feed_meta %}
   {% include google_analytics.html %}
 </head>

data/_sass/_highlight_dark.scss

@@ -0,0 +1,60 @@
+.highlight {
+  .c     { color: $white-darkest; font-style: italic } // Comment
+  .err   { color: $green-lighter } // Error
+  .k     { font-weight: bold } // Keyword
+  .o     { font-weight: bold } // Operator
+  .cm    { color: $white-darkest; font-style: italic } // Comment.Multiline
+  .cp    { color: $white-darkest; font-weight: bold } // Comment.Preproc
+  .c1    { color: $white-darkest; font-style: italic } // Comment.Single
+  .cs    { color: $white-darkest; font-weight: bold; font-style: italic } // Comment.Special
+  .gd    { color: $white; } // Generic.Deleted
+  .gd .x { color: $white; } // Generic.Deleted.Specific
+  .ge    { font-style: italic } // Generic.Emph
+  .gr    { color: $green-lighter } // Generic.Error
+  .gh    { color: $white-darkest } // Generic.Heading
+  .gi    { color: $white } // Generic.Inserted
+  .gi .x { color: $white } // Generic.Inserted.Specific
+  .go    { color: $white-darkest } // Generic.Output
+  .gp    { color: $white-darker } // Generic.Prompt
+  .gs    { font-weight: bold } // Generic.Strong
+  .gu    { color: $white-darkest } // Generic.Subheading
+  .gt    { color: $green-light } // Generic.Traceback
+  .kc    { font-weight: bold } // Keyword.Constant
+  .kd    { font-weight: bold } // Keyword.Declaration
+  .kp    { font-weight: bold } // Keyword.Pseudo
+  .kr    { font-weight: bold } // Keyword.Reserved
+  .kt    { color: $purple-lighter; font-weight: bold } // Keyword.Type
+  .m     { color: $purple } // Literal.Number
+  .s     { color: $green } // Literal.String
+  .na    { color: $purple-light } // Name.Attribute
+  .nb    { color: $purple-light } // Name.Builtin
+  .nc    { color: $purple-lighter; font-weight: bold } // Name.Class
+  .no    { color: $purple-light } // Name.Constant
+  .ni    { color: $red-light } // Name.Entity
+  .ne    { color: $green-lighter; font-weight: bold } // Name.Exception
+  .nf    { color: $green-lighter; font-weight: bold } // Name.Function
+  .nn    { color: $white-darker } // Name.Namespace
+  .nt    { color: $purple-lighter } // Name.Tag
+  .nv    { color: $purple-light } // Name.Variable
+  .ow    { font-weight: bold } // Operator.Word
+  .mf    { color: $purple } // Literal.Number.Float
+  .mh    { color: $purple } // Literal.Number.Hex
+  .mi    { color: $purple } // Literal.Number.Integer
+  .mo    { color: $purple } // Literal.Number.Oct
+  .sb    { color: $green } // Literal.String.Backtick
+  .sc    { color: $green } // Literal.String.Char
+  .sd    { color: $green } // Literal.String.Doc
+  .s2    { color: $green } // Literal.String.Double
+  .se    { color: $green } // Literal.String.Escape
+  .sh    { color: $green } // Literal.String.Heredoc
+  .si    { color: $green } // Literal.String.Interpol
+  .sx    { color: $green } // Literal.String.Other
+  .sr    { color: $red } // Literal.String.Regex
+  .s1    { color: $green } // Literal.String.Single
+  .ss    { color: $red } // Literal.String.Symbol
+  .bp    { color: $white-darkest } // Name.Builtin.Pseudo
+  .vc    { color: $purple-light } // Name.Variable.Class
+  .vg    { color: $purple-light } // Name.Variable.Global
+  .vi    { color: $purple-light } // Name.Variable.Instance
+  .il    { color: $purple } // Literal.Number.Integer.Long
+}

data/_sass/_layout.scss

@@ -10,7 +10,7 @@ html {
 }
 
 body {
-  background-color: $white;
+  background-color: $body-bg-color;
   font-family: $sans-serif-fonts;
 }
 
@@ -38,7 +38,7 @@ body {
   text-decoration: none;
   font-size: 1rem;
   font-family: $serif-fonts;
-  color: $green;
+  color: $header-nav-color;
 }
 
 .header__nav__item--title {
@@ -62,7 +62,7 @@ body {
 
 .posts__date {
   width: 30%;
-  color: $grey;
+  color: $post-date-color;
   font-size: 1rem;
   font-family: $serif-fonts;
 }
@@ -73,7 +73,7 @@ body {
 }
 
 .posts__link {
-  color: $black;
+  color: $post-link-color;
   text-decoration: none;
 }
 
@@ -82,7 +82,7 @@ body {
   font-size: .9rem;
   font-style: italic;
   font-family: $serif-fonts;
-  color: $grey;
+  color: $footer-color;
 }
 
 .footer__list {
@@ -98,7 +98,7 @@ body {
 }
 
 .footer__item a {
-  color: $grey;
+  color: $footer-color;
   text-decoration: none;
 }
 
@@ -110,7 +110,7 @@ body {
 .icon {
   height: .9rem;
   width: .9rem;
-  fill: $grey;
+  fill: $icon-color;
 }
 
 #disqus_thread {

data/_sass/_post.scss

@@ -4,7 +4,7 @@
   font-weight: 400;
   line-height: 1.8rem;
   font-size: 1rem;
-  color: $black-lighter;
+  color: $post-content-color;
 }
 
 .post h1,
@@ -13,7 +13,7 @@
 .post h4,
 .post h5,
 .post h6 {
-  color: $black-light;
+  color: $post-heading-color;
 }
 
 .post h1 {
@@ -53,14 +53,14 @@
 }
 
 .post a {
-  color: $black;
+  color: $post-link-color;
   word-wrap: break-word;
-  text-decoration-color: rgba(0, 0, 0, .8);
+  text-decoration-color: rgba($post-link-color, .8);
 }
 
 .post a:hover {
-  color: $black-lightest;
-  text-decoration-color: rgba(0, 0, 0, .6);
+  color: $post-link-hover-color;
+  text-decoration-color: rgba($post-link-hover-color, .6);
 }
 
 .post h1 a,
@@ -72,13 +72,13 @@
 .post strong,
 .post b {
   font-weight: 700;
-  color: $black-light;
+  color: $post-emphasis-color;
 }
 
 .post em,
 .post i {
   font-style: italic;
-  color: $black-light;
+  color: $post-emphasis-color;
 }
 
 .post img {
@@ -111,12 +111,12 @@
   margin-top: 10px;
   font-weight: 400;
   font-size: 14px;
-  color: $black-lightest;
+  color: $post-figure-color;
 }
 
 .post figure figcaption a {
   text-decoration: none;
-  color: $black-lightest;
+  color: $post-figure-color;
 }
 
 .post hr {
@@ -124,18 +124,18 @@
   width: 40%;
   margin: 60px auto 55px;
   border: 0 none;
-  border-top: 1px solid $grey-light;
+  border-top: 1px solid $post-border-color;
 }
 
 .post blockquote {
   margin: 0 0 1.64em 0;
-  border-left: 3px solid $grey-light;
+  border-left: 3px solid $post-border-color;
   padding-left: 12px;
-  color: $black-lightest;
+  color: $post-blockquote-color;
 }
 
 .post blockquote a {
-  color: $black-lightest;
+  color: $post-blockquote-color;
 }
 
 .post ul,
@@ -183,11 +183,11 @@
 
 .post code,
 .post tt {
-  color: $black-light;
+  color: $post-block-color;
+  background-color: $post-block-bg-color;
   font-size: 0.96em;
-  background-color: $grey-lightest;
   padding: 1px 2px;
-  border: 1px solid $grey-light;
+  border: 1px solid $post-border-color;
   border-radius: 3px;
   font-family: $monospaced-fonts;
   word-wrap: break-word;
@@ -197,19 +197,19 @@
   margin: 1.64em 0;
   padding: 7px;
   border: none;
-  border-left: 3px solid $grey-light;
+  border-left: 3px solid $post-border-color;
   padding-left: 10px;
   overflow: auto;
   line-height: 1.5;
   font-size: 0.96em;
   font-family: $monospaced-fonts;
-  color: $black-light;
-  background-color: $grey-lightest;
+  color: $post-block-color;
+  background-color: $post-block-bg-color;
 }
 
 .post pre code,
 .post pre tt {
-  color: $black-light;
+  color: $post-block-color;
   border: none;
   background: none;
   padding: 0;
@@ -229,7 +229,7 @@
 .post td {
   text-align: left;
   padding: 4px 8px 4px 10px;
-  border: 1px solid $grey-light;
+  border: 1px solid $post-border-color;
 }
 
 .post td {
@@ -237,7 +237,7 @@
 }
 
 .post tr:nth-child(even) {
-  background-color: $grey-lightest;
+  background-color: $post-block-bg-color;
 }
 
 .post iframe {

data/_sass/_settings.scss

@@ -1,25 +1,3 @@
-$green: #1b813e;
-$green-dark: darken($green, 5);
-$green-darker: darken($green, 10);
-
-$purple: #8F50AA;
-$purple-dark: darken($purple, 10);
-$purple-darker: darken($purple, 20);
-
-$red: #cb1b45;
-$red-dark: darken($red, 10);
-
-$black: #1c1c1c;
-$black-light: lighten($black, 10);
-$black-lighter: lighten($black, 20);
-$black-lightest: lighten($black, 30);
-
-$grey: lighten($black, 35);
-$grey-light: lighten($black, 75);
-$grey-lightest: lighten($black, 85);
-
-$white: #fff;
-
 $zh-fonts: 'PingFang SC', 'Hiragino Sans GB', 'Droid Sans Fallback', 'Microsoft YaHei', 'Wenquanyi Micro Hei';
 $sans-serif-fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Droid Sans', 'Helvetica Neue', #{$zh-fonts}, sans-serif;
 $serif-fonts: 'Palatino', 'Palatino Linotype', 'Book Antiqua', #{$zh-fonts}, serif;

data/_sass/dark.scss

@@ -0,0 +1,51 @@
+// colors for the theme
+
+$green: #229f4c;
+$green-light: lighten($green, 5);
+$green-lighter: lighten($green, 10);
+
+$purple: #aa78bf;
+$purple-light: lighten($purple, 10);
+$purple-lighter: lighten($purple, 20);
+
+$red: #e85478;
+$red-light: lighten($red, 10);
+
+$white: #fbfbfb;
+$white-dark: darken($white, 10);
+$white-darker: darken($white, 20);
+$white-darkest: darken($white, 30);
+
+$grey: darken($white, 35);
+$grey-darken: darken($white, 75);
+$grey-darkest: darken($white, 85);
+
+$black: #101010;
+
+// specific colors for page
+
+$body-bg-color: $black;
+$header-nav-color: $green;
+$footer-color: $grey;
+$icon-color: $grey;
+
+// specific colors for post
+
+$post-date-color: $grey;
+$post-content-color: $white-darker;
+$post-heading-color: $white-dark;
+$post-link-color: $white;
+$post-link-hover-color: $white-darkest;
+$post-emphasis-color: $white-dark;
+$post-figure-color: $white-darkest;
+$post-border-color: $grey-darken;
+$post-blockquote-color: $white-darkest;
+$post-block-color: $white-dark;
+$post-block-bg-color: $grey-darkest;
+
+@import 'normalize';
+@import 'settings';
+@import 'layout';
+@import 'responsive';
+@import 'post';
+@import 'highlight_dark';

data/_sass/light.scss

@@ -0,0 +1,52 @@
+// colors for the theme
+
+$green: #1b813e;
+$green-dark: darken($green, 5);
+$green-darker: darken($green, 10);
+
+$purple: #8F50AA;
+$purple-dark: darken($purple, 10);
+$purple-darker: darken($purple, 20);
+
+$red: #cb1b45;
+$red-dark: darken($red, 10);
+
+$black: #1c1c1c;
+$black-light: lighten($black, 10);
+$black-lighter: lighten($black, 20);
+$black-lightest: lighten($black, 30);
+
+$grey: lighten($black, 35);
+$grey-light: lighten($black, 75);
+$grey-lightest: lighten($black, 85);
+
+$white: #fff;
+
+// specific colors for page
+
+$body-bg-color: $white;
+$header-nav-color: $green;
+$footer-color: $grey;
+$icon-color: $grey;
+
+// specific colors for post
+
+$post-date-color: $grey;
+$post-link-color: $black;
+$post-content-color: $black-lighter;
+$post-heading-color: $black-light;
+$post-link-color: $black;
+$post-link-hover-color: $black-lightest;
+$post-emphasis-color: $black-light;
+$post-figure-color: $black-lightest;
+$post-border-color: $grey-light;
+$post-blockquote-color: $black-lightest;
+$post-block-color: $black-light;
+$post-block-bg-color: $grey-lightest;
+
+@import 'normalize';
+@import 'settings';
+@import 'layout';
+@import 'responsive';
+@import 'post';
+@import 'highlight_light';

data/assets/dark.scss

@@ -0,0 +1,3 @@
+---
+---
+@import 'dark';

data/assets/light.scss

@@ -0,0 +1,3 @@
+---
+---
+@import 'light';

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-mint
 version: !ruby/object:Gem::Version
-  version: 1.0.3
+  version: 1.1.0
 platform: ruby
 authors:
 - aidewoode
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-06-16 00:00:00.000000000 Z
+date: 2019-07-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -105,18 +105,21 @@ files:
 - _layouts/home.html
 - _layouts/page.html
 - _layouts/post.html
-- _sass/_highlight.scss
+- _sass/_highlight_dark.scss
+- _sass/_highlight_light.scss
 - _sass/_layout.scss
 - _sass/_normalize.scss
 - _sass/_post.scss
 - _sass/_responsive.scss
 - _sass/_settings.scss
-- _sass/jekyll-theme-mint.scss
+- _sass/dark.scss
+- _sass/light.scss
+- assets/dark.scss
 - assets/icons/dribbble.svg
 - assets/icons/facebook.svg
 - assets/icons/github.svg
 - assets/icons/twitter.svg
-- assets/main.scss
+- assets/light.scss
 homepage: https://github.com/aidewoode/jekyll-theme-mint
 licenses:
 - MIT

data/_sass/jekyll-theme-mint.scss

@@ -1,6 +0,0 @@
-@import 'normalize';
-@import 'settings';
-@import 'layout';
-@import 'responsive';
-@import 'post';
-@import 'highlight';

data/assets/main.scss

@@ -1,3 +0,0 @@
----
----
-@import 'jekyll-theme-mint';