jekyll-theme-recipe 0.7.1 → 0.8.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (6) hide show
  1. checksums.yaml +4 -4
  2. data/_layouts/default.html +3 -4
  3. data/_sass/color-mode.scss +87 -40
  4. data/_sass/elements.scss +4 -0
  5. data/assets/css/screen.scss +1 -3
  6. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 23ce919c67fa8076eb7164eaa86f3855482239f06ba04619b8d4c57e4fe44cda
4
- data.tar.gz: 9af25bea1daad7c859d5eb4d2360be11ad777690d2f385eab048732fb4295f48
3
+ metadata.gz: e5d8e16c1aabdf0787b0bbb233151b00edf4ed819547cedbd5a4b4c6a05d8521
4
+ data.tar.gz: f17b437507fd85a15323a279af26ae557a97019562d124cc2ac30daa8802ca75
5
5
  SHA512:
6
- metadata.gz: 754b23e1a22d5247d8f5ab6e594c440ef89a46f504a48b4910638833cee249e438d0071e3c4fcc4d3b256eec479aa1469e14e36389c820547e2c57d4b2c492a5
7
- data.tar.gz: 62a6178a3db2c634ccee31f347920c5653e9c703f5e5e6b0e925f2c2430b80c7ae8bb42fe6c35ab3a20eeea4306ac733ee77a42ca0c7d441bdcb4008e0871c62
6
+ metadata.gz: 5ffbef837ab83d20a6a4088a9b2096e444868449ca7f2621808d26db857b9da0ba8daa8aabec29bea7cbd897e0826c550d72ec38430a782109e667868defe343
7
+ data.tar.gz: 5823046ee95c87d84c4dbf8e67fa2d1e6d84b99a2da04f9d604840131ec0171019528b2c2b69bee32ca60e952f5e2dbb1341e4f372c19b386432e74021eab933
data/_layouts/default.html CHANGED
@@ -22,10 +22,9 @@
22
22
  {% endif %}
23
23
  </head>
24
24
  <body>
25
- <input id="color-mode" type="checkbox" name="color-mode">
26
- <label for="color-mode">
27
- <span class="dark-mode-hide">{{ site.data.i18n.color-mode.dark-mode-label }}</span>
28
- <span class="light-mode-hide">{{ site.data.i18n.color-mode.light-mode-label }}</span>
25
+ <input id="color-mode" type="checkbox" name="color-mode" class="switch">
26
+ <label for="color-mode" class="color-slider-wrapper">
27
+ <span class="color-slider"></span>
29
28
  </label>
30
29
  <div class="color-scheme-wrapper">
31
30
  <div class="emulated-background"></div>
data/_sass/color-mode.scss CHANGED
@@ -1,22 +1,8 @@
1
-
2
- // prefers-color-scheme: light
3
- .light-mode-hide {
4
- display: none;
5
- }
6
-
7
- @media (prefers-color-scheme: dark) {
8
- .dark-mode-hide {
9
- display: none;
10
- }
11
- .light-mode-hide {
12
- display:initial;
13
- }
14
- }
15
-
16
-
17
- input#color-mode, input#color-mode + label{
1
+ // position absolute, because they need to be at the start of the body
2
+ // and thus cant be position relative in the document
3
+ input#color-mode, .color-slider-wrapper{
18
4
  position: absolute;
19
- top: 100px;
5
+ top: 94px;
20
6
  left: 30px;
21
7
  }
22
8
 
@@ -24,7 +10,7 @@ input#color-mode {
24
10
  appearance: none;
25
11
  }
26
12
 
27
- input#color-mode + label{
13
+ .color-slider-wrapper{
28
14
  margin: 0;
29
15
  line-height: 1.4em;
30
16
  cursor: pointer;
@@ -33,34 +19,95 @@ input#color-mode + label{
33
19
  border: 1px solid var(--primary-highlight);
34
20
  color: var(--primary-highlight);
35
21
 
36
- &:hover, &:focus {
37
- border: 1px solid var(--common);
38
- color: var(--common);
39
- background-color: var(--primary-highlight);
40
-
41
- &:after{
42
- border-left: solid 1px var(--common);
43
- color: var(--common);
44
- }
45
- }
22
+ display: inline-block;
23
+ width: 56px;
24
+ height: 30px;
46
25
 
47
- &:after {
48
- content: "✔\FE0E";
49
- display: inline-block;
50
- width: 1.4rem;
51
- margin-left: 0.2rem;
52
- border-left: solid 1px var(--primary-highlight);
53
- text-align: center;
54
- color: transparent;
55
-
26
+ &:hover, &:focus {
27
+ border: 2px solid var(--primary-highlight);
28
+ margin: -1px;
56
29
  }
57
30
  }
58
- input#color-mode:checked + label:after{
31
+ .color-slider-wrapper:after{
59
32
  color: var(--primary-highlight);
60
33
  }
61
34
 
62
35
  @media (min-width: 1160px) {
63
- input#color-mode, input#color-mode + label {
36
+ input#color-mode, .color-slider-wrapper{
64
37
  left: calc(calc(calc(100% - 1160px) / 2) + 30px);
65
38
  }
39
+ }
40
+
41
+ .color-slider {
42
+ position: absolute;
43
+ cursor: pointer;
44
+ top: 0;
45
+ left: 0;
46
+ right: 0;
47
+ bottom: 0;
48
+ background-color: var(--common);
49
+ -webkit-transition: transform .4s;
50
+ transition: transform .4s;
51
+ }
52
+
53
+ .color-slider:before {
54
+ z-index: 10;
55
+ position: absolute;
56
+ content: "";
57
+ height: 26px;
58
+ width: 26px;
59
+ left: 4px;
60
+ bottom: 4px;
61
+ background-color: var(--primary-highlight);
62
+ -webkit-transition: .4s;
63
+ transition: .4s;
64
+ }
65
+
66
+ $transition-extent: 30px;
67
+
68
+ .color-slider:after {
69
+ position: absolute;
70
+ color: red;
71
+ height: 26px;
72
+ width: 26px;
73
+ left: calc(4px + $transition-extent);
74
+ bottom: 4px;
75
+ -webkit-transition: .4s cubic-bezier(0, 0.4, 0.6, 1);
76
+ transition: .4s cubic-bezier(0, 0.4, 0.6, 1);
77
+ }
78
+
79
+ input:checked + .color-slider-wrapper .color-slider:before {
80
+ -webkit-transform: translateX($transition-extent);
81
+ -ms-transform: translateX($transition-extent);
82
+ transform: translateX($transition-extent);
83
+ }
84
+ input:checked + .color-slider-wrapper .color-slider:after {
85
+ -webkit-transform: translateX(-$transition-extent);
86
+ -ms-transform: translateX(-$transition-extent);
87
+ transform: translateX(-$transition-extent);
88
+
89
+ }
90
+
91
+ // change icon according to :checked and prefers
92
+ $to-light-in-prefers-dark-icon: url(str-replace("data:image/svg+xml,%3Csvg fill='#{$dark-secondary-highlight}' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M375.7 19.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8 2.4L256 61.1 173.5 4.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9 9.8-14.4 17.8l-18.1 98.5L19.7 136.3c-8 1.5-14.7 6.9-17.8 14.4s-2.2 16.1 2.4 22.8L61.1 256 4.2 338.5c-4.6 6.7-5.5 15.3-2.4 22.8s9.8 13 17.8 14.4l98.5 18.1 18.1 98.5c1.5 8 6.9 14.7 14.4 17.8s16.1 2.2 22.8-2.4L256 450.9l82.5 56.9c6.7 4.6 15.3 5.5 22.8 2.4s12.9-9.8 14.4-17.8l18.1-98.5 98.5-18.1c8-1.5 14.7-6.9 17.8-14.4s2.2-16.1-2.4-22.8L450.9 256l56.9-82.5c4.6-6.7 5.5-15.3 2.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1L375.7 19.7zM269.6 110l65.6-45.2 14.4 78.3c1.8 9.8 9.5 17.5 19.3 19.3l78.3 14.4L402 242.4c-5.7 8.2-5.7 19 0 27.2l45.2 65.6-78.3 14.4c-9.8 1.8-17.5 9.5-19.3 19.3l-14.4 78.3L269.6 402c-8.2-5.7-19-5.7-27.2 0l-65.6 45.2-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3L64.8 335.2 110 269.6c5.7-8.2 5.7-19 0-27.2L64.8 176.8l78.3-14.4c9.8-1.8 17.5-9.5 19.3-19.3l14.4-78.3L242.4 110c8.2 5.7 19 5.7 27.2 0zM256 368a112 112 0 1 0 0-224 112 112 0 1 0 0 224zM192 256a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z'/%3E%3C/svg%3E", "#", '%23'));
93
+ $to-light-in-prefers-light-icon: url(str-replace("data:image/svg+xml,%3Csvg fill='#{$light-secondary-highlight}' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M375.7 19.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8 2.4L256 61.1 173.5 4.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9 9.8-14.4 17.8l-18.1 98.5L19.7 136.3c-8 1.5-14.7 6.9-17.8 14.4s-2.2 16.1 2.4 22.8L61.1 256 4.2 338.5c-4.6 6.7-5.5 15.3-2.4 22.8s9.8 13 17.8 14.4l98.5 18.1 18.1 98.5c1.5 8 6.9 14.7 14.4 17.8s16.1 2.2 22.8-2.4L256 450.9l82.5 56.9c6.7 4.6 15.3 5.5 22.8 2.4s12.9-9.8 14.4-17.8l18.1-98.5 98.5-18.1c8-1.5 14.7-6.9 17.8-14.4s2.2-16.1-2.4-22.8L450.9 256l56.9-82.5c4.6-6.7 5.5-15.3 2.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1L375.7 19.7zM269.6 110l65.6-45.2 14.4 78.3c1.8 9.8 9.5 17.5 19.3 19.3l78.3 14.4L402 242.4c-5.7 8.2-5.7 19 0 27.2l45.2 65.6-78.3 14.4c-9.8 1.8-17.5 9.5-19.3 19.3l-14.4 78.3L269.6 402c-8.2-5.7-19-5.7-27.2 0l-65.6 45.2-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3L64.8 335.2 110 269.6c5.7-8.2 5.7-19 0-27.2L64.8 176.8l78.3-14.4c9.8-1.8 17.5-9.5 19.3-19.3l14.4-78.3L242.4 110c8.2 5.7 19 5.7 27.2 0zM256 368a112 112 0 1 0 0-224 112 112 0 1 0 0 224zM192 256a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z'/%3E%3C/svg%3E", "#", '%23'));
94
+ $to-dark-in-prefers-light-icon: url(str-replace("data:image/svg+xml,%3Csvg fill='#{$light-secondary-highlight}' xmlns='http://www.w3.org/2000/svg' viewBox='-64 0 512 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z'/%3E%3C/svg%3E%0A", "#", '%23'));
95
+ $to-dark-in-prefers-dark-icon: url(str-replace("data:image/svg+xml,%3Csvg fill='#{$dark-secondary-highlight}' xmlns='http://www.w3.org/2000/svg' viewBox='-64 0 512 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z'/%3E%3C/svg%3E%0A", "#", '%23'));
96
+
97
+ .color-slider:after{
98
+ content: #{$to-dark-in-prefers-light-icon};
99
+ }
100
+
101
+ input:checked + label .color-slider:after {
102
+ content: #{$to-light-in-prefers-dark-icon}; //richtig
103
+ }
104
+
105
+ @media (prefers-color-scheme: dark) {
106
+ .color-slider:after {
107
+ content: #{$to-dark-in-prefers-dark-icon}; //falsch
108
+
109
+ }
110
+ input:checked + label .color-slider:after {
111
+ content: #{$to-light-in-prefers-light-icon}; //richtig
112
+ }
66
113
  }
data/_sass/elements.scss CHANGED
@@ -5,6 +5,10 @@ html , body {
5
5
  scroll-behavior: smooth;
6
6
  }
7
7
 
8
+ * {
9
+ transition: background-color, color .2s cubic-bezier(0, 0.4, 0.6, 1);
10
+ }
11
+
8
12
  .color-scheme-wrapper {
9
13
  min-height:100vh;
10
14
  color: var(--primary-highlight);
data/assets/css/screen.scss CHANGED
@@ -2,11 +2,9 @@
2
2
  title: CSS-Stylesheet for screens
3
3
  ---
4
4
 
5
- // doesnt work :(, page.color seems to be nil, but actually exists
6
- $recipe_color: "{% if page.color and page.color != '' %}{{ page.color }}{% else %}{{'#ff4e4e'}}{% endif %}";
7
-
8
5
  @import "fonts";
9
6
  @import "variables";
7
+ @import "functions";
10
8
  @import "color-mode";
11
9
  @import "elements";
12
10
  @import "layout";
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-recipe
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.7.1
4
+ version: 0.8.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Hanno Witzleb
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-04-03 00:00:00.000000000 Z
11
+ date: 2023-04-05 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll