steve-for-jekyll 1.1.1 → 1.2.1

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 (25) hide show
  1. checksums.yaml +4 -4
  2. data/404.html +9 -9
  3. data/LICENSE.txt +21 -21
  4. data/README.md +1 -193
  5. data/_config.yml +96 -96
  6. data/_includes/blog/custom-widgets.html +3 -3
  7. data/_includes/blog/sidebar.html +42 -42
  8. data/_includes/footer/custom-text.html +5 -5
  9. data/_includes/footer.html +11 -11
  10. data/_includes/head.html +1 -9
  11. data/_includes/header/menu.html +12 -12
  12. data/_includes/header.html +17 -17
  13. data/_includes/post/comment-form.html +69 -69
  14. data/_includes/search-form.html +13 -13
  15. data/_layouts/archive.html +21 -21
  16. data/_layouts/default.html +18 -18
  17. data/_layouts/home.html +23 -23
  18. data/_layouts/page.html +15 -15
  19. data/_layouts/post.html +115 -115
  20. data/_sass/steve/_base.scss +269 -237
  21. data/_sass/steve/_layout.scss +472 -472
  22. data/_sass/steve-for-jekyll.scss +51 -51
  23. data/assets/css/screen.scss +34 -34
  24. data/assets/js/responsive-videos.js +79 -79
  25. metadata +21 -7
data/_sass/steve/_base.scss CHANGED
@@ -1,237 +1,269 @@
1
- /*
2
- Resets
3
- */
4
-
5
- body,
6
- h1, h2, h3, h4, h5, h6,
7
- p, blockquote, pre, hr,
8
- dl, dd, ol, ul, figure {
9
- margin: 0;
10
- padding: 0;
11
- }
12
-
13
- /*
14
- Basic styling
15
- */
16
-
17
- html {
18
- font-size: 16px;
19
- }
20
-
21
- body {
22
- background-color: var(--color-body);
23
- font-family: var(--font);
24
- line-height: 1.5;
25
- }
26
-
27
- /*
28
- Accessibility helpers
29
- */
30
- .visually-hidden {
31
- position: absolute !important;
32
- height: 1px;
33
- width: 1px;
34
- overflow: hidden;
35
- clip: rect(1px 1px 1px 1px);
36
- clip: rect(1px, 1px, 1px, 1px);
37
- white-space: nowrap;
38
- }
39
-
40
- /*
41
- Text Elements
42
- */
43
-
44
- .content-body {
45
- p, pre, blockquote,
46
- dl, ul, ol,
47
- figure, iframe, table,
48
- .highlight {
49
- margin-bottom: var(--gap);
50
- }
51
- }
52
-
53
- // Links
54
- a {
55
- color: var(--color-link);
56
- text-decoration: none;
57
- transition: color 250ms ease;
58
-
59
- &:hover,
60
- &:focus {
61
- color: var(--color-link-hover);
62
- text-decoration: underline;
63
- }
64
- }
65
-
66
- // Lists
67
- ul, ol {
68
- margin-left: var(--gap);
69
- }
70
-
71
- dl {
72
- dt + dd {
73
- margin-bottom: calc(var(--gap) / 2);
74
- }
75
-
76
- dt + dd + dt {
77
- margin-top: calc(var(--gap) / 2);
78
- }
79
- }
80
-
81
- // Headings
82
- h1, h2, h3, h4, h5, h6 {
83
- line-height: 1.2;
84
- font-family: var(--font-headings);
85
- }
86
-
87
- h1 {
88
- font-size: 2rem;
89
- }
90
-
91
- h2 {
92
- font-size: 1.5rem;
93
- }
94
-
95
- h3 {
96
- font-size: 1.25rem;
97
- }
98
-
99
- h4 {
100
- font-size: 1rem;
101
- }
102
-
103
- h5 {
104
- font-size: 0.875rem;
105
- }
106
-
107
- h6 {
108
- font-size: 0.75rem;
109
- }
110
-
111
- // Code
112
- pre {
113
- max-width: 100%;
114
- overflow-x: auto;
115
- }
116
-
117
- // Media
118
- img, iframe,
119
- video, audio {
120
- max-width: 100%;
121
- border-radius: 3px;
122
- box-shadow: 0 2px 5px var(--color-details);
123
- }
124
-
125
- // Tables
126
- table {
127
- border: 1px solid var(--color-details-lighter);
128
- border-radius: 3px;
129
- border-collapse: collapse;
130
- color: var(--color-details-darker);
131
- width: 100%;
132
-
133
- th, td {
134
- border-bottom: 1px solid var(--color-details-lighter);
135
- padding: calc(var(--gap) / 4);
136
- text-align: left;
137
- }
138
-
139
- th {
140
- background: var(--color-details-lighter);
141
- }
142
- }
143
-
144
- // Quotes
145
-
146
- blockquote {
147
- border-left: 4px solid var(--color-details-lighter);
148
- padding-left: calc(var(--gap) / 2);
149
- padding-top: calc(var(--gap) / 4);
150
- padding-bottom: calc(var(--gap) / 4);
151
- font-style: italic;
152
- color: var(--color-details-darker);
153
-
154
- > :last-child {
155
- margin-bottom: 0;
156
- }
157
- }
158
-
159
- // Horizontal rule
160
- hr {
161
- width: 250px;
162
- height: 3px;
163
- margin: calc(var(--gap) * 2) auto;
164
- background-color: var(--color-details-lighter);
165
- border: none;
166
- border-radius: 3px;
167
- }
168
-
169
- // Forms
170
- input[type="text"],
171
- input[type="email"],
172
- input[type="password"],
173
- input[type="search"],
174
- input[type="tel"],
175
- input[type="number"],
176
- input[type="color"],
177
- input[type="url"],
178
- input[type="button"],
179
- input[type="reset"],
180
- input[type="submit"],
181
- textarea,
182
- button {
183
- -webkit-appearance: none;
184
- -moz-appearance: none;
185
- border: none;
186
- border-radius: 0;
187
- box-shadow: none;
188
- background: var(--color-bg);
189
- padding: 5px;
190
- margin: 0;
191
- font: inherit;
192
- }
193
-
194
- input[type="text"],
195
- input[type="email"],
196
- input[type="password"],
197
- input[type="search"],
198
- input[type="tel"],
199
- input[type="number"],
200
- input[type="color"],
201
- input[type="url"],
202
- textarea {
203
- border-bottom: 3px dashed var(--color-details-lighter);
204
- transition: border-bottom-color 250ms ease;
205
-
206
- &:hover,
207
- &:focus {
208
- outline: none;
209
- border-bottom-color: var(--color-link);
210
- }
211
- }
212
-
213
- input[type="button"],
214
- input[type="reset"],
215
- input[type="submit"],
216
- button {
217
- box-shadow: inset 0 0 0 var(--color-details-lighter);
218
- border-bottom: 3px solid var(--color-details-lighter);
219
- color: var(--color-link);
220
- transition-property: color, box-shadow, border-bottom-color;
221
- transition-duration: 250ms;
222
- transition-timing-function: ease;
223
- padding-left: 10px;
224
- padding-right: 10px;
225
-
226
- &:hover,
227
- &:focus {
228
- cursor: pointer;
229
- box-shadow: inset 0 -2.5em 0 var(--color-link);
230
- border-bottom-color: var(--color-link-hover);
231
- color: var(--color-details-lighter);
232
- }
233
-
234
- &:active {
235
- box-shadow: inset 0 -2.5em 0 var(--color-link-hover);
236
- }
237
- }
1
+ /*
2
+ Resets
3
+ */
4
+
5
+ body,
6
+ h1,
7
+ h2,
8
+ h3,
9
+ h4,
10
+ h5,
11
+ h6,
12
+ p,
13
+ blockquote,
14
+ pre,
15
+ hr,
16
+ dl,
17
+ dd,
18
+ ol,
19
+ ul,
20
+ figure {
21
+ margin: 0;
22
+ padding: 0;
23
+ }
24
+
25
+ /*
26
+ Basic styling
27
+ */
28
+
29
+ html {
30
+ font-size: 16px;
31
+ }
32
+
33
+ body {
34
+ background-color: var(--color-body);
35
+ font-family: var(--font);
36
+ line-height: 1.5;
37
+ }
38
+
39
+ /*
40
+ Accessibility helpers
41
+ */
42
+ .visually-hidden {
43
+ position: absolute !important;
44
+ height: 1px;
45
+ width: 1px;
46
+ overflow: hidden;
47
+ clip: rect(1px 1px 1px 1px);
48
+ clip: rect(1px, 1px, 1px, 1px);
49
+ white-space: nowrap;
50
+ }
51
+
52
+ /*
53
+ Text Elements
54
+ */
55
+
56
+ .content-body {
57
+ p,
58
+ pre,
59
+ blockquote,
60
+ dl,
61
+ ul,
62
+ ol,
63
+ figure,
64
+ iframe,
65
+ table,
66
+ .highlight {
67
+ margin-bottom: var(--gap);
68
+ }
69
+ }
70
+
71
+ // Links
72
+ a {
73
+ color: var(--color-link);
74
+ text-decoration: none;
75
+ transition: color 250ms ease;
76
+
77
+ &:hover,
78
+ &:focus {
79
+ color: var(--color-link-hover);
80
+ text-decoration: underline;
81
+ }
82
+ }
83
+
84
+ // Lists
85
+ ul,
86
+ ol {
87
+ margin-left: var(--gap);
88
+
89
+ ul,
90
+ ol {
91
+ margin-bottom: 0;
92
+ }
93
+ }
94
+
95
+ dl {
96
+ dt + dd {
97
+ margin-bottom: calc(var(--gap) / 2);
98
+ }
99
+
100
+ dt + dd + dt {
101
+ margin-top: calc(var(--gap) / 2);
102
+ }
103
+ }
104
+
105
+ // Headings
106
+ h1,
107
+ h2,
108
+ h3,
109
+ h4,
110
+ h5,
111
+ h6 {
112
+ line-height: 1.2;
113
+ font-family: var(--font-headings);
114
+ }
115
+
116
+ h1 {
117
+ font-size: 2rem;
118
+ }
119
+
120
+ h2 {
121
+ font-size: 1.5rem;
122
+ }
123
+
124
+ h3 {
125
+ font-size: 1.25rem;
126
+ }
127
+
128
+ h4 {
129
+ font-size: 1rem;
130
+ }
131
+
132
+ h5 {
133
+ font-size: 0.875rem;
134
+ }
135
+
136
+ h6 {
137
+ font-size: 0.75rem;
138
+ }
139
+
140
+ // Code
141
+ pre {
142
+ max-width: 100%;
143
+ overflow-x: auto;
144
+ }
145
+
146
+ // Media
147
+ img,
148
+ iframe,
149
+ video,
150
+ audio {
151
+ max-width: 100%;
152
+ border-radius: 3px;
153
+ box-shadow: 0 2px 5px var(--color-details);
154
+ }
155
+
156
+ // Tables
157
+ table {
158
+ border: 1px solid var(--color-details-lighter);
159
+ border-radius: 3px;
160
+ border-collapse: collapse;
161
+ color: var(--color-details-darker);
162
+ width: 100%;
163
+
164
+ th,
165
+ td {
166
+ border-bottom: 1px solid var(--color-details-lighter);
167
+ padding: calc(var(--gap) / 4);
168
+ text-align: left;
169
+ }
170
+
171
+ th {
172
+ background: var(--color-details-lighter);
173
+ }
174
+ }
175
+
176
+ // Quotes
177
+
178
+ blockquote {
179
+ border-left: 4px solid var(--color-details-lighter);
180
+ padding-left: calc(var(--gap) / 2);
181
+ padding-top: calc(var(--gap) / 4);
182
+ padding-bottom: calc(var(--gap) / 4);
183
+ font-style: italic;
184
+ color: var(--color-details-darker);
185
+
186
+ > :last-child {
187
+ margin-bottom: 0;
188
+ }
189
+ }
190
+
191
+ // Horizontal rule
192
+ hr {
193
+ width: 250px;
194
+ height: 3px;
195
+ margin: calc(var(--gap) * 2) auto;
196
+ background-color: var(--color-details-lighter);
197
+ border: none;
198
+ border-radius: 3px;
199
+ }
200
+
201
+ // Forms
202
+ input[type="text"],
203
+ input[type="email"],
204
+ input[type="password"],
205
+ input[type="search"],
206
+ input[type="tel"],
207
+ input[type="number"],
208
+ input[type="color"],
209
+ input[type="url"],
210
+ input[type="button"],
211
+ input[type="reset"],
212
+ input[type="submit"],
213
+ textarea,
214
+ button {
215
+ -webkit-appearance: none;
216
+ -moz-appearance: none;
217
+ border: none;
218
+ border-radius: 0;
219
+ box-shadow: none;
220
+ background: var(--color-bg);
221
+ padding: 5px;
222
+ margin: 0;
223
+ font: inherit;
224
+ }
225
+
226
+ input[type="text"],
227
+ input[type="email"],
228
+ input[type="password"],
229
+ input[type="search"],
230
+ input[type="tel"],
231
+ input[type="number"],
232
+ input[type="color"],
233
+ input[type="url"],
234
+ textarea {
235
+ border-bottom: 3px dashed var(--color-details-lighter);
236
+ transition: border-bottom-color 250ms ease;
237
+
238
+ &:hover,
239
+ &:focus {
240
+ outline: none;
241
+ border-bottom-color: var(--color-link);
242
+ }
243
+ }
244
+
245
+ input[type="button"],
246
+ input[type="reset"],
247
+ input[type="submit"],
248
+ button {
249
+ box-shadow: inset 0 0 0 var(--color-details-lighter);
250
+ border-bottom: 3px solid var(--color-details-lighter);
251
+ color: var(--color-link);
252
+ transition-property: color, box-shadow, border-bottom-color;
253
+ transition-duration: 250ms;
254
+ transition-timing-function: ease;
255
+ padding-left: 10px;
256
+ padding-right: 10px;
257
+
258
+ &:hover,
259
+ &:focus {
260
+ cursor: pointer;
261
+ box-shadow: inset 0 -2.5em 0 var(--color-link);
262
+ border-bottom-color: var(--color-link-hover);
263
+ color: var(--color-details-lighter);
264
+ }
265
+
266
+ &:active {
267
+ box-shadow: inset 0 -2.5em 0 var(--color-link-hover);
268
+ }
269
+ }