sencilla 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,85 @@
1
+ @charset "utf-8";
2
+
3
+ // Define defaults for each variable.
4
+
5
+ $base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
6
+ $base-font-size: 18px !default;
7
+ $base-font-weight: 400 !default;
8
+ $small-font-size: $base-font-size * 0.875 !default;
9
+ $base-line-height: 1.5 !default;
10
+
11
+ $spacing-unit: 30px !default;
12
+
13
+ // Define grey tones
14
+ /*
15
+ // Source: https://yeun.github.io/open-color/
16
+ $grey0: #f8f9fa;
17
+ $grey1: #f1f3f5;
18
+ $grey2: #e9ecef;
19
+ $grey3: #dee2e6;
20
+ $grey4: #ced4da;
21
+ $grey5: #adb5bd;
22
+ $grey6: #868e96;
23
+ $grey7: #495057;
24
+ $grey8: #343a40;
25
+ $grey9: #212529;
26
+ */
27
+
28
+
29
+ // Source: https://material.io
30
+ $lightest: #ffffff;
31
+ $grey0: #fafafa;
32
+ $grey1: #f5f5f5;
33
+ $grey2: #eeeeee;
34
+ $grey3: #e0e0e0;
35
+ $grey4: #bdbdbd;
36
+ $grey5: #9e9e9e;
37
+ $grey6: #757575;
38
+ $grey7: #616161;
39
+ $grey8: #424242;
40
+ $grey85: #313131;
41
+ $grey9: #212121;
42
+ $grey95: #111111;
43
+ $darkest: #000000;
44
+
45
+ $nav-background-color: $darkest !default;
46
+ $background-color: $grey9 !default;
47
+ $text-color: $grey5 !default;
48
+ $text-color-light: $grey4 !default;
49
+ $text-color-dark: $grey6 !default;
50
+ $stroke-color: $grey7 !default;
51
+ $box-fill-color: $grey85 !default;
52
+ $box-fill-color-dark: $grey95 !default;
53
+
54
+ $table-text-align: left !default;
55
+
56
+ // Width of the content area
57
+ $nav-width: 1280px !default;
58
+ $content-width: 750px !default;
59
+
60
+ $on-palm: 600px !default;
61
+ $on-laptop: 750px !default;
62
+
63
+ // Use media queries like this:
64
+ // @include media-query($on-palm) {
65
+ // .wrapper {
66
+ // padding-right: $spacing-unit / 2;
67
+ // padding-left: $spacing-unit / 2;
68
+ // }
69
+ // }
70
+ @mixin media-query($device) {
71
+ @media screen and (max-width: $device) {
72
+ @content;
73
+ }
74
+ }
75
+
76
+ @mixin relative-font-size($ratio) {
77
+ font-size: $base-font-size * $ratio;
78
+ }
79
+
80
+ // Import partials.
81
+ @import
82
+ "sencilla/base",
83
+ "sencilla/layout",
84
+ "sencilla/syntax-highlighting"
85
+ ;
@@ -0,0 +1 @@
1
+ I"M{"source"=>"/mnt/storage/pdata/Utility/Git/dyskun/sencilla/_sass/sencilla", "destination"=>"/mnt/storage/pdata/Utility/Git/dyskun/sencilla/_sass/sencilla/_site", "collections_dir"=>"", "cache_dir"=>".jekyll-cache", "plugins_dir"=>"_plugins", "layouts_dir"=>"_layouts", "data_dir"=>"_data", "includes_dir"=>"_includes", "collections"=>{"posts"=>{"output"=>true, "permalink"=>"/:categories/:year/:month/:day/:title:output_ext"}}, "safe"=>false, "include"=>[".htaccess"], "exclude"=>[".sass-cache", ".jekyll-cache", "gemfiles", "Gemfile", "Gemfile.lock", "node_modules", "vendor/bundle/", "vendor/cache/", "vendor/gems/", "vendor/ruby/"], "keep_files"=>[".git", ".svn"], "encoding"=>"utf-8", "markdown_ext"=>"markdown,mkdown,mkdn,mkd,md", "strict_front_matter"=>false, "show_drafts"=>nil, "limit_posts"=>0, "future"=>false, "unpublished"=>false, "whitelist"=>[], "plugins"=>[], "markdown"=>"kramdown", "highlighter"=>"rouge", "lsi"=>false, "excerpt_separator"=>"\n\n", "incremental"=>false, "detach"=>false, "port"=>"4000", "host"=>"127.0.0.1", "baseurl"=>nil, "show_dir_listing"=>false, "permalink"=>"date", "paginate_path"=>"/page:num", "timezone"=>nil, "quiet"=>false, "verbose"=>false, "defaults"=>[], "liquid"=>{"error_mode"=>"warn", "strict_filters"=>false, "strict_variables"=>false}, "kramdown"=>{"auto_ids"=>true, "toc_levels"=>[1, 2, 3, 4, 5, 6], "entity_output"=>"as_char", "smart_quotes"=>"lsquo,rsquo,ldquo,rdquo", "input"=>"GFM", "hard_wrap"=>false, "guess_lang"=>true, "footnote_nr"=>1, "show_warnings"=>false}, "livereload_port"=>35729, "serving"=>true, "watch"=>true, "url"=>"http://localhost:4000"}:ET
@@ -0,0 +1,287 @@
1
+ /**
2
+ * Reset some basic elements
3
+ */
4
+ body, h1, h2, h3, h4, h5, h6,
5
+ p, blockquote, pre, hr,
6
+ dl, dd, ol, ul, figure {
7
+ margin: 0;
8
+ padding: 0;
9
+ }
10
+
11
+
12
+
13
+ /**
14
+ * Basic styling
15
+ */
16
+ body {
17
+ font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
18
+ color: $text-color;
19
+ background-color: $background-color;
20
+ -webkit-text-size-adjust: 100%;
21
+ -webkit-font-feature-settings: "kern" 1;
22
+ -moz-font-feature-settings: "kern" 1;
23
+ -o-font-feature-settings: "kern" 1;
24
+ font-feature-settings: "kern" 1;
25
+ font-kerning: normal;
26
+ display: flex;
27
+ min-height: 100vh;
28
+ flex-direction: column;
29
+ }
30
+
31
+
32
+
33
+ /**
34
+ * Set `margin-bottom` to maintain vertical rhythm
35
+ */
36
+ h1, h2, h3, h4, h5, h6,
37
+ p, blockquote, pre,
38
+ ul, ol, dl, figure,
39
+ %vertical-rhythm {
40
+ margin-bottom: $spacing-unit / 2;
41
+ }
42
+
43
+
44
+
45
+ /**
46
+ * `main` element
47
+ */
48
+ main {
49
+ display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
50
+ }
51
+
52
+
53
+
54
+ /**
55
+ * Images
56
+ */
57
+ img {
58
+ max-width: 100%;
59
+ vertical-align: middle;
60
+ }
61
+
62
+
63
+
64
+ /**
65
+ * Videos
66
+ */
67
+ iframe {
68
+ max-width: 100%;
69
+ vertical-align: middle;
70
+ margin: $spacing-unit;
71
+ }
72
+
73
+
74
+
75
+ /**
76
+ * Figures
77
+ */
78
+ figure > img {
79
+ display: block;
80
+ }
81
+
82
+ figcaption {
83
+ font-size: $small-font-size;
84
+ }
85
+
86
+
87
+
88
+ /**
89
+ * Lists
90
+ */
91
+ ul, ol {
92
+ margin-left: $spacing-unit;
93
+ }
94
+
95
+ li {
96
+ > ul,
97
+ > ol {
98
+ margin-bottom: 0;
99
+ }
100
+ }
101
+
102
+
103
+
104
+ /**
105
+ * Headings
106
+ */
107
+ h1, h2, h3, h4, h5, h6 {
108
+ font-weight: $base-font-weight;
109
+ color: $text-color-light
110
+ }
111
+
112
+ hr {
113
+ margin-top: $spacing-unit / 2;
114
+ margin-bottom: $spacing-unit / 2;
115
+ height: 2px;
116
+ border-width: 0px;
117
+ color: $stroke-color;
118
+ background-color: $stroke-color;
119
+ }
120
+
121
+
122
+
123
+ /**
124
+ * Links
125
+ */
126
+ a {
127
+ color: $text-color-light;
128
+ text-decoration: none;
129
+
130
+ &:visited {
131
+ color: $text-color-dark;
132
+ text-decoration: none;
133
+ }
134
+
135
+ &:hover {
136
+ color: $text-color;
137
+ text-decoration: underline;
138
+ }
139
+ }
140
+
141
+
142
+
143
+ /**
144
+ * Blockquotes
145
+ */
146
+ blockquote {
147
+ color: $text-color-dark;
148
+ margin-left: $spacing-unit / 2;
149
+ border-left: 6px solid $stroke-color;
150
+ padding: $spacing-unit / 2;
151
+ @include relative-font-size(1.25);
152
+ font-style: italic;
153
+
154
+ > :last-child {
155
+ margin-bottom: 0;
156
+ }
157
+ }
158
+
159
+
160
+
161
+ /**
162
+ * Code formatting
163
+ */
164
+ pre,
165
+ code {
166
+ @include relative-font-size(0.9375);
167
+ }
168
+
169
+ code {
170
+ padding: 1px 5px;
171
+ }
172
+
173
+ pre {
174
+ padding: 8px 12px;
175
+ overflow-x: auto;
176
+
177
+ > code {
178
+ border: 0;
179
+ padding-right: 0;
180
+ padding-left: 0;
181
+ }
182
+ }
183
+
184
+
185
+
186
+ /**
187
+ * Wrapper
188
+ */
189
+ .wrapper {
190
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
191
+ max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
192
+ margin-right: auto;
193
+ margin-left: auto;
194
+ padding-right: $spacing-unit;
195
+ padding-left: $spacing-unit;
196
+ @extend %clearfix;
197
+
198
+ @include media-query($on-laptop) {
199
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
200
+ max-width: calc(#{$content-width} - (#{$spacing-unit}));
201
+ padding-right: $spacing-unit / 2;
202
+ padding-left: $spacing-unit / 2;
203
+ }
204
+ }
205
+
206
+ .nav-wrapper {
207
+ max-width: -webkit-calc(#{$nav-width} - (#{$spacing-unit} * 2));
208
+ max-width: calc(#{$nav-width} - (#{$spacing-unit} * 2));
209
+ margin-right: auto;
210
+ margin-left: auto;
211
+ padding-right: $spacing-unit;
212
+ padding-left: $spacing-unit;
213
+ @extend %clearfix;
214
+
215
+ @include media-query($on-laptop) {
216
+ max-width: -webkit-calc(#{$nav-width} - (#{$spacing-unit}));
217
+ max-width: calc(#{$nav-width} - (#{$spacing-unit}));
218
+ padding-right: $spacing-unit / 2;
219
+ padding-left: $spacing-unit / 2;
220
+ }
221
+ }
222
+
223
+
224
+
225
+ /**
226
+ * Clearfix
227
+ */
228
+ %clearfix:after {
229
+ content: "";
230
+ display: table;
231
+ clear: both;
232
+ }
233
+
234
+
235
+
236
+ /**
237
+ * Icons
238
+ */
239
+
240
+ .svg-icon {
241
+ width: 16px;
242
+ height: 16px;
243
+ display: inline-block;
244
+ fill: #{$box-fill-color};
245
+ padding-right: 5px;
246
+ vertical-align: text-top;
247
+ }
248
+
249
+ .social-media-list {
250
+ li + li {
251
+ padding-top: 5px;
252
+ }
253
+ }
254
+
255
+
256
+
257
+ /**
258
+ * Tables
259
+ */
260
+
261
+ table {
262
+ margin-bottom: $spacing-unit;
263
+ width: 100%;
264
+ text-align: $table-text-align;
265
+ color: $text-color;
266
+ border-collapse: collapse;
267
+ border: 1px solid $stroke-color;
268
+
269
+ tr {
270
+ &:nth-child(odd) {
271
+ background-color: $box-fill-color;
272
+ }
273
+ }
274
+
275
+ th, td {
276
+ padding: ($spacing-unit / 3) ($spacing-unit / 2);
277
+ }
278
+
279
+ th {
280
+ background-color: $box-fill-color-dark;
281
+ border: 1px solid $stroke-color;
282
+ }
283
+
284
+ td {
285
+ border: 1px solid $stroke-color;
286
+ }
287
+ }
@@ -0,0 +1,411 @@
1
+ /**
2
+ * Site header
3
+ */
4
+ .site-header {
5
+ background-color: $nav-background-color;
6
+ min-height: $spacing-unit * 1.865;
7
+
8
+ // Positioning context for the mobile navigation icon
9
+ position: relative;
10
+ }
11
+
12
+ .site-title {
13
+ @include relative-font-size(1.625);
14
+ font-weight: 300;
15
+ line-height: $base-line-height * $base-font-size * 2.25;
16
+ margin-bottom: 0;
17
+ float: left;
18
+ text-decoration: none;
19
+ color: $text-color-light;
20
+
21
+ &,
22
+ &:visited {
23
+ color: $text-color-light;
24
+ }
25
+ }
26
+ .site-logo {
27
+ height: 50px;
28
+ vertical-align: middle;
29
+ padding-top: 5px;
30
+ padding-bottom: 5px;
31
+ }
32
+
33
+ .site-nav {
34
+ float: right;
35
+ line-height: $base-line-height * $base-font-size * 2.25;
36
+ .nav-trigger {
37
+ display: none;
38
+ }
39
+
40
+ .menu-icon {
41
+ display: none;
42
+ }
43
+
44
+ .nav-drop-link {
45
+ display: block;
46
+ text-decoration: none;
47
+ color: $text-color-light;
48
+ text-align: center;
49
+ &:visited {
50
+ color: $text-color-light;
51
+ }
52
+ &:hover {
53
+ color: $text-color-light;
54
+ background-color: $grey85;
55
+ text-decoration: underline;
56
+ }
57
+ }
58
+ .nav-item-link {
59
+ text-decoration: none;
60
+ color: $text-color-light;
61
+ &:visited {
62
+ color: $text-color-light;
63
+ }
64
+ }
65
+
66
+
67
+ .nav-items {
68
+ position: relative;
69
+ display: inline-block;
70
+ line-height: $base-line-height;
71
+ padding-top: 18px;
72
+ padding-bottom: 18px;
73
+ padding-left: 15px;
74
+ padding-right: 15px ;
75
+ &:hover {
76
+ color: $text-color-light;
77
+ background-color: $grey9;
78
+ text-decoration: underline;
79
+ }
80
+ }
81
+
82
+ .dropdown-content {
83
+ display: none;
84
+ position: absolute;
85
+ left:0;
86
+ top: 100%;
87
+ padding: 0px;
88
+ line-height: $base-line-height;
89
+ background-color: $grey95;
90
+ min-width: 100%;
91
+
92
+ /** box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);**/
93
+ z-index: 1;
94
+ }
95
+
96
+ .nav-items:hover .dropdown-content {
97
+ display: block;
98
+ }
99
+
100
+ @include media-query($on-palm) {
101
+ position: absolute;
102
+ top: 9px;
103
+ right: $spacing-unit / 2;
104
+ background-color: $background-color;
105
+ border: 1px solid $stroke-color;
106
+ border-radius: 5px;
107
+ text-align: right;
108
+
109
+ label[for="nav-trigger"] {
110
+ display: block;
111
+ float: right;
112
+ width: 36px;
113
+ height: 36px;
114
+ z-index: 2;
115
+ cursor: pointer;
116
+ }
117
+
118
+ .menu-icon {
119
+ display: block;
120
+ float: right;
121
+ width: 36px;
122
+ height: 26px;
123
+ line-height: 0;
124
+ padding-top: 10px;
125
+ text-align: center;
126
+
127
+ > svg {
128
+ fill: $text-color-light;
129
+ }
130
+ }
131
+
132
+ input ~ .trigger {
133
+ clear: both;
134
+ display: none;
135
+ }
136
+
137
+ input:checked ~ .trigger {
138
+ display: block;
139
+ padding-bottom: 5px;
140
+ }
141
+
142
+ .nav-drop-link {
143
+ display: block;
144
+ text-decoration: none;
145
+ color: $text-color-light;
146
+ text-align: center;
147
+ &:visited {
148
+ color: $text-color-light;
149
+ }
150
+ }
151
+ .nav-item-link {
152
+ text-decoration: none;
153
+ color: $text-color-light;
154
+ &:visited {
155
+ color: $text-color-light;
156
+ }
157
+ }
158
+
159
+ .nav-items {
160
+ position: relative;
161
+ display: block;
162
+ padding: 5px 10px;
163
+ &:not(:last-child) {
164
+ margin-right: 0;
165
+ }
166
+ }
167
+
168
+ .dropdown-content {
169
+ display: none;
170
+ position: left;
171
+ background-color: $box-fill-color;
172
+ /** box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);**/
173
+ min-width: 100%;
174
+ padding: 5px 10px;
175
+ z-index: 1;
176
+ left: -100%;
177
+ top: 0;
178
+ }
179
+
180
+ .nav-items:input .dropdown-content {
181
+ display: block;
182
+ }
183
+ }
184
+ }
185
+
186
+
187
+ /**
188
+ * Site footer
189
+ */
190
+ .site-footer {
191
+ background-color: $nav-background-color;
192
+ /*
193
+ border-top: 1px solid $stroke-color;
194
+ */
195
+ padding-top: $spacing-unit / 2;
196
+ padding-bottom: 0;
197
+ }
198
+
199
+ /*.footer-heading {
200
+ @include relative-font-size(1.125);
201
+ margin-bottom: $spacing-unit / 2;
202
+ }*/
203
+
204
+ .contact-list,
205
+ .social-media-list {
206
+ list-style: none;
207
+ margin-left: 0;
208
+ }
209
+
210
+ .footer-col-wrapper {
211
+ @include relative-font-size(0.9375);
212
+ color: $text-color-dark;
213
+ margin-left: -$spacing-unit / 2;
214
+ @extend %clearfix;
215
+ }
216
+
217
+ .footer-col {
218
+ float: left;
219
+ /* margin-bottom: $spacing-unit / 2;*/
220
+ padding-left: $spacing-unit / 2;
221
+ }
222
+
223
+ .footer-col-1 {
224
+ /*
225
+ width: -webkit-calc(30% - (#{$spacing-unit} / 2));
226
+ width: calc(30% - (#{$spacing-unit} / 2));
227
+ */
228
+ text-align: left;
229
+ width: -webkit-calc(33% - (#{$spacing-unit} / 2));
230
+ width: calc(33% - (#{$spacing-unit} / 2));
231
+ }
232
+
233
+ .footer-col-2 {
234
+ text-align: center;
235
+ width: -webkit-calc(34% - (#{$spacing-unit} / 2));
236
+ width: calc(34% - (#{$spacing-unit} / 2));
237
+ }
238
+
239
+ .footer-col-3 {
240
+ text-align: right;
241
+ width: -webkit-calc(33% - (#{$spacing-unit} / 2));
242
+ width: calc(33% - (#{$spacing-unit} / 2));
243
+ }
244
+
245
+ /*
246
+ @include media-query($on-laptop) {
247
+ .footer-col-1 {
248
+ float: left;
249
+ width: -webkit-calc(33% - (#{$spacing-unit} / 2));
250
+ width: calc(33% - (#{$spacing-unit} / 2));
251
+ }
252
+ .footer-col-2 {
253
+ float: center;
254
+ width: -webkit-calc(34% - (#{$spacing-unit} / 2));
255
+ width: calc(34% - (#{$spacing-unit} / 2));
256
+ }
257
+ .footer-col-3 {
258
+ float: right;
259
+ width: -webkit-calc(33% - (#{$spacing-unit} / 2));
260
+ width: calc(33% - (#{$spacing-unit} / 2));
261
+ }
262
+ }
263
+ */
264
+
265
+ @include media-query($on-palm) {
266
+ .footer-col {
267
+ float: none;
268
+ text-align: center;
269
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
270
+ width: calc(100% - (#{$spacing-unit} / 2));
271
+ }
272
+ }
273
+
274
+
275
+
276
+ /**
277
+ * Page content
278
+ */
279
+ .page-content {
280
+ padding: $spacing-unit 0;
281
+ flex: 1;
282
+ }
283
+
284
+ .page-heading {
285
+ @include relative-font-size(2);
286
+ }
287
+
288
+ .post-list-heading {
289
+ @include relative-font-size(1.75);
290
+ }
291
+
292
+ .post-list {
293
+ margin-left: 0;
294
+ list-style: none;
295
+
296
+ > li {
297
+ margin-bottom: $spacing-unit;
298
+ }
299
+ }
300
+
301
+ .post-meta {
302
+ font-size: $small-font-size;
303
+ color: $text-color-dark;
304
+ a {
305
+ color: $text-color-dark;
306
+ text-decoration: none;
307
+
308
+ &:hover {
309
+ color: $text-color-dark;
310
+ text-decoration: underline;
311
+ }
312
+
313
+ }
314
+ }
315
+
316
+ .post-link {
317
+ display: block;
318
+ @include relative-font-size(1.5);
319
+ }
320
+
321
+
322
+
323
+ /**
324
+ * Posts
325
+ */
326
+ .post-header {
327
+ margin-bottom: $spacing-unit;
328
+ }
329
+
330
+ .post-title {
331
+ @include relative-font-size(2.625);
332
+ letter-spacing: -1px;
333
+ line-height: 1;
334
+
335
+ @include media-query($on-laptop) {
336
+ @include relative-font-size(2.25);
337
+ }
338
+ }
339
+
340
+ .post-content {
341
+ margin-bottom: $spacing-unit;
342
+
343
+ h2 {
344
+ @include relative-font-size(2);
345
+
346
+ @include media-query($on-laptop) {
347
+ @include relative-font-size(1.75);
348
+ }
349
+ }
350
+
351
+ h3 {
352
+ @include relative-font-size(1.625);
353
+
354
+ @include media-query($on-laptop) {
355
+ @include relative-font-size(1.375);
356
+ }
357
+ }
358
+
359
+ h4 {
360
+ @include relative-font-size(1.25);
361
+
362
+ @include media-query($on-laptop) {
363
+ @include relative-font-size(1.125);
364
+ }
365
+ }
366
+ }
367
+
368
+ /**
369
+ * Pagination navbar
370
+ */
371
+ .pagination {
372
+ a {
373
+ display: inline-block;
374
+ background-color: $grey85;
375
+ max-width: 300px;
376
+ padding: $spacing-unit / 4;
377
+ text-decorations: none;
378
+ &:hover {
379
+ text-decoration: underline;
380
+ background-color: $grey8;
381
+ color: $text-color-light;
382
+ }
383
+ &:visited {
384
+ background-color: $grey85;
385
+ color: $text-color-light;
386
+ text-decoration: underline;
387
+ }
388
+ }
389
+ }
390
+
391
+
392
+ /* Tags page */
393
+
394
+ .tag-btn {
395
+ margin: 0.3125rem;
396
+ }
397
+
398
+ #full-tags-list {
399
+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
400
+ }
401
+ #full-tags-list .tag-entry {
402
+ margin: 0 0 0.9375rem 1.5625rem;
403
+ }
404
+
405
+ #full-tags-list .tag-entry a {
406
+ }
407
+
408
+ #full-tags-list .tag-entry .entry-date {
409
+ color: $text-color-light;
410
+ font-size: 1rem;
411
+ }