jekyll-theme-cayman-blog 0.0.5

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Wrapper
3
+ */
4
+ .wrapper {
5
+ max-width: -webkit-calc(#{$navbar-width} - (#{$spacing-unit} * 2));
6
+ max-width: calc(#{$navbar-width} - (#{$spacing-unit} * 2));
7
+ margin-right: auto;
8
+ margin-left: auto;
9
+ padding-right: $spacing-unit;
10
+ padding-left: $spacing-unit;
11
+ @extend %clearfix;
12
+
13
+ @include media-query($on-laptop) {
14
+ max-width: -webkit-calc(#{$navbar-width} - (#{$spacing-unit}));
15
+ max-width: calc(#{$navbar-width} - (#{$spacing-unit}));
16
+ padding-right: $spacing-unit / 2;
17
+ padding-left: $spacing-unit / 2;
18
+ }
19
+ }
20
+
21
+
22
+
23
+ /**
24
+ * Clearfix
25
+ */
26
+ %clearfix:after {
27
+ content: "";
28
+ display: table;
29
+ clear: both;
30
+ }
@@ -0,0 +1,129 @@
1
+ /**
2
+ * Site header
3
+ */
4
+ .site-header {
5
+ border-bottom: 1px solid $grey-color-light;
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.4);
14
+ font-weight: 300;
15
+ line-height: $base-line-height * $base-font-size * 2.25;
16
+ letter-spacing: -1px;
17
+ margin-bottom: 0;
18
+ float: left;
19
+ text-decoration: none;
20
+
21
+ &,
22
+ &:visited,
23
+ &:hover {
24
+ color: $text-color;
25
+ text-decoration: none;
26
+ }
27
+ }
28
+
29
+ .site-nav {
30
+ float: right;
31
+ line-height: $base-line-height * $base-font-size * 2.25;
32
+
33
+ .nav-trigger {
34
+ display: none;
35
+ }
36
+
37
+ .menu-icon {
38
+ display: none;
39
+ }
40
+
41
+ .page-link {
42
+ color: $text-color;
43
+ line-height: $base-line-height;
44
+
45
+ // Gaps between nav items, but not on the last one
46
+ &:not(:last-child) {
47
+ margin-right: 20px;
48
+ }
49
+ }
50
+
51
+ @include media-query($on-palm) {
52
+ position: absolute;
53
+ top: 9px;
54
+ right: $spacing-unit / 2;
55
+ background-color: $background-color;
56
+ border: 1px solid $grey-color-light;
57
+ border-radius: 5px;
58
+ text-align: right;
59
+
60
+ label[for="nav-trigger"] {
61
+ display: block;
62
+ float: right;
63
+ width: 36px;
64
+ height: 36px;
65
+ z-index: 2;
66
+ cursor: pointer;
67
+ }
68
+
69
+ .menu-icon {
70
+ display: block;
71
+ float: right;
72
+ width: 36px;
73
+ height: 26px;
74
+ line-height: 0;
75
+ padding-top: 10px;
76
+ text-align: center;
77
+
78
+ > svg path {
79
+ fill: $grey-color-dark;
80
+ }
81
+ }
82
+
83
+ input ~ .trigger {
84
+ clear: both;
85
+ display: none;
86
+ }
87
+
88
+ input:checked ~ .trigger {
89
+ display: block;
90
+ padding-bottom: 5px;
91
+ }
92
+
93
+ .page-link {
94
+ display: block;
95
+ padding: 5px 10px;
96
+
97
+ &:not(:last-child) {
98
+ margin-right: 0;
99
+ }
100
+ margin-left: 20px;
101
+ }
102
+ }
103
+ }
104
+
105
+ /**
106
+ * Post list
107
+ */
108
+ .post-list {
109
+ margin-left: 0;
110
+ list-style: none;
111
+
112
+ > li {
113
+ margin-bottom: $spacing-unit * 1.3;
114
+ }
115
+
116
+ > li > h2 {
117
+ margin-top: 0rem;
118
+ }
119
+ }
120
+
121
+ .post-meta {
122
+ font-size: $small-font-size;
123
+ color: $grey-color;
124
+ }
125
+
126
+ .post-link {
127
+ display: block;
128
+ @include relative-font-size(1.5);
129
+ }
@@ -0,0 +1,365 @@
1
+ @import "normalize";
2
+ @import "rouge-github";
3
+ @import "variables";
4
+ @import "blog";
5
+
6
+ @mixin large {
7
+ @media screen and (min-width: #{$large-breakpoint}) {
8
+ @content;
9
+ }
10
+ }
11
+
12
+ @mixin medium {
13
+ @media screen and (min-width: #{$medium-breakpoint}) and (max-width: #{$large-breakpoint}) {
14
+ @content;
15
+ }
16
+ }
17
+
18
+ @mixin small {
19
+ @media screen and (max-width: #{$medium-breakpoint}) {
20
+ @content;
21
+ }
22
+ }
23
+
24
+ * {
25
+ box-sizing: border-box;
26
+ }
27
+
28
+ body {
29
+ padding: 0;
30
+ margin: 0;
31
+ font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
32
+ font-size: 16px;
33
+ line-height: 1.5;
34
+ color: $body-text-color;
35
+ }
36
+
37
+ a {
38
+ color: $body-link-color;
39
+ text-decoration: none;
40
+
41
+ &:hover {
42
+ text-decoration: underline;
43
+ }
44
+ }
45
+
46
+ .btn {
47
+ display: inline-block;
48
+ margin-bottom: 1rem;
49
+ color: rgba(255, 255, 255, 0.7);
50
+ background-color: rgba(255, 255, 255, 0.08);
51
+ border-color: rgba(255, 255, 255, 0.2);
52
+ border-style: solid;
53
+ border-width: 1px;
54
+ border-radius: 0.3rem;
55
+ transition: color 0.2s, background-color 0.2s, border-color 0.2s;
56
+
57
+ &:hover {
58
+ color: rgba(255, 255, 255, 0.8);
59
+ text-decoration: none;
60
+ background-color: rgba(255, 255, 255, 0.2);
61
+ border-color: rgba(255, 255, 255, 0.3);
62
+ }
63
+
64
+ + .btn {
65
+ margin-left: 1rem;
66
+ }
67
+
68
+ @include large {
69
+ padding: 0.75rem 1rem;
70
+ }
71
+
72
+ @include medium {
73
+ padding: 0.6rem 0.9rem;
74
+ font-size: 0.9rem;
75
+ }
76
+
77
+ @include small {
78
+ display: block;
79
+ width: 100%;
80
+ padding: 0.75rem;
81
+ font-size: 0.9rem;
82
+
83
+ + .btn {
84
+ margin-top: 1rem;
85
+ margin-left: 0;
86
+ }
87
+ }
88
+ }
89
+
90
+ .page-header {
91
+ color: $header-heading-color;
92
+ text-align: center;
93
+ background-color: $header-bg-color;
94
+ background-image: linear-gradient(120deg, $header-bg-color-secondary, $header-bg-color);
95
+
96
+ @include large {
97
+ padding: 5rem 6rem;
98
+ }
99
+
100
+ @include medium {
101
+ padding: 3rem 4rem;
102
+ }
103
+
104
+ @include small {
105
+ padding: 2rem 1rem;
106
+ }
107
+ }
108
+
109
+ .project-name {
110
+ margin-top: 0;
111
+ margin-bottom: 0.1rem;
112
+
113
+ @include large {
114
+ font-size: 3.25rem;
115
+ }
116
+
117
+ @include medium {
118
+ font-size: 2.25rem;
119
+ }
120
+
121
+ @include small {
122
+ font-size: 1.75rem;
123
+ }
124
+ }
125
+
126
+ .project-tagline {
127
+ margin-bottom: 2rem;
128
+ font-weight: normal;
129
+ opacity: 0.7;
130
+
131
+ @include large {
132
+ font-size: 1.25rem;
133
+ }
134
+
135
+ @include medium {
136
+ font-size: 1.15rem;
137
+ }
138
+
139
+ @include small {
140
+ font-size: 1rem;
141
+ }
142
+ }
143
+
144
+ .project-date {
145
+ margin-bottom: 0rem;
146
+ font-weight: normal;
147
+ opacity: 0.7;
148
+ font-style: italic;
149
+
150
+ @include large {
151
+ font-size: 1.0rem;
152
+ }
153
+
154
+ @include medium {
155
+ font-size: 0.95rem;
156
+ }
157
+
158
+ @include small {
159
+ font-size: 0.75rem;
160
+ }
161
+ }
162
+
163
+ .main-content {
164
+ word-wrap: break-word;
165
+
166
+ :first-child {
167
+ margin-top: 0;
168
+ }
169
+
170
+ @include large {
171
+ max-width: 64rem;
172
+ padding: 3rem 6rem;
173
+ margin: 0 auto;
174
+ font-size: 1.1rem;
175
+ }
176
+
177
+ @include medium {
178
+ padding: 3rem 4rem;
179
+ font-size: 1.1rem;
180
+ }
181
+
182
+ @include small {
183
+ padding: 2rem 1rem;
184
+ font-size: 1rem;
185
+ }
186
+
187
+ img {
188
+ max-width: 100%;
189
+ }
190
+
191
+ h1,
192
+ h2,
193
+ h3,
194
+ h4,
195
+ h5,
196
+ h6 {
197
+ margin-top: 2rem;
198
+ margin-bottom: 1rem;
199
+ font-weight: normal;
200
+ color: $section-headings-color;
201
+ }
202
+
203
+ p {
204
+ margin-bottom: 1em;
205
+ }
206
+
207
+ code {
208
+ padding: 2px 4px;
209
+ font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
210
+ font-size: 0.9rem;
211
+ color: $code-text-color;
212
+ background-color: $code-bg-color;
213
+ border-radius: 0.3rem;
214
+ }
215
+
216
+ pre {
217
+ padding: 0.8rem;
218
+ margin-top: 0;
219
+ margin-bottom: 1rem;
220
+ font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
221
+ color: $code-text-color;
222
+ word-wrap: normal;
223
+ background-color: $code-bg-color;
224
+ border: solid 1px $border-color;
225
+ border-radius: 0.3rem;
226
+
227
+ > code {
228
+ padding: 0;
229
+ margin: 0;
230
+ font-size: 0.9rem;
231
+ color: $code-text-color;
232
+ word-break: normal;
233
+ white-space: pre;
234
+ background: transparent;
235
+ border: 0;
236
+ }
237
+ }
238
+
239
+ .highlight {
240
+ margin-bottom: 1rem;
241
+
242
+ pre {
243
+ margin-bottom: 0;
244
+ word-break: normal;
245
+ }
246
+ }
247
+
248
+ .highlight pre,
249
+ pre {
250
+ padding: 0.8rem;
251
+ overflow: auto;
252
+ font-size: 0.9rem;
253
+ line-height: 1.45;
254
+ border-radius: 0.3rem;
255
+ -webkit-overflow-scrolling: touch;
256
+ }
257
+
258
+ pre code,
259
+ pre tt {
260
+ display: inline;
261
+ max-width: initial;
262
+ padding: 0;
263
+ margin: 0;
264
+ overflow: initial;
265
+ line-height: inherit;
266
+ word-wrap: normal;
267
+ background-color: transparent;
268
+ border: 0;
269
+
270
+ &:before,
271
+ &:after {
272
+ content: normal;
273
+ }
274
+ }
275
+
276
+ ul,
277
+ ol {
278
+ margin-top: 0;
279
+ }
280
+
281
+ blockquote {
282
+ padding: 0 1rem;
283
+ margin-left: 0;
284
+ color: $blockquote-text-color;
285
+ border-left: 0.3rem solid $border-color;
286
+
287
+ > :first-child {
288
+ margin-top: 0;
289
+ }
290
+
291
+ > :last-child {
292
+ margin-bottom: 0;
293
+ }
294
+ }
295
+
296
+ table {
297
+ display: block;
298
+ width: 100%;
299
+ overflow: auto;
300
+ word-break: normal;
301
+ word-break: keep-all; // For Firefox to horizontally scroll wider tables.
302
+ -webkit-overflow-scrolling: touch;
303
+
304
+ th {
305
+ font-weight: bold;
306
+ }
307
+
308
+ th,
309
+ td {
310
+ padding: 0.5rem 1rem;
311
+ border: 1px solid $table-border-color;
312
+ }
313
+ }
314
+
315
+ dl {
316
+ padding: 0;
317
+
318
+ dt {
319
+ padding: 0;
320
+ margin-top: 1rem;
321
+ font-size: 1rem;
322
+ font-weight: bold;
323
+ }
324
+
325
+ dd {
326
+ padding: 0;
327
+ margin-bottom: 1rem;
328
+ }
329
+ }
330
+
331
+ hr {
332
+ height: 2px;
333
+ padding: 0;
334
+ margin: 1rem 0;
335
+ background-color: $hr-border-color;
336
+ border: 0;
337
+ }
338
+ }
339
+
340
+ .site-footer {
341
+ padding-top: 2rem;
342
+ margin-top: 2rem;
343
+ border-top: solid 1px $hr-border-color;
344
+
345
+ @include large {
346
+ font-size: 1rem;
347
+ }
348
+
349
+ @include medium {
350
+ font-size: 1rem;
351
+ }
352
+
353
+ @include small {
354
+ font-size: 0.9rem;
355
+ }
356
+ }
357
+
358
+ .site-footer-owner {
359
+ display: block;
360
+ font-weight: bold;
361
+ }
362
+
363
+ .site-footer-credits {
364
+ color: $blockquote-text-color;
365
+ }