jekyll-california 0.2.0 → 0.3.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.
@@ -0,0 +1,198 @@
1
+ /*** Pygments ***/
2
+ .highlight {
3
+ margin-bottom: 15px;
4
+ border-radius: 10px;
5
+ background: var(--c-secondary-background);
6
+ }
7
+ .highlight .c {
8
+ color: #998;
9
+ font-style: italic;
10
+ }
11
+ .highlight .err {
12
+ color: #a61717;
13
+ background-color: #e3d2d2;
14
+ }
15
+ .highlight .k {
16
+ font-weight: bold;
17
+ }
18
+ .highlight .o {
19
+ font-weight: bold;
20
+ }
21
+ .highlight .cm {
22
+ color: #998;
23
+ font-style: italic;
24
+ }
25
+ .highlight .cp {
26
+ color: #999;
27
+ font-weight: bold;
28
+ }
29
+ .highlight .c1 {
30
+ color: #998;
31
+ font-style: italic;
32
+ }
33
+ .highlight .cs {
34
+ color: #999;
35
+ font-weight: bold;
36
+ font-style: italic;
37
+ }
38
+ .highlight .gd {
39
+ color: #000;
40
+ background-color: #fdd;
41
+ }
42
+ .highlight .gd .x {
43
+ color: #000;
44
+ background-color: #faa;
45
+ }
46
+ .highlight .ge {
47
+ font-style: italic;
48
+ }
49
+ .highlight .gr {
50
+ color: #a00;
51
+ }
52
+ .highlight .gh {
53
+ color: #999;
54
+ }
55
+ .highlight .gi {
56
+ color: #000;
57
+ background-color: #dfd;
58
+ }
59
+ .highlight .gi .x {
60
+ color: #000;
61
+ background-color: #afa;
62
+ }
63
+ .highlight .go {
64
+ color: #888;
65
+ }
66
+ .highlight .gp {
67
+ color: #555;
68
+ }
69
+ .highlight .gs {
70
+ font-weight: bold;
71
+ }
72
+ .highlight .gu {
73
+ color: #aaa;
74
+ }
75
+ .highlight .gt {
76
+ color: #a00;
77
+ }
78
+ .highlight .kc {
79
+ font-weight: bold;
80
+ }
81
+ .highlight .kd {
82
+ font-weight: bold;
83
+ }
84
+ .highlight .kp {
85
+ font-weight: bold;
86
+ }
87
+ .highlight .kr {
88
+ font-weight: bold;
89
+ }
90
+ .highlight .kt {
91
+ color: #458;
92
+ font-weight: bold;
93
+ }
94
+ .highlight .m {
95
+ color: #099;
96
+ }
97
+ .highlight .s {
98
+ color: #d14;
99
+ }
100
+ .highlight .na {
101
+ color: #008080;
102
+ }
103
+ .highlight .nb {
104
+ color: #0086b3;
105
+ }
106
+ .highlight .nc {
107
+ color: #458;
108
+ font-weight: bold;
109
+ }
110
+ .highlight .no {
111
+ color: #008080;
112
+ }
113
+ .highlight .ni {
114
+ color: #800080;
115
+ }
116
+ .highlight .ne {
117
+ color: #900;
118
+ font-weight: bold;
119
+ }
120
+ .highlight .nf {
121
+ color: #900;
122
+ font-weight: bold;
123
+ }
124
+ .highlight .nn {
125
+ color: #555;
126
+ }
127
+ .highlight .nt {
128
+ color: #af00af;
129
+ }
130
+ .highlight .nv {
131
+ color: #008080;
132
+ }
133
+ .highlight .ow {
134
+ font-weight: bold;
135
+ }
136
+ .highlight .w {
137
+ color: #bbb;
138
+ }
139
+ .highlight .mf {
140
+ color: #099;
141
+ }
142
+ .highlight .mh {
143
+ color: #099;
144
+ }
145
+ .highlight .mi {
146
+ color: #099;
147
+ }
148
+ .highlight .mo {
149
+ color: #099;
150
+ }
151
+ .highlight .sb {
152
+ color: #d14;
153
+ }
154
+ .highlight .sc {
155
+ color: #d14;
156
+ }
157
+ .highlight .sd {
158
+ color: #d14;
159
+ }
160
+ .highlight .s2 {
161
+ color: #d14;
162
+ }
163
+ .highlight .se {
164
+ color: #d14;
165
+ }
166
+ .highlight .sh {
167
+ color: #d14;
168
+ }
169
+ .highlight .si {
170
+ color: #d14;
171
+ }
172
+ .highlight .sx {
173
+ color: #d14;
174
+ }
175
+ .highlight .sr {
176
+ color: #009926;
177
+ }
178
+ .highlight .s1 {
179
+ color: #d14;
180
+ }
181
+ .highlight .ss {
182
+ color: #990073;
183
+ }
184
+ .highlight .bp {
185
+ color: #999;
186
+ }
187
+ .highlight .vc {
188
+ color: #008080;
189
+ }
190
+ .highlight .vg {
191
+ color: #008080;
192
+ }
193
+ .highlight .vi {
194
+ color: #008080;
195
+ }
196
+ .highlight .il {
197
+ color: #099;
198
+ }
data/_sass/_main.scss CHANGED
@@ -1,230 +1,266 @@
1
- /*** Reset ***/
2
- html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
3
- margin: 0;
4
- padding: 0;
5
- border: 0;
6
- font-size: 100%;
7
- font: inherit;
8
- vertical-align: baseline;
9
- }
10
- article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
11
- display: block;
12
- }
1
+ // borrowed from https://github.com/danurbanowicz/eleventy-netlify-boilerplate
2
+
3
+ :root {
4
+ /* Light theme */
5
+ --c-light-text: #333;
6
+ --c-light-background: #fdfdfd;
7
+ --c-light-secondary-background: #f8f8f8;
8
+ --c-light-focus: #f0f8ff;
9
+ --c-light-link-text: #06c;
10
+
11
+ /* Dark theme */
12
+ --c-dark-text: #ddd;
13
+ --c-dark-background: #212121;
14
+ --c-dark-secondary-background: #262626;
15
+ --c-dark-focus: #f0f8ff;
16
+ --c-dark-link-text: #26e;
17
+ }
18
+
19
+ :root {
20
+ --c-text: var(--c-light-text);
21
+ --c-link-text: var(--c-light-link-text);
22
+ --c-background: var(--c-light-background);
23
+ --c-secondary-background: var(--c-light-secondary-background);
24
+ --c-focus: var(--c-light-focus);
25
+ }
26
+
27
+ /* Override default theme with dark theme */
28
+ @media (prefers-color-scheme: dark) {
29
+ :root {
30
+ --c-text: var(--c-dark-text);
31
+ --c-link-text: var(--c-dark-link-text);
32
+ --c-background: var(--c-dark-background);
33
+ --c-secondary-background: var(--c-dark-secondary-background);
34
+ --c-focus: var(--c-dark-focus);
35
+ }
36
+ }
37
+
38
+ *,
39
+ *:before,
40
+ *:after {
41
+ box-sizing: border-box;
42
+ }
43
+
44
+ html,
13
45
  body {
14
- line-height: 1;
15
- }
16
- ol, ul {
17
- list-style: bullet;
18
- }
19
- blockquote, q {
20
- quotes: none;
46
+ padding: 0;
47
+ margin: 0;
48
+ font-family: "Avenir", "Avenir Next", -apple-system, BlinkMacSystemFont,
49
+ "Segoe UI", Helvetica, Arial, sans-serif;
50
+ color: var(--c-text);
21
51
  }
22
- blockquote:before, blockquote:after, q:before, q:after {
23
- content: '';
24
- content: none;
25
- }
26
- table {
27
- border-collapse: collapse;
28
- border-spacing: 0;
29
- }
30
-
31
- // Import stuff
32
- @import 'variables';
33
52
 
34
- // fonts
35
- @import url('https://fonts.googleapis.com/css?family=Karla&display=swap');
36
-
37
- /*** Basics ***/
38
53
  body {
39
- font-family: 'Karla', sans-serif;
40
- -webkit-font-smoothing: antialiased;
41
- text-rendering: optimizeLegibility;
42
- font-size: 14px;
43
- line-height: 1.7;
54
+ display: grid;
55
+ height: 100vh;
56
+ grid-template-rows: auto 1fr auto;
57
+ background-color: var(--c-background);
44
58
  }
45
59
 
46
- a, a:active, a:visited {
47
- text-decoration: none;
48
- padding-bottom: 2px;
49
- }
50
- a:hover {
51
- background-color: $cerulean-blue;
52
- color: #000000;
60
+ main {
61
+ max-width: 37.5em;
53
62
  }
54
63
 
55
- p, pre { margin-bottom: 15px; }
56
- ul, ol { padding: 0 0 18px 30px; }
57
- ol li, ul li { margin-top: 10px; margin-bottom: 10px; }
58
- em, i { font-style: italic; }
59
- strong, b { font-weight: bold; }
60
- small { font-size: 1em; }
61
- sup { vertical-align: super; font-size: 0.85em; }
62
- sub { vertical-align: sub; font-size: 0.85em; }
63
-
64
+ p,
65
+ pre,
64
66
  code {
65
- font: 0.85em Monaco, Courier, Monospace;
66
- overflow-x: auto;
67
+ line-height: 1.5;
67
68
  }
68
69
 
69
- pre {
70
- overflow: auto;
70
+ a[href],
71
+ a[href]:visited {
72
+ color: var(--c-link-text);
71
73
  }
72
74
 
73
- .code-wrap code {
74
- white-space: pre-wrap;
75
- white-space: -moz-pre-wrap;
76
- white-space: -pre-wrap;
77
- white-space: -o-pre-wrap;
75
+ a[href]:not(:hover) {
76
+ text-decoration: none;
78
77
  }
79
78
 
80
- blockquote {
81
- margin: 22px 22px;
82
- padding: 0 20px;
83
- border-left: 2px solid #000000;
84
- font-size: 1.4em;
85
- font-style: italic;
86
- line-height: 1.5em;
79
+ img {
80
+ max-width: 100%;
81
+ height: auto;
87
82
  }
88
83
 
89
- acronym, abbr {
90
- cursor: help;
91
- letter-spacing: 1px;
92
- border-bottom: 1px dashed;
84
+ header,
85
+ main,
86
+ footer {
87
+ padding: 1em;
93
88
  }
94
89
 
95
-
96
- h1 {
97
- font-size: 18px;
98
- margin: 0 0 10px 0;
90
+ main {
91
+ padding-bottom: 2em;
99
92
  }
100
- h2 {
101
- font-size: 15px;
102
- margin: 0 0 10px 0;
103
- }
104
- h3 {
105
- font-size: 14px;
106
- margin: 0 0 10px 0;
93
+
94
+ main :first-child,
95
+ main > article :first-child {
96
+ margin-top: 0;
107
97
  }
108
98
 
99
+ pre {
100
+ font-size: 14px;
101
+ direction: ltr;
102
+ text-align: left;
103
+ white-space: pre;
104
+ word-spacing: normal;
105
+ word-break: normal;
106
+ -moz-tab-size: 2;
107
+ tab-size: 2;
108
+ -webkit-hyphens: none;
109
+ -moz-hyphens: none;
110
+ -ms-hyphens: none;
111
+ hyphens: none;
112
+ padding: 1em;
113
+ margin: 0.5em 0;
114
+ overflow-x: auto;
115
+ white-space: pre-wrap;
116
+ white-space: -moz-pre-wrap;
117
+ white-space: -pre-wrap;
118
+ white-space: -o-pre-wrap;
119
+ word-wrap: break-word;
120
+ }
121
+
122
+ /* Header Logo (style as h2) */
123
+ header > em {
124
+ display: block;
125
+ font-size: 2em;
126
+ margin: 0.67em 0;
127
+ font-weight: bold;
128
+ font-style: normal;
129
+ }
109
130
 
131
+ /* Header Nav */
132
+ header nav ul {
133
+ padding: 0;
134
+ list-style: none;
135
+ }
110
136
 
111
- /*** Useful Classes ***/
112
- .clear { clear: both; }
113
- .float-left { float: left; }
114
- .float-right { float: right; }
115
- .text-left { text-align: left; }
116
- .text-right { text-align: right; }
117
- .text-center { text-align: center; }
118
- .text-justify { text-align: justify; }
119
- .img-left { float: left; margin: 4px 10px 4px 0; }
120
- .img-right { float: right; margin: 4px 0 4px 10px; }
121
- .img-middle { vertical-align: middle; }
122
- .nopadding { padding: 0; }
123
- .nounderline { text-decoration: underline; }
137
+ header nav ul :first-child {
138
+ margin-left: 0;
139
+ }
124
140
 
141
+ header nav li {
142
+ display: inline-block;
143
+ margin: 0 0.25em;
144
+ }
125
145
 
146
+ header nav li a {
147
+ padding: 0.25em 0.5em;
148
+ border-radius: 0.25em;
149
+ }
126
150
 
127
- /*** Structure ***/
128
- #page {
129
- width: 500px;
130
- margin: 0 auto;
131
- position: relative;
151
+ header nav li a[href]:not(:hover) {
152
+ text-decoration: none;
132
153
  }
133
154
 
134
- #header {
135
- width: 500px;
136
- margin: 40px auto 50px auto;
155
+ header nav li a[data-current="current item"] {
156
+ background-color: var(--c-focus);
137
157
  }
138
- #header h1 {
139
- font-size: 32px;
140
- margin-bottom: 4px;
158
+
159
+ /* Posts List */
160
+ article {
161
+ margin-bottom: 1em;
162
+ padding-bottom: 1em;
141
163
  }
142
- #header h1 a {
143
- border: none;
164
+
165
+ main > section > article > * {
166
+ margin-top: 0;
167
+ margin-bottom: 0.5em;
144
168
  }
145
169
 
146
- #footer {
147
- width: 500px;
148
- margin: 50px auto 20px auto;
149
- padding-top: 10px;
150
- font-size: 0.85em;
151
- border-top: 1px solid #073642;
170
+ /* Post footer */
171
+
172
+ div.post-footer {
173
+ font-size: 0.8rem;
152
174
  }
153
175
 
154
- #content {
155
- width: 500px;
156
- margin: 0 auto;
176
+ div.post-footer .meta {
177
+ margin-top: 0.25em;
157
178
  }
158
179
 
159
- #sidebar {
160
- position: absolute;
161
- text-align: right;
162
- width: 160px;
163
- top: 0;
164
- left: -240px;
180
+ /* Post Tags */
181
+ a[rel="tag"],
182
+ a[rel="tag"]:visited {
183
+ display: inline-block;
184
+ vertical-align: text-top;
185
+ text-transform: uppercase;
186
+ letter-spacing: 0.1em;
187
+ font-size: 0.8em;
188
+ padding: 0 0.5em;
189
+ line-height: 2em;
190
+ height: 2em;
191
+ border: 1px solid var(--c-background);
192
+ color: var(--c-link-text);
193
+ border-radius: 0.25em;
194
+ text-decoration: none;
195
+ margin: 0 0.5em 0.5em 0;
165
196
  }
166
197
 
167
- #sidebar li {
168
- list-style: none;
169
- margin: 2px 0;
198
+ a[rel="tag"]:hover {
199
+ border: 1px solid var(--c-link-text);
200
+ background-color: var(--c-link-text);
201
+ color: var(--c-light-background);
170
202
  }
171
203
 
172
- #sidebar a {
173
- border: none;
174
- font-family: 'Karla', sans-serif;
175
- font-size: 1em;
176
- padding: 2px 4px;
204
+ a[rel="tag"]:last-child {
205
+ margin-right: 0;
177
206
  }
178
207
 
179
- #sidebar .active {
180
- font-weight: bold;
181
- color: $utah-red;
208
+ /* Contact Form */
209
+ form {
210
+ display: grid;
211
+ padding: 2em 0;
182
212
  }
183
213
 
184
- /*** Posts ***/
185
- article {
186
- margin-bottom: 40px;
214
+ form label {
215
+ display: none;
187
216
  }
188
217
 
189
- article h1 {
190
- font-size: 17px;
191
- margin: 0 0 10px 0;
218
+ input,
219
+ textarea,
220
+ button {
221
+ width: 100%;
222
+ padding: 1em;
223
+ margin-bottom: 1em;
224
+ font-size: 1rem;
225
+ font-family: "Avenir", "Avenir Next", sans-serif;
192
226
  }
193
- article h1 a {
194
- border: none;
227
+
228
+ input,
229
+ textarea {
230
+ border: 1px solid black;
195
231
  }
196
- article h1 a.anchor {
197
- margin-left: 8px;
232
+
233
+ button {
234
+ border: 1px solid var(--c-link-text);
235
+ background-color: var(--c-link-text);
236
+ color: var(--c-background);
237
+ cursor: pointer;
198
238
  }
199
239
 
200
- article img {
201
- display: block;
202
- text-align: center;
203
- margin: 0 auto 1em auto;
204
- max-width: 90%;
240
+ @media screen and (min-width: 768px) {
241
+ :root {
242
+ font-size: 1.1rem;
243
+ }
205
244
  }
206
245
 
207
- article .meta {
208
- padding-top: 6px;
209
- font-size: 0.85em;
210
- font-style: italic;
246
+ /* Custom config */
247
+
248
+ /*** Archive ***/
249
+ div.archive-item h2 {
250
+ margin-top: 5px;
251
+ margin-bottom: 5px;
211
252
  }
212
253
 
213
- img.left {
214
- float: left;
215
- margin: 0 1em 1em 0;
216
- max-width: 95%;
254
+ div.archive-item time {
255
+ font: 0.85em Monaco, Monospace;
217
256
  }
218
- img.right {
219
- float: right;
220
- margin: 0 0 1em 1em;
221
- max-width: 95%;
257
+
258
+ div.archive-item p {
259
+ margin: 0.3em;
222
260
  }
223
- img.center {
224
- display: block;
225
- text-align: center;
226
- margin: auto;
227
- max-width: 95%;
261
+
262
+ div.archive-month {
263
+ margin-bottom: 1.2em;
228
264
  }
229
265
 
230
266
  /*
@@ -232,49 +268,37 @@ img.center {
232
268
  */
233
269
 
234
270
  figcaption {
235
- display: block;
236
- text-align: center;
237
- font-style: italic;
271
+ display: block;
272
+ text-align: center;
273
+ font-style: italic;
238
274
  }
239
275
 
240
-
241
276
  /*** Pagination ***/
242
277
  .postnavigation {
243
- padding-top: 10px;
278
+ padding-top: 10px;
244
279
  text-align: center;
245
280
  font-size: 1.2em;
246
281
  }
247
282
 
248
283
  .postnavigation .left {
249
- float: left;
284
+ float: left;
250
285
  }
251
286
 
252
287
  .postnavigation .right {
253
- float: right;
288
+ float: right;
254
289
  }
255
290
 
291
+ /*** TOC ***/
256
292
 
293
+ ul.toc {
294
+ padding: 15px 15px 15px 25px;
295
+ }
257
296
 
258
- /*** Media Queries ***/
259
- @media all and (max-width: 870px) {
260
-
261
- #page, #header, #content, #footer {
262
- width: inherit;
263
- padding-left: 10px;
264
- padding-right: 10px;
265
- }
266
-
267
- #sidebar {
268
- position: relative;
269
- text-align: left;
270
- width: 100%;
271
- left: 0;
272
- margin: 10px 10px 20px 10px;
273
- }
274
-
275
- #sidebar nav select.mnav {
276
- display: block;
277
- margin-bottom: 15px;
278
- }
297
+ ul.toc ul {
298
+ padding: 0 0 3px 25px;
299
+ }
279
300
 
301
+ .toc {
302
+ display: inline-block;
303
+ background-color: var(--c-background);
280
304
  }
@@ -1,10 +1,8 @@
1
-
2
1
  // Font family
3
2
 
4
-
5
3
  //
6
4
  $royal-blue: #4169e1;
7
5
  $cerulean-blue: #2a52be;
8
6
  $headings: #2a2a2a;
9
- $utah-red: #d3003f;
7
+ $utah-red: #cc0000;
10
8
  $a-background: #eee8d5;
Binary file