jekyll-california 0.2.0 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -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