narwhal-jekyll-theme 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,16 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ <article class="post text-wrapper">
5
+
6
+ <img src="{{ page.image | relative_url }}">
7
+
8
+ <header class="post-header">
9
+ <h1 class="post-title">{{ page.title | escape }}</h1>
10
+ </header>
11
+
12
+ <div class="post-content">
13
+ {{ content }}
14
+ </div>
15
+
16
+ </article>
@@ -0,0 +1,17 @@
1
+ ---
2
+ layout: home
3
+ ---
4
+
5
+ <div class="portfolio-grid">
6
+ {% assign sorted = site.portfolio | sort: 'importance' | reverse %}
7
+ {% for item in sorted %}
8
+ <div class="portfolio-item">
9
+ <a href="{{ item.url | relative_url }}">
10
+ <div class="portfolio-img-wrapper">
11
+ <img src="{{ site.base_url }}{{ item.image }}">
12
+ </div>
13
+ <h3>{{ item.title }}</h3>
14
+ </a>
15
+ </div>
16
+ {% endfor %}
17
+ </div>
@@ -0,0 +1,7 @@
1
+ ---
2
+ layout: home
3
+ ---
4
+
5
+ {%- include post-list.html -%}
6
+
7
+ {{ content }}
@@ -0,0 +1,27 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ <article class="post h-entry text-wrapper" itemscope itemtype="http://schema.org/BlogPosting">
5
+
6
+ <header class="post-header">
7
+ <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
8
+ <p class="post-meta">
9
+ <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
10
+ {%- assign date_format = site.narwhal.date_format | default: "%b %-d, %Y" -%}
11
+ {{ page.date | date: date_format }}
12
+ </time>
13
+ {%- if page.author -%}
14
+ • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span>
15
+ {%- endif -%}</p>
16
+ </header>
17
+
18
+ <div class="post-content e-content" itemprop="articleBody">
19
+ {{ content }}
20
+ </div>
21
+
22
+ {%- if site.disqus.shortname -%}
23
+ {%- include disqus_comments.html -%}
24
+ {%- endif -%}
25
+
26
+ <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
27
+ </article>
@@ -0,0 +1,58 @@
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: 16px !default;
7
+ $base-font-weight: 400 !default;
8
+ $small-font-size: $base-font-size * 0.875 !default;
9
+ $base-line-height: 1.6 !default;
10
+
11
+ $spacing-unit: 30px !default;
12
+
13
+ $text-color: #111 !default;
14
+ $background-color: #fefefe !default;
15
+ $brand-color: #2a7ae2 !default;
16
+ $trim-color: lighten($brand-color, 35%);
17
+
18
+ $grey-color: #828282 !default;
19
+ $grey-color-light: lighten($grey-color, 40%) !default;
20
+ $grey-color-dark: darken($grey-color, 25%) !default;
21
+
22
+ $table-text-align: left !default;
23
+
24
+ // Animation
25
+ $link-transition-speed: 0.1s;
26
+
27
+ // Width of the homepage content area
28
+ $home-content-width: 550px !default;
29
+
30
+ // Width of other text content
31
+ $content-width: 800px !default;
32
+
33
+ $on-palm: 600px !default;
34
+ $on-laptop: 1000px !default;
35
+
36
+ // Use media queries like this:
37
+ // @include media-query($on-palm) {
38
+ // .wrapper {
39
+ // padding-right: $spacing-unit / 2;
40
+ // padding-left: $spacing-unit / 2;
41
+ // }
42
+ // }
43
+ @mixin media-query($device) {
44
+ @media screen and (max-width: $device) {
45
+ @content;
46
+ }
47
+ }
48
+
49
+ @mixin relative-font-size($ratio) {
50
+ font-size: $base-font-size * $ratio;
51
+ }
52
+
53
+ // Import partials.
54
+ @import
55
+ "narwhal/base",
56
+ "narwhal/layout",
57
+ "narwhal/syntax-highlighting"
58
+ ;
@@ -0,0 +1,308 @@
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
+ * Figures
66
+ */
67
+ figure > img {
68
+ display: block;
69
+ }
70
+
71
+ figcaption {
72
+ font-size: $small-font-size;
73
+ }
74
+
75
+
76
+
77
+ /**
78
+ * Lists
79
+ */
80
+ ul, ol {
81
+ margin-left: $spacing-unit;
82
+ }
83
+
84
+ li {
85
+ > ul,
86
+ > ol {
87
+ margin-bottom: 0;
88
+ }
89
+ }
90
+
91
+
92
+
93
+ /**
94
+ * Headings
95
+ */
96
+ h1, h2, h3, h4, h5, h6 {
97
+ font-weight: $base-font-weight;
98
+ }
99
+
100
+ h1 {
101
+ @include relative-font-size(1.5);
102
+ }
103
+
104
+ h2 {
105
+ @include relative-font-size(1.4);
106
+ }
107
+
108
+ h3 {
109
+ @include relative-font-size(1);
110
+ }
111
+
112
+
113
+
114
+ /**
115
+ * Links
116
+ */
117
+ a {
118
+ color: $brand-color;
119
+ text-decoration: none;
120
+
121
+ &:hover {
122
+ color: $text-color;
123
+ }
124
+
125
+ .social-media-list &:hover {
126
+ text-decoration: none;
127
+
128
+ .username {
129
+ text-decoration: underline;
130
+ }
131
+ }
132
+ }
133
+
134
+ p a,
135
+ .fancy {
136
+ padding: 2px 2px 0 1px;
137
+ margin: -2px -2px 0 -1px;
138
+
139
+ border-bottom: 2px solid $trim-color;
140
+ box-shadow: 0 -1px 0 $trim-color inset;
141
+
142
+ transition: color $link-transition-speed ease-out, box-shadow $link-transition-speed ease-out, border-bottom $link-transition-speed ease-out;
143
+ -webkit-transition: color $link-transition-speed ease-out, box-shadow $link-transition-speed ease-out, border-bottom $link-transition-speed ease-out;
144
+ -moz-transition: color $link-transition-speed ease-out, box-shadow $link-transition-speed ease-out, border-bottom $link-transition-speed ease-out;
145
+ -o-transition: color $link-transition-speed ease-out, box-shadow $link-transition-speed ease-out, border-bottom $link-transition-speed ease-out;
146
+
147
+ svg {
148
+ transition: fill $link-transition-speed ease-out;
149
+ -webkit-transition: fill $link-transition-speed ease-out;
150
+ -moz-transition: fill $link-transition-speed ease-out;
151
+ -o-transition: fill $link-transition-speed ease-out;
152
+ }
153
+
154
+ &:hover,
155
+ &:focus {
156
+ text-decoration: none;
157
+ color: $background-color;
158
+ border-bottom: 2px solid $brand-color;
159
+ box-shadow: 0 -20px 0 $brand-color inset;
160
+
161
+ svg {
162
+ fill: $background-color;
163
+ }
164
+ }
165
+ }
166
+
167
+ /**
168
+ * Blockquotes
169
+ */
170
+ blockquote {
171
+ color: $grey-color;
172
+ border-left: 4px solid $grey-color-light;
173
+ padding-left: $spacing-unit / 2;
174
+ @include relative-font-size(1.125);
175
+ letter-spacing: -1px;
176
+ font-style: italic;
177
+
178
+ > :last-child {
179
+ margin-bottom: 0;
180
+ }
181
+ }
182
+
183
+
184
+
185
+ /**
186
+ * Code formatting
187
+ */
188
+ pre,
189
+ code {
190
+ @include relative-font-size(0.9375);
191
+ border: 1px solid $grey-color-light;
192
+ border-radius: 3px;
193
+ background-color: #eef;
194
+ }
195
+
196
+ code {
197
+ padding: 1px 5px;
198
+ }
199
+
200
+ pre {
201
+ padding: 8px 12px;
202
+ overflow-x: auto;
203
+
204
+ > code {
205
+ border: 0;
206
+ padding-right: 0;
207
+ padding-left: 0;
208
+ }
209
+ }
210
+
211
+
212
+
213
+ /**
214
+ * Wrapper
215
+ */
216
+ .wrapper {
217
+ margin-right: auto;
218
+ margin-left: auto;
219
+ padding-right: $spacing-unit;
220
+ padding-left: $spacing-unit;
221
+ @extend %clearfix;
222
+
223
+ @include media-query($on-laptop) {
224
+ padding-right: $spacing-unit / 2;
225
+ padding-left: $spacing-unit / 2;
226
+ }
227
+ }
228
+
229
+ .text-wrapper {
230
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
231
+ max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
232
+ margin: auto;
233
+ @extend %clearfix;
234
+
235
+ #homepage & {
236
+ margin-left: 0;
237
+ margin-right: 0;
238
+ }
239
+
240
+ @include media-query($on-laptop) {
241
+ margin: auto;
242
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
243
+ max-width: calc(#{$content-width} - (#{$spacing-unit}));
244
+ }
245
+ }
246
+
247
+
248
+
249
+ /**
250
+ * Clearfix
251
+ */
252
+ %clearfix:after {
253
+ content: "";
254
+ display: table;
255
+ clear: both;
256
+ }
257
+
258
+
259
+
260
+ /**
261
+ * Icons
262
+ */
263
+
264
+ .svg-icon {
265
+ width: 16px;
266
+ height: 16px;
267
+ display: inline-block;
268
+ fill: #{$grey-color};
269
+ padding-left: 1px;
270
+ padding-right: 4px;
271
+ vertical-align: text-top;
272
+ }
273
+
274
+ .social-media-list {
275
+ li + li {
276
+ padding-top: 5px;
277
+ }
278
+ }
279
+
280
+
281
+
282
+ /**
283
+ * Tables
284
+ */
285
+ table {
286
+ margin-bottom: $spacing-unit;
287
+ width: 100%;
288
+ text-align: $table-text-align;
289
+ color: lighten($text-color, 18%);
290
+ border-collapse: collapse;
291
+ border: 1px solid $grey-color-light;
292
+ tr {
293
+ &:nth-child(even) {
294
+ background-color: lighten($grey-color-light, 6%);
295
+ }
296
+ }
297
+ th, td {
298
+ padding: ($spacing-unit / 3) ($spacing-unit / 2);
299
+ }
300
+ th {
301
+ background-color: lighten($grey-color-light, 3%);
302
+ border: 1px solid darken($grey-color-light, 4%);
303
+ border-bottom-color: darken($grey-color-light, 12%);
304
+ }
305
+ td {
306
+ border: 1px solid $grey-color-light;
307
+ }
308
+ }
@@ -0,0 +1,321 @@
1
+ /**
2
+ * Site header
3
+ */
4
+ .site-header {
5
+ margin-top: $spacing-unit;
6
+ width: 100%;
7
+
8
+ #homepage & {
9
+ position: absolute;
10
+ }
11
+
12
+ a {
13
+ transition: color $link-transition-speed linear;
14
+ -webkit-transition: color $link-transition-speed linear;
15
+ -moz-transition: color $link-transition-speed linear;
16
+ -o-transition: color $link-transition-speed linear;
17
+
18
+ &:hover {
19
+ color: $grey-color;
20
+ }
21
+ }
22
+
23
+ @include media-query($on-laptop) {
24
+ margin-top: $spacing-unit / 2;
25
+ position: relative;
26
+
27
+ #homepage & {
28
+ position: relative;
29
+ }
30
+ }
31
+ }
32
+
33
+ .site-title {
34
+ @include relative-font-size(1.625);
35
+ font-weight: 300;
36
+ letter-spacing: -1px;
37
+ margin-bottom: 0;
38
+ float: left;
39
+
40
+ &,
41
+ &:visited {
42
+ color: $grey-color-dark;
43
+ }
44
+ }
45
+
46
+ .site-nav {
47
+ float: right;
48
+
49
+ .page-link {
50
+ color: $text-color;
51
+ line-height: $base-line-height;
52
+
53
+ // Gaps between nav items, but not on the last one
54
+ &:not(:last-child) {
55
+ margin-right: 20px;
56
+ }
57
+ }
58
+
59
+ @include media-query($on-laptop) {
60
+ float: none;
61
+ }
62
+ }
63
+
64
+
65
+
66
+ /**
67
+ * Site footer
68
+ */
69
+ .site-footer {
70
+ border-top: 1px solid $grey-color-light;
71
+ padding: $spacing-unit 0;
72
+ }
73
+
74
+ .footer-heading {
75
+ @include relative-font-size(1);
76
+ margin-bottom: $spacing-unit / 2;
77
+ color: $grey-color;
78
+ }
79
+
80
+
81
+ /**
82
+ * Page content
83
+ */
84
+ .page-content {
85
+ padding: $spacing-unit 0;
86
+ flex: 1;
87
+ }
88
+
89
+ .post-list {
90
+ margin-left: 0;
91
+ list-style: none;
92
+
93
+ p {
94
+ margin-bottom: $spacing-unit;
95
+ }
96
+ }
97
+
98
+ .post-meta {
99
+ font-size: $small-font-size;
100
+ color: $grey-color;
101
+ }
102
+
103
+ .post-link {
104
+ display: block;
105
+ }
106
+
107
+
108
+
109
+ /**
110
+ * Social
111
+ */
112
+ .social-media-sentence {
113
+ a {
114
+ white-space: nowrap;
115
+ }
116
+
117
+ > span {
118
+ &::after {
119
+ content: ",";
120
+ }
121
+
122
+ &:last-child {
123
+ &::before {
124
+ content: "and ";
125
+ }
126
+
127
+ &::after {
128
+ content: "";
129
+ }
130
+ }
131
+ }
132
+ }
133
+
134
+
135
+ /**
136
+ * Home
137
+ */
138
+ .home-content {
139
+ margin-bottom: $spacing-unit * 2;
140
+ max-width: #{$home-content-width};
141
+ width: -webkit-calc(100% - (#{$spacing-unit}));
142
+ width: calc(100% - (#{$spacing-unit}));
143
+ }
144
+
145
+ @include media-query($on-laptop) {
146
+ .home-content {
147
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
148
+ width: calc(100% - (#{$spacing-unit} / 2));
149
+ }
150
+ }
151
+
152
+ .home-col-wrapper {
153
+ @include relative-font-size(0.9375);
154
+ color: $grey-color;
155
+ margin-left: -$spacing-unit / 2;
156
+ @extend %clearfix;
157
+ }
158
+
159
+ .home-col {
160
+ float: left;
161
+ margin-bottom: $spacing-unit / 2;
162
+ padding-left: $spacing-unit / 2;
163
+ }
164
+
165
+ .home-col-1,
166
+ .home-col-2 {
167
+ width: -webkit-calc(50% - (#{$spacing-unit} / 2));
168
+ width: calc(50% - (#{$spacing-unit} / 2));
169
+ }
170
+
171
+ @include media-query($on-laptop) {
172
+ .home-col-1,
173
+ .home-col-2 {
174
+ width: -webkit-calc(50% - (#{$spacing-unit} / 2));
175
+ width: calc(50% - (#{$spacing-unit} / 2));
176
+ }
177
+ }
178
+
179
+ @include media-query($on-palm) {
180
+ .home-col {
181
+ float: none;
182
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
183
+ width: calc(100% - (#{$spacing-unit} / 2));
184
+ }
185
+ }
186
+
187
+
188
+ /**
189
+ * Posts
190
+ */
191
+ .post img {
192
+ margin-bottom: $spacing-unit * 2;
193
+
194
+ @include media-query($on-palm) {
195
+ margin-bottom: $spacing-unit;
196
+ }
197
+ }
198
+
199
+ .post-header {
200
+ margin-bottom: $spacing-unit;
201
+
202
+ @include media-query($on-palm) {
203
+ margin-bottom: $spacing-unit / 2;
204
+ }
205
+ }
206
+
207
+ .post-title {
208
+ @include relative-font-size(2.625);
209
+ letter-spacing: -1px;
210
+ line-height: 1;
211
+
212
+ @include media-query($on-laptop) {
213
+ @include relative-font-size(2.25);
214
+ }
215
+ }
216
+
217
+ .post-content {
218
+ margin-bottom: $spacing-unit;
219
+
220
+ @include relative-font-size(1.1);
221
+ font-weight: 300;
222
+
223
+ @include media-query($on-palm) {
224
+ @include relative-font-size(1);
225
+ }
226
+
227
+ h2,
228
+ h3,
229
+ h4 {
230
+ margin-top: $spacing-unit;
231
+
232
+ @include media-query($on-palm) {
233
+ margin-top: $spacing-unit;
234
+ }
235
+ }
236
+
237
+ h2 {
238
+ @include relative-font-size(2);
239
+
240
+ @include media-query($on-laptop) {
241
+ @include relative-font-size(1.75);
242
+ }
243
+ }
244
+
245
+ h3 {
246
+ @include relative-font-size(1.625);
247
+
248
+ @include media-query($on-laptop) {
249
+ @include relative-font-size(1.375);
250
+ }
251
+ }
252
+
253
+ h4 {
254
+ @include relative-font-size(1.25);
255
+
256
+ @include media-query($on-laptop) {
257
+ @include relative-font-size(1.125);
258
+ }
259
+ }
260
+ }
261
+
262
+
263
+ /**
264
+ * Portfolio
265
+ */
266
+ .portfolio-grid {
267
+ display: flex;
268
+ flex-flow: row wrap;
269
+ justify-content: space-between;
270
+ max-width: 280vh;
271
+ }
272
+
273
+ .portfolio-item {
274
+ margin-bottom: $spacing-unit / 2;
275
+ width: -webkit-calc(50% - (#{$spacing-unit} / 2));
276
+ width: calc(50% - (#{$spacing-unit} / 2));
277
+
278
+ a {
279
+ color: $text-color;
280
+ display: block;
281
+ }
282
+
283
+ img {
284
+ -webkit-backface-visibility: hidden; // Fixes weird chrome size flicker bug
285
+ -moz-backface-visibility: hidden;
286
+ backface-visibility: hidden;
287
+ width: 100%;
288
+
289
+ transition: opacity $link-transition-speed * 2 ease-out;
290
+ -webkit-transition: opacity $link-transition-speed * 2 ease-out;
291
+ -moz-transition: opacity $link-transition-speed * 2 ease-out;
292
+ -o-transition: opacity $link-transition-speed * 2 ease-out;
293
+ }
294
+
295
+ &:hover,
296
+ &:focus {
297
+ img {
298
+ opacity: 0.8;
299
+ }
300
+
301
+ .portfolio-img-wrapper {
302
+ background-color: black;
303
+ }
304
+ }
305
+ }
306
+
307
+ @include media-query($on-laptop) {
308
+ .portfolio-item {
309
+ width: 100%;
310
+ }
311
+ }
312
+
313
+ .portfolio-img-wrapper {
314
+ margin-bottom: $spacing-unit / 4;
315
+ background-color: $grey-color-light;
316
+
317
+ transition: background-color $link-transition-speed * 2 ease-out;
318
+ -webkit-transition: background-color $link-transition-speed * 2 ease-out;
319
+ -moz-transition: background-color $link-transition-speed * 2 ease-out;
320
+ -o-transition: background-color $link-transition-speed * 2 ease-out;
321
+ }