jekyll-theme-recipe 0.7.1 → 0.8.0
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.
- checksums.yaml +4 -4
- data/_layouts/default.html +3 -4
- data/_sass/color-mode.scss +87 -40
- data/_sass/elements.scss +4 -0
- data/assets/css/screen.scss +1 -3
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 65fb2a952d269fd1f522c2ba4f30ed1c15a2a00b0197d6ef5f9094f7112c61f0
|
|
4
|
+
data.tar.gz: 191fef119346127b3b3f095981e0e2a267ad475c6ebfc0d91e104c98d4abaa5d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4a95d61fb61f33f47dd1d731b7cb18357edf5c25c4587f99787afb2a4d462a6259fadcd26755178897c1b2e624cb8face4b8e334a799467b92706f2b60d7382c
|
|
7
|
+
data.tar.gz: 3195f3e92c0a0d908db08d2898341938319c0b3e0c5cfd8e052b9d9bb8a1fc45f3a196ce3cac2b3c058f424a81e7d290bda3cde3ef59a04387fd079873b0ba07
|
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="
|
|
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
|
-
//
|
|
3
|
-
|
|
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:
|
|
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
|
-
|
|
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
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
&:
|
|
48
|
-
|
|
49
|
-
|
|
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
|
-
|
|
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,
|
|
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
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.
|
|
4
|
+
version: 0.8.0
|
|
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-
|
|
11
|
+
date: 2023-04-05 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|