jekyll-theme-console 0.3.4 → 0.3.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (12) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -0
  3. data/_includes/head.html +7 -3
  4. data/_sass/_dark.scss +15 -0
  5. data/_sass/_light.scss +16 -0
  6. data/_sass/base.scss +19 -19
  7. data/assets/main-dark.scss +1 -0
  8. data/assets/main-light.scss +1 -0
  9. data/assets/main.scss +10 -0
  10. metadata +13 -12
  11. data/_sass/dark.scss +0 -15
  12. data/_sass/light.scss +0 -15
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ea203634a688f532c2830a9149a87bab62c7c86fdc86771142df8ce8e1e83a01
4
- data.tar.gz: df1e67edfe7641ca83f9e8bd7dca1d43e18cb31eaacf89c87205d42ca1a82ed8
3
+ metadata.gz: d92b1facfa402ca80aaf679a7eb9196ad7f356ccf90042d1677284bf25079360
4
+ data.tar.gz: 51b068024f8ef102c21c26db38e9a75f303e5a968179a44f3fa24eb96ccc19f1
5
5
  SHA512:
6
- metadata.gz: c2287c606d4c44a1f0024db35ee715ac87a1fb69178adcadd8e819c19b68caaeb80fdc7bd934630c798d46530cac39377d953770d5108b7635005b067ddfdad3
7
- data.tar.gz: 1af0aff84d813eea55fa64361dffa11ac23081138934dabe70ff5d23fc671e97f2f775b5c3352606331e74db5a9d05c6550b4827537b9ced0ee97ce865c10233
6
+ metadata.gz: fff3ef0b6903503ce586fa477e78342a904ff451defb18725fee18a28ae040c5f9c03116ad8c70a7264645312f9fae8a438b09d8acf17f6fe5c801edd4831662
7
+ data.tar.gz: de8a94c0cdebaabaf5c3b352cde280c58300cd3d0d5fdfdf1c917c31c2fc0214dd03628c72db79a27feb3a01274c75339baa2344ecfd846d11dae0c95f7e662e
data/README.md CHANGED
@@ -39,6 +39,7 @@ In addition to jekyll's default configuration options, you can provide:
39
39
  - `header_pages` to specify which pages should be displayed in navbar
40
40
  - `footer` string, which will be inserted on the end of the page (doesn't support markup, but html)
41
41
  - `google_analytics` tracking id (tracking will be enabled only in production environments)
42
+ - `listen_for_clients_preferred_style` boolean, used to allow users to choose theme based on their preferences (mostly affected by OS dark or light theme, details see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
42
43
 
43
44
  ```yaml
44
45
  header_pages:
@@ -46,6 +47,7 @@ header_pages:
46
47
  - about.md
47
48
 
48
49
  style: dark # dark (default) or light
50
+ listen_for_clients_preferred_style: true # true or false (default)
49
51
 
50
52
  footer: 'follow us on <a href="https://twitter.com/xxx">twitter</a>'
51
53
 
data/_includes/head.html CHANGED
@@ -5,10 +5,14 @@
5
5
  <title>{{ site.title }}{{ page.title }}</title>
6
6
  {%- seo title=false -%}
7
7
 
8
- {%- if site.style == 'light' -%}
9
- <link rel="stylesheet" type="text/css" href="{{ "/assets/main-light.css" | relative_url }}">
8
+ {%- if site.listen_for_clients_preferred_style -%}
9
+ <link rel="stylesheet" type="text/css" href="{{ "/assets/main.css" | relative_url }}">
10
10
  {%- else -%}
11
- <link rel="stylesheet" type="text/css" href="{{ "/assets/main-dark.css" | relative_url }}">
11
+ {%- if site.style == 'light' -%}
12
+ <link rel="stylesheet" type="text/css" href="{{ "/assets/main-light.css" | relative_url }}">
13
+ {%- else -%}
14
+ <link rel="stylesheet" type="text/css" href="{{ "/assets/main-dark.css" | relative_url }}">
15
+ {%- endif -%}
12
16
  {%- endif -%}
13
17
 
14
18
  {%- if jekyll.environment == 'production' and site.google_analytics -%}
data/_sass/_dark.scss ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Dark theme variables
3
+ */
4
+
5
+ :root {
6
+ --base-color: #DBDBDB;
7
+ --primary-color: #A2FC8F;
8
+ --border: dashed 1px rgba(219, 219, 219, 0.9);
9
+ --selection-background: rgba(219, 219, 219, 0.99);
10
+ --selection-text: #000;
11
+ --background-color: #000;
12
+ --text-color: var(--base-color);
13
+ --placeholder-color: var(--base-color);
14
+ --link-color: var(--base-color);
15
+ }
data/_sass/_light.scss ADDED
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Light theme variables
3
+ */
4
+
5
+ :root {
6
+ --base-color: #000;
7
+ --primary-color: #0000EE;
8
+ --border: dashed 1px rgba(0, 0, 0, 1);
9
+ --selection-background: rgba(0, 0, 0, 0.99);
10
+ --selection-text: #FFF;
11
+ --background-color: #FFF;
12
+ --text-color: var(--base-color);
13
+ --placeholder-color: var(--base-color);
14
+ --link-color: var(--base-color);
15
+
16
+ }
data/_sass/base.scss CHANGED
@@ -14,12 +14,12 @@ $container-max-width: 600px !default;
14
14
  /**
15
15
  * Global
16
16
  */
17
- body { background-color: $background-color; margin: 0 auto; padding: 0; font-family: $base-font-family; font-size: $base-font-size; color: $text-color; text-align: left; line-height: $base-line-height !important; }
18
- h1, h2, h3, h4, h5, h6 { font-size: $base-font-size; margin: 0px; margin-top: 22px; font-weight: bold; color: $text-color; }
19
- p, ul, ol { margin: 0px; color: $text-color; }
20
- a { text-decoration: underline; color: $link-color; }
21
- a:hover { color: $background-color; background-color: $base-color; }
22
- .primary-text { color: $primary-color; }
17
+ body { background-color: var(--background-color); margin: 0 auto; padding: 0; font-family: $base-font-family; font-size: $base-font-size; color: var(--text-color); text-align: left; line-height: $base-line-height !important; }
18
+ h1, h2, h3, h4, h5, h6 { font-size: $base-font-size; margin: 0px; margin-top: 22px; font-weight: bold; color: var(--text-color); }
19
+ p, ul, ol { margin: 0px; color: var(--text-color); }
20
+ a { text-decoration: underline; color: var(--link-color); }
21
+ a:hover { color: var(--background-color); background-color: var(--base-color); }
22
+ .primary-text { color: var(--primary-color); }
23
23
  @media only screen and (max-device-width: 500px) { * { font-size: $mobile-font-size !important; } }
24
24
  /*h1:before { content: "#"; margin-right: 9px; }
25
25
  h2:before { content: "##"; margin-right: 9px; }
@@ -33,7 +33,7 @@ h6:before { content: "######"; margin-right: 9px; }*/
33
33
  */
34
34
  .container { width: $container-width; max-width: $container-max-width; margin-right: auto; margin-left: auto; }
35
35
  p { word-wrap: break-word; word-break: break-word; white-space: pre-wrap; }
36
- footer { color: $text-color; border-top: $border; margin: 20px auto 15px; padding-top: 10px; text-align: right; }
36
+ footer { color: var(--text-color); border-top: var(--border); margin: 20px auto 15px; padding-top: 10px; text-align: right; }
37
37
  header { margin-top: 25px; margin-bottom: 10px; }
38
38
  header p { text-align: left; margin: 0; }
39
39
  footer { margin-bottom: 20px; }
@@ -41,8 +41,8 @@ footer { margin-bottom: 20px; }
41
41
  /**
42
42
  * Highlight/Markup
43
43
  */
44
- ::selection { background: $selection-background; color: $selection-text; }
45
- ::-moz-selection { background: $selection-background; color: $selection-text; }
44
+ ::selection { background: var(--selection-background); color: var(--selection-text); }
45
+ ::-moz-selection { background: var(--selection-background); color: var(--selection-text); }
46
46
 
47
47
  /**
48
48
  * Lists
@@ -54,30 +54,30 @@ footer { margin-bottom: 20px; }
54
54
  /**
55
55
  * Header/Navigation
56
56
  */
57
- .menu { border-top: $border; border-bottom: $border; margin-bottom: 25px; }
57
+ .menu { border-top: var(--border); border-bottom: var(--border); margin-bottom: 25px; }
58
58
  .menu ul { margin-top: 12px; margin-bottom: 12px; padding-left: 0px; list-style-type: none; text-align: right; }
59
59
  .menu ul li { display: inline; margin-left: 10px; }
60
- .menu ul li a { text-decoration: none; color: $text-color; }
61
- .menu ul li a:hover { text-decoration: none; color: $background-color; background-color: $base-color; }
60
+ .menu ul li a { text-decoration: none; color: var(--text-color); }
61
+ .menu ul li a:hover { text-decoration: none; color: var(--background-color); background-color: var(--base-color); }
62
62
 
63
63
  /**
64
64
  * Form
65
65
  */
66
66
  input, select, textarea { padding: 0; margin: 0; -webkit-appearance: none; -webkit-border-radius: 0; border: none; }
67
- input[type=text], select, textarea { width: 100%; resize: none; background-color: $background-color; color: $text-color; caret-color: $text-color; font-size: $base-font-size; font-family: $base-font-family; line-height: $base-line-height; }
67
+ input[type=text], select, textarea { width: 100%; resize: none; background-color: var(--background-color); color: var(--text-color); caret-color: var(--text-color); font-size: $base-font-size; font-family: $base-font-family; line-height: $base-line-height; }
68
68
  input, select, textarea, textarea::-webkit-input-placeholder { text-indent: 0px; }
69
- ::placeholder { color: $placeholder-color; opacity: 1; }
70
- :-ms-input-placeholder { color: $placeholder-color; }
71
- ::-ms-input-placeholder { color: $placeholder-color; }
72
- input[type=submit] { font-size: $base-font-size; font-family: $base-font-family; line-height: $base-line-height; cursor: pointer; color: $link-color; background-color: $background-color; }
73
- input[type=submit]:hover { color: $background-color; background-color: $base-color; }
69
+ ::placeholder { color: var(--placeholder-color); opacity: 1; }
70
+ :-ms-input-placeholder { color: var(--placeholder-color); }
71
+ ::-ms-input-placeholder { color: var(--placeholder-color); }
72
+ input[type=submit] { font-size: $base-font-size; font-family: $base-font-family; line-height: $base-line-height; cursor: pointer; color: var(--link-color); background-color: var(--background-color); }
73
+ input[type=submit]:hover { color: var(--background-color); background-color: var(--base-color); }
74
74
  *:focus { outline: none; }
75
75
  textarea { vertical-align: top; }
76
76
 
77
77
  /**
78
78
  * Code and syntax highlighting
79
79
  */
80
- pre { background-color: $background-color; border: none; padding: 0px; overflow:auto; font-size: $base-font-size; color: rgba(255,255,255,0.65); line-height: 1.7 !important; }
80
+ pre { background-color: var(--background-color); border: none; padding: 0px; overflow:auto; font-size: $base-font-size; color: rgba(255,255,255,0.65); line-height: 1.7 !important; }
81
81
  .highlight .c { color: #999988; font-style: italic } /* Comment */
82
82
  .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
83
83
  .highlight .k { font-weight: bold } /* Keyword */
data/assets/main-dark.scss CHANGED
@@ -3,3 +3,4 @@
3
3
  ---
4
4
 
5
5
  @import "dark";
6
+ @import "base";
data/assets/main-light.scss CHANGED
@@ -3,3 +3,4 @@
3
3
  ---
4
4
 
5
5
  @import "light";
6
+ @import "base";
data/assets/main.scss ADDED
@@ -0,0 +1,10 @@
1
+ ---
2
+ # Only the main Sass file needs front matter (the dashes are enough)
3
+ ---
4
+
5
+ @import "light";
6
+ @import "base";
7
+
8
+ @media (prefers-color-scheme: dark) {
9
+ @import "dark";
10
+ }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-console
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.4
4
+ version: 0.3.5
5
5
  platform: ruby
6
6
  authors:
7
7
  - b2a3e8
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2019-10-15 00:00:00.000000000 Z
11
+ date: 2019-10-17 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -42,30 +42,30 @@ dependencies:
42
42
  name: bundler
43
43
  requirement: !ruby/object:Gem::Requirement
44
44
  requirements:
45
- - - "~>"
45
+ - - ">="
46
46
  - !ruby/object:Gem::Version
47
- version: '1.16'
47
+ version: '0'
48
48
  type: :development
49
49
  prerelease: false
50
50
  version_requirements: !ruby/object:Gem::Requirement
51
51
  requirements:
52
- - - "~>"
52
+ - - ">="
53
53
  - !ruby/object:Gem::Version
54
- version: '1.16'
54
+ version: '0'
55
55
  - !ruby/object:Gem::Dependency
56
56
  name: rake
57
57
  requirement: !ruby/object:Gem::Requirement
58
58
  requirements:
59
- - - "~>"
59
+ - - ">="
60
60
  - !ruby/object:Gem::Version
61
- version: '12.0'
61
+ version: '0'
62
62
  type: :development
63
63
  prerelease: false
64
64
  version_requirements: !ruby/object:Gem::Requirement
65
65
  requirements:
66
- - - "~>"
66
+ - - ">="
67
67
  - !ruby/object:Gem::Version
68
- version: '12.0'
68
+ version: '0'
69
69
  description:
70
70
  email:
71
71
  - 31370519+b2a3e8@users.noreply.github.com
@@ -83,11 +83,12 @@ files:
83
83
  - _layouts/home.html
84
84
  - _layouts/page.html
85
85
  - _layouts/post.html
86
+ - _sass/_dark.scss
87
+ - _sass/_light.scss
86
88
  - _sass/base.scss
87
- - _sass/dark.scss
88
- - _sass/light.scss
89
89
  - assets/main-dark.scss
90
90
  - assets/main-light.scss
91
+ - assets/main.scss
91
92
  homepage: https://github.com/b2a3e8/jekyll-theme-console
92
93
  licenses:
93
94
  - MIT
data/_sass/dark.scss DELETED
@@ -1,15 +0,0 @@
1
- /**
2
- * Style variables
3
- */
4
- $base-color: #DBDBDB !default;
5
- $primary-color: #a1fc8f !default;
6
- $text-color: $base-color !default;
7
- $placeholder-color: $base-color !default;
8
- $link-color: $base-color !default;
9
- $border: dashed 1px rgba(219,219,219,0.9) !default;
10
- $selection-background: rgba(219,219,219,0.99) !default;
11
- $selection-text: #000 !default;
12
- $background-color: #000 !default;
13
-
14
-
15
- @import "base";
data/_sass/light.scss DELETED
@@ -1,15 +0,0 @@
1
- /**
2
- * Style variables
3
- */
4
- $base-color: #000 !default;
5
- $primary-color: #0000EE !default;
6
- $text-color: $base-color !default;
7
- $placeholder-color: $base-color !default;
8
- $link-color: $base-color !default;
9
- $border: dashed 1px rgba(0,0,0,1) !default;
10
- $selection-background: rgba(0,0,0,0.99) !default;
11
- $selection-text: #fff !default;
12
- $background-color: #fff !default;
13
-
14
-
15
- @import "base";