jekyll-theme-recipe 0.4.1 → 0.5.0

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/_includes/recipe-icon.html +4 -4
  3. data/_layouts/default.html +26 -18
  4. data/_sass/blog.scss +7 -6
  5. data/_sass/elements.scss +9 -3
  6. data/_sass/forms.scss +16 -16
  7. data/_sass/navigation.scss +17 -4
  8. data/_sass/recipes.scss +3 -3
  9. data/_sass/sidebar.scss +2 -2
  10. data/_sass/variables.scss +36 -1
  11. data/assets/css/screen.scss +1 -0
  12. metadata +3 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 9c6219e982c80788d779a5ce2418390608348c30bb8a98013b13a966835e7de7
4
- data.tar.gz: 22b5555d7ded586ce5d115845df526bf26b05575b92dc2fd4c9817789f527042
3
+ metadata.gz: 4f03a3f5a21b2a5fd769d9d2cc459e104e9bedabd0d031168f86e49dee8a4deb
4
+ data.tar.gz: 268835a92ae4cf44028266e5f75a3ed6fc92f6332b801a9fc74491b2d9877e6a
5
5
  SHA512:
6
- metadata.gz: c5c0196aaa442d24c699051b884619bab1dd1a926665f60eaffb127cba314a353496ec683524ffdbbd8bf8ace6327fce55d0392cfcb23620463adc91e9c547d8
7
- data.tar.gz: 2b4e02209a2b5907d13c5cbf0abc3092516169bf7fb8d9c6a65faad46ba588504c2e4fce5380d4ae947fab6f503d13cf1769f6cd38a153b027ce265385e290ab
6
+ metadata.gz: 4d7b60d511533e2a0bb292fc9e7e62781b4f8e606722d37cb7c0a82501a5633af86dda9de52a39100146287cb352b2ff2a9611ae9ea592e429624a06bf5e0167
7
+ data.tar.gz: 82c3b4421957e859e878e7a6c83ff7447d88d71f68a26d4f1c3e79df7931122fc86e2ab08ba00e81a8c85e68456790ad04b829025097b968f4be52c7eff78e5d
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="#FFFFFF" d="M9.148,3.97c0.678-0.039,1.252,0.493,1.293,1.197
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="#FFFFFF" d="M6.071,3.967C6.766,3.989,7.321,4.553,7.3,5.214
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="#FFFFFF" d="M17.348,5.199c0,0.677-0.557,1.231-1.239,1.236
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="#FFFFFF" d="M20.489,5.201c-0.002,0.679-0.562,1.234-1.243,1.234
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
- {% include navigation.html %}
28
- <header>
29
- {% if site.data.company_details.logo_image %}
30
- <a href="{{site.baseurl }}/">
31
- <img src="{{ site.baseurl }}{{ site.data.company_details.logo_image }}" width="180" alt="logo">
32
- </a>
33
- {% endif %}
34
- </header>
35
-
36
- <div class="container main-content">
37
- <section class="content">{{ content }}</section>
38
- {% include sidebar.html %}
39
- </div>
40
- <footer>
41
- <div class="container">
42
- <hr>
43
- &copy; {{ site.title }} {{ site.time | date: "%Y" }}. All rights reserved.
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
- </footer>
47
+ <footer>
48
+ <div class="container">
49
+ <hr>
50
+ &copy; {{ 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: #000;
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: black;
42
- color: white;
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: initial;
51
+ color: var(--primary-highlight);
51
52
 
52
- border: 1px solid black;
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: white;
115
+ color: var(--common);
115
116
  /* padding: 1px 7px; */
116
117
  font-size: .7em;
117
118
  position: absolute;
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: #222;
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: $light-grey;
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: $light-grey;
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: #fff;
2
+ background: var(--common);
3
3
  cursor: pointer;
4
4
  border: 1px solid #666;
5
- color: #000;
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: #000;
15
- color: #fff;
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: #000;
24
+ border-color: var(--primary-highlight);
25
25
 
26
26
  a {
27
- color: #000;
27
+ color: var(--primary-highlight);
28
28
 
29
29
  &:hover {
30
- color: #fff;
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 #666;
47
+ border: 1px solid var(--secondary-highlight);
48
48
  resize: none;
49
49
 
50
50
  &:focus {
51
- outline: 2px solid #333;
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: $light-grey;
66
+ color: var(--secondary-highlight);
67
67
  }
68
68
 
69
69
  :-ms-input-placeholder { /* IE 10+ */
70
- color: $light-grey;
70
+ color: var(--secondary-highlight);
71
71
  }
72
72
  ::-moz-placeholder { /* Firefox 19+ */
73
- color: $light-grey;
73
+ color: var(--secondary-highlight);
74
74
  opacity: 1;
75
75
  }
76
76
  :-moz-placeholder { /* Firefox 4 - 18 */
77
- color: $light-grey;
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: #fff;
103
+ background: var(--common);
104
104
  border-color: rgba(0,0,0,0);
105
105
  font-size: 1em;
106
- outline: 1px solid #000;
106
+ outline: 1px solid var(--primary-highlight);
107
107
  &:focus {
108
- outline: 2px solid #333;
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: black;
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: #000;
24
- color: white;
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: #fff;
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 #000;
31
+ text-shadow: 1px 1px 1px var(--light-primary-highlight);
32
32
  }
33
33
 
34
34
  &:hover {
data/_sass/sidebar.scss CHANGED
@@ -30,14 +30,14 @@
30
30
  text-decoration: none;
31
31
 
32
32
  &:hover svg {
33
- fill: #000;
33
+ fill: var(--primary-highlight);
34
34
  }
35
35
  }
36
36
 
37
37
  svg {
38
38
  width: 25px;
39
39
  height: 25px;
40
- fill: $light-grey;
40
+ fill: var(--secondary-highlight);
41
41
  }
42
42
  }
43
43
  }
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
- $light-grey: #999;
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
@@ -7,6 +7,7 @@ $recipe_color: "{% if page.color and page.color != '' %}{{ page.color }}{% else
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.1
4
+ version: 0.5.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-03-29 00:00:00.000000000 Z
11
+ date: 2023-03-30 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -184,7 +184,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
184
184
  - !ruby/object:Gem::Version
185
185
  version: '0'
186
186
  requirements: []
187
- rubygems_version: 3.4.6
187
+ rubygems_version: 3.3.26
188
188
  signing_key:
189
189
  specification_version: 4
190
190
  summary: Recipe is a Jekyll theme for recipe websites, and adapted from CloudCannons