minimalista 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
data/_sass/_theme.scss ADDED
@@ -0,0 +1,440 @@
1
+ body {
2
+ font: 400 16px/1.5 -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol",
3
+ "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif;
4
+ color: $lightdark;
5
+ // background: radial-gradient(circle at -10% 0%, rgb(66, 58, 58) 0%, rgb(36, 36, 36) 90.2%);
6
+ margin: 0;
7
+ }
8
+
9
+ .nav {
10
+ box-shadow: 0px 19px 27px 0px rgba(0, 0, 0, 0.37);
11
+ -webkit-box-shadow: 0px 19px 27px 0px rgba(119, 119, 119, 0.37);
12
+ -moz-box-shadow: 0px 19px 27px 0px rgba(0, 0, 0, 0.37);
13
+ background: rgb(58, 53, 53);
14
+ }
15
+
16
+ a {
17
+ text-decoration: none;
18
+ }
19
+
20
+ .top-navbar {
21
+ height: auto;
22
+ margin: auto;
23
+ display: flex;
24
+ align-items: center;
25
+ width: $contentWidth;
26
+
27
+ h3 a {
28
+ text-decoration: none;
29
+ color: $lightwhite;
30
+ }
31
+
32
+ ul {
33
+ margin: 0;
34
+ margin-left: auto;
35
+ }
36
+
37
+ ul li {
38
+ display: inline-flex;
39
+ margin-left: 20px;
40
+ list-style-type: none;
41
+ }
42
+
43
+ ul li a {
44
+ text-decoration: none;
45
+ color: $lightwhite;
46
+ font-weight: inherit;
47
+ font-size: 16px;
48
+ font-style: italic;
49
+ }
50
+ }
51
+
52
+ .page-content {
53
+ .post-list {
54
+ list-style: none;
55
+
56
+ li h3 a {
57
+ display: block;
58
+ color: $lightblue;
59
+ font-size: 34px;
60
+ text-decoration: none;
61
+ font-weight: lighter;
62
+
63
+ &:hover {
64
+ animation-name: title-hover;
65
+ animation-duration: 5s;
66
+ }
67
+ }
68
+
69
+ li p {
70
+ line-height: 2;
71
+ font-size: 14px;
72
+ }
73
+
74
+ .post-details small {
75
+ display: flex;
76
+ justify-content: flex-end;
77
+ align-items: center;
78
+ color: $gray;
79
+ font-size: 20px;
80
+ }
81
+
82
+ .post-details small p {
83
+ margin-left: 10px;
84
+ }
85
+ }
86
+ }
87
+
88
+ .seperator {
89
+ border: 0.5px dotted rgba(255, 255, 255, 0.5);
90
+ opacity: 1;
91
+ }
92
+
93
+ .single-page-content {
94
+ .content {
95
+ line-height: 1.5;
96
+ }
97
+
98
+ .page-header {
99
+ .post-details small {
100
+ display: flex;
101
+ justify-content: flex-end;
102
+ align-items: center;
103
+ color: gray;
104
+ }
105
+
106
+ .post-details small p {
107
+ margin-left: 10px;
108
+ }
109
+ }
110
+
111
+ .page-categories {
112
+ ul {
113
+ margin-top: 30px;
114
+
115
+ list-style-type: none;
116
+ display: flex;
117
+ justify-content: flex-end;
118
+ }
119
+
120
+ ul li {
121
+ margin-right: 10px;
122
+ }
123
+
124
+ ul li a {
125
+ text-decoration: none;
126
+ color: #000;
127
+
128
+ &:hover {
129
+ color: $lightblue;
130
+ }
131
+ }
132
+
133
+ margin-top: 15px;
134
+ }
135
+ }
136
+
137
+ .wrapper {
138
+ max-width: $contentWidth;
139
+ margin-right: auto;
140
+ margin-left: auto;
141
+ padding-right: 15px;
142
+ padding-left: 15px;
143
+ }
144
+
145
+ main {
146
+ display: block;
147
+ }
148
+
149
+ .page-content {
150
+ padding: 30px 0;
151
+ flex: 1 0 auto;
152
+ }
153
+
154
+ .post-list {
155
+ margin-left: 0;
156
+ list-style: none;
157
+ }
158
+
159
+ .post-details {
160
+ display: flex;
161
+ justify-content: space-between;
162
+ flex-flow: row wrap;
163
+ }
164
+
165
+ .site-footer {
166
+ padding-top: 10px;
167
+ background: $dark;
168
+ }
169
+
170
+ .footer {
171
+ display: flex;
172
+ justify-content: space-between;
173
+ }
174
+
175
+ .contact-details {
176
+ display: flex;
177
+ list-style-type: none;
178
+ flex-wrap: wrap;
179
+
180
+ a {
181
+ display: flex;
182
+ padding: 13px;
183
+ justify-content: center;
184
+ margin: 2.5px;
185
+ align-items: center;
186
+ font-size: 24px;
187
+ text-decoration: none;
188
+ color: $white;
189
+ }
190
+ }
191
+
192
+ .description {
193
+ margin: 10px;
194
+ color: $white;
195
+ width: 50%;
196
+ }
197
+
198
+ @keyframes title-hover {
199
+ 25% {
200
+ transform: scaleX(1);
201
+ transform-origin: bottom right;
202
+ color: $lightdark;
203
+ }
204
+
205
+ 50% {
206
+ transform: scaleX(1);
207
+ transform-origin: bottom left;
208
+ color: $lightdark;
209
+ }
210
+
211
+ 100% {
212
+ transform: scaleX(1);
213
+ transform-origin: top left;
214
+ color: $lightdark;
215
+ }
216
+ }
217
+
218
+ .hashtag-category {
219
+ border: 1px solid $lightblue;
220
+ border-radius: 10px;
221
+ width: 80px;
222
+ display: flex;
223
+ justify-content: center;
224
+ font-weight: lighter;
225
+ }
226
+
227
+ img {
228
+ width: 100%;
229
+ }
230
+
231
+ table {
232
+ font-family: arial, sans-serif;
233
+ border-collapse: collapse;
234
+ width: 100%;
235
+ }
236
+
237
+ td,
238
+ th {
239
+ border: 1px solid #dddddd;
240
+ text-align: left;
241
+ padding: 8px;
242
+ }
243
+
244
+ .task-list {
245
+ .task-list-item {
246
+ list-style-type: none;
247
+
248
+ .task-list-item-checkbox {
249
+ margin-right: 8px;
250
+ }
251
+ }
252
+ }
253
+
254
+ pre {
255
+ overflow: auto;
256
+ max-width: 100%;
257
+ background: #eff0f0;
258
+ padding: 9px;
259
+ border-radius: 5px;
260
+ }
261
+
262
+ /* no vertical scrollbars for IE 7 */
263
+ *:first-child + html pre {
264
+ padding-bottom: 20px;
265
+ overflow-y: hidden;
266
+ overflow: visible;
267
+ overflow-x: auto;
268
+ }
269
+
270
+ /* no vertical scrollbars for IE 6 */
271
+ * html pre {
272
+ padding-bottom: 20px;
273
+ overflow: visible;
274
+ overflow-x: auto;
275
+ }
276
+
277
+ code {
278
+ background: #eff0f0;
279
+ padding: 4px;
280
+ border-radius: 5px;
281
+ }
282
+
283
+ blockquote {
284
+ border-left: 5px solid #000;
285
+
286
+ p {
287
+ margin-left: 12px;
288
+ }
289
+ }
290
+
291
+ .nav-toggle-button {
292
+ display: none;
293
+ cursor: pointer;
294
+ color: $white;
295
+ }
296
+
297
+ .nav-visible {
298
+ display: flex !important;
299
+ align-items: flex-end;
300
+
301
+ li {
302
+ display: flex;
303
+ }
304
+ }
305
+
306
+ .site-title-mobile {
307
+ display: none;
308
+ }
309
+
310
+ .footer-wrapper {
311
+ max-width: $contentWidth;
312
+ margin-left: auto;
313
+ margin-right: auto;
314
+ }
315
+
316
+ @media (max-width: 760px) {
317
+ .wrapper {
318
+ margin-right: 0;
319
+ margin-left: 0;
320
+ padding-right: 0;
321
+ padding-left: 0;
322
+ }
323
+
324
+ .footer {
325
+ flex-flow: column-reverse wrap;
326
+
327
+ .contact-details {
328
+ display: flex;
329
+ list-style-type: none;
330
+ width: auto;
331
+ flex-wrap: wrap;
332
+ }
333
+
334
+ .description {
335
+ width: auto;
336
+ }
337
+
338
+ padding-bottom: 20px;
339
+ }
340
+
341
+ .single-page-content {
342
+ .page-header,
343
+ .content {
344
+ margin: 10px;
345
+ }
346
+ }
347
+
348
+ .page-content {
349
+ .post-list {
350
+ padding-top: 0px !important;
351
+ padding: 10px;
352
+ width: 95%;
353
+ }
354
+ }
355
+
356
+ .site-title-mobile {
357
+ display: block;
358
+ padding-left: 10px;
359
+ border-bottom: 1px solid gray;
360
+ }
361
+
362
+ .page-content {
363
+ .wrapper {
364
+ margin: 10px;
365
+ }
366
+ }
367
+
368
+ .nav-toggle-button {
369
+ display: block;
370
+ text-align: center;
371
+ padding: 10px;
372
+ }
373
+
374
+ .top-navbar {
375
+ width: unset !important;
376
+ margin: unset !important;
377
+ display: unset !important;
378
+ align-items: unset !important;
379
+
380
+ h3 {
381
+ display: none;
382
+ }
383
+
384
+ ul {
385
+ display: none;
386
+ height: auto;
387
+
388
+ li {
389
+ margin-left: unset;
390
+ margin-bottom: 5px;
391
+ line-height: 0;
392
+ display: inline;
393
+ border-bottom: 1px solid #a0a0a0;
394
+ width: 60%;
395
+
396
+ h4 {
397
+ a {
398
+ font-size: 14px;
399
+ }
400
+ }
401
+ }
402
+ }
403
+
404
+ .nav-visible {
405
+ margin: 0;
406
+ display: flex !important;
407
+ flex-flow: column nowrap;
408
+ align-items: center;
409
+ text-align: center;
410
+ padding: 0;
411
+ }
412
+ }
413
+ }
414
+
415
+ .contact-brand,
416
+ .bars-icon {
417
+ filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(60deg) brightness(106%)
418
+ contrast(101%);
419
+ }
420
+
421
+ .clock-icon,
422
+ .calendar-icon,
423
+ .tags-icon {
424
+ filter: brightness(0) saturate(100%) invert(47%) sepia(49%) saturate(15%) hue-rotate(339deg) brightness(87%)
425
+ contrast(89%);
426
+ width: auto;
427
+ }
428
+
429
+ .button {
430
+ text-decoration: none;
431
+ background: $lightdark;
432
+ color: $white;
433
+ padding: 12px;
434
+ border-radius: 6px;
435
+
436
+ &:hover {
437
+ background: $gray;
438
+ color: $white;
439
+ }
440
+ }