jekyll-swiss 0.2.0 → 0.3.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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 000b65521be4ae8b4e97a46a11c3abebdb6a70e8
4
- data.tar.gz: 3c89dc6e1e23bcca009ad5648e5fb25eeeb25d6b
3
+ metadata.gz: 252b47ca7d4e71b9703b87c29723613d2d526075
4
+ data.tar.gz: 17f7f6b11964d31755f9b88d511bbc6503d3faa9
5
5
  SHA512:
6
- metadata.gz: 05674a17f10b02d8ed5d47047bf87897347732392c9d399e000c7b6015988fb24c4f7c6b9656cb4756ec9e5e826c1d22580a26d71f1212a4a300f4ae3a8bfb11
7
- data.tar.gz: 8ec12bdb0f1e3d6c1c98415e99f5efbd1d050d0c6665aa1995dd270026a30da0debd00d132b06334787ae1a403126d3d219be54517083baf83bc29482545162a
6
+ metadata.gz: ffe7eee6c282ccde219ebd2ea4de4459a73dbf108e6f658f12369265d657a809609abb686bd59970224e15d103c0e4c1cef00b58b50144ce3b9f405f32c760e1
7
+ data.tar.gz: 15d81bf166c334d07d8877e45c61e463672d9b6d795d623fac4c2519a6c2556907f0162916f2acb5bb1d74e1bd61fd29224a0f00a60d7b68968f85721d3dff60
@@ -0,0 +1,8 @@
1
+ <!-- Renders post date, title, and snippet of text. -->
2
+ <div class="py-2 mb-2 prose">
3
+ <a class="no-underline h5 bold text-accent" title="{{ post.url | prepend: site.baseurl }}" href="{{ post.url | prepend: site.baseurl }}">{{ post.date | date: "%b %-d, %Y" }}</a>
4
+ <h2 class="h1 lh-condensed col-9 mt-0">
5
+ <a class="link-primary" title="{{ post.url | prepend: site.baseurl }}" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
6
+ </h2>
7
+ <p>{{ post.content | strip_html | truncatewords:30 }}</p>
8
+ </div>
@@ -0,0 +1,13 @@
1
+ ---
2
+ layout: page
3
+ ---
4
+
5
+ {% if page.category_name %}
6
+ {% assign category_name = page.category_name %}
7
+ {% endif %}
8
+
9
+ <div class="container mx-auto">
10
+ {% for post in site.categories[category_name] %}
11
+ {% include post_block.html %}
12
+ {% endfor %}
13
+ </div>
@@ -54,15 +54,9 @@
54
54
  </div>
55
55
  </header>
56
56
 
57
- <div class="container mx-auto py-4 px-2">
57
+ <div class="container mx-auto px-2 py-4">
58
58
  {% for post in site.posts %}
59
- <div class="py-2 mb-2 prose mx-auto">
60
- <a class="no-underline h5 bold text-accent" title="{{ post.url | prepend: site.baseurl }}" href="{{ post.url | prepend: site.baseurl }}">{{ post.date | date: "%b %-d, %Y" }}</a>
61
- <h2 class="h1 lh-condensed mt-0">
62
- <a class="link-primary" title="{{ post.url | prepend: site.baseurl }}" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
63
- </h2>
64
- <p>{{ post.content | strip_html | truncatewords:30 }}</p>
65
- </div>
59
+ {% include post_block.html %}
66
60
  {% endfor %}
67
61
  </div>
68
62
 
@@ -28,8 +28,8 @@ dl, dd, ol, ul, figure {
28
28
  * Basic styling
29
29
  */
30
30
  body {
31
- font-family: $body-font;
32
- font-size: 16px;
31
+ font-family: $body-font-family;
32
+ font-size: $body-font-size;
33
33
  line-height: 1.5;
34
34
  color: $color-body-text;
35
35
  background-color: #fff;
@@ -45,12 +45,12 @@ h1, h2, h3, h4, h5, h6 {
45
45
  margin-bottom: 0.25em;
46
46
  }
47
47
 
48
- h1, .h1 { font-size: 40px; }
49
- h2, .h2 { font-size: 32px; }
50
- h3, .h3 { font-size: 24px; }
51
- h4, .h4 { font-size: 20px; }
52
- h5, .h5 { font-size: 16px; }
53
- h6, .h6 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
48
+ h1, .h1 { font-size: $h1-size; }
49
+ h2, .h2 { font-size: $h2-size; }
50
+ h3, .h3 { font-size: $h3-size; }
51
+ h4, .h4 { font-size: $h4-size; }
52
+ h5, .h5 { font-size: $h5-size; }
53
+ h6, .h6 { font-size: $h6-size; text-transform: uppercase; letter-spacing: 0.02em; }
54
54
 
55
55
  a {
56
56
  color: inherit;
@@ -2,16 +2,16 @@
2
2
 
3
3
  // Code formatting
4
4
  pre {
5
- border-left: 8px solid $color-border;
6
- margin: 32px 0;
5
+ border-left: $spacer-1 solid $color-border;
6
+ margin: $spacer-3 0;
7
7
  padding-left: 16px;
8
- width: (9 / 12 * 100%);
8
+ width: (9 / 12 * 100%); // matches col-9
9
9
  overflow-x: auto;
10
10
  }
11
11
 
12
12
  code {
13
13
  color: $color-code;
14
- font-size: 16px;
14
+ font-size: $body-font-size;
15
15
  padding: 1px 4px;
16
16
  }
17
17
 
@@ -19,24 +19,24 @@ code {
19
19
  .prose {
20
20
 
21
21
  p, ol, ul {
22
- font-size: 20px;
22
+ font-size: $prose-font-size;
23
23
  margin-bottom: 1em;
24
24
  width: 100%;
25
25
 
26
- @media (min-width: 52em) {
27
- width: (10 / 12 * 100%);
26
+ @media (min-width: $breakpoint-lg) {
27
+ width: (10 / 12 * 100%); // matches col-10
28
28
  }
29
29
 
30
30
  }
31
31
 
32
32
  ul, ol {
33
- padding-left: 20px;
33
+ padding-left: 40px;
34
34
  }
35
35
 
36
36
  li {
37
37
  margin-bottom: 0.5em;
38
38
 
39
- ul li {
39
+ ul li, ol li {
40
40
  margin-bottom: 0;
41
41
  }
42
42
  }
@@ -45,8 +45,8 @@ code {
45
45
 
46
46
  max-width: 100%;
47
47
 
48
- @media (min-width: 52em) {
49
- max-width: (12 / 10 * 100%);
48
+ @media (min-width: $breakpoint-lg) {
49
+ max-width: (12 / 10 * 100%); // make image fill width of container on desktop
50
50
  }
51
51
 
52
52
  }
@@ -55,16 +55,16 @@ code {
55
55
  line-height: 1.375;
56
56
  padding-left: 20px;
57
57
  margin: 40px 0 40px -16px;
58
- border-left: 8px solid $color-border;
58
+ border-left: $spacer-1 solid $color-border;
59
59
  font-style: italic;
60
60
 
61
61
  p {
62
62
  font-size: 24px;
63
63
  }
64
64
 
65
- @media (min-width: 52em) {
66
- padding-left: 32px;
67
- margin: 64px 0 64px -40px;
65
+ @media (min-width: $breakpoint-lg) {
66
+ padding-left: $spacer-3;
67
+ margin: $spacer-4 0 $spacer-4 -40px;
68
68
  max-width: (11 / 10 * 100%);
69
69
 
70
70
  p {
@@ -112,7 +112,7 @@ code {
112
112
 
113
113
  th,
114
114
  td {
115
- padding: 16px 32px 16px 2px;
115
+ padding: $spacer-2 $spacer-3 $spacer-2 2px;
116
116
  border-top: 1px solid $color-body-text;
117
117
  border-bottom: 1px solid $color-body-text;
118
118
  }
@@ -1,11 +1,12 @@
1
1
  /* Type utilities */
2
- .h0 { font-size: 64px;
2
+ .h0 {
3
+ font-size: $h0-mobile;
3
4
  line-height: 1.0125;
4
5
  margin-top: 0.85em;
5
6
  word-wrap: break-word;
6
7
 
7
- @media (min-width: 52em) {
8
- font-size: 128px;
8
+ @media (min-width: $breakpoint-lg) {
9
+ font-size: $h0-desktop;
9
10
  }
10
11
  }
11
12
 
@@ -48,22 +49,22 @@
48
49
  .text-accent { color: $color-text-accent; } // used for date in post list and home link
49
50
 
50
51
  /* Layout utilities */
51
- .container { max-width: 64em; }
52
+ .container { max-width: $container-width; }
52
53
 
53
- // .col-1 { width: (1 / 12 * 100%); }
54
- // .col-2 { width: (2 / 12 * 100%); }
55
- // .col-3 { width: (3 / 12 * 100%); }
54
+ .col-1 { width: (1 / 12 * 100%); }
55
+ .col-2 { width: (2 / 12 * 100%); }
56
+ .col-3 { width: (3 / 12 * 100%); }
56
57
  .col-4 { width: (4 / 12 * 100%); }
57
- // .col-5 { width: (5 / 12 * 100%); }
58
- // .col-6 { width: (6 / 12 * 100%); }
59
- // .col-7 { width: (7 / 12 * 100%); }
58
+ .col-5 { width: (5 / 12 * 100%); }
59
+ .col-6 { width: (6 / 12 * 100%); }
60
+ .col-7 { width: (7 / 12 * 100%); }
60
61
  .col-8 { width: (8 / 12 * 100%); }
61
62
  .col-9 { width: (9 / 12 * 100%); }
62
- // .col-10 { width: (10 / 12 * 100%); }
63
- // .col-11 { width: (11 / 12 * 100%); }
64
- // .col-12 { width: 100%; }
63
+ .col-10 { width: (10 / 12 * 100%); }
64
+ .col-11 { width: (11 / 12 * 100%); }
65
+ .col-12 { width: 100%; }
65
66
 
66
- @media (max-width: 52em) {
67
+ @media (max-width: $breakpoint-lg) {
67
68
  .sm-width-full { width: 100% !important; }
68
69
  }
69
70
 
@@ -88,17 +89,17 @@
88
89
  .px-0 { padding-left: 0; padding-right: 0 }
89
90
  .py-0 { padding-top: 0; padding-bottom: 0 }
90
91
 
91
- .px-1 { padding-left: 8px; padding-right: 8px }
92
- .py-1 { padding-top: 8px; padding-bottom: 8px }
92
+ .px-1 { padding-left: $spacer-1; padding-right: $spacer-1 }
93
+ .py-1 { padding-top: $spacer-1; padding-bottom: $spacer-1 }
93
94
 
94
- .px-2 { padding-left: 16px; padding-right: 16px; }
95
- .py-2 { padding-top: 16px; padding-bottom: 16px; }
95
+ .px-2 { padding-left: $spacer-2; padding-right: $spacer-2; }
96
+ .py-2 { padding-top: $spacer-2; padding-bottom: $spacer-2; }
96
97
 
97
- .px-3 { padding-left: 32px; padding-right: 32px; }
98
- .py-3 { padding-top: 32px; padding-bottom: 32px; }
98
+ .px-3 { padding-left: $spacer-3; padding-right: $spacer-3; }
99
+ .py-3 { padding-top: $spacer-3; padding-bottom: $spacer-3; }
99
100
 
100
- .px-4 { padding-left: 64px; padding-right: 64px; }
101
- .py-4 { padding-top: 64px; padding-bottom: 64px; }
101
+ .px-4 { padding-left: $spacer-4; padding-right: $spacer-4; }
102
+ .py-4 { padding-top: $spacer-4; padding-bottom: $spacer-4; }
102
103
 
103
104
  /* Margin */
104
105
  .mx-auto { margin-left: auto; margin-right: auto; }
@@ -108,25 +109,25 @@
108
109
  .mb-0 { margin-bottom: 0; }
109
110
  .ml-0 { margin-left: 0; }
110
111
 
111
- .mt-1 { margin-top: 8px; }
112
- .mr-1 { margin-right: 8px; }
113
- .mb-1 { margin-bottom: 8px; }
114
- .ml-1 { margin-left: 8px; }
112
+ .mt-1 { margin-top: $spacer-1; }
113
+ .mr-1 { margin-right: $spacer-1; }
114
+ .mb-1 { margin-bottom: $spacer-1; }
115
+ .ml-1 { margin-left: $spacer-1; }
115
116
 
116
- .mt-2 { margin-top: 16px; }
117
- .mr-2 { margin-right: 16px; }
118
- .mb-2 { margin-bottom: 16px; }
119
- .ml-2 { margin-left: 16px; }
117
+ .mt-2 { margin-top: $spacer-2; }
118
+ .mr-2 { margin-right: $spacer-2; }
119
+ .mb-2 { margin-bottom: $spacer-2; }
120
+ .ml-2 { margin-left: $spacer-2; }
120
121
 
121
- .mt-3 { margin-top: 32px; }
122
- .mr-3 { margin-right: 32px; }
123
- .mb-3 { margin-bottom: 32px; }
124
- .ml-3 { margin-left: 32px; }
122
+ .mt-3 { margin-top: $spacer-3; }
123
+ .mr-3 { margin-right: $spacer-3; }
124
+ .mb-3 { margin-bottom: $spacer-3; }
125
+ .ml-3 { margin-left: $spacer-3; }
125
126
 
126
- .mt-4 { margin-top: 64px; }
127
- .mr-4 { margin-right: 63px; }
128
- .mb-4 { margin-bottom: 64px; }
129
- .ml-4 { margin-left: 64px; }
127
+ .mt-4 { margin-top: $spacer-4; }
128
+ .mr-4 { margin-right: $spacer-4; }
129
+ .mb-4 { margin-bottom: $spacer-4; }
130
+ .ml-4 { margin-left: $spacer-4; }
130
131
 
131
132
  // Responsive margin
132
133
  @media (min-width: 52em) {
@@ -137,25 +138,25 @@
137
138
  .mb-lg-0 { margin-bottom: 0; }
138
139
  .ml-lg-0 { margin-left: 0; }
139
140
 
140
- .mt-lg-1 { margin-top: 8px; }
141
- .mr-lg-1 { margin-right: 8px; }
142
- .mb-lg-1 { margin-bottom: 8px; }
143
- .ml-lg-1 { margin-left: 8px; }
144
-
145
- .mt-lg-2 { margin-top: 16px; }
146
- .mr-lg-2 { margin-right: 16px; }
147
- .mb-lg-2 { margin-bottom: 16px; }
148
- .ml-lg-2 { margin-left: 16px; }
149
-
150
- .mt-lg-3 { margin-top: 32px; }
151
- .mr-lg-3 { margin-right: 32px; }
152
- .mb-lg-3 { margin-bottom: 32px; }
153
- .ml-lg-3 { margin-left: 32px; }
154
-
155
- .mt-lg-4 { margin-top: 64px; }
156
- .mr-lg-4 { margin-right: 63px; }
157
- .mb-lg-4 { margin-bottom: 64px; }
158
- .ml-lg-4 { margin-left: 64px; }
141
+ .mt-lg-1 { margin-top: $spacer-1; }
142
+ .mr-lg-1 { margin-right: $spacer-1; }
143
+ .mb-lg-1 { margin-bottom: $spacer-1; }
144
+ .ml-lg-1 { margin-left: $spacer-1; }
145
+
146
+ .mt-lg-2 { margin-top: $spacer-2; }
147
+ .mr-lg-2 { margin-right: $spacer-2; }
148
+ .mb-lg-2 { margin-bottom: $spacer-2; }
149
+ .ml-lg-2 { margin-left: $spacer-2; }
150
+
151
+ .mt-lg-3 { margin-top: $spacer-3; }
152
+ .mr-lg-3 { margin-right: $spacer-3; }
153
+ .mb-lg-3 { margin-bottom: $spacer-3; }
154
+ .ml-lg-3 { margin-left: $spacer-3; }
155
+
156
+ .mt-lg-4 { margin-top: $spacer-4; }
157
+ .mr-lg-4 { margin-right: $spacer-4; }
158
+ .mb-lg-4 { margin-bottom: $spacer-4; }
159
+ .ml-lg-4 { margin-left: $spacer-4; }
159
160
  }
160
161
 
161
162
  // Link styles for social icons
@@ -1,6 +1,35 @@
1
1
 
2
2
  // Font family
3
- $body-font: "Helvetica Neue", Arial, sans-serif;
3
+ $body-font-family: "Helvetica Neue", Arial, sans-serif;
4
+ $body-font-size: 16px;
5
+ $prose-font-size: 20px;
6
+
7
+
8
+ // Type scale
9
+ $h0-mobile: 64px;
10
+ $h0-desktop: 128px;
11
+
12
+ $h1-size: 40px !default;
13
+ $h2-size: 32px !default;
14
+ $h3-size: 24px !default;
15
+ $h4-size: 20px !default;
16
+ $h5-size: 16px !default;
17
+ $h6-size: 12px !default;
4
18
 
5
19
  // Default border color
6
20
  $color-border: #ddd !default;
21
+
22
+ // Container width
23
+ $container-width: 64em;
24
+
25
+ // Large breakpoint
26
+ $breakpoint-lg: 52em;
27
+
28
+ // Spacing unit
29
+ $spacer: 8px !default;
30
+
31
+ // Spacing scale
32
+ $spacer-1: $spacer !default; // 8px
33
+ $spacer-2: ($spacer * 2) !default; // 16px
34
+ $spacer-3: ($spacer * 4) !default; // 32px
35
+ $spacer-4: ($spacer * 8) !default; // 64px
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-swiss
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.0
4
+ version: 0.3.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - broccolini
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-09-16 00:00:00.000000000 Z
11
+ date: 2016-09-18 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -70,10 +70,12 @@ files:
70
70
  - _includes/header.html
71
71
  - _includes/instagram.html
72
72
  - _includes/medium.html
73
+ - _includes/post_block.html
73
74
  - _includes/previous-next.html
74
75
  - _includes/previous-next_has-categories.html
75
76
  - _includes/twitter.html
76
77
  - _layouts/category-post.html
78
+ - _layouts/category_index.html
77
79
  - _layouts/default.html
78
80
  - _layouts/home.html
79
81
  - _layouts/page.html