coppermind 0.1.1 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,358 @@
1
+ .container {
2
+ max-width: $md-screen;
3
+ padding-left: var(--spacer);
4
+ padding-right: var(--spacer);
5
+ margin-left: auto;
6
+ margin-right: auto;
7
+ }
8
+
9
+ @media screen and (min-width: $md-screen) {
10
+ .container {
11
+ padding-left: var(--spacer-2);
12
+ padding-right: var(--spacer-2);
13
+ }
14
+ }
15
+
16
+ /**
17
+ * Header
18
+ */
19
+
20
+ .masthead {
21
+ padding-top: var(--spacer);
22
+ padding-bottom: var(--spacer);
23
+ margin-bottom: var(--spacer-3);
24
+ }
25
+
26
+ .masthead-title {
27
+ font-size: 1.3em;
28
+ font-weight: bold;
29
+
30
+ a {
31
+ color: inherit;
32
+ text-decoration: none;
33
+ }
34
+
35
+ .tagline {
36
+ opacity: .5;
37
+ }
38
+ }
39
+
40
+ .nav-list {
41
+ padding: 0;
42
+ margin: var(--spacer) 0 0 0;
43
+ border-top: 1px solid var(--border-color);
44
+ border-bottom: 1px solid var(--border-color);
45
+ list-style: none;
46
+
47
+ li {
48
+ display: inline-block;
49
+ margin: 0 .4em;
50
+ }
51
+
52
+ a {
53
+ color: inherit;
54
+
55
+ &:hover,
56
+ &:focus {
57
+ text-decoration: line-through;
58
+ }
59
+ }
60
+
61
+ a.current {
62
+ text-decoration: line-through;
63
+ }
64
+ }
65
+
66
+ /**
67
+ * Post
68
+ */
69
+
70
+ .posts {
71
+ .post {
72
+ padding: var(--spacer);
73
+ margin-bottom: var(--spacer);
74
+ border: 1px solid var(--border-color);
75
+ border-radius: var(--border-radius);
76
+
77
+ .post-excerpt {
78
+ margin-bottom: 0;
79
+ }
80
+ }
81
+ }
82
+
83
+ .page,
84
+ .post {
85
+ margin-bottom: var(--spacer-2);
86
+
87
+ h1, h2, h3, h4, h5, h6 {
88
+ color: var(--heading-color);
89
+ }
90
+ }
91
+
92
+ .page-title,
93
+ .post-title {
94
+ margin-top: 0;
95
+
96
+ a {
97
+ color: inherit;
98
+ }
99
+ }
100
+
101
+ .post-meta {
102
+ display: block;
103
+ margin-top: -.5em;
104
+ margin-bottom: var(--spacer);
105
+ opacity: .65;
106
+ font-size: .85em;
107
+ }
108
+
109
+ .post-categories,
110
+ .post-tags {
111
+ display: inline-block;
112
+ list-style: none;
113
+ padding: 0;
114
+ margin: 0;
115
+
116
+ li {
117
+ display: inline-block;
118
+
119
+ &:not(:last-child) {
120
+ margin-right: .4em;
121
+ }
122
+ }
123
+ }
124
+
125
+ .post-category {
126
+ border-bottom: 2px dotted var(--border-color);
127
+ }
128
+
129
+ a.post-category {
130
+ color: inherit;
131
+
132
+ &:hover,
133
+ &:focus {
134
+ border-bottom-style: solid;
135
+ border-color: var(--body-color);
136
+ text-decoration: none;
137
+ }
138
+ }
139
+
140
+ .post-tag {
141
+ padding: .1em .5em;
142
+ border: 1px solid var(--border-color);
143
+ border-radius: var(--border-radius);
144
+ background-color: rgba(var(--link-color-rgb), .3);
145
+ }
146
+
147
+ a.post-tag {
148
+ color: inherit;
149
+
150
+ &:hover,
151
+ &:focus {
152
+ background-color: rgba(var(--link-color-rgb), .6);
153
+ text-decoration: none;
154
+ }
155
+ }
156
+
157
+ // Footnote number within body text
158
+ a[href^="#fn:"],
159
+ // Back to footnote link
160
+ a[href^="#fnref:"] {
161
+ display: inline-block;
162
+ margin-left: .1em;
163
+ font-weight: bold;
164
+ }
165
+ // List of footnotes
166
+ .footnotes {
167
+ margin-top: var(--spacer-2);
168
+ font-size: 85%;
169
+ }
170
+
171
+ .related {
172
+ padding-top: var(--spacer-2);
173
+ padding-bottom: var(--spacer-2);
174
+ margin-bottom: var(--spacer-2);
175
+ border-top: 1px solid var(--border-color);
176
+ border-bottom: 1px solid var(--border-color);
177
+ }
178
+
179
+ .related-title {
180
+ margin-top: 0;
181
+ }
182
+
183
+ .related-posts {
184
+ padding-left: 0;
185
+ list-style: none;
186
+
187
+ small {
188
+ opacity: .5;
189
+ }
190
+ }
191
+
192
+ /**
193
+ * Code
194
+ */
195
+
196
+ .highlight {
197
+ border-radius: var(--border-radius);
198
+ background-color: var(--code-bg-color);
199
+ }
200
+
201
+ .rouge-table {
202
+ margin: 0;
203
+ font-size: 100%;
204
+
205
+ &,
206
+ td,
207
+ th {
208
+ border: 0;
209
+ padding: 0;
210
+ }
211
+
212
+ pre {
213
+ padding: 0;
214
+ margin: 0;
215
+ }
216
+
217
+ .gutter {
218
+ vertical-align: top;
219
+ user-select: none;
220
+ opacity: .25;
221
+ padding-right: var(--spacer);
222
+ }
223
+ }
224
+
225
+ /**
226
+ * Pagination
227
+ */
228
+
229
+ .pagination {
230
+ display: flex;
231
+ text-align: center;
232
+ margin-top: var(--spacer-2);
233
+ }
234
+
235
+ .pagination-item {
236
+ float: left;
237
+ width: 50%;
238
+ padding: var(--spacer);
239
+ border: 1px solid var(--border-color);
240
+
241
+ &:first-child {
242
+ border-right-width: 0;
243
+ border-top-left-radius: var(--border-radius);
244
+ border-bottom-left-radius: var(--border-radius);
245
+ }
246
+ &:last-child {
247
+ border-top-right-radius: var(--border-radius);
248
+ border-bottom-right-radius: var(--border-radius);
249
+ }
250
+ }
251
+
252
+ a.pagination-item:hover {
253
+ background-color: var(--border-color);
254
+ text-decoration: none;
255
+ }
256
+
257
+ /**
258
+ * Footer
259
+ */
260
+
261
+ .footer {
262
+ padding-top: var(--spacer);
263
+ padding-bottom: var(--spacer);
264
+ margin-top: var(--spacer-3);
265
+
266
+ p {
267
+ margin: 0;
268
+ }
269
+ }
270
+
271
+ .social-icons {
272
+ list-style: none;
273
+ padding: 0;
274
+ margin: var(--spacer) 0;
275
+ height: calc(var(--body-line-height) * var(--body-font-size));
276
+ }
277
+ .social-icon-item {
278
+ float: left;
279
+ margin-right: var(--spacer);
280
+ }
281
+
282
+ @media screen and (min-width: $md-screen) {
283
+ .footer {
284
+ display: flex;
285
+ }
286
+ .footer-column {
287
+ width: 100%;
288
+ }
289
+ .social-icons {
290
+ margin: 0;
291
+ }
292
+ }
293
+
294
+ /**
295
+ * Archive
296
+ */
297
+
298
+ .taxonomies-wrapper {
299
+ margin-bottom: var(--spacer-2);
300
+ }
301
+
302
+ .taxonomies {
303
+ list-style: none;
304
+ display: grid;
305
+ grid-column-gap: 2em;
306
+ grid-template-columns: repeat(2, 1fr);
307
+ margin: 0;
308
+ padding: 0;
309
+ font-weight: bold;
310
+
311
+ .taxonomy {
312
+ display: flex;
313
+ padding: 0.25em 0;
314
+ justify-content: space-between;
315
+ text-decoration: none;
316
+ border-bottom: 1px solid;
317
+ margin-bottom: var(--spacer);
318
+ }
319
+ }
320
+
321
+ .post-list-by-taxonomy {
322
+ time {
323
+ font-family: monospace;
324
+ }
325
+ }
326
+
327
+ .back-to-top {
328
+ display: block;
329
+ font-size: 0.8em;
330
+ text-transform: uppercase;
331
+ text-align: right;
332
+ text-decoration: none;
333
+ }
334
+
335
+ @media (min-width: $sm-screen) {
336
+ .taxonomies {
337
+ grid-template-columns: repeat(3, 1fr);
338
+ }
339
+ }
340
+
341
+ /**
342
+ * Markdown TOC
343
+ */
344
+
345
+ #markdown-toc {
346
+ padding: var(--spacer-2) var(--spacer-3);
347
+ margin: var(--spacer-2) 0;
348
+ border: solid var(--border-color);
349
+ border-width: 1px 0;
350
+
351
+ &::before {
352
+ display: block;
353
+ margin-left: calc(var(--spacer-3) * -1);
354
+ content: "Contents";
355
+ font-size: 85%;
356
+ font-weight: 500;
357
+ }
358
+ }
@@ -0,0 +1,59 @@
1
+ // Some predefined classes
2
+
3
+ /**
4
+ * Message -- Show different levels of alert messages to users.
5
+ */
6
+
7
+ .message-info,
8
+ .message-warning,
9
+ .message-danger {
10
+ padding: var(--spacer);
11
+ border-radius: var(--border-radius);
12
+ color: var(--body-bg-color);
13
+ }
14
+
15
+ .message-info {
16
+ background-color: var(--info-color);
17
+ }
18
+
19
+ .message-warning {
20
+ background-color: var(--warning-color);
21
+ }
22
+
23
+ .message-danger {
24
+ background-color: var(--danger-color);
25
+ }
26
+
27
+ /**
28
+ * Alignment
29
+ */
30
+
31
+ .align-right {
32
+ margin-bottom: 1rem;
33
+ margin-left: 1rem;
34
+ float: right;
35
+ }
36
+
37
+ .align-left {
38
+ margin-right: 1rem;
39
+ margin-bottom: 1rem;
40
+ float: left;
41
+ }
42
+
43
+ .align-center {
44
+ display: block;
45
+ margin-right: auto;
46
+ margin-left: auto;
47
+ }
48
+
49
+ figcaption.align-right {
50
+ text-align: right;
51
+ }
52
+
53
+ figcaption.align-left {
54
+ text-align: left;
55
+ }
56
+
57
+ figcaption.align-center {
58
+ text-align: center;
59
+ }
@@ -0,0 +1,54 @@
1
+ $sm-screen: 35.5rem;
2
+ $md-screen: 48rem;
3
+ $lg-screen: 64rem;
4
+ $xl-screen: 80rem;
5
+
6
+ :root {
7
+ --spacer: 1rem;
8
+ --spacer-2: calc(var(--spacer) * 2);
9
+ --spacer-3: calc(var(--spacer) * 3);
10
+
11
+ // https://github.com/necolas/normalize.css/issues/665
12
+ --body-font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
13
+ --body-font-size: 16px;
14
+ --body-line-height: 1.5;
15
+
16
+ --border-radius: .5em;
17
+
18
+ // https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/
19
+ --code-font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
20
+
21
+ /**
22
+ * Color
23
+ */
24
+ --body-bg-color: var(--oc-white);
25
+ --body-color: var(--oc-gray-9);
26
+ --code-bg-color: var(--oc-gray-1);
27
+ --heading-color: var(--oc-black);
28
+ --border-color: var(--oc-gray-4);
29
+ --link-color: var(--oc-blue-9);
30
+ --link-color-rgb: var(--oc-blue-9-rgb);
31
+ --link-hover-color: var(--oc-blue-7);
32
+ --info-color: var(--oc-green-9);
33
+ --warning-color: var(--oc-yellow-9);
34
+ --danger-color: var(--oc-red-9);
35
+ }
36
+
37
+ @media (prefers-color-scheme: dark) {
38
+ :root {
39
+ /**
40
+ * Color
41
+ */
42
+ --body-bg-color: var(--oc-gray-9);
43
+ --body-color: var(--oc-gray-4);
44
+ --code-bg-color: var(--oc-gray-7);
45
+ --heading-color: var(--oc-white);
46
+ --border-color: var(--oc-gray-7);
47
+ --link-color: var(--oc-cyan-4);
48
+ --link-color-rgb: var(--oc-cyan-4-rgb);
49
+ --link-hover-color: var(--oc-cyan-6);
50
+ --info-color: var(--oc-green-1);
51
+ --warning-color: var(--oc-yellow-1);
52
+ --danger-color: var(--oc-red-1);
53
+ }
54
+ }
@@ -0,0 +1,9 @@
1
+ @import "variables";
2
+ @import "base";
3
+ @import "layout";
4
+ @import "predefined";
5
+
6
+ @import "highlight-light";
7
+ @media (prefers-color-scheme: dark) {
8
+ @import "highlight-dark";
9
+ }
@@ -0,0 +1,3 @@
1
+ ---
2
+ ---
3
+ @import "monophase/main";