cyclist-jekyll 0.10.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (26) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +54 -0
  4. data/_includes/footer.html +4 -0
  5. data/_includes/head.html +11 -0
  6. data/_includes/header.html +20 -0
  7. data/_layouts/archive.html +33 -0
  8. data/_layouts/default.html +13 -0
  9. data/_layouts/home.html +41 -0
  10. data/_layouts/link.html +21 -0
  11. data/_layouts/linkpost.html +22 -0
  12. data/_layouts/page.html +15 -0
  13. data/_layouts/post.html +22 -0
  14. data/_sass/fonts.scss +51 -0
  15. data/_sass/layout.scss +119 -0
  16. data/_sass/typography.scss +50 -0
  17. data/assets/main.scss +11 -0
  18. data/vendor/cyclist-grid/dist/css/cyclist-grid.css +134 -0
  19. data/vendor/cyclist-grid/dist/js/cyclist-grid.js +164 -0
  20. data/vendor/cyclist-grid/dist/scss/cyclist-grid.scss +5 -0
  21. data/vendor/cyclist-grid/dist/scss/partials/_guidelines.scss +33 -0
  22. data/vendor/cyclist-grid/dist/scss/partials/_layout.scss +9 -0
  23. data/vendor/cyclist-grid/dist/scss/partials/_reset.scss +51 -0
  24. data/vendor/cyclist-grid/dist/scss/partials/_setup.scss +25 -0
  25. data/vendor/cyclist-grid/dist/scss/partials/_typography.scss +109 -0
  26. metadata +115 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: 100b77e5fe36767329e18882fa66d743bffc23ea17d10e044dd62eec111fcf2f
4
+ data.tar.gz: f83e2be0f4143de5c270202714204f21c3fc5758e48245599b12dbd81a67e0fd
5
+ SHA512:
6
+ metadata.gz: 953acfd45c34def5929b0a9410ab4a76e2ed9e83e2bf4741d5fb9cabfe2196a64f61a6bad8c4b7c6da752aefb5677c35286b10f0306bcaef0d4068bc4e591564
7
+ data.tar.gz: 6239d6917c7c845673ee2cba89d7d78f4d3cf26b1c261f35310c1d7a6c61ffc54b2c11318d430eedc7c5ac566ae1ab36d4a5931369281f65f725bb23d6106832
data/LICENSE.txt ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2018 Roben Kleene
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,54 @@
1
+ # Cyclist Jekyll
2
+
3
+ <img src="cyclist-background.svg" width="200" height="200" alt="Cyclist">
4
+
5
+ Cyclist Jekyll is a Jekyll theme. It uses [Cyclist Grid](https://github.com/cyclist-grid/cyclist-grid) to construct a layout using typographic grid.
6
+
7
+ The typefaces are [Playfair Display][playfair] for headers, [Crimson][crimson] for body copy, [Lato][lato] for block quotes, and [Fira Mono][fira] for code. All of them are free software under the [SIL Open Font License](https://en.wikipedia.org/wiki/SIL_Open_Font_License). Thank you for everyone's hard work on free typography.
8
+
9
+ [playfair]: https://github.com/clauseggers/Playfair-Display "Playfair Display"
10
+ [lato]: https://github.com/betsol/lato-font "Lato"
11
+ [crimson]: https://github.com/skosch/Crimson "Crimson"
12
+ [fira]: https://github.com/mozilla/Fira "Fira"
13
+
14
+ ![Cyclist Grid](cyclist-grid.png)
15
+
16
+ ![Cyclist](cyclist-nogrid.png)
17
+
18
+ ## Cyclist
19
+
20
+ To show the Cyclist grid, import the `cyclist-grid.js` JavaScript in the [HTML `<head>`](_includes/head.html) element:
21
+
22
+ <script src="/vendor/cyclist-grid/dist/js/cyclist-grid.js"></script>
23
+
24
+ Add the following classes to the [`<body>` and grid `<div>` elements](_layouts/default.html):
25
+
26
+ <body class="cyclist-show-baseline">
27
+ <div id="grid" class="cyclist-show-guidelines">
28
+
29
+ ## Installation
30
+
31
+ Add this line to your Jekyll site's `Gemfile`:
32
+
33
+ ```ruby
34
+ gem "cyclist"
35
+ ```
36
+
37
+ And add this line to your Jekyll site's `_config.yml`:
38
+
39
+ ```yaml
40
+ theme: cyclist
41
+ ```
42
+
43
+ And then execute:
44
+
45
+ $ bundle
46
+
47
+ Or install it yourself as:
48
+
49
+ $ gem install cyclist
50
+
51
+ ## License
52
+
53
+ The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
54
+
data/_includes/footer.html ADDED
@@ -0,0 +1,4 @@
1
+
2
+ <footer>
3
+ <!-- fin -->
4
+ </footer>
data/_includes/head.html ADDED
@@ -0,0 +1,11 @@
1
+ <head>
2
+ <meta charset="utf-8" />
3
+ <meta name="viewport" content="initial-scale=1.0, width=device-width" />
4
+ {% feed_meta %} {% seo %} <link rel="stylesheet" href="{{ "/assets/main.css" |
5
+ relative_url }}">
6
+ <link rel="preconnect" href="https://fonts.gstatic.com" />
7
+ <link
8
+ href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,700;1,400;1,700&family=Fira+Mono&family=Lato&family=Playfair+Display:ital,wght@0,700;1,700&display=swap"
9
+ rel="stylesheet"
10
+ />
11
+ </head>
data/_includes/header.html ADDED
@@ -0,0 +1,20 @@
1
+
2
+ <header role="banner">
3
+ <h1>
4
+ <a href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
5
+ </h1>
6
+ {%- assign default_paths = site.pages | map: "path" -%}
7
+ {%- assign page_paths = site.header_pages | default: default_paths -%}
8
+ {%- if page_paths %}
9
+ <nav>
10
+ <ul>
11
+ {%- for path in page_paths -%}
12
+ {%- assign my_page = site.pages | where: "path", path | first -%}
13
+ {%- if my_page.title %}
14
+ <li><a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a></li>
15
+ {%- endif -%}
16
+ {% endfor %}
17
+ </ul>
18
+ </nav>
19
+ {%- endif %}
20
+ </header>
data/_layouts/archive.html ADDED
@@ -0,0 +1,33 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ {%- if page.title %}
6
+ <header id="page-title">
7
+ <h1>{{ page.title }}</h1>
8
+ </header>
9
+ {%- endif -%}
10
+ {{ content }}
11
+
12
+ {%- if site.posts.size > 0 %}
13
+ <section id="archive">
14
+
15
+ {%- assign date_format = site.cyclist.date_format | default: "%b, %Y" -%}
16
+ {%- for post in site.posts %}
17
+ {% assign post_date = post.date | date: date_format -%}
18
+ {% if current_date != post_date and current_date %}
19
+ </ul>
20
+ {% endif -%}
21
+ {%- if current_date != post_date %}
22
+ <h2 class="post-date"><time datetime="{{ post.date | date: "%Y-%m" }}">{{ post_date }}</time></h2>
23
+ {% assign current_date = post_date -%}
24
+ <ul>
25
+ {%- endif %}
26
+ <li class="{{ post.layout | default: "Post" }}">
27
+ <h1><a href="{{ post.url | relative_url }}">{{ post.title | escape }}</a></h1>
28
+ </li>
29
+ {% endfor %}
30
+ </ul>
31
+
32
+ </section>
33
+ {% endif -%}
data/_layouts/default.html ADDED
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+ <html lang="{{ page.lang | default: site.lang | default: "en" }}">
3
+ {% include head.html %}
4
+ <body>
5
+ <div id="grid">
6
+ {% include header.html %}
7
+ <main>
8
+ {{ content }}
9
+ </main>
10
+ {% include footer.html %}
11
+ </div>
12
+ </body>
13
+ </html>
data/_layouts/home.html ADDED
@@ -0,0 +1,41 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ {%- if page.title %}
6
+ <header id="page-title">
7
+ <h1>{{ page.title }}</h1>
8
+ </header>
9
+ {%- endif -%}
10
+ {{ content }}
11
+
12
+ {%- if site.posts.size > 0 %}
13
+ <section id="posts">
14
+
15
+ {%- assign date_format = site.cyclist.date_format | default: "%A, %b %-d, %Y" -%}
16
+ {%- assign posts_limit = site.posts_limit | default: "20" %}
17
+ {%- for post in site.posts limit: posts_limit %}
18
+ {% if current_date != post.date and current_date %}
19
+ <hr>
20
+ {% endif %}
21
+ {% if current_date != post.date %}
22
+ <h2 class="post-date"><time datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date: date_format }}</time></h2>
23
+ {% endif %}
24
+ {%- assign current_date = post.date %}
25
+
26
+ <article class="{{ post.layout | default: "Post" }}">
27
+ <header>
28
+ <h1><a href="{{ post.url | relative_url }}">{{ post.title | escape }}</a></h1>
29
+ </header>
30
+
31
+ {% if site.show_excerpts -%}
32
+ {{ post.excerpt }}
33
+ {%- endif -%}
34
+ {%- if site.show_contents -%}
35
+ {{ post.content }}
36
+ {%- endif %}
37
+ </article>
38
+ {%- endfor %}
39
+
40
+ </section>
41
+ {% endif -%}
data/_layouts/link.html ADDED
@@ -0,0 +1,21 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <section id="post">
6
+ <article class="link">
7
+ <header>
8
+ <time class="post-date" datetime="{{ post.date | date: "%Y-%m-%d" }}">
9
+ {%- assign date_format = site.cyclist.date_format | default: "%A, %b %-d, %Y" -%}
10
+ {{- page.date | date: date_format -}}
11
+ </time>
12
+ <h1>{{ page.title | escape }}</h1>
13
+ {%- if page.author -%}
14
+ <span>{{ page.author }}</span>
15
+ {%- endif %}
16
+ </header>
17
+
18
+ {{ content }}
19
+
20
+ </article>
21
+ </section>
data/_layouts/linkpost.html ADDED
@@ -0,0 +1,22 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <section id="post">
6
+ <article class="post">
7
+ <header>
8
+ <time class="post-date" datetime="{{ post.date | date: "%Y-%m-%d" }}">
9
+ {%- assign date_format = site.cyclist.date_format | default: "%A, %b %-d, %Y" -%}
10
+ {{- page.date | date: date_format -}}
11
+ </time>
12
+ <h1>{{ page.title | escape }}</h1>
13
+ {%- if page.author -%}
14
+ <span>{{ page.author }}</span>
15
+ {%- endif %}
16
+ </header>
17
+
18
+ {{ content }}
19
+
20
+ </article>
21
+ </section>
22
+
data/_layouts/page.html ADDED
@@ -0,0 +1,15 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <section id="page">
6
+ <article class="page">
7
+ <header>
8
+ <h1>{{ page.title | escape }}</h1>
9
+ </header>
10
+
11
+ {{ content }}
12
+
13
+ </article>
14
+ </section>
15
+
data/_layouts/post.html ADDED
@@ -0,0 +1,22 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <section id="post">
6
+ <article class="post">
7
+ <header>
8
+ <time class="post-date" datetime="{{ post.date | date: "%Y-%m-%d" }}">
9
+ {%- assign date_format = site.cyclist.date_format | default: "%A, %b %-d, %Y" -%}
10
+ {{- page.date | date: date_format -}}
11
+ </time>
12
+ <h1>{{ page.title | escape }}</h1>
13
+ {%- if page.author -%}
14
+ <span>{{ page.author }}</span>
15
+ {%- endif %}
16
+ </header>
17
+
18
+ {{ content }}
19
+
20
+ </article>
21
+ </section>
22
+
data/_sass/fonts.scss ADDED
@@ -0,0 +1,51 @@
1
+ body {
2
+ font-family: "Crimson", Georgia, "Times New Roman", Times, serif;
3
+ }
4
+
5
+ h1,
6
+ h2,
7
+ h3,
8
+ h4,
9
+ h5,
10
+ h6 {
11
+ font-family: "Playfair Display", sans-serif;
12
+ }
13
+
14
+ blockquote {
15
+ font-family: "LatoWeb", Helvetica, Verdana, sans-serif;
16
+ color: #555;
17
+ }
18
+
19
+ pre,
20
+ code {
21
+ font-family: "Fira Mono", "Menlo", "Courier New", "Courier", monospace;
22
+ color: #555;
23
+ }
24
+
25
+ nav {
26
+ font-family: "LatoWeb", Helvetica, Verdana, sans-serif;
27
+ font-weight: bold;
28
+ }
29
+
30
+ .post-date {
31
+ font-family: "LatoWeb", Helvetica, Verdana, sans-serif;
32
+ font-weight: bold;
33
+ text-transform: uppercase;
34
+ }
35
+
36
+ header[role=banner] h1 {
37
+ font-family: "Playfair Display", sans-serif;
38
+ text-transform: uppercase;
39
+ }
40
+
41
+ a {
42
+ color: #000;
43
+ }
44
+
45
+ a:visited {
46
+ color: #888;
47
+ }
48
+
49
+ a:hover {
50
+ color: #555;
51
+ }
data/_sass/layout.scss ADDED
@@ -0,0 +1,119 @@
1
+ figure,
2
+ pre {
3
+ margin: 0 0 $leading-height 0;
4
+ }
5
+
6
+ $main-width: columns-width(4);
7
+
8
+ html,
9
+ body {
10
+ max-width: 100%;
11
+ overflow-x: hidden;
12
+ }
13
+
14
+ div#grid {
15
+ margin: 0 auto;
16
+ padding: ($leading-height * 2) 0;
17
+ width: $main-width;
18
+ }
19
+
20
+ @media screen and (max-width: $main-width + $gutter-width * 2) {
21
+ body {
22
+ padding-left: $gutter-width;
23
+ padding-right: $gutter-width;
24
+ }
25
+
26
+ div#grid {
27
+ width: 100%;
28
+ }
29
+ }
30
+
31
+ header[role=banner] {
32
+ text-align: center;
33
+ margin-bottom: $leading-height * 2;
34
+ }
35
+
36
+ header[role=banner] h1 a {
37
+ text-decoration: inherit;
38
+ color: inherit;
39
+ }
40
+
41
+ header[role=banner] nav {
42
+ width: 100%;
43
+ }
44
+
45
+ header[role=banner] nav ul {
46
+ display: flex;
47
+ flex-direction: row;
48
+ margin: 0;
49
+ }
50
+
51
+ header[role=banner] nav ul li {
52
+ list-style: none;
53
+ flex-grow: 1;
54
+ text-align: center;
55
+ }
56
+
57
+ header[role=banner] nav ul li a {
58
+ display: block;
59
+ }
60
+
61
+ section#posts article {
62
+ margin-bottom: $leading-height * 3;
63
+ }
64
+
65
+ section#post header h1 {
66
+ margin-bottom: 0;
67
+ }
68
+
69
+ section#post header {
70
+ margin-bottom: $leading-height;
71
+ }
72
+
73
+ section#archive > ul {
74
+ margin-left: 0;
75
+ list-style: outside none none;
76
+ margin-bottom: $leading-height * 3;
77
+ }
78
+
79
+ article header time,
80
+ h2.post-date {
81
+ line-height: $line-height;
82
+ margin-bottom: $leading-height;
83
+ display: block;
84
+ }
85
+
86
+ blockquote,
87
+ pre {
88
+ margin-left: $indent-width;
89
+ }
90
+
91
+ hr {
92
+ border-top: 1px double #aaa;
93
+ border-bottom: none;
94
+ border-left: none;
95
+ border-right: none;
96
+ margin-bottom: $leading-height - 1;
97
+ }
98
+
99
+ sup {
100
+ vertical-align: super;
101
+ line-height: 0;
102
+ }
103
+
104
+ section hr {
105
+ display: none;
106
+ }
107
+
108
+ article hr {
109
+ display: block;
110
+ }
111
+
112
+ article img {
113
+ vertical-align: middle;
114
+ }
115
+
116
+ article img,
117
+ article video {
118
+ max-width: 100%;
119
+ }
data/_sass/typography.scss ADDED
@@ -0,0 +1,50 @@
1
+
2
+ h1 {
3
+ @include header($double-small-pica-ratio);
4
+ }
5
+
6
+ h2 {
7
+ @include header($great-primer-ratio);
8
+ }
9
+
10
+ h3 {
11
+ @include header($english-ratio);
12
+ }
13
+
14
+ .link h1,
15
+ .link h2,
16
+ .link h3,
17
+ article h4,
18
+ article h5,
19
+ article h6 {
20
+ line-height: $leading-height;
21
+ font-size: $font-size + 2;
22
+ margin-bottom: $leading-height;
23
+ }
24
+
25
+ .post-date {
26
+ font-size: $font-size - 3;
27
+ }
28
+
29
+ header[role=banner] h1 {
30
+ @include header($double-great-primer-ratio);
31
+ }
32
+
33
+ sub,
34
+ sup {
35
+ margin-left: 1px;
36
+ font-size: $brevier;
37
+ }
38
+
39
+ code {
40
+ font-size: $font-size - 4;
41
+ }
42
+
43
+ pre code {
44
+ font-size: $font-size - 2;
45
+ display: block;
46
+ }
47
+
48
+ blockquote {
49
+ font-size: $font-size - 1;
50
+ }
data/assets/main.scss ADDED
@@ -0,0 +1,11 @@
1
+ ---
2
+ # Only the main Sass file needs front matter (the dashes are enough)
3
+ ---
4
+
5
+ $font-size: 15px;
6
+ $line-height: 22px;
7
+
8
+ @import "../vendor/cyclist-grid/dist/scss/cyclist-grid.scss";
9
+ @import "layout";
10
+ @import "typography";
11
+ @import "fonts";
data/vendor/cyclist-grid/dist/css/cyclist-grid.css ADDED
@@ -0,0 +1,134 @@
1
+ /* Structure */
2
+ html, body, div, span {
3
+ margin: 0;
4
+ padding: 0;
5
+ border: 0;
6
+ outline: 0;
7
+ font-size: 100%;
8
+ vertical-align: baseline;
9
+ background: transparent; }
10
+
11
+ /* Text */
12
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, ol, ul, li, strong, em {
13
+ margin: 0;
14
+ padding: 0;
15
+ border: 0;
16
+ outline: 0;
17
+ font-size: 100%;
18
+ vertical-align: baseline;
19
+ background: transparent; }
20
+
21
+ /* Other */
22
+ applet, object, iframe, abbr, acronym, address, big, cite, code, del, dfn,
23
+ font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i,
24
+ center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody,
25
+ tfoot, thead, tr, th, td {
26
+ margin: 0;
27
+ padding: 0;
28
+ border: 0;
29
+ outline: 0;
30
+ font-size: 100%;
31
+ vertical-align: baseline;
32
+ background: transparent; }
33
+
34
+ /* Misc */
35
+ :focus {
36
+ outline: 0; }
37
+
38
+ table {
39
+ border-collapse: separate;
40
+ border-spacing: 0; }
41
+
42
+ caption, th, td {
43
+ text-align: left;
44
+ font-weight: normal; }
45
+
46
+ blockquote:before, blockquote:after, q:before, q:after {
47
+ content: ""; }
48
+
49
+ blockquote, q {
50
+ quotes: "" ""; }
51
+
52
+ body {
53
+ line-height: 1.25rem; }
54
+
55
+ h1 {
56
+ font-size: calc(1em * (36 / 12));
57
+ margin-bottom: 1.25rem;
58
+ line-height: calc(3 * 1.25rem); }
59
+
60
+ h2 {
61
+ font-size: calc(1em * (24 / 12));
62
+ margin-bottom: 1.25rem;
63
+ line-height: calc(2 * 1.25rem); }
64
+
65
+ h3 {
66
+ font-size: calc(1em * (21 / 12));
67
+ margin-bottom: 1.25rem;
68
+ line-height: calc(2 * 1.25rem); }
69
+
70
+ h4 {
71
+ font-size: calc(1em * (18 / 12));
72
+ margin-bottom: 1.25rem;
73
+ line-height: calc(2 * 1.25rem); }
74
+
75
+ h5 {
76
+ font-size: calc(1em * (14 / 12));
77
+ margin-bottom: 1.25rem;
78
+ line-height: calc(2 * 1.25rem); }
79
+
80
+ h6 {
81
+ font-size: calc(1em * (12 / 12));
82
+ margin-bottom: 1.25rem;
83
+ line-height: calc(1 * 1.25rem); }
84
+
85
+ p,
86
+ ul,
87
+ ol {
88
+ margin-bottom: 1.25rem; }
89
+
90
+ ul ol,
91
+ ol ol,
92
+ ul ul,
93
+ ol ul {
94
+ margin-bottom: 0; }
95
+
96
+ ul {
97
+ list-style-type: disc;
98
+ margin-left: 2rem; }
99
+
100
+ ol {
101
+ list-style-type: decimal;
102
+ margin-left: 2rem; }
103
+
104
+ hr {
105
+ line-height: 2.5rem; }
106
+
107
+ .cyclist-guidelines {
108
+ display: -webkit-flex;
109
+ display: flex;
110
+ position: absolute;
111
+ left: 0;
112
+ top: 0;
113
+ bottom: 0;
114
+ right: 0; }
115
+
116
+ .cyclist-guidelines > div.cyclist-column {
117
+ display: -webkit-flex;
118
+ display: flex;
119
+ background-color: rgba(148, 235, 255, 0.25);
120
+ margin-right: 1rem;
121
+ -webkit-flex: 0 0 9rem;
122
+ flex: 0 0 9rem; }
123
+
124
+ .cyclist-guidelines > div.cyclist-column:last-child {
125
+ margin-right: 0; }
126
+
127
+ .cyclist-column > div.cyclist-unit {
128
+ background-color: rgba(148, 235, 255, 0.25);
129
+ margin-right: 1rem;
130
+ -webkit-flex: 0 0 4rem;
131
+ flex: 0 0 4rem; }
132
+
133
+ .cyclist-column > div.cyclist-unit:last-child {
134
+ margin-right: 0; }
data/vendor/cyclist-grid/dist/js/cyclist-grid.js ADDED
@@ -0,0 +1,164 @@
1
+ var Cyclist = {
2
+ baselineHelper: {
3
+ SHOW_BASELINE_CLASS_NAME: 'cyclist-show-baseline',
4
+ BASELINE_CLASS_NAME: 'cyclist-baseline',
5
+ setup: function() {
6
+ var showBaselineElements = document.getElementsByClassName(this.SHOW_BASELINE_CLASS_NAME);
7
+ for (var i = 0; i < showBaselineElements.length; i++) {
8
+ var baselineElement = showBaselineElements[i];
9
+ var baselineContainer = this.containerForElement(baselineElement);
10
+ this.showBaseline(baselineContainer);
11
+ }
12
+ },
13
+
14
+ showBaseline: function(container) {
15
+ container.style.height = "auto";
16
+ container.style.width = "100%";
17
+
18
+ var containerHeightInt = container.clientHeight;
19
+ var parentHeightInt = container.parentNode.clientHeight;
20
+
21
+ var counter = 0; // Use a counter to limit to 30 children to prevent infinite loops
22
+ while (containerHeightInt < parentHeightInt && counter < 200) {
23
+ // Add an element to contain the baseline
24
+ var baselineElement = document.createElement("p");
25
+ this.resetCSS(baselineElement);
26
+ baselineElement.appendChild(document.createTextNode('\u00A0'));
27
+
28
+ // Draw the baseline on a canvas element
29
+ var canvas = document.createElement("canvas");
30
+ baselineElement.style.position = "relative";
31
+ canvas.setAttribute("width", 1);
32
+ canvas.setAttribute("height", 1);
33
+ canvas.style.position = "absolute";
34
+ canvas.style.left = "0";
35
+ canvas.style.bottom = "0";
36
+ canvas.style.width = "100%";
37
+ canvas.style.height = "1px";
38
+ if (canvas && canvas.getContext) {
39
+ context = canvas.getContext('2d');
40
+ context.strokeStyle = "rgba(148, 235, 255, 0.5)";
41
+ context.lineWidth = 1;
42
+ context.strokeRect(0, 0, 1, 1);
43
+ }
44
+ baselineElement.appendChild(canvas);
45
+ container.appendChild(baselineElement);
46
+ containerHeightInt = container.clientHeight;
47
+ counter++;
48
+ }
49
+ },
50
+
51
+ // Helpers
52
+
53
+ containerForElement: function(element) {
54
+ var container = document.createElement("div");
55
+ element.appendChild(container);
56
+ this.makeContainer(container);
57
+ return container;
58
+ },
59
+
60
+ makeContainer: function(element) {
61
+ var parent = element.parentNode;
62
+ parent.style.position = "relative";
63
+
64
+ var height = parent.offsetHeight;
65
+ var width = parent.offsetWidth;
66
+
67
+ element.classList.add(this.BASELINE_CLASS_NAME);
68
+ element.setAttribute("width", width);
69
+ element.setAttribute("height", height);
70
+ element.style.width = width + "px";
71
+ element.style.height = height + "px";
72
+ element.style.position = "absolute";
73
+ element.style.left = "0";
74
+ element.style.top = "0";
75
+ },
76
+
77
+ resetCSS: function(element) {
78
+ element.style.border = 0;
79
+ element.style.margin = "0";
80
+ element.style.padding = "0";
81
+ element.style.outline = "0";
82
+ element.style.fontSize = "100%";
83
+ element.style.verticalAlign = "baseline";
84
+ element.style.background = "transparent";
85
+ }
86
+ },
87
+
88
+ guidelineHelper: {
89
+ SHOW_GUIDELINES_CLASS_NAME: 'cyclist-show-guidelines',
90
+ GUIDELINES_CLASS_NAME: 'cyclist-guidelines',
91
+ setup: function() {
92
+ var showGuidelinesElements = document.getElementsByClassName(this.SHOW_GUIDELINES_CLASS_NAME);
93
+ for (var j = 0; j < showGuidelinesElements.length; j++) {
94
+ var guidelinesElement = showGuidelinesElements[j];
95
+ var guidelinesContainer = this.containerForElement(guidelinesElement);
96
+ this.showGuidelines(guidelinesContainer);
97
+ }
98
+ },
99
+ showGuidelines: function(container) {
100
+ this.fillContainerWithClassName(container, 'cyclist-column');
101
+ var cyclistColumns = container.getElementsByClassName('cyclist-column');
102
+ for (var i = 0; i < cyclistColumns.length; i++) {
103
+ var cyclistColmun = cyclistColumns[i];
104
+ this.fillContainerWithClassName(cyclistColmun, 'cyclist-unit');
105
+ }
106
+ },
107
+ fillContainerWithClassName: function(container, className) {
108
+ var computedWidth = 0;
109
+ var containerWidth = container.clientWidth;
110
+ var counter = 0; // Use a counter to limit to 30 children to prevent infinite loops
111
+ while (computedWidth < containerWidth && counter < 30) {
112
+ var element = document.createElement("div");
113
+ element.classList.add(className);
114
+ container.appendChild(element);
115
+ computedWidth = this.widthForChildElementsWithClassName(container, className);
116
+ counter++;
117
+ }
118
+ },
119
+
120
+ widthForChildElementsWithClassName: function(parent, className) {
121
+ var nodeList = parent.getElementsByClassName(className);
122
+ var calculateWidth = function(initial, element) {
123
+ var style = window.getComputedStyle(element);
124
+ var marginRight = parseInt(style.marginRight, 10);
125
+ var width = element.clientWidth;
126
+ var totalWidth = width + marginRight;
127
+ return initial + totalWidth;
128
+ };
129
+ var width = Array.prototype.reduce.call(nodeList, calculateWidth, 0);
130
+ return width;
131
+ },
132
+ containerForElement: function(element) {
133
+ var container = document.createElement("div");
134
+ element.appendChild(container);
135
+ container.classList.add(this.GUIDELINES_CLASS_NAME);
136
+ var height = element.offsetHeight;
137
+ container.setAttribute("height", height);
138
+ container.style.height = height + "px";
139
+ element.style.position = "relative";
140
+ return container;
141
+ }
142
+ },
143
+
144
+ redraw: function() {
145
+ var classNames = [this.baselineHelper.BASELINE_CLASS_NAME, this.guidelineHelper.GUIDELINES_CLASS_NAME];
146
+ for (var i = 0; i < classNames.length; i++) {
147
+ var className = classNames[i];
148
+ var nodeList = document.getElementsByClassName(className);
149
+ for (var j = nodeList.length - 1; j >= 0; --j) {
150
+ var element = nodeList[j];
151
+ element.parentNode.removeChild(element);
152
+ }
153
+ }
154
+
155
+ this.setup();
156
+ },
157
+
158
+ setup: function() {
159
+ this.baselineHelper.setup();
160
+ this.guidelineHelper.setup();
161
+ }
162
+ };
163
+
164
+ window.addEventListener('load', function () { Cyclist.setup(); }, false);
data/vendor/cyclist-grid/dist/scss/cyclist-grid.scss ADDED
@@ -0,0 +1,5 @@
1
+ @import "partials/reset";
2
+ @import "partials/setup";
3
+ @import "partials/typography";
4
+ @import "partials/guidelines";
5
+ @import "partials/layout";
data/vendor/cyclist-grid/dist/scss/partials/_guidelines.scss ADDED
@@ -0,0 +1,33 @@
1
+ .cyclist-guidelines {
2
+ display: -webkit-flex;
3
+ display: flex;
4
+ position: absolute;
5
+ left: 0;
6
+ top: 0;
7
+ bottom: 0;
8
+ right: 0;
9
+ }
10
+
11
+ .cyclist-guidelines > div.cyclist-column {
12
+ display: -webkit-flex;
13
+ display: flex;
14
+ background-color: rgba(148, 235, 255, .25);
15
+ margin-right: $gutter-width;
16
+ -webkit-flex: 0 0 $column-width;
17
+ flex: 0 0 $column-width;
18
+ }
19
+
20
+ .cyclist-guidelines > div.cyclist-column:last-child {
21
+ margin-right: 0;
22
+ }
23
+
24
+ .cyclist-column > div.cyclist-unit {
25
+ background-color: rgba(148, 235, 255, .25);
26
+ margin-right: $gutter-width;
27
+ -webkit-flex: 0 0 $unit-width;
28
+ flex: 0 0 $unit-width;
29
+ }
30
+
31
+ .cyclist-column > div.cyclist-unit:last-child {
32
+ margin-right: 0;
33
+ }
data/vendor/cyclist-grid/dist/scss/partials/_layout.scss ADDED
@@ -0,0 +1,9 @@
1
+ @function columns-width($num-columns) {
2
+ $width: $num-columns * ($column-width + $gutter-width) - $gutter-width;
3
+ @return max($width, 0);
4
+ }
5
+
6
+ @function units-width($num-units) {
7
+ $width: $num-units * ($unit-width + $gutter-width) - $gutter-width;
8
+ @return max($width, 0);
9
+ }
data/vendor/cyclist-grid/dist/scss/partials/_reset.scss ADDED
@@ -0,0 +1,51 @@
1
+ /* Structure */
2
+ html, body, div, span {
3
+ margin: 0;
4
+ padding: 0;
5
+ border: 0;
6
+ outline: 0;
7
+ font-size: 100%;
8
+ vertical-align: baseline;
9
+ background: transparent;
10
+ }
11
+ /* Text */
12
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, ol, ul, li, strong, em {
13
+ margin: 0;
14
+ padding: 0;
15
+ border: 0;
16
+ outline: 0;
17
+ font-size: 100%;
18
+ vertical-align: baseline;
19
+ background: transparent;
20
+ }
21
+ /* Other */
22
+ applet, object, iframe, abbr, acronym, address, big, cite, code, del, dfn,
23
+ font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i,
24
+ center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody,
25
+ tfoot, thead, tr, th, td {
26
+ margin: 0;
27
+ padding: 0;
28
+ border: 0;
29
+ outline: 0;
30
+ font-size: 100%;
31
+ vertical-align: baseline;
32
+ background: transparent;
33
+ }
34
+ /* Misc */
35
+ :focus {
36
+ outline: 0;
37
+ }
38
+ table {
39
+ border-collapse: separate;
40
+ border-spacing: 0;
41
+ }
42
+ caption, th, td {
43
+ text-align: left;
44
+ font-weight: normal;
45
+ }
46
+ blockquote:before, blockquote:after, q:before, q:after {
47
+ content: "";
48
+ }
49
+ blockquote, q {
50
+ quotes: "" "";
51
+ }
data/vendor/cyclist-grid/dist/scss/partials/_setup.scss ADDED
@@ -0,0 +1,25 @@
1
+ // Line Height & Leading Variables
2
+
3
+ $font-size: false !default;
4
+ $line-height: 1.25rem !default;
5
+ $leading-height: $line-height !default;
6
+
7
+ @if unit($line-height) == "%" {
8
+ $leading-height: $line-height / 100% * 1rem;
9
+ } @else if unit($line-height) == "em" {
10
+ $leading-height: $line-height / 1em * 1rem;
11
+ }
12
+
13
+ // Grid Variables
14
+
15
+ $gutter-width: 1rem !default;
16
+ $num-indent-gutters: 2 !default;
17
+ $num-unit-gutters: 4 !default;
18
+ $num-column-units: 2 !default;
19
+
20
+ // Calculation Variables
21
+
22
+ $indent-width: $gutter-width * $num-indent-gutters !default;
23
+ $unit-width: $gutter-width * $num-unit-gutters !default;
24
+ $column-width: $unit-width * $num-column-units + $gutter-width * ($num-column-units - 1) !default;
25
+
data/vendor/cyclist-grid/dist/scss/partials/_typography.scss ADDED
@@ -0,0 +1,109 @@
1
+ @if $font-size {
2
+ html {
3
+ font-size: $font-size;
4
+ }
5
+ }
6
+
7
+ body {
8
+ line-height: $line-height;
9
+ }
10
+
11
+ @function font-size-from-ratio($ratio) {
12
+ $numerator: nth($ratio, 1);
13
+ $denumerator: nth($ratio, 2);
14
+ @return calc(1em * (#{$numerator} / #{$denumerator}));
15
+ }
16
+
17
+ @mixin header($ratio) {
18
+ $numerator: nth($ratio, 1);
19
+ $denumerator: nth($ratio, 2);
20
+ font-size: font-size-from-ratio($ratio);
21
+ $leading-multiplier: ceil($numerator / $denumerator);
22
+ line-height: calc(#{$leading-multiplier} * #{$leading-height});
23
+ margin-bottom: $leading-height;
24
+ }
25
+
26
+ $double-great-primer-ratio: 36, 12;
27
+ $double-pica-ratio: 24, 12;
28
+ $double-small-pica-ratio: 21, 12;
29
+ $great-primer-ratio: 18, 12;
30
+ $english-ratio: 14, 12;
31
+ $pica-ratio: 12, 12;
32
+ $small-pica-ratio: 11, 12;
33
+ $long-primer-ratio: 10, 12;
34
+ $bourgeois-ratio: 9, 12;
35
+ $brevier-ratio: 8, 12;
36
+ $minion-ratio: 7, 12;
37
+ $nonpareil-ratio: 6, 12;
38
+
39
+ $double-great-primer: font-size-from-ratio($double-great-primer-ratio);
40
+ $double-pica: font-size-from-ratio($double-pica-ratio);
41
+ $double-small-pica: font-size-from-ratio($double-small-pica-ratio);
42
+ $great-primer: font-size-from-ratio($great-primer-ratio);
43
+ $english: font-size-from-ratio($english-ratio);
44
+ $pica: font-size-from-ratio($pica-ratio);
45
+ $small-pica: font-size-from-ratio($small-pica-ratio);
46
+ $long-primer: font-size-from-ratio($long-primer-ratio);
47
+ $bourgeois: font-size-from-ratio($bourgeois-ratio);
48
+ $brevier: font-size-from-ratio($brevier-ratio);
49
+ $minion: font-size-from-ratio($minion-ratio);
50
+ $nonpareil: font-size-from-ratio($nonpareil-ratio);
51
+
52
+ h1 {
53
+ @include header($double-great-primer-ratio);
54
+ }
55
+
56
+ h2 {
57
+ @include header($double-pica-ratio);
58
+ }
59
+
60
+ h3 {
61
+ @include header($double-small-pica-ratio);
62
+ }
63
+
64
+ h4 {
65
+ @include header($great-primer-ratio);
66
+ }
67
+
68
+ h5 {
69
+ @include header($english-ratio);
70
+ }
71
+
72
+ h6 {
73
+ @include header($pica-ratio);
74
+ }
75
+
76
+ p,
77
+ ul,
78
+ ol {
79
+ margin-bottom: $leading-height;
80
+ }
81
+
82
+ ul ol,
83
+ ol ol,
84
+ ul ul,
85
+ ol ul {
86
+ margin-bottom: 0;
87
+ }
88
+
89
+ ul {
90
+ list-style-type: disc;
91
+ margin-left: $indent-width;
92
+ }
93
+
94
+ ol {
95
+ list-style-type: decimal;
96
+ margin-left: $indent-width;
97
+ }
98
+
99
+ sub {
100
+ line-height: 0;
101
+ vertical-align: sub;
102
+ font-size: $long-primer;
103
+ }
104
+
105
+ sup {
106
+ line-height: 0;
107
+ vertical-align: super;
108
+ font-size: $long-primer;
109
+ }
metadata ADDED
@@ -0,0 +1,115 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: cyclist-jekyll
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.10.0
5
+ platform: ruby
6
+ authors:
7
+ - Roben Kleene
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2021-08-16 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: jekyll
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ">="
18
+ - !ruby/object:Gem::Version
19
+ version: '3.5'
20
+ - - "<"
21
+ - !ruby/object:Gem::Version
22
+ version: '5.0'
23
+ type: :runtime
24
+ prerelease: false
25
+ version_requirements: !ruby/object:Gem::Requirement
26
+ requirements:
27
+ - - ">="
28
+ - !ruby/object:Gem::Version
29
+ version: '3.5'
30
+ - - "<"
31
+ - !ruby/object:Gem::Version
32
+ version: '5.0'
33
+ - !ruby/object:Gem::Dependency
34
+ name: jekyll-feed
35
+ requirement: !ruby/object:Gem::Requirement
36
+ requirements:
37
+ - - "~>"
38
+ - !ruby/object:Gem::Version
39
+ version: '0.9'
40
+ type: :runtime
41
+ prerelease: false
42
+ version_requirements: !ruby/object:Gem::Requirement
43
+ requirements:
44
+ - - "~>"
45
+ - !ruby/object:Gem::Version
46
+ version: '0.9'
47
+ - !ruby/object:Gem::Dependency
48
+ name: jekyll-seo-tag
49
+ requirement: !ruby/object:Gem::Requirement
50
+ requirements:
51
+ - - "~>"
52
+ - !ruby/object:Gem::Version
53
+ version: '2.1'
54
+ type: :runtime
55
+ prerelease: false
56
+ version_requirements: !ruby/object:Gem::Requirement
57
+ requirements:
58
+ - - "~>"
59
+ - !ruby/object:Gem::Version
60
+ version: '2.1'
61
+ description:
62
+ email:
63
+ - contact@robenkleene.com
64
+ executables: []
65
+ extensions: []
66
+ extra_rdoc_files: []
67
+ files:
68
+ - LICENSE.txt
69
+ - README.md
70
+ - _includes/footer.html
71
+ - _includes/head.html
72
+ - _includes/header.html
73
+ - _layouts/archive.html
74
+ - _layouts/default.html
75
+ - _layouts/home.html
76
+ - _layouts/link.html
77
+ - _layouts/linkpost.html
78
+ - _layouts/page.html
79
+ - _layouts/post.html
80
+ - _sass/fonts.scss
81
+ - _sass/layout.scss
82
+ - _sass/typography.scss
83
+ - assets/main.scss
84
+ - vendor/cyclist-grid/dist/css/cyclist-grid.css
85
+ - vendor/cyclist-grid/dist/js/cyclist-grid.js
86
+ - vendor/cyclist-grid/dist/scss/cyclist-grid.scss
87
+ - vendor/cyclist-grid/dist/scss/partials/_guidelines.scss
88
+ - vendor/cyclist-grid/dist/scss/partials/_layout.scss
89
+ - vendor/cyclist-grid/dist/scss/partials/_reset.scss
90
+ - vendor/cyclist-grid/dist/scss/partials/_setup.scss
91
+ - vendor/cyclist-grid/dist/scss/partials/_typography.scss
92
+ homepage: https://github.com/cyclist-grid/cyclist-jekyl
93
+ licenses:
94
+ - MIT
95
+ metadata: {}
96
+ post_install_message:
97
+ rdoc_options: []
98
+ require_paths:
99
+ - lib
100
+ required_ruby_version: !ruby/object:Gem::Requirement
101
+ requirements:
102
+ - - ">="
103
+ - !ruby/object:Gem::Version
104
+ version: '0'
105
+ required_rubygems_version: !ruby/object:Gem::Requirement
106
+ requirements:
107
+ - - ">="
108
+ - !ruby/object:Gem::Version
109
+ version: '0'
110
+ requirements: []
111
+ rubygems_version: 3.0.2
112
+ signing_key:
113
+ specification_version: 4
114
+ summary: Bicycle for the mind.
115
+ test_files: []