jekyll-theme-console 0.3.4 → 0.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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";