jekyll-theme-recipe 0.4.1 → 0.5.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_includes/recipe-icon.html +4 -4
- data/_layouts/default.html +26 -18
- data/_sass/blog.scss +7 -6
- data/_sass/color-mode.scss +66 -0
- data/_sass/elements.scss +9 -3
- data/_sass/forms.scss +16 -16
- data/_sass/navigation.scss +17 -4
- data/_sass/recipes.scss +3 -3
- data/_sass/sidebar.scss +2 -2
- data/_sass/variables.scss +36 -1
- data/assets/css/screen.scss +3 -2
- metadata +4 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 0f8742ee3d8b82fef6b1bb4abb790946696faa64f7b4042f181b2ea0af1a81e5
|
4
|
+
data.tar.gz: c23c7524b6e9c83aa9b1037845867f56b7ec973e97e3b8ac0b9dcee65b5ba20d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8682c89ac1fc8b544c93e6cf2eeb321af3393d0b998821500f2add711319d4c7937b1e454aefbb198d27203dc2d37e97f20c7f1cfd593da32ed1168689947b3f
|
7
|
+
data.tar.gz: c3dbbdbc221f2fc7ef92f2a99edce3b2cb3b8c024776bc66fa0953d624b1bd9041a0a3c52533a32c919cfb5f05ef23cff7a7797a04ac69024da90a69217e6f23
|
data/_includes/recipe-icon.html
CHANGED
@@ -32,13 +32,13 @@
|
|
32
32
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.46,24c-0.267-0.132-0.347-0.358-0.33-0.637c0.011-0.195,0-0.393,0.025-0.584
|
33
33
|
c0.029-0.225,0.165-0.361,0.387-0.367c0.541-0.012,1.084-0.013,1.624,0.002c0.244,0.007,0.392,0.19,0.403,0.462
|
34
34
|
c0.011,0.214,0.004,0.429,0.001,0.644c-0.003,0.232-0.137,0.379-0.333,0.48C20.645,24,20.053,24,19.46,24z"/>
|
35
|
-
<path fill-rule="evenodd" clip-rule="evenodd" fill="
|
35
|
+
<path fill-rule="evenodd" clip-rule="evenodd" fill="var(--common)" d="M9.148,3.97c0.678-0.039,1.252,0.493,1.293,1.197
|
36
36
|
c0.038,0.649-0.508,1.217-1.213,1.267c-0.622,0.04-1.239-0.502-1.273-1.121C7.913,4.57,8.41,4.013,9.148,3.97z"/>
|
37
|
-
<path fill-rule="evenodd" clip-rule="evenodd" fill="
|
37
|
+
<path fill-rule="evenodd" clip-rule="evenodd" fill="var(--common)" d="M6.071,3.967C6.766,3.989,7.321,4.553,7.3,5.214
|
38
38
|
C7.276,5.897,6.705,6.451,6.039,6.436c-0.707-0.019-1.252-0.585-1.23-1.282C4.831,4.481,5.401,3.945,6.071,3.967z"/>
|
39
|
-
<path fill-rule="evenodd" clip-rule="evenodd" fill="
|
39
|
+
<path fill-rule="evenodd" clip-rule="evenodd" fill="var(--common)" d="M17.348,5.199c0,0.677-0.557,1.231-1.239,1.236
|
40
40
|
c-0.679,0.004-1.267-0.582-1.253-1.25c0.013-0.678,0.578-1.227,1.255-1.221C16.8,3.971,17.348,4.518,17.348,5.199z"/>
|
41
|
-
<path fill-rule="evenodd" clip-rule="evenodd" fill="
|
41
|
+
<path fill-rule="evenodd" clip-rule="evenodd" fill="var(--common)" d="M20.489,5.201c-0.002,0.679-0.562,1.234-1.243,1.234
|
42
42
|
c-0.674,0-1.242-0.561-1.249-1.232c-0.007-0.675,0.575-1.246,1.26-1.237C19.947,3.975,20.492,4.52,20.489,5.201z"/>
|
43
43
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.646,9.926c-2.112,0-4.225,0-6.336-0.002c-0.333,0-0.505-0.119-0.504-0.352
|
44
44
|
C5.808,9.346,5.986,9.22,6.314,9.22c4.225,0,8.449,0,12.672,0c0.014,0,0.025,0,0.038,0c0.294,0.006,0.469,0.14,0.467,0.358
|
data/_layouts/default.html
CHANGED
@@ -24,24 +24,32 @@
|
|
24
24
|
{% endif %}
|
25
25
|
</head>
|
26
26
|
<body>
|
27
|
-
|
28
|
-
<
|
29
|
-
{
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
{%
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
27
|
+
<input id="color-mode" type="checkbox" name="color-mode">
|
28
|
+
<label for="color-mode">
|
29
|
+
<span class="dark-mode-hide">{{ site.data.i18n.color-mode.dark-mode-label }}</span>
|
30
|
+
<span class="light-mode-hide">{{ site.data.i18n.color-mode.light-mode-label }}</span>
|
31
|
+
</label>
|
32
|
+
<div class="color-scheme-wrapper">
|
33
|
+
{% include navigation.html %}
|
34
|
+
<header>
|
35
|
+
{% if site.data.company_details.logo_image %}
|
36
|
+
<a href="{{site.baseurl }}/">
|
37
|
+
<img src="{{ site.baseurl }}{{ site.data.company_details.logo_image }}" width="180" alt="logo">
|
38
|
+
</a>
|
39
|
+
{% endif %}
|
40
|
+
|
41
|
+
</header>
|
42
|
+
|
43
|
+
<div class="container main-content">
|
44
|
+
<section class="content">{{ content }}</section>
|
45
|
+
{% include sidebar.html %}
|
44
46
|
</div>
|
45
|
-
|
47
|
+
<footer>
|
48
|
+
<div class="container">
|
49
|
+
<hr>
|
50
|
+
© {{ site.title }} {{ site.time | date: "%Y" }}. All rights reserved.
|
51
|
+
</div>
|
52
|
+
</footer>
|
53
|
+
</div>
|
46
54
|
</body>
|
47
55
|
</html>
|
data/_sass/blog.scss
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
.post {
|
2
2
|
h1 a {
|
3
|
-
color:
|
3
|
+
color: var(--primary-highlight);
|
4
4
|
text-decoration: none;
|
5
5
|
|
6
6
|
&:hover {
|
@@ -19,6 +19,7 @@
|
|
19
19
|
svg {
|
20
20
|
position: relative;
|
21
21
|
top: 6px;
|
22
|
+
fill: var(--primary-highlight);
|
22
23
|
}
|
23
24
|
|
24
25
|
span {
|
@@ -38,8 +39,8 @@
|
|
38
39
|
input[type="number"] {
|
39
40
|
max-width: 50px;
|
40
41
|
|
41
|
-
background-color:
|
42
|
-
color:
|
42
|
+
background-color: var(--primary-highlight);
|
43
|
+
color: var(--common);
|
43
44
|
border: none;
|
44
45
|
padding: 4px;
|
45
46
|
|
@@ -47,9 +48,9 @@
|
|
47
48
|
|
48
49
|
&:hover, &:active, &:focus {
|
49
50
|
background-color: initial;
|
50
|
-
color:
|
51
|
+
color: var(--primary-highlight);
|
51
52
|
|
52
|
-
border: 1px solid
|
53
|
+
border: 1px solid var(--primary-highlight);
|
53
54
|
}
|
54
55
|
}
|
55
56
|
|
@@ -111,7 +112,7 @@
|
|
111
112
|
content: counter(step-counter);
|
112
113
|
margin-right: 0px;
|
113
114
|
background-color: #{$recipe_color};
|
114
|
-
color:
|
115
|
+
color: var(--common);
|
115
116
|
/* padding: 1px 7px; */
|
116
117
|
font-size: .7em;
|
117
118
|
position: absolute;
|
@@ -0,0 +1,66 @@
|
|
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{
|
18
|
+
position: absolute;
|
19
|
+
top: 100px;
|
20
|
+
left: 30px;
|
21
|
+
}
|
22
|
+
|
23
|
+
input#color-mode {
|
24
|
+
appearance: none;
|
25
|
+
}
|
26
|
+
|
27
|
+
input#color-mode + label{
|
28
|
+
margin: 0;
|
29
|
+
line-height: 1.4em;
|
30
|
+
cursor: pointer;
|
31
|
+
padding: 2px 4px;
|
32
|
+
|
33
|
+
border: 1px solid var(--primary-highlight);
|
34
|
+
color: var(--primary-highlight);
|
35
|
+
|
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
|
+
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
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
|
+
|
56
|
+
}
|
57
|
+
}
|
58
|
+
input#color-mode:checked + label:after{
|
59
|
+
color: var(--primary-highlight);
|
60
|
+
}
|
61
|
+
|
62
|
+
@media (min-width: 1160px) {
|
63
|
+
input#color-mode, input#color-mode + label {
|
64
|
+
left: calc(calc(calc(100vw - 1160px) / 2) + 30px);
|
65
|
+
}
|
66
|
+
}
|
data/_sass/elements.scss
CHANGED
@@ -5,9 +5,15 @@ html , body {
|
|
5
5
|
scroll-behavior: smooth;
|
6
6
|
}
|
7
7
|
|
8
|
+
.color-scheme-wrapper {
|
9
|
+
min-height:100vh;
|
10
|
+
background: var(--common);
|
11
|
+
color: var(--primary-highlight);
|
12
|
+
}
|
13
|
+
|
8
14
|
body, input, textarea {
|
9
15
|
font-family: 'Atkinson Hyperlegible', sans-serif;
|
10
|
-
color:
|
16
|
+
color: var(--common);
|
11
17
|
-webkit-font-smoothing: antialiased;
|
12
18
|
}
|
13
19
|
|
@@ -23,7 +29,7 @@ h2 {
|
|
23
29
|
}
|
24
30
|
|
25
31
|
time {
|
26
|
-
color:
|
32
|
+
color: var(--secondary-highlight);
|
27
33
|
}
|
28
34
|
|
29
35
|
header {
|
@@ -40,7 +46,7 @@ ol li + li {
|
|
40
46
|
}
|
41
47
|
|
42
48
|
footer {
|
43
|
-
color:
|
49
|
+
color: var(--secondary-highlight);
|
44
50
|
text-align: center;
|
45
51
|
padding: 20px 0;
|
46
52
|
font-size: .8em;
|
data/_sass/forms.scss
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
.button, input[type="submit"] {
|
2
|
-
background:
|
2
|
+
background: var(--common);
|
3
3
|
cursor: pointer;
|
4
4
|
border: 1px solid #666;
|
5
|
-
color:
|
5
|
+
color: var(--primary-highlight);
|
6
6
|
text-decoration: none;
|
7
7
|
padding: 5px 10px;
|
8
8
|
display: inline-flex;
|
@@ -11,8 +11,8 @@
|
|
11
11
|
font-size: .8em;
|
12
12
|
|
13
13
|
&:hover {
|
14
|
-
background:
|
15
|
-
color:
|
14
|
+
background: var(--primary-highlight);
|
15
|
+
color: var(--common);
|
16
16
|
}
|
17
17
|
|
18
18
|
&:focus {
|
@@ -21,13 +21,13 @@
|
|
21
21
|
}
|
22
22
|
|
23
23
|
.button {
|
24
|
-
border-color:
|
24
|
+
border-color: var(--primary-highlight);
|
25
25
|
|
26
26
|
a {
|
27
|
-
color:
|
27
|
+
color: var(--primary-highlight);
|
28
28
|
|
29
29
|
&:hover {
|
30
|
-
color:
|
30
|
+
color: var(--common);
|
31
31
|
}
|
32
32
|
}
|
33
33
|
}
|
@@ -44,11 +44,11 @@ input[type="text"], input[type="email"], textarea {
|
|
44
44
|
font-size: 1.1em;
|
45
45
|
padding: 10px;
|
46
46
|
box-sizing: border-box;
|
47
|
-
border: 1px solid
|
47
|
+
border: 1px solid var(--secondary-highlight);
|
48
48
|
resize: none;
|
49
49
|
|
50
50
|
&:focus {
|
51
|
-
outline: 2px solid
|
51
|
+
outline: 2px solid var(--secondary-highlight);
|
52
52
|
}
|
53
53
|
}
|
54
54
|
|
@@ -63,18 +63,18 @@ label {
|
|
63
63
|
}
|
64
64
|
|
65
65
|
::-webkit-input-placeholder { /* Chrome */
|
66
|
-
color:
|
66
|
+
color: var(--secondary-highlight);
|
67
67
|
}
|
68
68
|
|
69
69
|
:-ms-input-placeholder { /* IE 10+ */
|
70
|
-
color:
|
70
|
+
color: var(--secondary-highlight);
|
71
71
|
}
|
72
72
|
::-moz-placeholder { /* Firefox 19+ */
|
73
|
-
color:
|
73
|
+
color: var(--secondary-highlight);
|
74
74
|
opacity: 1;
|
75
75
|
}
|
76
76
|
:-moz-placeholder { /* Firefox 4 - 18 */
|
77
|
-
color:
|
77
|
+
color: var(--secondary-highlight);
|
78
78
|
opacity: 1;
|
79
79
|
}
|
80
80
|
|
@@ -100,11 +100,11 @@ select {
|
|
100
100
|
width: 100%;
|
101
101
|
padding: 20px;
|
102
102
|
height: 43px;
|
103
|
-
background:
|
103
|
+
background: var(--common);
|
104
104
|
border-color: rgba(0,0,0,0);
|
105
105
|
font-size: 1em;
|
106
|
-
outline: 1px solid
|
106
|
+
outline: 1px solid var(--primary-highlight);
|
107
107
|
&:focus {
|
108
|
-
outline: 2px solid
|
108
|
+
outline: 2px solid var(--secondary-highlight);
|
109
109
|
}
|
110
110
|
}
|
data/_sass/navigation.scss
CHANGED
@@ -3,14 +3,27 @@ nav {
|
|
3
3
|
width: 100%;
|
4
4
|
display: flex;
|
5
5
|
justify-content: center;
|
6
|
-
background: rgba(255, 255, 255, .75);
|
7
6
|
z-index: 999;
|
7
|
+
|
8
|
+
// replacement for:
|
9
|
+
// background: rgba(var(--common), .75);
|
10
|
+
// because: color values of e.g. "black" cant be put into rgba :(
|
11
|
+
&::before {
|
12
|
+
content: "";
|
13
|
+
width: 100%;
|
14
|
+
height: 100%;
|
15
|
+
position: absolute;
|
16
|
+
left: 0;
|
17
|
+
background-color: var(--common);
|
18
|
+
opacity: 0.75;
|
19
|
+
z-index: -1;
|
20
|
+
}
|
8
21
|
|
9
22
|
a {
|
10
23
|
display: inline-block;
|
11
24
|
text-decoration: none;
|
12
25
|
padding: 14px 8px;
|
13
|
-
color:
|
26
|
+
color: var(--primary-highlight);
|
14
27
|
text-transform: uppercase;
|
15
28
|
letter-spacing: 1px;
|
16
29
|
font-size: .9em;
|
@@ -20,8 +33,8 @@ nav {
|
|
20
33
|
}
|
21
34
|
|
22
35
|
&:hover,&:focus {
|
23
|
-
background-color:
|
24
|
-
color:
|
36
|
+
background-color: var(--primary-highlight);
|
37
|
+
color: var(--common);
|
25
38
|
}
|
26
39
|
}
|
27
40
|
}
|
data/_sass/recipes.scss
CHANGED
@@ -14,10 +14,10 @@
|
|
14
14
|
height: 100%;
|
15
15
|
display: block;
|
16
16
|
background: rgba(0, 0, 0, .2);
|
17
|
-
color:
|
17
|
+
color: var(--light-common);
|
18
18
|
text-decoration: none;
|
19
19
|
text-align: center;
|
20
|
-
vertical-align: text-bottom;
|
20
|
+
//vertical-align: text-bottom;
|
21
21
|
position: relative;
|
22
22
|
transition: all 0.2s ease;
|
23
23
|
font-size: 1.1em;
|
@@ -28,7 +28,7 @@
|
|
28
28
|
bottom: 5px;
|
29
29
|
width: 100%;
|
30
30
|
left: 0;
|
31
|
-
text-shadow: 1px 1px 1px
|
31
|
+
text-shadow: 1px 1px 1px var(--light-primary-highlight);
|
32
32
|
}
|
33
33
|
|
34
34
|
&:hover {
|
data/_sass/sidebar.scss
CHANGED
data/_sass/variables.scss
CHANGED
@@ -3,4 +3,39 @@ $tablet: "(min-width: 450px)";
|
|
3
3
|
$mid-point: "(min-width: 620px)";
|
4
4
|
$desktop: "(min-width: 900px)";
|
5
5
|
|
6
|
-
|
6
|
+
|
7
|
+
// dark mode
|
8
|
+
|
9
|
+
:root{
|
10
|
+
--primary-highlight: black;
|
11
|
+
--secondary-highlight: #999;
|
12
|
+
--common: white;
|
13
|
+
|
14
|
+
// for theme independent styling
|
15
|
+
--light-primary-highlight: black;
|
16
|
+
--light-secondary-highlight: #999;
|
17
|
+
--light-common: white;
|
18
|
+
}
|
19
|
+
|
20
|
+
@media (prefers-color-scheme: dark) {
|
21
|
+
:root{
|
22
|
+
--primary-highlight: white;
|
23
|
+
--secondary-highlight: #868686;
|
24
|
+
--common: rgb(16, 20, 34);
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
#color-mode:checked ~ * {
|
29
|
+
--primary-highlight: white;
|
30
|
+
--secondary-highlight: #868686;
|
31
|
+
--common: rgb(16, 20, 34);
|
32
|
+
}
|
33
|
+
|
34
|
+
@media (prefers-color-scheme: dark) {
|
35
|
+
#color-mode:checked ~ * {
|
36
|
+
--primary-highlight: black;
|
37
|
+
--secondary-highlight: #999;
|
38
|
+
--common: white;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
data/assets/css/screen.scss
CHANGED
@@ -1,12 +1,13 @@
|
|
1
1
|
---
|
2
|
-
title: CSS-Stylesheet for screens
|
2
|
+
//title: CSS-Stylesheet for screens
|
3
3
|
---
|
4
4
|
|
5
5
|
// doesnt work :(, page.color seems to be nil, but actually exists
|
6
|
-
|
6
|
+
//$recipe_color: "{% if page.color and page.color != '' %}{{ page.color }}{% else %}{{'#ff4e4e'}}{% endif %}";
|
7
7
|
|
8
8
|
@import "fonts";
|
9
9
|
@import "variables";
|
10
|
+
@import "color-mode";
|
10
11
|
@import "elements";
|
11
12
|
@import "layout";
|
12
13
|
@import "blog";
|
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.5.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-03-
|
11
|
+
date: 2023-03-30 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: jekyll
|
@@ -145,6 +145,7 @@ files:
|
|
145
145
|
- _layouts/default.html
|
146
146
|
- _layouts/post.html
|
147
147
|
- _sass/blog.scss
|
148
|
+
- _sass/color-mode.scss
|
148
149
|
- _sass/elements.scss
|
149
150
|
- _sass/fonts.scss
|
150
151
|
- _sass/forms.scss
|
@@ -184,7 +185,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
184
185
|
- !ruby/object:Gem::Version
|
185
186
|
version: '0'
|
186
187
|
requirements: []
|
187
|
-
rubygems_version: 3.
|
188
|
+
rubygems_version: 3.3.26
|
188
189
|
signing_key:
|
189
190
|
specification_version: 4
|
190
191
|
summary: Recipe is a Jekyll theme for recipe websites, and adapted from CloudCannons
|