seminima 0.1.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,296 @@
1
+ html {
2
+ font-size: $base-font-size;
3
+ }
4
+
5
+ /**
6
+ * Reset some basic elements
7
+ */
8
+ body, h1, h2, h3, h4, h5, h6,
9
+ p, blockquote, pre, hr,
10
+ dl, dd, ol, ul, figure {
11
+ margin: 0;
12
+ padding: 0;
13
+
14
+ }
15
+
16
+
17
+
18
+ /**
19
+ * Basic styling
20
+ */
21
+ body {
22
+ font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
23
+ color: $text-color;
24
+ background-color: $background-color;
25
+ -webkit-text-size-adjust: 100%;
26
+ -webkit-font-feature-settings: "kern" 1;
27
+ -moz-font-feature-settings: "kern" 1;
28
+ -o-font-feature-settings: "kern" 1;
29
+ font-feature-settings: "kern" 1;
30
+ font-kerning: normal;
31
+ display: flex;
32
+ min-height: 100vh;
33
+ flex-direction: column;
34
+ overflow-wrap: break-word;
35
+ }
36
+
37
+
38
+
39
+ /**
40
+ * Set `margin-bottom` to maintain vertical rhythm
41
+ */
42
+ h1, h2, h3, h4, h5, h6,
43
+ p, blockquote, pre,
44
+ ul, ol, dl, figure,
45
+ %vertical-rhythm {
46
+ margin-bottom: $spacing-unit * .5;
47
+ }
48
+
49
+ hr {
50
+ margin-top: $spacing-unit;
51
+ margin-bottom: $spacing-unit;
52
+ }
53
+
54
+ /**
55
+ * `main` element
56
+ */
57
+ main {
58
+ display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
59
+ }
60
+
61
+
62
+
63
+ /**
64
+ * Images
65
+ */
66
+ img {
67
+ max-width: 100%;
68
+ vertical-align: middle;
69
+ }
70
+
71
+
72
+
73
+ /**
74
+ * Figures
75
+ */
76
+ figure > img {
77
+ display: block;
78
+ }
79
+
80
+ figcaption {
81
+ font-size: $small-font-size;
82
+ }
83
+
84
+
85
+
86
+ /**
87
+ * Lists
88
+ */
89
+ ul, ol {
90
+ margin-left: $spacing-unit;
91
+ }
92
+
93
+ li {
94
+ > ul,
95
+ > ol {
96
+ margin-bottom: 0;
97
+ }
98
+ }
99
+
100
+
101
+
102
+ /**
103
+ * Headings
104
+ */
105
+ h1, h2, h3, h4, h5, h6 {
106
+ color: $heading-color;
107
+ font-weight: 500;
108
+ }
109
+
110
+
111
+
112
+ /**
113
+ * Links
114
+ */
115
+ a {
116
+ color: $link-base-color;
117
+ text-decoration: none;
118
+
119
+ &:visited {
120
+ color: $link-visited-color;
121
+ }
122
+
123
+ &:hover {
124
+ color: $link-hover-color;
125
+ text-decoration: underline $brand-color;
126
+ text-underline-offset: 3px;
127
+ }
128
+
129
+ .social-media-list &:hover {
130
+ text-decoration: none;
131
+
132
+ .username {
133
+ text-decoration: underline;
134
+ }
135
+ }
136
+ }
137
+
138
+
139
+ /**
140
+ * Blockquotes
141
+ */
142
+ blockquote {
143
+ color: $brand-color;
144
+ border-left: 4px solid $border-color-01;
145
+ padding-left: $spacing-unit * .5;
146
+ @include relative-font-size(1.05);
147
+ font-style: italic;
148
+
149
+ > :last-child {
150
+ margin-bottom: 0;
151
+ }
152
+
153
+ i, em {
154
+ font-style: normal;
155
+ }
156
+ }
157
+
158
+
159
+
160
+ /**
161
+ * Code formatting
162
+ */
163
+ pre,
164
+ code {
165
+ font-family: $code-font-family;
166
+ background-color: $code-background-color;
167
+
168
+ @include media-query($on-palm) {
169
+ font-family: monospace;
170
+ }
171
+ }
172
+
173
+ pre {
174
+ padding: 8px 12px;
175
+ font-size: 15px;
176
+ line-height: 1.4;
177
+ color: $heading-color;
178
+ overflow-x: auto;
179
+
180
+ > code {
181
+ display: inline-block;
182
+ width: 100%;
183
+ }
184
+ }
185
+
186
+ div.highlight, figure.highlight {
187
+ @extend %vertical-rhythm;
188
+ border: 1px solid $border-color-01;
189
+ border-radius: 3px;
190
+ pre { margin: 0 }
191
+ table, tbody, th, tr, td {
192
+ margin: 0;
193
+ padding: 0;
194
+ border: 0
195
+ }
196
+ .lineno, .gl { text-align: right }
197
+ }
198
+
199
+ figure.highlight {
200
+ table { margin: -8px -12px -14px }
201
+ td.gutter { border-right: 1px solid $border-color-01 }
202
+ td.code { width: 100% }
203
+ }
204
+
205
+ code.highlighter-rouge {
206
+ padding: 1px 5px;
207
+ font-size: 14px;
208
+ border: 1px solid $border-color-01;
209
+ border-radius: 3px;
210
+ }
211
+
212
+
213
+
214
+ /**
215
+ * Wrapper
216
+ */
217
+ .wrapper {
218
+ max-width: $content-width;
219
+ margin: 0 auto;
220
+ padding: 0 $spacing-unit;
221
+ @extend %clearfix;
222
+
223
+ @media screen and (max-width: $on-medium) {
224
+ padding-right: $spacing-unit * 0.6;
225
+ padding-left: $spacing-unit * 0.6;
226
+ }
227
+ }
228
+
229
+
230
+
231
+ /**
232
+ * Clearfix
233
+ */
234
+ %clearfix:after {
235
+ content: "";
236
+ display: table;
237
+ clear: both;
238
+ }
239
+
240
+
241
+
242
+ /**
243
+ * Icons
244
+ */
245
+
246
+ .orange {
247
+ color: #f66a0a;
248
+ }
249
+
250
+ .grey {
251
+ color: #828282;
252
+ }
253
+
254
+ .svg-icon {
255
+ width: 1.25em;
256
+ height: 1.25em;
257
+ display: inline-block;
258
+ fill: currentColor;
259
+ vertical-align: text-bottom;
260
+ overflow: visible;
261
+ }
262
+
263
+
264
+ /**
265
+ * Tables
266
+ */
267
+ table {
268
+ margin-bottom: $spacing-unit;
269
+ width: 100%;
270
+ text-align: $table-text-align;
271
+ color: $table-text-color;
272
+ border-collapse: collapse;
273
+ border: 1px solid $table-border-color;
274
+ tr {
275
+ &:nth-child(even) {
276
+ background-color: $table-zebra-color;
277
+ }
278
+ }
279
+ th, td {
280
+ padding: ($spacing-unit * 33.3333333333 * .01) ($spacing-unit * .5);
281
+ }
282
+ th {
283
+ background-color: $table-header-bg-color;
284
+ border: 1px solid $table-header-border;
285
+ }
286
+ td {
287
+ border: 1px solid $table-border-color;
288
+ }
289
+
290
+ @include media-query($on-laptop) {
291
+ display: block;
292
+ overflow-x: auto;
293
+ -webkit-overflow-scrolling: touch;
294
+ -ms-overflow-style: -ms-autohiding-scrollbar;
295
+ }
296
+ }
@@ -0,0 +1,418 @@
1
+ /**
2
+ * Site header
3
+ */
4
+ .site-header {
5
+ position: relative;
6
+ width: 100%;
7
+ min-height: $spacing-unit * 1.865;
8
+ line-height: $base-line-height * $base-font-size * 2.25;
9
+ background-color: $background-color;
10
+ border-top: 5px solid $border-color-03;
11
+ border-bottom: 1px solid $border-color-01;
12
+ }
13
+
14
+ .site-title {
15
+ @include relative-font-size(1.625);
16
+ font-weight: 300;
17
+ letter-spacing: -1px;
18
+ margin-bottom: 0;
19
+ float: left;
20
+
21
+ @include media-query($on-palm) {
22
+ padding-right: 45px;
23
+ }
24
+
25
+ &,
26
+ &:visited {
27
+ color: $site-title-color;
28
+ }
29
+ }
30
+
31
+ .site-nav {
32
+ float: right;
33
+ border: none;
34
+ background-color: inherit;
35
+
36
+ label[for="nav-trigger"], #nav-trigger {
37
+ display: none;
38
+ }
39
+
40
+ .nav-item {
41
+ color: $text-color;
42
+ &:not(:last-child) {
43
+ margin-right: $spacing-unit * 0.5;
44
+ }
45
+ }
46
+
47
+ @include media-query($on-medium) {
48
+ position: absolute;
49
+ top: 9px;
50
+ right: $spacing-unit * 0.6;
51
+ background-color: $background-color;
52
+ border: 1px solid $border-color-01;
53
+ border-radius: 5px;
54
+ text-align: right;
55
+
56
+ label[for="nav-trigger"] {
57
+ display: block;
58
+ float: right;
59
+ width: 36px;
60
+ height: 36px;
61
+ cursor: pointer;
62
+ }
63
+
64
+ .menu-icon {
65
+ float: right;
66
+ width: 36px;
67
+ height: 26px;
68
+ line-height: 0;
69
+ padding-top: 18px;
70
+ text-align: center;
71
+
72
+ &::before {
73
+ font-family: "Font Awesome 7 Free";
74
+ font-weight: 900;
75
+ }
76
+
77
+ > svg path {
78
+ fill: $border-color-03;
79
+ }
80
+ }
81
+
82
+ #nav-trigger {
83
+ ~ label[for=nav-trigger] .menu-icon {
84
+ &::before {
85
+ content: "\f0c9";
86
+ font-size: 1.25em;
87
+ }
88
+ }
89
+ ~ .nav-items {
90
+ clear: both;
91
+ display: none
92
+ }
93
+ &:checked {
94
+ ~ label[for=nav-trigger] .menu-icon {
95
+ &::before {
96
+ content: "\f00d";
97
+ font-size: 1.5em;
98
+ }
99
+ }
100
+ ~ .nav-items {
101
+ display: block;
102
+ padding-bottom: 5px;
103
+ .nav-item {
104
+ margin-left: 20px;
105
+ padding: 5px 10px;
106
+ }
107
+ }
108
+ }
109
+ }
110
+
111
+ .nav-item {
112
+ display: block;
113
+ margin-right: $spacing-unit * 0.5;
114
+ padding: 5px 0;
115
+ color: $text-color;
116
+ line-height: $base-line-height;
117
+ }
118
+ }
119
+ }
120
+
121
+
122
+
123
+ /**
124
+ * Site footer
125
+ */
126
+ .site-footer {
127
+ border-top: 1px solid $border-color-01;
128
+ padding: $spacing-unit 0;
129
+ }
130
+
131
+ .footer-heading {
132
+ @include relative-font-size(1.125);
133
+ margin-bottom: $spacing-unit * .5;
134
+ }
135
+
136
+ .feed-subscribe .svg-icon {
137
+ padding: 5px 5px 2px 0
138
+ }
139
+
140
+ .contact-list,
141
+ .social-media-list {
142
+ list-style: none;
143
+ margin-left: 0;
144
+ }
145
+
146
+ .footer-col-wrapper,
147
+ .social-links {
148
+ @include relative-font-size(0.9375);
149
+ color: $brand-color-dimmed;
150
+ }
151
+
152
+ .footer-col {
153
+ margin-bottom: $spacing-unit * .5;
154
+ }
155
+
156
+ .footer-col-1,
157
+ .footer-col-2 {
158
+ width: calc(50% - (#{$spacing-unit} / 2));
159
+ }
160
+
161
+ .footer-col-3 {
162
+ width: calc(100% - (#{$spacing-unit} / 2));
163
+ }
164
+
165
+ @media screen and (min-width: $on-large) {
166
+ .footer-col-1 {
167
+ width: calc(35% - (#{$spacing-unit} / 2));
168
+ }
169
+
170
+ .footer-col-2 {
171
+ width: calc(20% - (#{$spacing-unit} / 2));
172
+ }
173
+
174
+ .footer-col-3 {
175
+ width: calc(45% - (#{$spacing-unit} / 2));
176
+ }
177
+ }
178
+
179
+ @media screen and (min-width: $on-medium) {
180
+ .footer-col-wrapper {
181
+ display: flex
182
+ }
183
+
184
+ .footer-col {
185
+ width: calc(100% - (#{$spacing-unit} / 2));
186
+ padding: 0 ($spacing-unit * .5);
187
+
188
+ &:first-child {
189
+ padding-right: $spacing-unit * .5;
190
+ padding-left: 0;
191
+ }
192
+
193
+ &:last-child {
194
+ padding-right: 0;
195
+ padding-left: $spacing-unit * .5;
196
+ }
197
+ }
198
+ }
199
+
200
+
201
+
202
+ /**
203
+ * Page content
204
+ */
205
+ .page-content {
206
+ padding: $spacing-unit 0;
207
+ flex: 1 0 auto;
208
+ }
209
+
210
+ .page-heading {
211
+ @include relative-font-size(2);
212
+ }
213
+
214
+ .post-list-heading {
215
+ @include relative-font-size(1.75);
216
+ }
217
+
218
+ .post-list {
219
+ margin-left: 0;
220
+ list-style: none;
221
+
222
+ > li {
223
+ margin-bottom: $spacing-unit;
224
+ }
225
+ }
226
+
227
+ .post-meta {
228
+ font-size: $small-font-size;
229
+ color: $brand-color-dimmed;
230
+ }
231
+
232
+ .post-link {
233
+ display: block;
234
+ @include relative-font-size(1.5);
235
+ }
236
+
237
+
238
+
239
+ /**
240
+ * Posts
241
+ */
242
+ .post-header {
243
+ margin-bottom: $spacing-unit;
244
+ padding-bottom: 18px;
245
+ text-align: center;
246
+ border-bottom: 1px solid $border-color-01;
247
+ }
248
+
249
+ .post-meta {
250
+ .bullet-divider { padding-inline: 15px }
251
+ .meta-label { font-weight: 600 }
252
+
253
+ .force-inline {
254
+ display: inline;
255
+ &::before {
256
+ content: "•";
257
+ padding-inline: 5px;
258
+ }
259
+ }
260
+ .post-authors { margin-top: 3px }
261
+ }
262
+
263
+ .post-title,
264
+ .post-content h1 {
265
+ margin-bottom: 10px;
266
+ @include relative-font-size(2.625);
267
+ font-weight: $base-font-weight;
268
+ letter-spacing: -1px;
269
+ line-height: 1.15;
270
+
271
+ @media screen and (min-width: $on-large) {
272
+ @include relative-font-size(2.625);
273
+ }
274
+ }
275
+
276
+ .post-content {
277
+ margin-bottom: $spacing-unit;
278
+
279
+ h1, h2, h3, h4, h5, h6 { margin-top: $spacing-unit }
280
+
281
+ h2 {
282
+ @include relative-font-size(1.75);
283
+
284
+ @media screen and (min-width: $on-large) {
285
+ @include relative-font-size(2);
286
+ }
287
+ }
288
+
289
+ h3 {
290
+ @include relative-font-size(1.375);
291
+
292
+ @media screen and (min-width: $on-large) {
293
+ @include relative-font-size(1.625);
294
+ }
295
+ }
296
+
297
+ h4 {
298
+ @include relative-font-size(1.25);
299
+ }
300
+
301
+ h5 {
302
+ @include relative-font-size(1.125);
303
+ }
304
+ h6 {
305
+ @include relative-font-size(1.0625);
306
+ }
307
+ }
308
+
309
+ .comments-disabled-message {
310
+ text-align: center;
311
+ font-weight: 300;
312
+ }
313
+
314
+ .social-media-list {
315
+ display: table;
316
+ margin: 0 auto;
317
+ li {
318
+ float: left;
319
+ min-width: 45px;
320
+ min-height: 45px;
321
+ text-align: center;
322
+ margin: 5px 10px 5px 0;
323
+ &:last-of-type { margin-right: 0 }
324
+ a {
325
+ display: block;
326
+ padding: 10px 12px;
327
+ border: 1px solid $border-color-01;
328
+ &:hover { border-color: $border-color-02 }
329
+ }
330
+ }
331
+ }
332
+
333
+
334
+
335
+ /**
336
+ * Pagination navbar
337
+ */
338
+ .pagination {
339
+ display: table;
340
+ margin: 0 auto;
341
+ list-style-type: none;
342
+ li {
343
+ float: left;
344
+ margin: 0 3px;
345
+ min-width: 45px;
346
+ min-height: 45px;
347
+ text-align: center;
348
+ a {
349
+ display: block;
350
+ text-decoration: none;
351
+ border: 1px solid $border-color-01;
352
+ &:hover { border-color: $border-color-02 }
353
+ }
354
+ a, div {
355
+ min-width: 41px;
356
+ padding: 10px 12px;
357
+ text-align: center;
358
+ box-sizing: border-box;
359
+ }
360
+ div {
361
+ border: 1px solid transparent;
362
+ &.pager-edge {
363
+ color: $border-color-01;
364
+ border: 1px dashed;
365
+ }
366
+ &.current-page {
367
+ font-weight: bold;
368
+ }
369
+ }
370
+ }
371
+ }
372
+
373
+
374
+
375
+ /**
376
+ * Task-lists
377
+ */
378
+
379
+ .task-list {
380
+ margin-left: 0;
381
+ padding-left: $spacing-unit * 0.6;
382
+ }
383
+
384
+ .task-list-item {
385
+ list-style-type: none;
386
+ &-checkbox {
387
+ position: relative;
388
+ margin-right: $spacing-unit * 0.3;
389
+ margin-left: -$spacing-unit * 0.5;
390
+ appearance: none;
391
+ border: 8px solid $border-color-01;
392
+ vertical-align: text-top;
393
+ z-index: -1;
394
+ &::after {
395
+ position: absolute;
396
+ top: -8px;
397
+ left: -3px;
398
+ width: 4px;
399
+ height: 10px;
400
+ content: "";
401
+ border: solid transparent;
402
+ border-width: 0 2px 2px 0;
403
+ transform: rotate(45deg);
404
+ }
405
+ &:checked::after { border-color: $border-color-03 }
406
+ }
407
+ }
408
+
409
+
410
+
411
+ /**
412
+ * Grid helpers
413
+ */
414
+ @media screen and (min-width: $on-large) {
415
+ .one-half {
416
+ width: calc(50% - (#{$spacing-unit} / 2));
417
+ }
418
+ }
@@ -0,0 +1,2 @@
1
+ // Placeholder to allow defining custom styles that override everything else.
2
+ // (Use `_sass/minima/custom-variables.scss` to override variable defaults)
@@ -0,0 +1 @@
1
+ // Placeholder to allow overriding predefined variables smoothly.