├── CNAME
├── Gemfile
├── index.html
├── .github
    ├── FUNDING.yml
    ├── CODE_OF_CONDUCT.md
    └── CONTRIBUTING.md
├── assets
    ├── styles.scss
    └── logo.svg
├── screenshot.png
├── .gitignore
├── 404.md
├── _includes
    ├── site-logo.html
    ├── site-header.html
    ├── site-footer.html
    ├── post-meta.html
    ├── post-pagination.html
    ├── site-nav.html
    └── post-list.html
├── _sass
    ├── garth.scss
    ├── _sassline-base.scss
    ├── _colors.scss
    ├── sassline-base
    │   ├── _reset.scss
    │   ├── _modular-scale.scss
    │   ├── _variables.scss
    │   ├── _typography.scss
    │   └── _mixins.scss
    ├── _theme.scss
    ├── _syntax.scss
    ├── _normalize.scss
    └── _flex.scss
├── _layouts
    ├── page.html
    ├── post.html
    ├── home.html
    └── default.html
├── garth-jekyll-theme.gemspec
├── LICENSE
├── _posts
    ├── 2016-08-27-example-post-one.md
    ├── 2016-08-28-example-post-two.md
    └── 2016-08-29-example-post-three.md
├── _config.yml
├── about.md
└── README.md


/CNAME:
--------------------------------------------------------------------------------
1 | garth.darn.es
2 | 


--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | source "https://rubygems.org"
2 | gemspec
3 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: home
3 | collectionpage: posts
4 | ---
5 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | custom: https://buymeacoffee.com/daviddarnes#support
2 | 


--------------------------------------------------------------------------------
/assets/styles.scss:
--------------------------------------------------------------------------------
1 | ---
2 | title: false
3 | ---
4 | 
5 | @import "garth";
6 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/daviddarnes/garth/HEAD/screenshot.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | _site/
2 | .sass-cache/
3 | .jekyll-metadata
4 | garth-jekyll-theme-*.gem
5 | Gemfile.lock
6 | **/Gemfile.lock
7 | 


--------------------------------------------------------------------------------
/404.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "404"
3 | excerpt: "Page Not Found"
4 | permalink: 404.html
5 | ---
6 | 
7 | Sorry, but the page could not be found.
8 | 


--------------------------------------------------------------------------------
/_includes/site-logo.html:
--------------------------------------------------------------------------------
1 | <a class="logo" href="{{ site.baseurl }}/">
2 |   <img src="{{ site.baseurl }}{{ site.logo }}" alt="{{ site.title }} logo"/>
3 | </a>
4 | 


--------------------------------------------------------------------------------
/_includes/site-header.html:
--------------------------------------------------------------------------------
1 | <header class="header">
2 |   <div class="container">
3 |     {% if site.logo %}{% include site-logo.html %}{% endif %}
4 |     {% include site-nav.html %}
5 |   </div>
6 | </header>
7 | 


--------------------------------------------------------------------------------
/_sass/garth.scss:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | 
 3 | // Import frameworks & theme styles
 4 | @import
 5 |   "normalize",
 6 |   "colors",
 7 |   "sassline-base",
 8 |   "syntax",
 9 |   "flex",
10 |   "theme"
11 | ;
12 | 


--------------------------------------------------------------------------------
/_includes/site-footer.html:
--------------------------------------------------------------------------------
1 | <footer class="footer">
2 |   <div class="container">
3 |     <div class="copyright  typeset">
4 |       <small class="small">&copy; {{ site.title }} {{ site.time | date: '%Y' }}</small>
5 |     </div>
6 |   </div>
7 | </footer>
8 | 


--------------------------------------------------------------------------------
/_sass/_sassline-base.scss:
--------------------------------------------------------------------------------
1 | // Import Sassline base SCSS files in order so variables are read correctly.
2 | @import "sassline-base/reset";
3 | @import "sassline-base/variables";
4 | @import "sassline-base/modular-scale";
5 | @import "sassline-base/mixins";
6 | @import "sassline-base/typography";
7 | 


--------------------------------------------------------------------------------
/_sass/_colors.scss:
--------------------------------------------------------------------------------
 1 | // Colours
 2 | $bodyColour: #46412A;
 3 | $headingColour: darken($bodyColour, 5%);
 4 | $linkColour: #5B5BFF;
 5 | $hoverColour: darken($linkColour, 10%);
 6 | $captionColour: lighten($headingColour, 40%);
 7 | $white: #fff;
 8 | 
 9 | $backgroundColour: #ffefc8;
10 | $codeBackgroundColour: darken($backgroundColour, 5%);
11 | 


--------------------------------------------------------------------------------
/_layouts/page.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | ---
 4 | 
 5 | {% include site-header.html %}
 6 | 
 7 | <main class="main  container">
 8 | 
 9 | 	<article class="article  article--page  content  typeset">
10 | 
11 |     <h1>{{ page.title }}</h1>
12 | 
13 |     {{ content }}
14 | 
15 |   </article>
16 | 
17 | </main>
18 | 
19 | {% include site-footer.html %}
20 | 


--------------------------------------------------------------------------------
/_layouts/post.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | ---
 4 | 
 5 | {% include site-header.html %}
 6 | 
 7 | <main class="main  container">
 8 | 
 9 | 	<article class="article  article--post  content  typeset">
10 | 
11 |     <h1>{{ page.title }}</h1>
12 | 		{% include post-meta.html %}
13 |     {{ content }}
14 | 
15 |   </article>
16 | 
17 | </main>
18 | 
19 | {% include site-footer.html %}
20 | 


--------------------------------------------------------------------------------
/_layouts/home.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | ---
 4 | 
 5 | {% include site-header.html %}
 6 | 
 7 | <main class="main  container">
 8 | 
 9 | 	<div class="content">
10 | 
11 |     <article class="article  article--page  typeset">
12 | 
13 | 			{% assign collectiondata = site.collections | where: "label", page.collectionpage | first %}
14 | 			<h1>{{ collectiondata.title }}</h1>
15 | 
16 | 			{{ collectiondata.description | markdownify }}
17 | 
18 |     </article>
19 | 
20 |     {% include post-list.html %}
21 | 
22 |   </div>
23 | 
24 | </main>
25 | 
26 | {% include site-footer.html %}
27 | 


--------------------------------------------------------------------------------
/_includes/post-meta.html:
--------------------------------------------------------------------------------
 1 | {% if page.categories %}
 2 |   {% capture categories %}
 3 |     {% for category in page.categories %}
 4 |       <span class="label  label--category">{{ category }}</span>{% if forloop.last == false %},{% endif %}
 5 |     {% endfor %}
 6 |   {% endcapture %}
 7 | {% elsif page.category %}
 8 |   {% capture categories %}
 9 |     <span class="label  label--category">{{ page.category }}</span>
10 |   {% endcapture %}
11 | {% endif %}
12 | 
13 | <small class="small  post-meta">
14 |   {{ categories | append: "&nbsp;&middot;&nbsp;" }}<time datetime="{{ page.date | date_to_xmlschema }}" class="time">{{ page.date | date_to_string }}</time>
15 | </small>
16 | 


--------------------------------------------------------------------------------
/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><g fill="none" fill-rule="evenodd"><path fill="#8549FC" fill-rule="nonzero" d="M11 16.21V26c.4.31 1.1.64 1.99.93A27.1 27.1 0 0 0 21 28c3.08 0 5.95-.4 8.01-1.07A7.1 7.1 0 0 0 31 26v-9.79C28.85 17.3 25.17 18 21 18s-7.85-.71-10-1.79zM33 14v12c0 2.2-5.37 4-12 4S9 28.2 9 26V14c0-2.2 5.37-4 12-4s12 1.8 12 4zm-3.99-.93A27.1 27.1 0 0 0 21 12c-3.08 0-5.95.4-8.01 1.07-.9.3-1.58.62-1.99.93.4.31 1.1.64 1.99.93A27.1 27.1 0 0 0 21 16c3.08 0 5.95-.4 8.01-1.07A7.1 7.1 0 0 0 31 14a7.1 7.1 0 0 0-1.99-.93zM15 24.5a1 1 0 0 1-2 0v-5a1 1 0 0 1 2 0v5zm7 1a1 1 0 0 1-2 0v-5a1 1 0 0 1 2 0v5zm7-1a1 1 0 0 1-2 0v-5a1 1 0 0 1 2 0v5z"/><rect width="42" height="42"/></g></svg>
2 | 


--------------------------------------------------------------------------------
/_includes/post-pagination.html:
--------------------------------------------------------------------------------
 1 | <nav class="nav  nav--paginator">
 2 | 
 3 |   {% if paginator.previous_page %}
 4 |     <a href="{{ site.baseurl }}{{ paginator.previous_page_path }}" class="pagination  pagination--previous">&larr; Previous</a>
 5 |   {% else %}
 6 |     <span class="pagination  pagination--previous">&larr; Previous</span>
 7 |   {% endif %}
 8 | 
 9 |   <span class="pagination  pagination--counter">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
10 | 
11 |   {% if paginator.next_page %}
12 |     <a href="{{ site.baseurl }}{{ paginator.next_page_path }}" class="pagination  pagination--next">Next &rarr;</a>
13 |   {% else %}
14 |     <span class="pagination  pagination--next">Next &rarr;</span>
15 |   {% endif %}
16 | 
17 | </nav>
18 | 


--------------------------------------------------------------------------------
/_includes/site-nav.html:
--------------------------------------------------------------------------------
 1 | <nav class="nav">
 2 |   <ul class="list list--nav">
 3 |     {% for item in site.pages %}
 4 |       {% unless item.title == false or item.url contains "/page" or item.url contains "/404.html" or item.url contains "/feed." %}
 5 |         <li class="item  item--nav{% if item.url == page.url %}  item--current{% endif %}">
 6 |           {% if item.collectionpage %}
 7 |             {% assign collectiondata = site.collections | where: "label", item.collectionpage | first %}
 8 |             <a href="{{ site.baseurl }}{{ item.url }}">{{ collectiondata.title }}</a>
 9 |           {% else %}
10 |             <a href="{{ site.baseurl }}{{ item.url }}">{{ item.title }}</a>
11 |           {% endif %}
12 |         </li>
13 |       {% endunless %}
14 |     {% endfor %}
15 |   </ul>
16 | </nav>
17 | 


--------------------------------------------------------------------------------
/garth-jekyll-theme.gemspec:
--------------------------------------------------------------------------------
 1 | # coding: utf-8
 2 | 
 3 | Gem::Specification.new do |spec|
 4 |   spec.name          = "garth-jekyll-theme"
 5 |   spec.version       = "1.0.5"
 6 |   spec.authors       = ["David Darnes"]
 7 |   spec.email         = ["me@daviddarnes.com"]
 8 | 
 9 |   spec.summary       = %q{A really basic theme for Jekyll.}
10 |   spec.description   = "A really basic theme for Jekyll, using the official Jekyll theme implementation."
11 |   spec.homepage      = "https://garth.darn.es"
12 |   spec.license       = "MIT"
13 | 
14 |   spec.metadata["plugin_type"] = "theme"
15 | 
16 |   spec.files         = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|_layouts|_includes|_sass|LICENSE|README)}i) }
17 | 
18 |   spec.add_runtime_dependency "jekyll", ">= 3.6", "< 5.0"
19 |   spec.add_runtime_dependency "jekyll-paginate", "~> 1.1"
20 | 
21 |   spec.add_development_dependency "bundler", ">= 1.14", "< 3.0"
22 | end
23 | 


--------------------------------------------------------------------------------
/_layouts/default.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="{{ site.lang | default: "en-US" }}">
 3 | 	<head>
 4 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 5 | 		{% if page.collectionpage %}
 6 | 			{% assign collectiondata = site.collections | where: "label", page.collectionpage | first %}
 7 | 			<title>{{ collectiondata.title }} - {{ site.title }}</title>
 8 | 		{% elsif page.title %}
 9 | 			<title>{{ page.title }} - {{ site.title }}</title>
10 | 		{% else %}
11 | 			<title>{{ site.title }}</title>
12 | 		{% endif %}
13 | 
14 | 		<link rel="stylesheet" href="{{ "/assets/styles.css" | relative_url }}">
15 | 
16 | 		{% if site.favicon %}
17 | 			<link rel="shortcut icon" href="{{ site.favicon }}">
18 | 		{% else %}
19 | 			<link rel="shortcut icon" href="{{ site.logo }}">
20 | 		{% endif %}
21 | 
22 | 	</head>
23 | 	<body>
24 | 
25 | 		{{ content }}
26 | 
27 | 		<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700|Neuton:400,700" rel="stylesheet">
28 | 	</body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/_includes/post-list.html:
--------------------------------------------------------------------------------
 1 | {% if paginator.posts %}
 2 | 
 3 |   <ul class="list  list--posts">
 4 |     {% for page in paginator.posts %}
 5 |       <li class="item  item--post">
 6 |         <article class="article  article--post  typeset">
 7 | 
 8 |           <h2><a href="{{ site.baseurl }}{{ page.url }}">{{ page.title }}</a></h2>
 9 |           {% include post-meta.html %}
10 |           {{ page.excerpt | markdownify | truncatewords: 60 }}
11 | 
12 |         </article>
13 |       </li>
14 |     {% endfor %}
15 |   </ul>
16 |   {% include post-pagination.html %}
17 | 
18 | {% else %}
19 | 
20 |   <ul class="list  list--posts">
21 |     {% for page in site.posts %}
22 |       <li class="item  item--post">
23 |         <article class="article  article--post  typeset">
24 | 
25 |           <h2><a href="{{ site.baseurl }}{{ page.url }}">{{ page.title }}</a></h2>
26 |           {% include post-meta.html %}
27 |           {{ page.excerpt | markdownify | truncatewords: 60 }}
28 | 
29 |         </article>
30 |       </li>
31 |     {% endfor %}
32 |   </ul>
33 | 
34 | {% endif %}
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 David Darnes
 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 all
13 | 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 THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/_sass/sassline-base/_reset.scss:
--------------------------------------------------------------------------------
 1 | // Reset
 2 | // ---------------------------------------
 3 | 
 4 | // Reset all the things
 5 | * { box-sizing: border-box; }
 6 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
 7 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
 8 | html, body { height: 100%; }
 9 | a img { border: none; }
10 | blockquote { quotes: none; }
11 | blockquote:before, blockquote:after { content: ''; content: none; }
12 | table { border-collapse: collapse; border-spacing: 0; }
13 | caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
14 | 


--------------------------------------------------------------------------------
/_posts/2016-08-27-example-post-one.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: What was Wayne's World?
 3 | category: General
 4 | ---
 5 | 
 6 | Wayne's World is a 1992 comedy film directed by Penelope Spheeris and starring Mike Myers as Wayne Campbell and Dana Carvey as Garth Algar. The film was adapted from a sketch of the same name on NBC's Saturday Night Live.
 7 | 
 8 | <!-- more -->
 9 | 
10 | The film grossed US$121.6 million in its theatrical run, placing it as the tenth highest-grossing film of 1992 and the highest-grossing of the 11 films based on Saturday Night Live skits. It was filmed in 34 days.
11 | 
12 | Wayne's World was Myers' feature film debut. It also features Rob Lowe, Tia Carrere, Lara Flynn Boyle, Brian Doyle-Murray, Robert Patrick (spoofing their role in Terminator 2: Judgment Day), Chris Farley, Ed O'Neill, Ione Skye, Meat Loaf, and Alice Cooper. Wayne's World was released on February 14, 1992, and was a critical and commercial success. A sequel, Wayne's World 2, was released on December 10, 1993. In 2000, readers of Total Film magazine voted Wayne's World the 41st-greatest comedy film of all time.
13 | 
14 | _Originally from [Wayne's World (film) - Wikipedia](https://en.wikipedia.org/wiki/Wayne%27s_World_(film))_
15 | 


--------------------------------------------------------------------------------
/_posts/2016-08-28-example-post-two.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Who is Mike Myers?
 3 | category: People
 4 | ---
 5 | 
 6 | Michael John "Mike" Myers (born May 25, 1963) is a Canadian-born performer, comedian, screenwriter, and film producer, who also holds UK and US citizenship.[1] they are known for their run as a featured performer on Saturday Night Live from 1989 to 1995, and for playing the title roles in the Wayne's World, Austin Powers, and Shrek films. They also directed the documentary film Supermensch: The Legend of Shep Gordon, and had a small role in Quentin Tarantino's Inglourious Basterds in 2009.
 7 | 
 8 | <!-- more -->
 9 | 
10 | Myers was born on May 25, 1963 in Scarborough, Ontario, the child of English-born parents Eric Myers (1922–1991), an insurance agent, and their spouse, Alice E. (née Hind; born 1926), an office supervisor and a veteran of the Royal Air Force.
11 | 
12 | Both their parents were from Liverpool and they have two older siblings, Paul, an indie rock singer-songwriter, broadcaster and author, and Peter, a Sears Canada employee.
13 | 
14 | Myers reportedly holds Canadian, U.S. and British citizenship.
15 | 
16 | Myers grew up in North York and then Scarborough, where they attended Sir John A. MacDonald Collegiate Institute and then graduated from Stephen Leacock Collegiate Institute in 1982.
17 | 
18 | _Originally from [Mike Myers - Wikipedia](https://en.wikipedia.org/wiki/Mike_Myers)_
19 | 


--------------------------------------------------------------------------------
/_posts/2016-08-29-example-post-three.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Who is Dana Carvey?
 3 | category: People
 4 | ---
 5 | 
 6 | Dana Thomas Carvey (born June 2, 1955) is a performer and stand-up comedian known for their work as a cast member on Saturday Night Live and for playing the role of Garth Algar in the Wayne's World films.
 7 | 
 8 | <!-- more -->
 9 | 
10 | Carvey was born in Missoula, Montana, the child of Billie Dahl, a schoolteacher, and Bud Carvey, a high-school business teacher. Carvey is the sibling of Brad Carvey, the engineer/designer of the Video Toaster. The character Garth Algar is loosely based on Brad. Carvey has English, German, Irish, Norwegian, and Swedish ancestry, and was raised Lutheran. When they were three years old, their family moved to San Carlos, California, in the San Francisco Bay Area. They received their first drum kit at an early age. They attended Tierra Linda Junior High in San Carlos, Carlmont High School in Belmont, California (where they were a member of the Central Coast Section champion cross country team), College of San Mateo in San Mateo, California, and received their bachelor's degree in broadcast communications from San Francisco State University.
11 | 
12 | They had a minor role in Halloween II, and co-starred on One of the Boys in 1982, a short-lived television sitcom that also starred Mickey Rooney, Nathan Lane, and Meg Ryan. In 1984, Carvey had a small role in Rob Reiner's film This Is Spinal Tap, in which they played a mime, with comedian Billy Crystal (who tells them "Mime is money!"). They also appeared in the short-lived film-based action television series Blue Thunder.
13 | 
14 | _Originally from [Dana Carvey - Wikipedia](https://en.wikipedia.org/wiki/Dana_Carvey)_
15 | 


--------------------------------------------------------------------------------
/_sass/sassline-base/_modular-scale.scss:
--------------------------------------------------------------------------------
 1 | // Modular scale
 2 | // ---------------------------------------
 3 | 
 4 | // Setting responsive modular-scales. Use appropriate scales for viewport sizes.
 5 | $modular-scale: (
 6 |   // Major Third http://www.modularscale.com/?16,28&px&1.25&web&text
 7 |   scale-0: (
 8 |     alpha:   28.0,
 9 |     beta:    25.0,
10 |     gamma:   22.4,
11 |     delta:   20.0,
12 |     epsilon: 17.9,
13 |     zeta:    16.0,
14 |     eta:     14.3,
15 |     theta:   12.8,
16 |     iota:    11.5
17 |   ),
18 |   // Major Third http://www.modularscale.com/?17,30&px&1.25&web&text
19 |   scale-1: (
20 |     alpha:   30.0,
21 |     beta:    26.6,
22 |     gamma:   24.0,
23 |     delta:   21.3,
24 |     epsilon: 19.2,
25 |     zeta:    17.0,
26 |     eta:     15.3,
27 |     theta:   13.6,
28 |     iota:    12.8
29 |   ),
30 |   // Major Third http://www.modularscale.com/?18,32&px&1.25&web&text
31 |   scale-2: (
32 |     alpha:   32.0,
33 |     beta:    28.1,
34 |     gamma:   25.6,
35 |     delta:   22.5,
36 |     epsilon: 20.5,
37 |     zeta:    18.0,
38 |     eta:     16.3,
39 |     theta:   14.4,
40 |     iota:    13.1
41 |   ),
42 |   // Perfect Fourth http://www.modularscale.com/?20,40&px&1.333&web&text
43 |   scale-3: (
44 |     alpha:   40.0,
45 |     beta:    35.5,
46 |     gamma:   30.0,
47 |     delta:   26.7,
48 |     epsilon: 22.5,
49 |     zeta:    20.0,
50 |     eta:     16.9,
51 |     theta:   15.0,
52 |     iota:    12.7
53 |   ),
54 |   // Aug. Fourth http://www.modularscale.com/?22,50&px&1.414&web&text
55 |   scale-4: (
56 |     alpha:   50.0,
57 |     beta:    43.9,
58 |     gamma:   35.3,
59 |     delta:   31.1,
60 |     epsilon: 25.0,
61 |     zeta:    22.0,
62 |     eta:     17.6,
63 |     theta:   15.6,
64 |     iota:    12.5
65 |   )
66 | );
67 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
 1 | # Site configuration
 2 | # 1. Files excluded from Jekyll builds
 3 | # 2. Installed Gems
 4 | # 3. Gem settings
 5 | # 4. Jekyll settings
 6 | # 5. Collections
 7 | # 6. Jekyll collections settings
 8 | # 7. Site settings
 9 | 
10 | # 1. Files excluded from Jekyll builds
11 | exclude:
12 | - README.md
13 | - CODE_OF_CONDUCT.md
14 | - CONTRIBUTING.md
15 | - screenshot.png
16 | - LICENSE
17 | - CNAME
18 | - Gemfile
19 | - Gemfile.lock
20 | - garth-jekyll-theme.gemspec
21 | 
22 | # 2. Installed Gems
23 | plugins:
24 | - jekyll-paginate
25 | 
26 | # 3. Gem settings
27 | paginate: 2 # jekyll-paginate > items per page
28 | paginate_path: page:num # jekyll-paginate > blog page
29 | 
30 | # 4. Jekyll settings
31 | sass:
32 |   style: compressed # Style compression
33 | permalink: pretty  # Permalink style (/YYYY/MM/DD/page-name/)
34 | excerpt_separator: <!-- more --> # Marks end of excerpt in posts
35 | timezone: Europe/London # Timezone for blog posts and alike
36 | 
37 | # 5. Collections
38 | collections:
39 |   posts:
40 |     title: Blog # Needed for Siteleaf
41 |     output: true
42 |     description: "This is merely a demo, find out more [about Garth](about)" # The post list page content
43 | 
44 | # 6. Jekyll collections settings
45 | defaults:
46 |   -
47 |     scope:
48 |       path: ""
49 |       type: pages
50 |     values:
51 |       layout: page # Default layout
52 |   -
53 |     scope:
54 |       path: ""
55 |       type: posts
56 |     values:
57 |       layout: post # Default layout
58 | 
59 | # 7. Site settings
60 | encoding: utf-8 # Make sure the encoding is right
61 | title: "Garth" # Site name or title
62 | logo: "/assets/logo.svg" # Site logo
63 | # favicon: "/favicon.ico" # Uncomment to add custom favicon, or leave as is to use site logo
64 | description: "A really basic theme for Jekyll, using the official Jekyll theme implementation" # Site description and default description
65 | url: "https://garth.darn.es" # Site url
66 | baseurl: ""
67 | lang: en-GB
68 | 


--------------------------------------------------------------------------------
/about.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: About Garth
 3 | ---
 4 | 
 5 | A really basic theme for Jekyll, using the official Jekyll theme implementation.
 6 | 
 7 | - [Fork on GitHub](https://github.com/daviddarnes/garth)
 8 | - [Install Garth](https://github.com/daviddarnes/garth#installation)
 9 | 
10 | [<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" width="217"/>](https://buymeacoffee.com/daviddarnes#support)
11 | 
12 | ## Installation
13 | 
14 | ### As a Jekyll theme
15 | 
16 | 1. Add `gem "garth-jekyll-theme"` to your `Gemfile` to add the theme as a dependancy
17 | 2. Run the command `bundle install` in the root of project to install the theme and its dependancies
18 | 3. Add `theme: garth-jekyll-theme` to your `_config.yml` file to set the site theme
19 | 4. Run `bundle exec jekyll serve` to build and serve your site
20 | 5. Done! Use the example [`_config.yml`](https://github.com/daviddarnes/garth/blob/master/_config.yml) file to set site-wide options
21 | 
22 | ### As a GitHub Pages remote theme
23 | 
24 | 1. Add `gem "jekyll-remote-theme"` to your `Gemfile` to add the theme as a dependancy
25 | 2. Run the command `bundle install` in the root of project to install the jekyll remote theme gem as a dependancy
26 | 3. Add `jekyll-remote-theme` to the list of `plugins` in your `_config.yml` file
27 | 4. Add `remote_theme: daviddarnes/garth` to your `_config.yml` file to set the site theme
28 | 5. Run `bundle exec jekyll serve` to build and serve your site
29 | 6. Done! Use the example [`_config.yml`](https://github.com/daviddarnes/garth/blob/master/_config.yml) file to set site-wide options
30 | 
31 | ### As a Boilerplate / Fork
32 | 
33 | _(deprecated, not recommended)_
34 | 
35 | 1. [Fork the repo](https://github.com/daviddarnes/garth#fork-destination-box)
36 | 2. Replace the `Gemfile` with one stating all the gems used in your project
37 | 3. Delete the following unnecessary files/folders: `CODE_OF_CONDUCT.md`, `CONTRIBUTING.md`, `LICENSE`, `screenshot.png`, `CNAME` and `garth-jekyll-theme.gemspec`
38 | 4. Run the command `bundle install` in the root of project to install the jekyll remote theme gem as a dependancy
39 | 5. Run `bundle exec jekyll serve` to build and serve your site
40 | 6. Done! Use the example [`_config.yml`](https://github.com/daviddarnes/garth/blob/master/_config.yml) file to set site-wide options
41 | 


--------------------------------------------------------------------------------
/_sass/_theme.scss:
--------------------------------------------------------------------------------
  1 | // Structural elements
  2 | body {
  3 |   background: $backgroundColour;
  4 |   color: $bodyColour;
  5 |   height: 100%;
  6 |   display: flex;
  7 |   @include flex-direction(column);
  8 |   overflow-x: hidden;
  9 | }
 10 | 
 11 | .container {
 12 |   width: 90%;
 13 |   max-width: 900px;
 14 |   margin: 0 auto;
 15 | }
 16 | 
 17 | 
 18 | // Header, feature and footer
 19 | .header,
 20 | .footer {
 21 |   .container {
 22 |     padding: 1rem 0;
 23 |     @include flexbox;
 24 |     @include flex-direction(column);
 25 |     @include align-items(center);
 26 |     text-align: center;
 27 |   }
 28 |   @include breakpoint(break-1) {
 29 |     .container {
 30 |       @include flex-direction(row);
 31 |       @include justify-content(space-between);
 32 |       text-align: inherit;
 33 |     }
 34 |   }
 35 | }
 36 | 
 37 | .header {
 38 |   @include flex(0, 0, auto);
 39 |   background: darken($backgroundColour, 10%);
 40 | }
 41 | 
 42 | .logo {
 43 |   display: inline-block;
 44 |   line-height: 0;
 45 |   border-radius: 100%;
 46 |   overflow: hidden;
 47 |   img {
 48 |     width: 4rem;
 49 |     height: 4rem;
 50 |   }
 51 | }
 52 | 
 53 | .small {
 54 |   padding-top: .6rem;
 55 |   color: $captionColour;
 56 |   display: inline-block;
 57 | }
 58 | 
 59 | .footer {
 60 |   border-top: 1px solid darken($backgroundColour, 15%);
 61 | }
 62 | 
 63 | 
 64 | // Nav and copyright
 65 | .nav {
 66 |   &--paginator {
 67 |     @include flexbox;
 68 |     @include justify-content(center);
 69 |     color: $captionColour;
 70 |     text-align: center;
 71 |   }
 72 | }
 73 | 
 74 | .pagination {
 75 |   margin: 0 1rem;
 76 | }
 77 | 
 78 | 
 79 | // Main content
 80 | .main {
 81 |   @include flexbox;
 82 |   @include flex-direction(column);
 83 |   @include flex(1, 0, auto);
 84 |   margin-bottom: 1.6rem;
 85 |   @include breakpoint(break-1) {
 86 |     @include flex-direction(row);
 87 |   }
 88 | }
 89 | 
 90 | 
 91 | // Lists
 92 | .list {
 93 |   &--posts {
 94 |     list-style: none;
 95 |   }
 96 |   &--nav {
 97 |     list-style: none;
 98 |   }
 99 |   .item--post {
100 |     margin-left: 0;
101 |   }
102 | }
103 | 
104 | .item {
105 |   &--nav {
106 |     display: inline-block;
107 |     margin-left: 1rem;
108 |     &:first-of-type {
109 |       margin-left: 0;
110 |     }
111 |   }
112 |   &--current {
113 |     a {
114 |       color: desaturate($linkColour, 100%);
115 |     }
116 |   }
117 | }
118 | 
119 | 
120 | // Images and media elements
121 | img {
122 |   max-width: 100%;
123 |   height: auto;
124 | }
125 | 
126 | audio,
127 | video {
128 |   width: 100%;
129 | }
130 | 
131 | 
132 | // Text selection
133 | ::selection {
134 |   background: $headingColour;
135 |   color: $white;
136 |   text-shadow: none;
137 | }
138 | 
139 | 
140 | // Sassline overrides
141 | .typeset {
142 |   a > code {
143 |     text-shadow: none;
144 |   }
145 |   .button,
146 |   button {
147 |     background-image: none;
148 |     text-shadow: none;
149 |     color: $backgroundColour;
150 |     &:hover,
151 |     &:active,
152 |     &:focus {
153 |       background-image: none;
154 |       color: $backgroundColour;
155 |     }
156 |   }
157 |   hr {
158 |     width: 100%;
159 |   }
160 |   li {
161 |     > p {
162 |       padding: 0;
163 |       margin: 0;
164 |     }
165 |   }
166 |   .nav a {
167 |     padding-left: 0;
168 |     padding-right: 0;
169 |     margin-left: .2rem;
170 |     margin-right: .2rem;
171 |   }
172 |   pre {
173 |     white-space: pre;
174 |     overflow-x: scroll;
175 |   }
176 | }
177 | 


--------------------------------------------------------------------------------
/_sass/_syntax.scss:
--------------------------------------------------------------------------------
 1 | .hll { background-color: #ffffcc }
 2 | .c { color: #999988; font-style: italic } /* Comment */
 3 | .err { color: #a61717; background-color: #e3d2d2 } /* Error */
 4 | .k { color: #000000; font-weight: bold } /* Keyword */
 5 | .o { color: #000000; font-weight: bold } /* Operator */
 6 | .cm { color: #999988; font-style: italic } /* Comment.Multiline */
 7 | .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
 8 | .c1 { color: #999988; font-style: italic } /* Comment.Single */
 9 | .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
10 | .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
11 | .ge { color: #000000; font-style: italic } /* Generic.Emph */
12 | .gr { color: #aa0000 } /* Generic.Error */
13 | .gh { color: #999999 } /* Generic.Heading */
14 | .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
15 | .go { color: #888888 } /* Generic.Output */
16 | .gp { color: #555555 } /* Generic.Prompt */
17 | .gs { font-weight: bold } /* Generic.Strong */
18 | .gu { color: #aaaaaa } /* Generic.Subheading */
19 | .gt { color: #aa0000 } /* Generic.Traceback */
20 | .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
21 | .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
22 | .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
23 | .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
24 | .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
25 | .kt { color: #445588; font-weight: bold } /* Keyword.Type */
26 | .m { color: #009999 } /* Literal.Number */
27 | .s { color: #d01040 } /* Literal.String */
28 | .na { color: #008080 } /* Name.Attribute */
29 | .nb { color: #0086B3 } /* Name.Builtin */
30 | .nc { color: #445588; font-weight: bold } /* Name.Class */
31 | .no { color: #008080 } /* Name.Constant */
32 | .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
33 | .ni { color: #800080 } /* Name.Entity */
34 | .ne { color: #990000; font-weight: bold } /* Name.Exception */
35 | .nf { color: #990000; font-weight: bold } /* Name.Function */
36 | .nl { color: #990000; font-weight: bold } /* Name.Label */
37 | .nn { color: #555555 } /* Name.Namespace */
38 | .nt { color: #000080 } /* Name.Tag */
39 | .nv { color: #008080 } /* Name.Variable */
40 | .ow { color: #000000; font-weight: bold } /* Operator.Word */
41 | .w { color: #bbbbbb } /* Text.Whitespace */
42 | .mf { color: #009999 } /* Literal.Number.Float */
43 | .mh { color: #009999 } /* Literal.Number.Hex */
44 | .mi { color: #009999 } /* Literal.Number.Integer */
45 | .mo { color: #009999 } /* Literal.Number.Oct */
46 | .sb { color: #d01040 } /* Literal.String.Backtick */
47 | .sc { color: #d01040 } /* Literal.String.Char */
48 | .sd { color: #d01040 } /* Literal.String.Doc */
49 | .s2 { color: #d01040 } /* Literal.String.Double */
50 | .se { color: #d01040 } /* Literal.String.Escape */
51 | .sh { color: #d01040 } /* Literal.String.Heredoc */
52 | .si { color: #d01040 } /* Literal.String.Interpol */
53 | .sx { color: #d01040 } /* Literal.String.Other */
54 | .sr { color: #009926 } /* Literal.String.Regex */
55 | .s1 { color: #d01040 } /* Literal.String.Single */
56 | .ss { color: #990073 } /* Literal.String.Symbol */
57 | .bp { color: #999999 } /* Name.Builtin.Pseudo */
58 | .vc { color: #008080 } /* Name.Variable.Class */
59 | .vg { color: #008080 } /* Name.Variable.Global */
60 | .vi { color: #008080 } /* Name.Variable.Instance */
61 | .il { color: #009999 } /* Literal.Number.Integer.Long */
62 | 


--------------------------------------------------------------------------------
/_sass/sassline-base/_variables.scss:
--------------------------------------------------------------------------------
 1 | // SCSS variables
 2 | // ---------------------------------------
 3 | 
 4 | // Note: For the following Sass maps enter values as if they would be px units.
 5 | 
 6 | // Breakpoint sizes from px to ems. Add more values here to add more breakpoints.
 7 | // Change names if you prefer, it wont break the mixin as long as they are strings not just numbers.
 8 | $breakpoints: (
 9 |   break-0: 0,     // 0px       Mobile first
10 |   break-1: 640,   // 640px   ~ Small tablet up
11 |   break-2: 800,   // 800px   ~ Large tablet up
12 |   break-3: 1024,  // 1024px  ~ Desktop up
13 |   break-4: 1600   // 1600px  ~ Large desktop up
14 | ) !default;
15 | 
16 | // Root font-sizes for each breakpoint. Set to half desired line-height of body text.
17 | // ! Make sure to have as many sizes as breakpoints above.
18 | $rootsizes: (
19 |   rootsize-0: 12,   // 24px line-height body text
20 |   rootsize-1: 14,   // 28px line-height body text
21 |   rootsize-2: 15,   // 30px line-height body text
22 |   rootsize-3: 17,   // 34px line-height body text
23 |   rootsize-4: 19    // 38px line-height body text
24 | ) !default;
25 | 
26 | // Set the optimum line-length for your text (based on typeface).
27 | // Aim for 75–100 characters a line when possible, at smaller sizes type size is more important.
28 | // ! Make sure to have as many widths as breakpoints above.
29 | // Note: this was 'maxwidths' in previous versions.
30 | $measures: (
31 |   measure-0: 500,  // 500px wide
32 |   measure-1: 550,  // 550px wide
33 |   measure-2: 600,  // 600px wide
34 |   measure-3: 680,  // 680px wide
35 |   measure-4: 750   // 750px wide
36 | ) !default;
37 | 
38 | // Set the max-widths for containers (based on design).
39 | // ! Make sure to have as many widths as breakpoints above.
40 | $maxwidths: (
41 |   width-0: 500,  // 500px wide
42 |   width-1: 600,  // 600px wide
43 |   width-2: 800,  // 800px wide
44 |   width-3: 1100, // 110px wide
45 |   width-4: 1300  // 1300px wide
46 | ) !default;
47 | 
48 | // Gutter widths
49 | $gutterwidths: (
50 |   small: 1rem,
51 |   medium: 2rem,
52 |   large: 4rem
53 | ) !default;
54 | 
55 | // Add typefaces here.
56 | // Add weight and style details too.
57 | // ! Set cap height to set to the baseline.
58 | $bodytype: (
59 |   font-family: '"Alegreya Sans", sans-serif',
60 |   regular: 400,
61 |   bold: 700,
62 |   italic: italic,
63 |   cap-height: 0.66
64 | ) !default;
65 | 
66 | $headingtype: (
67 |   font-family: '"Neuton", serif',
68 |   regular: 400,
69 |   bold: 700,
70 |   cap-height: 0.66
71 | ) !default;
72 | 
73 | $monospacetype: (
74 |   font-family: 'Menlo, monospace',
75 |   regular: 400,
76 |   cap-height: 0.68
77 | ) !default;
78 | 
79 | // Here are some local fonts cap-height sizes to get you started:
80 | // Georgia: 0.66, Times / Times New Roman: 0.65, Palatino: 0.52
81 | // Lucida Grande: 0.72, Helvetica: 0.66, Verdana: 0.76, Tahoma: 0.76
82 | 
83 | // Selection of Typekit fonts cap-height sizes:
84 | // Proxima Nova: 0.57, Museo Slab: 0.66, JAF Facit: 0.7, Brandon Grotesque: 0.65, Clavo: 0.7, Adelle: 0.66, FF Tisa Pro: 0.82, Jubilat: 0.66, Futura PT: 0.66, Chaparral Pro: 0.5, Minion Pro: 0.66, Myriad Pro: 0.66, Adobe Caslon Pro: 0.36
85 | 
86 | // Text colours. British English.
87 | $headingColour: #2E2E2E !default;
88 | $bodyColour: #494949 !default;
89 | $linkColour: #0E58F5 !default;
90 | $hoverColour: #0B348B !default;
91 | $captionColour: #BDC8CC !default;
92 | $white: #FFFFFF !default;
93 | 
94 | // Background colours.
95 | $backgroundColour: #FCFCFC !default;
96 | $codeBackgroundColour: #F5F4F2 !default;
97 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [Garth](https://garth.darn.es/)
 2 | [![Gem Version](https://badge.fury.io/rb/garth-jekyll-theme.svg)](https://badge.fury.io/rb/garth-jekyll-theme)
 3 | 
 4 | 🥁 A really basic theme for Jekyll, using the official Jekyll theme implementation.
 5 | 
 6 | [<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" width="217"/>](https://buymeacoffee.com/daviddarnes#support)
 7 | 
 8 | ![Screenshot](https://raw.githubusercontent.com/daviddarnes/garth/master/screenshot.png)
 9 | 
10 | ## Contents
11 | - [Installation](#installation)
12 | - [Customising](#customising)
13 | - [Site settings](#site-settings)
14 | - [Page layouts](#page-layouts)
15 | - [Credits](#credits)
16 | 
17 | ## Installation
18 | 
19 | ### Quick setup
20 | 
21 | To give you a running start I've put together some starter kits that you can download, fork or even deploy immediately:
22 | 
23 | - Vanilla Jekyll starter kit:  
24 |   [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/daviddarnes/garth-kit)
25 | - Stackbit starter kit:  
26 |   [![Create with Stackbit](https://assets.stackbit.com/badge/create-with-stackbit.svg)](https://app.stackbit.com/create?theme=https://github.com/daviddarnes/garth-stackbit-kit)
27 | - GitHub Pages with remote theme kit - **[Download kit](https://github.com/daviddarnes/garth-kit/archive/remote-theme.zip)**
28 | 
29 | ### As a Jekyll theme
30 | 
31 | 1. Add `gem "garth-jekyll-theme"` to your `Gemfile` to add the theme as a dependancy
32 | 2. Run the command `bundle install` in the root of project to install the theme and its dependancies
33 | 3. Add `theme: garth-jekyll-theme` to your `_config.yml` file to set the site theme
34 | 4. Run `bundle exec jekyll serve` to build and serve your site
35 | 5. Done! Use the example [`_config.yml`](https://github.com/daviddarnes/garth/blob/master/_config.yml) file to set site-wide options
36 | 
37 | ### As a GitHub Pages remote theme
38 | 
39 | 1. Add `gem "jekyll-remote-theme"` to your `Gemfile` to add the theme as a dependancy
40 | 2. Run the command `bundle install` in the root of project to install the jekyll remote theme gem as a dependancy
41 | 3. Add `jekyll-remote-theme` to the list of `plugins` in your `_config.yml` file
42 | 4. Add `remote_theme: daviddarnes/garth` to your `_config.yml` file to set the site theme
43 | 5. Run `bundle exec jekyll serve` to build and serve your site
44 | 6. Done! Use the example [`_config.yml`](https://github.com/daviddarnes/garth/blob/master/_config.yml) file to set site-wide options
45 | 
46 | ### As a Boilerplate / Fork
47 | 
48 | _(deprecated, not recommended)_
49 | 
50 | 1. [Fork the repo](https://github.com/daviddarnes/garth#fork-destination-box)
51 | 2. Replace the `Gemfile` with one stating all the gems used in your project
52 | 3. Delete the following unnecessary files/folders: `CODE_OF_CONDUCT.md`, `CONTRIBUTING.md`, `LICENSE`, `screenshot.png`, `CNAME` and `garth-jekyll-theme.gemspec`
53 | 4. Run the command `bundle install` in the root of project to install the jekyll remote theme gem as a dependancy
54 | 5. Run `bundle exec jekyll serve` to build and serve your site
55 | 6. Done! Use the example [`_config.yml`](https://github.com/daviddarnes/garth/blob/master/_config.yml) file to set site-wide options
56 | 
57 | ## Customising
58 | 
59 | When using Garth as a theme means you can take advantage of the file overriding method. This allows you to overwrite any file in this theme with your own custom file, by matching the file name and path. The most common example of this would be if you want to add your own styles or change the core style settings.
60 | 
61 | To add your own styles copy the [`styles.scss`](https://github.com/daviddarnes/garth/blob/master/assets/styles.scss) into your own project with the same file path (`assets/styles.scss`). From there you can add your own styles, you can even optionally ignore the theme styles by removing the `@import "garth";` line.
62 | 
63 | If you're looking to set your own colours copy the [`_colors.scss`](https://github.com/daviddarnes/garth/blob/master/_sass/_colors.scss) and main theme styles file [`garth.scss`](https://github.com/daviddarnes/garth/blob/master/_sass/garth.scss) into your project at the same file path (`_sass/`) and change variables however you wish. The settings are a mixture of custom variables and settings from [Sassline](https://medium.com/@jakegiltsoff/sassline-v2-0-e424b2881e7e) - follow the link to find out how to configure the typographic settings.
64 | 
65 | ## Site settings
66 | 
67 | You'll need to change the `description`, `title` and `url` to match with the project.
68 | 
69 | ## Page layouts
70 | 
71 | There are 3 layouts; `page`, `post` and `home` (home acts as the font page blog).
72 | 
73 | > **Note:** The Post List Page options are actually in the collection data within the `_config.yml` file, this is so they can be edited with CMSs such as [Siteleaf](https://siteleaf.com)
74 | 
75 | ## Credits
76 | 
77 | - Thanks to [Sassline](https://sassline.com/) for the typographic basis, by [Jake Giltsoff](https://twitter.com/jakegiltsoff)
78 | - Thanks to [Flexbox mixin](https://github.com/mastastealth/sass-flex-mixin) by [Brian Franco](https://twitter.com/brianfranco)
79 | - Thanks to [Normalize](https://necolas.github.io/normalize.css/) by [Nicolas Gallagher](https://twitter.com/necolas) and [Jonathan Neal](https://twitter.com/jon_neal).
80 | - Thanks to [pygments-css](http://richleland.github.io/pygments-css/) for the autumn syntax highlighting, by [Rich Leland](https://twitter.com/richleland)
81 | 


--------------------------------------------------------------------------------
/_sass/_normalize.scss:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /**
  4 |  * 1. Change the default font family in all browsers (opinionated).
  5 |  * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
  6 |  */
  7 | 
  8 | html {
  9 |   font-family: sans-serif; /* 1 */
 10 |   -ms-text-size-adjust: 100%; /* 2 */
 11 |   -webkit-text-size-adjust: 100%; /* 2 */
 12 | }
 13 | 
 14 | /**
 15 |  * Remove the margin in all browsers (opinionated).
 16 |  */
 17 | 
 18 | body {
 19 |   margin: 0;
 20 | }
 21 | 
 22 | /* HTML5 display definitions
 23 |    ========================================================================== */
 24 | 
 25 | /**
 26 |  * Add the correct display in IE 9-.
 27 |  * 1. Add the correct display in Edge, IE, and Firefox.
 28 |  * 2. Add the correct display in IE.
 29 |  */
 30 | 
 31 | article,
 32 | aside,
 33 | details, /* 1 */
 34 | figcaption,
 35 | figure,
 36 | footer,
 37 | header,
 38 | main, /* 2 */
 39 | menu,
 40 | nav,
 41 | section,
 42 | summary { /* 1 */
 43 |   display: block;
 44 | }
 45 | 
 46 | /**
 47 |  * Add the correct display in IE 9-.
 48 |  */
 49 | 
 50 | audio,
 51 | canvas,
 52 | progress,
 53 | video {
 54 |   display: inline-block;
 55 | }
 56 | 
 57 | /**
 58 |  * Add the correct display in iOS 4-7.
 59 |  */
 60 | 
 61 | audio:not([controls]) {
 62 |   display: none;
 63 |   height: 0;
 64 | }
 65 | 
 66 | /**
 67 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 68 |  */
 69 | 
 70 | progress {
 71 |   vertical-align: baseline;
 72 | }
 73 | 
 74 | /**
 75 |  * Add the correct display in IE 10-.
 76 |  * 1. Add the correct display in IE.
 77 |  */
 78 | 
 79 | template, /* 1 */
 80 | [hidden] {
 81 |   display: none;
 82 | }
 83 | 
 84 | /* Links
 85 |    ========================================================================== */
 86 | 
 87 | /**
 88 |  * 1. Remove the gray background on active links in IE 10.
 89 |  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 90 |  */
 91 | 
 92 | a {
 93 |   background-color: transparent; /* 1 */
 94 |   -webkit-text-decoration-skip: objects; /* 2 */
 95 | }
 96 | 
 97 | /**
 98 |  * Remove the outline on focused links when they are also active or hovered
 99 |  * in all browsers (opinionated).
100 |  */
101 | 
102 | a:active,
103 | a:hover {
104 |   outline-width: 0;
105 | }
106 | 
107 | /* Text-level semantics
108 |    ========================================================================== */
109 | 
110 | /**
111 |  * 1. Remove the bottom border in Firefox 39-.
112 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
113 |  */
114 | 
115 | abbr[title] {
116 |   border-bottom: none; /* 1 */
117 |   text-decoration: underline; /* 2 */
118 |   text-decoration: underline dotted; /* 2 */
119 | }
120 | 
121 | /**
122 |  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
123 |  */
124 | 
125 | b,
126 | strong {
127 |   font-weight: inherit;
128 | }
129 | 
130 | /**
131 |  * Add the correct font weight in Chrome, Edge, and Safari.
132 |  */
133 | 
134 | b,
135 | strong {
136 |   font-weight: bolder;
137 | }
138 | 
139 | /**
140 |  * Add the correct font style in Android 4.3-.
141 |  */
142 | 
143 | dfn {
144 |   font-style: italic;
145 | }
146 | 
147 | /**
148 |  * Correct the font size and margin on `h1` elements within `section` and
149 |  * `article` contexts in Chrome, Firefox, and Safari.
150 |  */
151 | 
152 | h1 {
153 |   font-size: 2em;
154 |   margin: 0.67em 0;
155 | }
156 | 
157 | /**
158 |  * Add the correct background and color in IE 9-.
159 |  */
160 | 
161 | mark {
162 |   background-color: #ff0;
163 |   color: #000;
164 | }
165 | 
166 | /**
167 |  * Add the correct font size in all browsers.
168 |  */
169 | 
170 | small {
171 |   font-size: 80%;
172 | }
173 | 
174 | /**
175 |  * Prevent `sub` and `sup` elements from affecting the line height in
176 |  * all browsers.
177 |  */
178 | 
179 | sub,
180 | sup {
181 |   font-size: 75%;
182 |   line-height: 0;
183 |   position: relative;
184 |   vertical-align: baseline;
185 | }
186 | 
187 | sub {
188 |   bottom: -0.25em;
189 | }
190 | 
191 | sup {
192 |   top: -0.5em;
193 | }
194 | 
195 | /* Embedded content
196 |    ========================================================================== */
197 | 
198 | /**
199 |  * Remove the border on images inside links in IE 10-.
200 |  */
201 | 
202 | img {
203 |   border-style: none;
204 | }
205 | 
206 | /**
207 |  * Hide the overflow in IE.
208 |  */
209 | 
210 | svg:not(:root) {
211 |   overflow: hidden;
212 | }
213 | 
214 | /* Grouping content
215 |    ========================================================================== */
216 | 
217 | /**
218 |  * 1. Correct the inheritance and scaling of font size in all browsers.
219 |  * 2. Correct the odd `em` font sizing in all browsers.
220 |  */
221 | 
222 | code,
223 | kbd,
224 | pre,
225 | samp {
226 |   font-family: monospace, monospace; /* 1 */
227 |   font-size: 1em; /* 2 */
228 | }
229 | 
230 | /**
231 |  * Add the correct margin in IE 8.
232 |  */
233 | 
234 | figure {
235 |   margin: 1em 40px;
236 | }
237 | 
238 | /**
239 |  * 1. Add the correct box sizing in Firefox.
240 |  * 2. Show the overflow in Edge and IE.
241 |  */
242 | 
243 | hr {
244 |   box-sizing: content-box; /* 1 */
245 |   height: 0; /* 1 */
246 |   overflow: visible; /* 2 */
247 | }
248 | 
249 | /* Forms
250 |    ========================================================================== */
251 | 
252 | /**
253 |  * 1. Change font properties to `inherit` in all browsers (opinionated).
254 |  * 2. Remove the margin in Firefox and Safari.
255 |  */
256 | 
257 | button,
258 | input,
259 | select,
260 | textarea {
261 |   font: inherit; /* 1 */
262 |   margin: 0; /* 2 */
263 | }
264 | 
265 | /**
266 |  * Restore the font weight unset by the previous rule.
267 |  */
268 | 
269 | optgroup {
270 |   font-weight: bold;
271 | }
272 | 
273 | /**
274 |  * Show the overflow in IE.
275 |  * 1. Show the overflow in Edge.
276 |  */
277 | 
278 | button,
279 | input { /* 1 */
280 |   overflow: visible;
281 | }
282 | 
283 | /**
284 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
285 |  * 1. Remove the inheritance of text transform in Firefox.
286 |  */
287 | 
288 | button,
289 | select { /* 1 */
290 |   text-transform: none;
291 | }
292 | 
293 | /**
294 |  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
295 |  *    controls in Android 4.
296 |  * 2. Correct the inability to style clickable types in iOS and Safari.
297 |  */
298 | 
299 | button,
300 | html [type="button"], /* 1 */
301 | [type="reset"],
302 | [type="submit"] {
303 |   -webkit-appearance: button; /* 2 */
304 | }
305 | 
306 | /**
307 |  * Remove the inner border and padding in Firefox.
308 |  */
309 | 
310 | button::-moz-focus-inner,
311 | [type="button"]::-moz-focus-inner,
312 | [type="reset"]::-moz-focus-inner,
313 | [type="submit"]::-moz-focus-inner {
314 |   border-style: none;
315 |   padding: 0;
316 | }
317 | 
318 | /**
319 |  * Restore the focus styles unset by the previous rule.
320 |  */
321 | 
322 | button:-moz-focusring,
323 | [type="button"]:-moz-focusring,
324 | [type="reset"]:-moz-focusring,
325 | [type="submit"]:-moz-focusring {
326 |   outline: 1px dotted ButtonText;
327 | }
328 | 
329 | /**
330 |  * Change the border, margin, and padding in all browsers (opinionated).
331 |  */
332 | 
333 | fieldset {
334 |   border: 1px solid #c0c0c0;
335 |   margin: 0 2px;
336 |   padding: 0.35em 0.625em 0.75em;
337 | }
338 | 
339 | /**
340 |  * 1. Correct the text wrapping in Edge and IE.
341 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
342 |  * 3. Remove the padding so developers are not caught out when they zero out
343 |  *    `fieldset` elements in all browsers.
344 |  */
345 | 
346 | legend {
347 |   box-sizing: border-box; /* 1 */
348 |   color: inherit; /* 2 */
349 |   display: table; /* 1 */
350 |   max-width: 100%; /* 1 */
351 |   padding: 0; /* 3 */
352 |   white-space: normal; /* 1 */
353 | }
354 | 
355 | /**
356 |  * Remove the default vertical scrollbar in IE.
357 |  */
358 | 
359 | textarea {
360 |   overflow: auto;
361 | }
362 | 
363 | /**
364 |  * 1. Add the correct box sizing in IE 10-.
365 |  * 2. Remove the padding in IE 10-.
366 |  */
367 | 
368 | [type="checkbox"],
369 | [type="radio"] {
370 |   box-sizing: border-box; /* 1 */
371 |   padding: 0; /* 2 */
372 | }
373 | 
374 | /**
375 |  * Correct the cursor style of increment and decrement buttons in Chrome.
376 |  */
377 | 
378 | [type="number"]::-webkit-inner-spin-button,
379 | [type="number"]::-webkit-outer-spin-button {
380 |   height: auto;
381 | }
382 | 
383 | /**
384 |  * 1. Correct the odd appearance in Chrome and Safari.
385 |  * 2. Correct the outline style in Safari.
386 |  */
387 | 
388 | [type="search"] {
389 |   -webkit-appearance: textfield; /* 1 */
390 |   outline-offset: -2px; /* 2 */
391 | }
392 | 
393 | /**
394 |  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
395 |  */
396 | 
397 | [type="search"]::-webkit-search-cancel-button,
398 | [type="search"]::-webkit-search-decoration {
399 |   -webkit-appearance: none;
400 | }
401 | 
402 | /**
403 |  * Correct the text style of placeholders in Chrome, Edge, and Safari.
404 |  */
405 | 
406 | ::-webkit-input-placeholder {
407 |   color: inherit;
408 |   opacity: 0.54;
409 | }
410 | 
411 | /**
412 |  * 1. Correct the inability to style clickable types in iOS and Safari.
413 |  * 2. Change font properties to `inherit` in Safari.
414 |  */
415 | 
416 | ::-webkit-file-upload-button {
417 |   -webkit-appearance: button; /* 1 */
418 |   font: inherit; /* 2 */
419 | }
420 | 


--------------------------------------------------------------------------------
/_sass/sassline-base/_typography.scss:
--------------------------------------------------------------------------------
  1 | // Typography
  2 | // ---------------------------------------
  3 | 
  4 | // Setting root sizes and base styles.
  5 | html {
  6 |   @include rootsize;
  7 | 
  8 |   -webkit-text-size-adjust: 100%;
  9 |   -ms-text-size-adjust: 100%;
 10 | }
 11 | 
 12 | // Site-wide base styles.
 13 | body {
 14 |   @include fontsize(zeta, all);
 15 | 
 16 |   font-family: unquote(map-get($bodytype, font-family));
 17 |   font-style: normal;
 18 |   font-weight: map-get($bodytype, regular);
 19 |   line-height: 2rem;
 20 | }
 21 | 
 22 | // Links.
 23 | a {
 24 |   color: $linkColour;
 25 |   text-decoration: none;
 26 |   transition: color .1s, background-color .1s;
 27 | 
 28 |   &:hover, &:active, &:focus {
 29 |     color: $hoverColour;
 30 |     text-decoration: none;
 31 |   }
 32 | }
 33 | 
 34 | // Styles for typeset text.
 35 | .typeset {
 36 | 
 37 |   // Nice underlines for text links.
 38 |   p a, li a {
 39 |     background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,lighten($linkColour,20%) 50%);
 40 |     background-position: 0 93%;
 41 |     background-repeat: repeat-x;
 42 |     background-size: 100% 0.15rem;
 43 |     text-shadow: 0.1rem 0 $backgroundColour,
 44 |                  0.15rem 0 $backgroundColour,
 45 |                 -0.1rem 0 $backgroundColour,
 46 |                 -0.15rem 0 $backgroundColour;
 47 | 
 48 |     &:hover, &:active, &:focus {
 49 |       background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,lighten($hoverColour,20%) 50%);
 50 |     }
 51 |   }
 52 | 
 53 |   // Paragraphs. OpenType ligatures and oldstyle figures enabled if available.
 54 |   p {
 55 |     @include baseline($fontsize: zeta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: all);
 56 | 
 57 |     font-feature-settings: 'kern', 'onum', 'liga';
 58 |   }
 59 | 
 60 |   // Headings. OpenType ligatures, discretionary ligatures and lining figures enabled if available.
 61 |   h1, h2, h3, h4, h5, h6 {
 62 |     color: $headingColour;
 63 |     font-family: unquote(map-get($headingtype, font-family));
 64 |     font-feature-settings: 'dlig', 'liga', 'lnum', 'kern';
 65 |     font-style: normal;
 66 |     font-weight: map-get($headingtype, bold);
 67 |   }
 68 | 
 69 |   // Heading level 1.
 70 |   h1, .alpha {
 71 |     @include sassline($fontsize: alpha, $font: $headingtype, $lineheight: 3, $below: 1, $breakpoint: all);
 72 |   }
 73 | 
 74 |   // Heading level 2.
 75 |   h2, .beta {
 76 |     @include sassline(beta, $headingtype, 3, 1, all);
 77 |   }
 78 | 
 79 |   // Heading level 3.
 80 |   h3, .gamma {
 81 |     @include sassline(gamma, $headingtype, 3, 1, all);
 82 |   }
 83 | 
 84 |   // Heading level 4.
 85 |   h4, .delta {
 86 |     @include sassline(delta, $headingtype, 2, 0, all);
 87 |   }
 88 | 
 89 |   // Heading level 5.
 90 |   h5, .epsilon {
 91 |     @include sassline(epsilon, $headingtype, 2, 0, all);
 92 |   }
 93 | 
 94 |   // Heading level 6.
 95 |   h6, .zeta {
 96 |     @include sassline(zeta, $headingtype, 2, 0, all);
 97 |   }
 98 | 
 99 |   // Lists.
100 |   ul, ol {
101 |     @include baseline(zeta, $bodytype, 2, 2, all);
102 | 
103 |     li {
104 |       font-feature-settings: 'kern', 'onum', 'liga';
105 |       margin-left: 2rem;
106 | 
107 |       @include breakpoint(break-1) {
108 |         margin-left: 0;
109 |       }
110 | 
111 |       ol, ul {
112 |         padding-top: 1rem;
113 |         margin-bottom: 1rem;
114 |         margin-left: 2rem;
115 |       }
116 |     }
117 |   }
118 | 
119 |   // Ordered lists.
120 |   ol {
121 |     list-style-type: none;
122 | 
123 |     li {
124 |       counter-increment: top-level;
125 | 
126 |       &:before {
127 |         content: counter(top-level) '.';
128 |         font-feature-settings: 'lnum', 'tnum';
129 |         margin-left: -3rem;
130 |         position: absolute;
131 |         text-align: right;
132 |         width: 2em;
133 |       }
134 | 
135 |       ul {
136 | 
137 |         li {
138 | 
139 |           &:before {
140 |             content: '';
141 |           }
142 | 
143 |           ol {
144 | 
145 |             li {
146 |               counter-increment: alt-level;
147 | 
148 |               &:before {
149 |                 content: counter(alt-level) '.';
150 |               }
151 |             }
152 |           }
153 |         }
154 |       }
155 | 
156 |       ol {
157 | 
158 |         li {
159 |           counter-increment: sub-level;
160 | 
161 |           &:before {
162 |             content: counter(top-level) '.' counter(sub-level);
163 |           }
164 | 
165 |           ul {
166 | 
167 |             li {
168 | 
169 |               &:before {
170 |                 content: '';
171 |               }
172 |             }
173 |           }
174 | 
175 |           ol {
176 | 
177 |             li {
178 |               counter-increment: sub-sub-level;
179 | 
180 |               &:before {
181 |                 content: counter(top-level) '.' counter(sub-level) '.' counter(sub-sub-level);
182 |               }
183 |             }
184 |           }
185 |         }
186 |       }
187 |     }
188 |   }
189 | 
190 |   // Definition lists.
191 |   dl {
192 |     @include baseline(zeta, $bodytype, 2, 2, all);
193 | 
194 |     dt, dd {
195 |       font-feature-settings: 'kern', 'onum', 'liga';
196 |       margin-left: 2rem;
197 | 
198 |       @include breakpoint(break-1) {
199 |         margin-left: 0;
200 |       }
201 |     }
202 | 
203 |     dt {
204 |       font-weight: map-get($bodytype, bold);
205 |     }
206 | 
207 |     dd + dt {
208 |       padding-top: 1rem;
209 |     }
210 |   }
211 | 
212 |   // Tables.
213 |   table {
214 |     @include sassline(eta, $headingtype, 2, 0, all);
215 | 
216 |     font-family: unquote(map-get($headingtype, font-family));
217 |     font-feature-settings: 'liga', 'lnum', 'tnum', 'kern';
218 |     font-style: normal;
219 |     font-weight: map-get($headingtype, regular);
220 |     width: 100%;
221 | 
222 |     thead {
223 | 
224 |       th {
225 |         @include sassline(zeta, $headingtype, 2, 0, all);
226 |         padding-bottom: 1px;
227 |       }
228 |     }
229 |   }
230 | 
231 |   // Bold.
232 |   b, strong, .bold {
233 |     font-weight: map-get($bodytype, bold);
234 |   }
235 | 
236 |   // Italic.
237 |   em, i, .italic {
238 |     font-style: map-get($bodytype, italic);
239 |   }
240 | 
241 |   // Caption and inline small text.
242 |   small, .caption {
243 |     @include fontsize(theta, all);
244 | 
245 |     font-family: unquote(map-get($headingtype, font-family));
246 |     font-style: normal;
247 |     font-weight: map-get($headingtype, regular);
248 |   }
249 | 
250 |   small {
251 |     line-height: 1rem;
252 |   }
253 | 
254 |   .caption {
255 |     @include baseline(theta, $headingtype, 2, 2, all);
256 | 
257 |     color: $captionColour;
258 |   }
259 | 
260 |   // Nice spacing for captions.
261 |   h1 + .caption, .alpha + .caption, h2 + .caption, .beta + .caption, h3 + .caption, .gamma + .caption {
262 |     margin-top: -1rem;
263 |   }
264 | 
265 |   .delta + .caption, .epsilon + .caption, .zeta + .caption {
266 |     margin-top: 0rem;
267 |   }
268 | 
269 |   // Quotes.
270 |   blockquote {
271 | 
272 |     p {
273 |       border-left: 0.15rem solid $linkColour;
274 |       font-style: map-get($bodytype, italic);
275 |       padding-left: 1rem;
276 | 
277 |       // Add spacing below blockquote paragraphs to align to baseline grid.
278 |       $get-scale: map-get($modular-scale, scale-0);
279 |       $get-size: map-get($get-scale, zeta);
280 |       $rootsize: nth($sizes, 1);
281 |       $baseline-shift: #{($get-size / 2 * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001};
282 |       $baseline-push: #{3 - (($get-size * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001)};
283 | 
284 |       margin-bottom: #{$baseline-push}rem;
285 |       padding-bottom: #{$baseline-shift}rem;
286 | 
287 |       @for $i from 2 through $breakpoints-limit {
288 |         $get-scale: map-get($modular-scale, scale-#{$i - 1});
289 |         $get-size: map-get($get-scale, zeta);
290 |         $rootsize: nth($sizes, $i);
291 |         $baseline-shift: #{($get-size / 2 * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001};
292 |         $baseline-push: #{3 - (($get-size * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001)};
293 | 
294 |         @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
295 |           margin-bottom: #{$baseline-push}rem;
296 |           padding-bottom: #{$baseline-shift}rem;
297 |         }
298 |       }
299 |     }
300 | 
301 |     @include breakpoint(break-1) {
302 |       margin-left: -1rem;
303 |     }
304 |   }
305 | 
306 |   // Horizontal rule.
307 |   hr {
308 |     background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,$captionColour 50%);
309 |     background-position: 0 50%;
310 |     background-repeat: repeat-x;
311 |     background-size: 100% 0.15rem;
312 |     border: 0;
313 |     margin: 0;
314 |     padding-bottom: 3rem;
315 |     padding-top: 3rem;
316 |   }
317 | 
318 |   // Code block.
319 |   code, pre {
320 |     background-color: $codeBackgroundColour;
321 |     font-family: unquote(map-get($monospacetype, font-family));
322 |   }
323 | 
324 |   pre {
325 |     display: block;
326 |     margin-bottom: 2rem;
327 |     padding: 1rem;
328 |     white-space: pre;
329 |     white-space: pre-wrap;
330 |     word-break: break-all;
331 |     word-wrap: break-word;
332 |   }
333 | 
334 |   code {
335 |     @include fontsize(theta, all);
336 | 
337 |     line-height: 1rem;
338 |   }
339 | 
340 |   // Letter space those capitals people, Jan Tschichold would be proud.
341 |   .upper {
342 |     font-kerning: normal;
343 |     letter-spacing: 0.1rem;
344 |     text-transform: uppercase;
345 |   }
346 | 
347 |   // Real small caps.
348 |   .small-caps {
349 |     font-feature-settings: 'smcp', 'kern';
350 |     font-kerning: normal;
351 |     letter-spacing: 0.1rem;
352 |   }
353 | 
354 |   // Consistent height numbers with OpenType.
355 |   .lining-numerals {
356 |     font-feature-settings: 'lnum', 'kern';
357 |   }
358 | 
359 |   // Ascending and descending numbers with OpenType.
360 |   .oldstyle-numerals {
361 |     font-feature-settings: 'onum', 'kern';
362 |   }
363 | }
364 | 


--------------------------------------------------------------------------------
/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
  1 | # Code of Conduct
  2 | 
  3 | ## When Something Happens
  4 | 
  5 | If you see a Code of Conduct violation, follow these steps:
  6 | 
  7 | 1. Let the person know that what they did is not appropriate and ask them to stop and/or edit their message(s) or commits.
  8 | 2. That person should immediately stop the behaviour and correct the issue.
  9 | 3. If this doesn’t happen, or if you're uncomfortable speaking up, [contact the maintainers](#contacting-maintainers).
 10 | 4. As soon as available, a maintainer will look into the issue, and take [further action (see below)](#further-enforcement), starting with a warning, then temporary block, then long-term repo or organisation ban.
 11 | 
 12 | When reporting, please include any relevant details, links, screenshots, context, or other information that may be used to better understand and resolve the situation.
 13 | 
 14 | **The maintainer team will prioritise the well-being and comfort of the recipients of the violation over the comfort of the violator.** See [some examples below](#enforcement-examples).
 15 | 
 16 | ## Our Pledge
 17 | 
 18 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers of this project pledge to making participation in our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, technical preferences, nationality, personal appearance, race, religion, or sexual identity and orientation.
 19 | 
 20 | ## Our Standards
 21 | 
 22 | Examples of behaviour that contributes to creating a positive environment include:
 23 | 
 24 |   * Using welcoming and inclusive language.
 25 |   * Being respectful of differing viewpoints and experiences.
 26 |   * Gracefully accepting constructive feedback.
 27 |   * Focusing on what is best for the community.
 28 |   * Showing empathy and kindness towards other community members.
 29 |   * Encouraging and raising up your peers in the project so you can all bask in hacks and glory.
 30 | 
 31 | Examples of unacceptable behaviour by participants include:
 32 | 
 33 |   * The use of sexualised language or imagery and unwelcome sexual attention or advances, including when simulated online. The only exception to sexual topics is channels/spaces specifically for topics of sexual identity.
 34 |   * Trolling, insulting/derogatory comments, and personal or political attacks.
 35 |   * Public or private harassment, deliberate intimidation, or threats.
 36 |   * Publishing others' private information, such as a physical or electronic address, without explicit permission. This includes any sort of "outing" of any aspect of someone's identity without their consent.
 37 |   * Publishing private screenshots or quotes of interactions in the context of this project without all quoted users' *explicit* consent.
 38 |   * Publishing of private communication that doesn't have to do with reporting harassment.
 39 |   * Any of the above even when [presented as "ironic" or "joking"](https://en.wikipedia.org/wiki/Hipster_racism).
 40 |   * Any attempt to present "reverse-ism" versions of the above as violations. Examples of reverse-isms are "reverse racism", "reverse sexism", "heterophobia", and "cisphobia".
 41 |   * Unsolicited explanations under the assumption that someone doesn't already know it. Ask before you teach! Don't assume what people's knowledge gaps are.
 42 |   * [Feigning or exaggerating surprise](https://www.recurse.com/manual#no-feigned-surprise) when someone admits to not knowing something.
 43 |   * "[Well-actuallies](https://www.recurse.com/manual#no-well-actuallys)"
 44 |   * Other conduct which could reasonably be considered inappropriate in a professional or community setting.
 45 | 
 46 | ## Scope
 47 | 
 48 | This Code of Conduct applies both within spaces involving this project and in other spaces involving community members. This includes the repository, its Pull Requests and Issue tracker, its Twitter community, private email communications in the context of the project, and any events where members of the project are participating, as well as adjacent communities and venues affecting the project's members.
 49 | 
 50 | Depending on the violation, the maintainers may decide that violations of this code of conduct that have happened outside of the scope of the community may deem an individual unwelcome, and take appropriate action to maintain the comfort and safety of its members.
 51 | 
 52 | ### Other Community Standards
 53 | 
 54 | As a project on GitHub, this project is additionally covered by the [GitHub Community Guidelines](https://help.github.com/articles/github-community-guidelines/).
 55 | 
 56 | Additionally, as a project hosted on npm, is is covered by [npm, Inc's Code of Conduct](https://www.npmjs.com/policies/conduct).
 57 | 
 58 | Enforcement of those guidelines after violations overlapping with the above are the responsibility of the entities, and enforcement may happen in any or all of the services/communities.
 59 | 
 60 | ## Maintainer Enforcement Process
 61 | 
 62 | Once the maintainers get involved, they will follow a documented series of steps and do their best to preserve the well-being of project members. This section covers actual concrete steps.
 63 | 
 64 | ### Contacting Maintainers
 65 | 
 66 | You may get in touch with the maintainer team through any of the following methods:
 67 | 
 68 |   * Through email:
 69 |     * [me@daviddarnes.com](mailto:me@daviddarnes.com) (David Darnes)
 70 | 
 71 |   * Through Twitter:
 72 |     * [@DavidDarnes](https://twitter.com/DavidDarnes) (David Darnes)
 73 | 
 74 | ### Further Enforcement
 75 | 
 76 | If you've already followed the [initial enforcement steps](#enforcement), these are the steps maintainers will take for further enforcement, as needed:
 77 | 
 78 |   1. Repeat the request to stop.
 79 |   2. If the person doubles down, they will have offending messages removed or edited by a maintainers given an official warning. The PR or Issue may be locked.
 80 |   3. If the behaviour continues or is repeated later, the person will be blocked from participating for 24 hours.
 81 |   4. If the behaviour continues or is repeated after the temporary block, a long-term (6-12mo) ban will be used.
 82 | 
 83 | On top of this, maintainers may remove any offending messages, images, contributions, etc, as they deem necessary.
 84 | 
 85 | Maintainers reserve full rights to skip any of these steps, at their discretion, if the violation is considered to be a serious and/or immediate threat to the health and well-being of members of the community. These include any threats, serious physical or verbal attacks, and other such behaviour that would be completely unacceptable in any social setting that puts our members at risk.
 86 | 
 87 | Members expelled from events or venues with any sort of paid attendance will not be refunded.
 88 | 
 89 | ### Who Watches the Watchers?
 90 | 
 91 | Maintainers and other leaders who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. These may include anything from removal from the maintainer team to a permanent ban from the community.
 92 | 
 93 | Additionally, as a project hosted on both GitHub and npm, [their own Codes of Conducts may be applied against maintainers of this project](#other-community-standards), externally of this project's procedures.
 94 | 
 95 | ### Enforcement Examples
 96 | 
 97 | #### The Best Case
 98 | 
 99 | The vast majority of situations work out like this. This interaction is common, and generally positive.
100 | 
101 | > Alex: "Yeah I used X and it was really crazy!"
102 | 
103 | > Patt (not a maintainer): "Hey, could you not use that word? What about 'ridiculous' instead?"
104 | 
105 | > Alex: "oh sorry, sure." -> edits old comment to say "it was really confusing!"
106 | 
107 | #### The Maintainer Case
108 | 
109 | Sometimes, though, you need to get maintainers involved. Maintainers will do their best to resolve conflicts, but people who were harmed by something **will take priority**.
110 | 
111 | > Patt: "Honestly, sometimes I just really hate using $library and anyone who uses it probably sucks at their job."
112 | 
113 | > Alex: "Whoa there, could you dial it back a bit? There's a CoC thing about attacking folks' tech use like that."
114 | 
115 | > Patt: "I'm not attacking anyone, what's your problem?"
116 | 
117 | > Alex: "@maintainers hey uh. Can someone look at this issue? Patt is getting a bit aggro. I tried to nudge them about it, but nope."
118 | 
119 | > KeeperOfCommitBits: (on issue) "Hey Patt, maintainer here. Could you tone it down? This sort of attack is really not okay in this space."
120 | 
121 | > Patt: "Leave me alone I haven't said anything bad wtf is wrong with you."
122 | 
123 | > KeeperOfCommitBits: (deletes user's comment), "@patt I mean it. Please refer to the CoC over at (URL to this CoC) if you have questions, but you can consider this an actual warning. I'd appreciate it if you reworded your messages in this thread, since they made folks there uncomfortable. Let's try and be kind, yeah?"
124 | 
125 | > Patt: "@keeperofbits Okay sorry. I'm just frustrated and I'm kinda burnt out and I guess I got carried away. I'll DM Alex a note apologising and edit my messages. Sorry for the trouble."
126 | 
127 | > KeeperOfCommitBits: "@patt Thanks for that. I hear you on the stress. Burnout sucks :/.  Have a good one!"
128 | 
129 | #### The Nope Case
130 | 
131 | > PepeTheFrog🐸: "Hi, I am a literal actual nazi and I think white supremacists are quite fashionable."
132 | 
133 | > Patt: "NOOOOPE. OH NOPE NOPE."
134 | 
135 | > Alex: "JFC NO. NOPE. @keeperofbits NOPE NOPE LOOK HERE"
136 | 
137 | > KeeperOfCommitBits: "👀 Nope. NOPE NOPE NOPE. 🔥"
138 | 
139 | > PepeTheFrog🐸 has been banned from all organisation or user repositories belonging to KeeperOfCommitBits.
140 | 
141 | ## Attribution
142 | 
143 | This Code of Conduct was generated using [WeAllJS Code of Conduct Generator](https://npm.im/weallbehave), which is based on the [WeAllJS Code of
144 | Conduct](https://wealljs.org/code-of-conduct), which is itself based on
145 | [Contributor Covenant](http://contributor-covenant.org), version 1.4, available
146 | at
147 | [http://contributor-covenant.org/version/1/4](http://contributor-covenant.org/version/1/4),
148 | and the LGBTQ in Technology Slack [Code of
149 | Conduct](http://lgbtq.technology/coc.html).
150 | 


--------------------------------------------------------------------------------
/_sass/_flex.scss:
--------------------------------------------------------------------------------
  1 | // Flexbox Mixins
  2 | // http://philipwalton.github.io/solved-by-flexbox/
  3 | // https://github.com/philipwalton/solved-by-flexbox
  4 | // 
  5 | // Copyright (c) 2013 Brian Franco
  6 | //
  7 | // Permission is hereby granted, free of charge, to any person obtaining a
  8 | // copy of this software and associated documentation files (the
  9 | // "Software"), to deal in the Software without restriction, including
 10 | // without limitation the rights to use, copy, modify, merge, publish,
 11 | // distribute, sublicense, and/or sell copies of the Software, and to
 12 | // permit persons to whom the Software is furnished to do so, subject to
 13 | // the following conditions:
 14 | // The above copyright notice and this permission notice shall be included
 15 | // in all copies or substantial portions of the Software.
 16 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
 17 | // OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 18 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 19 | // IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
 20 | // CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
 21 | // TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 22 | // SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 23 | //
 24 | // This is a set of mixins for those who want to mess around with flexbox
 25 | // using the native support of current browsers. For full support table
 26 | // check: http://caniuse.com/flexbox
 27 | //
 28 | // Basically this will use:
 29 | //
 30 | // * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
 31 | // * Final standards syntax (FF, Safari, Chrome, IE11, Opera)
 32 | //
 33 | // This was inspired by:
 34 | // 
 35 | // * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
 36 | // 
 37 | // With help from:
 38 | // 
 39 | // * http://w3.org/tr/css3-flexbox/
 40 | // * http://the-echoplex.net/flexyboxes/
 41 | // * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
 42 | // * http://css-tricks.com/using-flexbox/
 43 | // * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
 44 | // * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
 45 | 
 46 | //----------------------------------------------------------------------
 47 | 
 48 | // Flexbox Containers
 49 | //
 50 | // The 'flex' value causes an element to generate a block-level flex
 51 | // container box.
 52 | //
 53 | // The 'inline-flex' value causes an element to generate a inline-level
 54 | // flex container box. 
 55 | //
 56 | // display: flex | inline-flex
 57 | //
 58 | // http://w3.org/tr/css3-flexbox/#flex-containers
 59 | //
 60 | // (Placeholder selectors for each type, for those who rather @extend)
 61 | 
 62 | @mixin flexbox {
 63 | 	display: -webkit-box;
 64 | 	display: -webkit-flex;
 65 | 	display: -moz-flex;
 66 | 	display: -ms-flexbox;
 67 | 	display: flex;
 68 | }
 69 | 
 70 | %flexbox { @include flexbox; }
 71 | 
 72 | //----------------------------------
 73 | 
 74 | @mixin inline-flex {
 75 | 	display: -webkit-inline-box;
 76 | 	display: -webkit-inline-flex;
 77 | 	display: -moz-inline-flex;
 78 | 	display: -ms-inline-flexbox;
 79 | 	display: inline-flex;
 80 | }
 81 | 
 82 | %inline-flex { @include inline-flex; }
 83 | 
 84 | //----------------------------------------------------------------------
 85 | 
 86 | // Flexbox Direction
 87 | //
 88 | // The 'flex-direction' property specifies how flex items are placed in
 89 | // the flex container, by setting the direction of the flex container's
 90 | // main axis. This determines the direction that flex items are laid out in. 
 91 | //
 92 | // Values: row | row-reverse | column | column-reverse
 93 | // Default: row
 94 | //
 95 | // http://w3.org/tr/css3-flexbox/#flex-direction-property
 96 | 
 97 | @mixin flex-direction($value: row) {
 98 | 	@if $value == row-reverse {
 99 | 		-webkit-box-direction: reverse;
100 | 		-webkit-box-orient: horizontal;
101 | 	} @else if $value == column {
102 | 		-webkit-box-direction: normal;
103 | 		-webkit-box-orient: vertical;
104 | 	} @else if $value == column-reverse {
105 | 		-webkit-box-direction: reverse;
106 | 		-webkit-box-orient: vertical;
107 | 	} @else {
108 | 		-webkit-box-direction: normal;
109 | 		-webkit-box-orient: horizontal;
110 | 	}
111 | 	-webkit-flex-direction: $value;
112 | 	-moz-flex-direction: $value;
113 | 	-ms-flex-direction: $value;
114 | 	flex-direction: $value;
115 | }
116 | 	// Shorter version:
117 | 	@mixin flex-dir($args...) { @include flex-direction($args...); }
118 | 
119 | //----------------------------------------------------------------------
120 | 
121 | // Flexbox Wrap
122 | //
123 | // The 'flex-wrap' property controls whether the flex container is single-line
124 | // or multi-line, and the direction of the cross-axis, which determines
125 | // the direction new lines are stacked in. 
126 | //
127 | // Values: nowrap | wrap | wrap-reverse
128 | // Default: nowrap
129 | //
130 | // http://w3.org/tr/css3-flexbox/#flex-wrap-property
131 | 
132 | @mixin flex-wrap($value: nowrap) {
133 | 	// No Webkit Box fallback.
134 | 	-webkit-flex-wrap: $value;
135 | 	-moz-flex-wrap: $value;
136 | 	@if $value == nowrap {
137 | 		-ms-flex-wrap: none;
138 | 	} @else { 
139 | 		-ms-flex-wrap: $value; 
140 | 	}
141 | 	flex-wrap: $value;
142 | }
143 | 
144 | //----------------------------------------------------------------------
145 | 
146 | // Flexbox Flow (shorthand)
147 | //
148 | // The 'flex-flow' property is a shorthand for setting the 'flex-direction'
149 | // and 'flex-wrap' properties, which together define the flex container's
150 | // main and cross axes.
151 | //
152 | // Values: <flex-direction> | <flex-wrap> 
153 | // Default: row nowrap
154 | //
155 | // http://w3.org/tr/css3-flexbox/#flex-flow-property
156 | 
157 | @mixin flex-flow($values: (row nowrap)) {
158 | 	// No Webkit Box fallback.
159 | 	-webkit-flex-flow: $values;
160 | 	-moz-flex-flow: $values;
161 | 	-ms-flex-flow: $values;
162 | 	flex-flow: $values;
163 | }
164 | 
165 | //----------------------------------------------------------------------
166 | 
167 | // Flexbox Order
168 | //
169 | // The 'order' property controls the order in which flex items appear within
170 | // their flex container, by assigning them to ordinal groups.
171 | //
172 | // Default: 0
173 | //
174 | // http://w3.org/tr/css3-flexbox/#order-property
175 | 
176 | @mixin order($int: 0) {
177 | 	-webkit-box-ordinal-group: $int + 1;
178 | 	-webkit-order: $int;
179 | 	-moz-order: $int;
180 | 	-ms-flex-order: $int;
181 | 	order: $int;
182 | }
183 | 
184 | //----------------------------------------------------------------------
185 | 
186 | // Flexbox Grow
187 | //
188 | // The 'flex-grow' property sets the flex grow factor. Negative numbers
189 | // are invalid.
190 | //
191 | // Default: 0
192 | //
193 | // http://w3.org/tr/css3-flexbox/#flex-grow-property
194 | 
195 | @mixin flex-grow($int: 0) {
196 | 	-webkit-box-flex: $int;
197 | 	-webkit-flex-grow: $int;
198 | 	-moz-flex-grow: $int;
199 | 	-ms-flex-positive: $int;
200 | 	flex-grow: $int;
201 | }
202 | 
203 | //----------------------------------------------------------------------
204 | 
205 | // Flexbox Shrink
206 | //
207 | // The 'flex-shrink' property sets the flex shrink factor. Negative numbers
208 | // are invalid.
209 | //
210 | // Default: 1
211 | //
212 | // http://w3.org/tr/css3-flexbox/#flex-shrink-property
213 | 
214 | @mixin flex-shrink($int: 1) {
215 | 	-webkit-flex-shrink: $int;
216 | 	-moz-flex-shrink: $int;
217 | 	-ms-flex-negative: $int;
218 | 	flex-shrink: $int;
219 | }
220 | 
221 | //----------------------------------------------------------------------
222 | 
223 | // Flexbox Basis
224 | //
225 | // The 'flex-basis' property sets the flex basis. Negative lengths are invalid. 
226 | //
227 | // Values: Like "width" 
228 | // Default: auto
229 | //
230 | // http://www.w3.org/TR/css3-flexbox/#flex-basis-property
231 | 
232 | @mixin flex-basis($value: auto) {
233 | 	-webkit-flex-basis: $value;
234 | 	-moz-flex-basis: $value;
235 | 	-ms-flex-preferred-size: $value;
236 | 	flex-basis: $value;
237 | }
238 | 
239 | //----------------------------------------------------------------------
240 | 
241 | // Flexbox "Flex" (shorthand)
242 | //
243 | // The 'flex' property specifies the components of a flexible length: the
244 | // flex grow factor and flex shrink factor, and the flex basis. When an
245 | // element is a flex item, 'flex' is consulted instead of the main size
246 | // property to determine the main size of the element. If an element is
247 | // not a flex item, 'flex' has no effect.
248 | //
249 | // Values: none | <flex-grow> <flex-shrink> || <flex-basis>
250 | // Default: See individual properties (1 1 0).
251 | //
252 | // http://w3.org/tr/css3-flexbox/#flex-property
253 | 
254 | @mixin flex($fg: 1, $fs: null, $fb: null) {
255 |     
256 | 	// Set a variable to be used by box-flex properties
257 | 	$fg-boxflex: $fg;
258 | 
259 | 	// Box-Flex only supports a flex-grow value so let's grab the
260 | 	// first item in the list and just return that.
261 | 	@if type-of($fg) == 'list' {
262 | 		$fg-boxflex: nth($fg, 1);
263 | 	}
264 | 
265 | 	-webkit-box-flex: $fg-boxflex;
266 | 	-webkit-flex: $fg $fs $fb;
267 | 	-moz-box-flex: $fg-boxflex;
268 | 	-moz-flex: $fg $fs $fb;
269 | 	-ms-flex: $fg $fs $fb;
270 | 	flex: $fg $fs $fb;
271 | }
272 | 
273 | //----------------------------------------------------------------------
274 | 
275 | // Flexbox Justify Content
276 | //
277 | // The 'justify-content' property aligns flex items along the main axis
278 | // of the current line of the flex container. This is done after any flexible
279 | // lengths and any auto margins have been resolved. Typically it helps distribute
280 | // extra free space leftover when either all the flex items on a line are
281 | // inflexible, or are flexible but have reached their maximum size. It also
282 | // exerts some control over the alignment of items when they overflow the line.
283 | //
284 | // Note: 'space-*' values not supported in older syntaxes.
285 | //
286 | // Values: flex-start | flex-end | center | space-between | space-around
287 | // Default: flex-start
288 | //
289 | // http://w3.org/tr/css3-flexbox/#justify-content-property
290 | 
291 | @mixin justify-content($value: flex-start) {
292 | 	@if $value == flex-start {
293 | 		-webkit-box-pack: start;
294 | 		-ms-flex-pack: start;
295 | 	} @else if $value == flex-end {
296 | 		-webkit-box-pack: end;
297 | 		-ms-flex-pack: end;
298 | 	} @else if $value == space-between {
299 | 		-webkit-box-pack: justify;
300 | 		-ms-flex-pack: justify;
301 | 	} @else if $value == space-around {
302 | 		-ms-flex-pack: distribute;		
303 | 	} @else {
304 | 		-webkit-box-pack: $value;
305 | 		-ms-flex-pack: $value;
306 | 	}
307 | 	-webkit-justify-content: $value;
308 | 	-moz-justify-content: $value;
309 | 	justify-content: $value;
310 | }
311 | 	// Shorter version:
312 | 	@mixin flex-just($args...) { @include justify-content($args...); }
313 | 
314 | //----------------------------------------------------------------------
315 | 
316 | // Flexbox Align Items
317 | //
318 | // Flex items can be aligned in the cross axis of the current line of the
319 | // flex container, similar to 'justify-content' but in the perpendicular
320 | // direction. 'align-items' sets the default alignment for all of the flex
321 | // container's items, including anonymous flex items. 'align-self' allows
322 | // this default alignment to be overridden for individual flex items. (For
323 | // anonymous flex items, 'align-self' always matches the value of 'align-items'
324 | // on their associated flex container.) 
325 | //
326 | // Values: flex-start | flex-end | center | baseline | stretch
327 | // Default: stretch
328 | //
329 | // http://w3.org/tr/css3-flexbox/#align-items-property
330 | 
331 | @mixin align-items($value: stretch) {
332 | 	@if $value == flex-start {
333 | 		-webkit-box-align: start;
334 | 		-ms-flex-align: start;
335 | 	} @else if $value == flex-end {
336 | 		-webkit-box-align: end;
337 | 		-ms-flex-align: end;
338 | 	} @else {
339 | 		-webkit-box-align: $value;
340 | 		-ms-flex-align: $value;
341 | 	}
342 | 	-webkit-align-items: $value;
343 | 	-moz-align-items: $value;
344 | 	align-items: $value;
345 | }
346 | 
347 | //----------------------------------
348 | 
349 | // Flexbox Align Self
350 | //
351 | // Values: auto | flex-start | flex-end | center | baseline | stretch
352 | // Default: auto
353 | 
354 | @mixin align-self($value: auto) {
355 | 	// No Webkit Box Fallback.
356 | 	-webkit-align-self: $value;
357 | 	-moz-align-self: $value;
358 | 	@if $value == flex-start {
359 | 		-ms-flex-item-align: start;
360 | 	} @else if $value == flex-end {
361 | 		-ms-flex-item-align: end;
362 | 	} @else {
363 | 		-ms-flex-item-align: $value;
364 | 	}
365 | 	align-self: $value;
366 | }
367 | 
368 | //----------------------------------------------------------------------
369 | 
370 | // Flexbox Align Content
371 | //
372 | // The 'align-content' property aligns a flex container's lines within the
373 | // flex container when there is extra space in the cross-axis, similar to
374 | // how 'justify-content' aligns individual items within the main-axis. Note,
375 | // this property has no effect when the flexbox has only a single line.
376 | //
377 | // Values: flex-start | flex-end | center | space-between | space-around | stretch
378 | // Default: stretch
379 | //
380 | // http://w3.org/tr/css3-flexbox/#align-content-property
381 | 
382 | @mixin align-content($value: stretch) {
383 | 	// No Webkit Box Fallback.
384 | 	-webkit-align-content: $value;
385 | 	-moz-align-content: $value;
386 | 	@if $value == flex-start {
387 | 		-ms-flex-line-pack: start;
388 | 	} @else if $value == flex-end {
389 | 		-ms-flex-line-pack: end;
390 | 	} @else {
391 | 		-ms-flex-line-pack: $value;
392 | 	}
393 | 	align-content: $value;
394 | }
395 | 


--------------------------------------------------------------------------------
/_sass/sassline-base/_mixins.scss:
--------------------------------------------------------------------------------
  1 | // SCSS mixins
  2 | // ---------------------------------------
  3 | 
  4 | // Global variables used in mixins.
  5 | 
  6 | // Number of breakpoints.
  7 | $breakpoints-limit: length($breakpoints);
  8 | 
  9 | // List of rootsizes, breakpoints, and max-widths.
 10 | $sizes: map-values($rootsizes);
 11 | $points: map-values($breakpoints);
 12 | $line-widths: map-values($measures);
 13 | $max-widths: map-values($maxwidths);
 14 | 
 15 | 
 16 | // Breakpoints. Either set one to one of the breakpoint variables, or use a custom value for minor breakpoints.
 17 | // Defaults to min-width, but both min->max and max-width are available too.
 18 | // Parts based on https://gist.github.com/timknight/03e6335b8816aa534cf7
 19 | @mixin breakpoint($break: 0, $max: 0) {
 20 |   // Type of break variable
 21 |   $value: type-of($break);
 22 | 
 23 |   // If it is a string (i.e. a breakpoint variable).
 24 |   @if $value == string {
 25 |     // If using 'break-1', 'break-2' etc output the correct breakpoints from map.
 26 |     @if map-has-key($breakpoints, $break) {
 27 |       @media screen and (min-width: #{map-get($breakpoints, $break) / 16 * 1em} ) { @content; }
 28 |     } @else {
 29 |       @warn "#{$break} is not a set breakpoint variable";
 30 |     }
 31 | 
 32 |   // If it is a number, use this for the breakpoint.
 33 |   } @else if $value == number {
 34 |     // If using other numbers output value in ems either for min, min & max or max width breakpoints.
 35 |     $query: "all" !default;
 36 |     @if      $break != 0 and $max != 0 { $query: "(min-width: #{$break / 16 * 1em}) and (max-width: #{$max / 16 * 1em})"; }
 37 |     @else if $break != 0 and $max == 0 { $query: "(min-width: #{$break / 16 * 1em})"; }
 38 |     @else if $break == 0 and $max != 0 { $query: "(max-width: #{$max / 16 * 1em})"; }
 39 |     @media #{$query} { @content; }
 40 | 
 41 |   } @else {
 42 |     @warn "#{$break} is not valid to use as a breakpoint";
 43 |   }
 44 | }
 45 | 
 46 | // Root font-size in %, outputted in correct breakpoints.
 47 | @mixin rootsize {
 48 |   font-size: nth($sizes, 1) / 16 * 100%;
 49 | 
 50 |   // Loop through breakpoints.
 51 |   @for $i from 2 through $breakpoints-limit {
 52 |     @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
 53 |       font-size: nth($sizes, $i) / 16 * 100%;
 54 |     }
 55 |   }
 56 | }
 57 | 
 58 | // Max-widths for typeset containers, outputted in correct breakpoints.
 59 | @mixin maxwidth($breakpoint: 0) {
 60 |   // Type of chosen variables.
 61 |   $break-value: type-of($breakpoint);
 62 | 
 63 |   // If specifying a breakpoint to use (and breakpoint exists).
 64 |   @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 {
 65 | 
 66 |     max-width: #{nth($max-widths, ($breakpoint + 1)) / nth($sizes, ($breakpoint + 1))}rem;
 67 | 
 68 |   } @else if $breakpoint == all {
 69 |     max-width: #{nth($max-widths, 1) / nth($sizes, 1)}rem;
 70 | 
 71 |     // Loop through breakpoints.
 72 |     @for $i from 2 through $breakpoints-limit {
 73 |       @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
 74 |         max-width: #{nth($max-widths, $i) / nth($sizes, $i)}rem;
 75 |       }
 76 |     }
 77 |   }
 78 | }
 79 | 
 80 | // Set the measure for single columns, outputted in correct breakpoints.
 81 | @mixin measure($breakpoint: 0) {
 82 |   // Type of chosen variables.
 83 |   $break-value: type-of($breakpoint);
 84 | 
 85 |   // If specifying a breakpoint to use (and breakpoint exists).
 86 |   @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 {
 87 | 
 88 |     max-width: #{nth($line-widths, ($breakpoint + 1)) / nth($sizes, ($breakpoint + 1))}rem;
 89 | 
 90 |   } @else if $breakpoint == all {
 91 |     max-width: #{nth($line-widths, 1) / nth($sizes, 1)}rem;
 92 | 
 93 |     // Loop through breakpoints.
 94 |     @for $i from 2 through $breakpoints-limit {
 95 |       @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
 96 |         max-width: #{nth($line-widths, $i) / nth($sizes, $i)}rem;
 97 |       }
 98 |     }
 99 |   }
100 | }
101 | 
102 | // Calculate percentage width of container to get optimal measure for main text columns.
103 | // Defaults to all breakpoints.
104 | // Note: will not output for base breakpoint as this comes from the 'measure' mixin.
105 | @mixin ideal-measure($breakpoint: 0, $gutter: 0, $main: true, $output: max-width) {
106 |   // Type of chosen variables.
107 |   $break-value: type-of($breakpoint);
108 | 
109 |   // If specifying a breakpoint to use (and breakpoint exists and is larger than 0).
110 |   @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint > 0 {
111 | 
112 |     @if $gutter == small {
113 |       $gutter: map-get($gutterwidths, small) * 2 / 1rem;
114 |     } @else if $gutter == medium {
115 |       $gutter: map-get($gutterwidths, medium) * 2 / 1rem;
116 |     } @else if $gutter == large {
117 |       $gutter: map-get($gutterwidths, large) * 2 / 1rem;
118 |     } @else {
119 |       $gutter: 0;
120 |     }
121 | 
122 |     $rootsize: map-get($rootsizes, rootsize-#{$breakpoint});
123 |     $ideal-measure: map-get($measures, measure-#{$breakpoint});
124 |     $gutter-size: ($gutter * $rootsize);
125 |     $container-width: map-get($maxwidths, width-#{$breakpoint});
126 | 
127 |     $percentage: percentage(($ideal-measure + $gutter-size) / $container-width);
128 | 
129 |     @if $percentage < 55 {
130 |       $percentage: 55%;
131 |     } @else if $percentage > 65 {
132 |       $percentage: 65%;
133 |     }
134 | 
135 |     @if $main == false {
136 |       $percentage: 100 - $percentage;
137 |     }
138 | 
139 |     #{$output}: $percentage;
140 |   }
141 | }
142 | 
143 | // Value in scale in $modular-scale?
144 | // Used in following fontsize mixin.
145 | @function in-modular-scale($scale, $key) {
146 |   $map: map-get($modular-scale, $scale);
147 |   $output: map-has-key($map, $key);
148 |   @return $output;
149 | }
150 | 
151 | // Font-size in rems. Either set per breakpoint or for all.
152 | // Use values as you would for pixels i.e. 16 or use values from the modular scale.
153 | @mixin fontsize($fontsize, $breakpoint: 0) {
154 |   // Type of chosen variables.
155 |   $font-value: type-of($fontsize);
156 |   $break-value: type-of($breakpoint);
157 | 
158 |   // Check if value exists in scale.
159 |   $in-scale: in-modular-scale(scale-0, $fontsize);
160 | 
161 |   // If specifying a breakpoint to use (and breakpoint exists).
162 |   @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 {
163 | 
164 |     // If using a number for fontsize.
165 |     @if $font-value == number {
166 |       font-size: #{$fontsize / nth($sizes, ($breakpoint + 1))}rem;
167 | 
168 |     // If using a variable from the scale for fontsize.
169 |     } @else if $in-scale == true {
170 |       $get-scale: map-get($modular-scale, scale-#{$breakpoint});
171 |       $get-size: map-get($get-scale, $fontsize);
172 | 
173 |       font-size: #{$get-size / nth($sizes, ($breakpoint + 1))}rem;
174 | 
175 |     } @else {
176 |       @warn "#{$fontsize} is not a valid scale variable";
177 |     }
178 | 
179 |   // If want to use value for all breakpoints.
180 |   } @else if $breakpoint == all {
181 | 
182 |     // If using a number for fontsize.
183 |     @if $font-value == number {
184 |       font-size: #{$fontsize / nth($sizes, 1)}rem;
185 | 
186 |       // Loop through breakpoints.
187 |       @for $i from 2 through $breakpoints-limit {
188 |         @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
189 |           font-size: #{$fontsize / nth($sizes, $i)}rem;
190 |         }
191 |       }
192 | 
193 |     // If using a variable from the scale for fontsize.
194 |     } @else if $in-scale == true {
195 |       $get-scale: map-get($modular-scale, scale-0);
196 |       $get-size: map-get($get-scale, $fontsize);
197 |       font-size: #{$get-size / nth($sizes, 1)}rem;
198 | 
199 |       // Loop through breakpoints.
200 |       @for $i from 2 through $breakpoints-limit {
201 |         $get-scale: map-get($modular-scale, scale-#{$i - 1});
202 |         $get-size: map-get($get-scale, $fontsize);
203 | 
204 |         @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
205 |           font-size: #{$get-size / nth($sizes, $i)}rem;
206 |         }
207 |       }
208 | 
209 |     } @else {
210 |       @warn "#{$fontsize} is not a valid scale variable";
211 |     }
212 | 
213 |   } @else {
214 |     @warn "#{$breakpoint} is not valid to use as a breakpoint";
215 |   }
216 | }
217 | 
218 | // Advanced baseline magic.
219 | // ! Read the README to help understand what is going on here.
220 | // Parts based on https://gist.github.com/razwan/10662500
221 | @mixin baseline($fontsize, $font, $lineheight: 2, $below: 2, $breakpoint: 0) {
222 |   // Type of chosen variables.
223 |   $font-value: type-of($fontsize);
224 |   $break-value: type-of($breakpoint);
225 | 
226 |   // Cap height
227 |   $cap-height: map-get($font, cap-height);
228 | 
229 |   // Check if value exists in scale.
230 |   $in-scale: in-modular-scale(scale-0, $fontsize);
231 | 
232 |   // Set the line-height (if it isn’t set at 0).
233 |   @if $lineheight != 0 {
234 |     line-height: #{$lineheight}rem;
235 |   }
236 | 
237 |   // If specifying a breakpoint to use (and breakpoint exists).
238 |   @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 {
239 | 
240 |     // If using a number for fontsize.
241 |     @if $font-value == number {
242 |       $rootsize: nth($sizes, ($breakpoint + 1));
243 |       $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
244 |       $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
245 | 
246 |       margin-bottom: #{$baseline-push}rem;
247 |       padding-top: #{$baseline-shift}rem;
248 | 
249 |     // If using a variable from the scale for fontsize.
250 |     } @else if $in-scale == true {
251 |       $get-scale: map-get($modular-scale, scale-#{$breakpoint});
252 |       $get-size: map-get($get-scale, $fontsize);
253 |       $rootsize: nth($sizes, ($breakpoint + 1));
254 | 
255 |       $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
256 |       $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
257 | 
258 |       margin-bottom: #{$baseline-push}rem;
259 |       padding-top: #{$baseline-shift}rem;
260 | 
261 |     } @else {
262 |       @warn "#{$fontsize} is not a valid scale variable";
263 |     }
264 | 
265 |   // If want to use value for all breakpoints.
266 |   } @else if $breakpoint == all {
267 | 
268 |     // If using a number for fontsize.
269 |     @if $font-value == number {
270 |       $rootsize: nth($sizes, 1);
271 |       $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
272 |       $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
273 | 
274 |       margin-bottom: #{$baseline-push}rem;
275 |       padding-top: #{$baseline-shift}rem;
276 | 
277 |       // Loop through breakpoints.
278 |       @for $i from 2 through $breakpoints-limit {
279 |         $rootsize: nth($sizes, $i);
280 |         $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
281 |         $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
282 | 
283 |         @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
284 |           margin-bottom: #{$baseline-push}rem;
285 |           padding-top: #{$baseline-shift}rem;
286 |         }
287 |       }
288 | 
289 |     // If using a variable from the scale for fontsize.
290 |     } @else if $in-scale == true {
291 |       $get-scale: map-get($modular-scale, scale-0);
292 |       $get-size: map-get($get-scale, $fontsize);
293 |       $rootsize: nth($sizes, 1);
294 | 
295 |       $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
296 |       $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
297 | 
298 |       margin-bottom: #{$baseline-push}rem;
299 |       padding-top: #{$baseline-shift}rem;
300 | 
301 |       // Loop through breakpoints.
302 |       @for $i from 2 through $breakpoints-limit {
303 |         $get-scale: map-get($modular-scale, scale-#{$i - 1});
304 |         $get-size: map-get($get-scale, $fontsize);
305 |         $rootsize: nth($sizes, $i);
306 | 
307 |         $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
308 |         $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
309 | 
310 |         @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
311 |           margin-bottom: #{$baseline-push}rem;
312 |           padding-top: #{$baseline-shift}rem;
313 |         }
314 |       }
315 | 
316 |     } @else {
317 |       @warn "#{$fontsize} is not a valid scale variable";
318 |     }
319 | 
320 |   } @else {
321 |     @warn "#{$breakpoint} is not valid to use as a breakpoint";
322 |   }
323 | }
324 | 
325 | // Set fontsize and baseline at once. Mix of fontsize and baseline mixin.
326 | @mixin sassline($fontsize, $font, $lineheight: 2, $below: 2, $breakpoint: 0) {
327 |   $font-value: type-of($fontsize);
328 |   $break-value: type-of($breakpoint);
329 |   $cap-height: map-get($font, cap-height);
330 |   $in-scale: in-modular-scale(scale-0, $fontsize);
331 | 
332 |   line-height: #{$lineheight}rem;
333 | 
334 |   @if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 {
335 | 
336 |     @if $font-value == number {
337 |       $rootsize: nth($sizes, ($breakpoint + 1));
338 |       $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
339 |       $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
340 |       font-size: #{$fontsize / nth($sizes, ($breakpoint + 1))}rem;
341 |       margin-bottom: #{$baseline-push}rem;
342 |       padding-top: #{$baseline-shift}rem;
343 | 
344 |     } @else if $in-scale == true {
345 |       $get-scale: map-get($modular-scale, scale-#{$breakpoint});
346 |       $get-size: map-get($get-scale, $fontsize);
347 |       $rootsize: nth($sizes, ($breakpoint + 1));
348 |       $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
349 |       $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
350 |       font-size: #{$get-size / nth($sizes, ($breakpoint + 1))}rem;
351 |       margin-bottom: #{$baseline-push}rem;
352 |       padding-top: #{$baseline-shift}rem;
353 | 
354 |     } @else {
355 |       @warn "#{$fontsize} is not a valid scale variable";
356 |     }
357 | 
358 |   } @else if $breakpoint == all {
359 | 
360 |     @if $font-value == number {
361 |       $rootsize: nth($sizes, 1);
362 |       $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
363 |       $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
364 |       font-size: #{$fontsize / nth($sizes, 1)}rem;
365 |       margin-bottom: #{$baseline-push}rem;
366 |       padding-top: #{$baseline-shift}rem;
367 | 
368 |       @for $i from 2 through $breakpoints-limit {
369 |         $rootsize: nth($sizes, $i);
370 |         $baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
371 |         $baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
372 |         @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
373 |           font-size: #{$fontsize / nth($sizes, $i)}rem;
374 |           margin-bottom: #{$baseline-push}rem;
375 |           padding-top: #{$baseline-shift}rem;
376 |         }
377 |       }
378 | 
379 |     } @else if $in-scale == true {
380 |       $get-scale: map-get($modular-scale, scale-0);
381 |       $get-size: map-get($get-scale, $fontsize);
382 |       $rootsize: nth($sizes, 1);
383 |       $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
384 |       $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
385 |       font-size: #{$get-size / nth($sizes, 1)}rem;
386 |       margin-bottom: #{$baseline-push}rem;
387 |       padding-top: #{$baseline-shift}rem;
388 | 
389 |       @for $i from 2 through $breakpoints-limit {
390 |         $get-scale: map-get($modular-scale, scale-#{$i - 1});
391 |         $get-size: map-get($get-scale, $fontsize);
392 |         $rootsize: nth($sizes, $i);
393 |         $baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
394 |         $baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
395 |         @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
396 |           font-size: #{$get-size / nth($sizes, $i)}rem;
397 |           margin-bottom: #{$baseline-push}rem;
398 |           padding-top: #{$baseline-shift}rem;
399 |         }
400 |       }
401 | 
402 |     } @else {
403 |       @warn "#{$fontsize} is not a valid scale variable";
404 |     }
405 | 
406 |   } @else {
407 |     @warn "#{$breakpoint} is not valid to use as a breakpoint";
408 |   }
409 | }
410 | 
411 | // Clearfix.
412 | @mixin clearfix {
413 |   &:before, &:after{
414 |     display: table;
415 |     content: "";
416 |   }
417 |   &:after{
418 |     clear: both;
419 |   }
420 | }
421 | 


--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
  1 | # Contributing
  2 | 
  3 | Thank you so much for your interest in contributing!. All types of contributions are encouraged and valued. See below for different ways to help, and details about how this project handles them!
  4 | 
  5 | Please make sure to read the relevant section before making your contribution! It will make it a lot easier for us maintainers to make the most of it and smooth out the experience for all involved. 💚
  6 | 
  7 | The [Project Team](#join-the-project-team) looks forward to your contributions.~
  8 | 
  9 | ## How do I...
 10 | 
 11 | * Ask or Say Something 🤔🐛😱
 12 |   * [Request Support](#request-support)
 13 |   * [Report an Error or Bug](#report-an-error-or-bug)
 14 |   * [Request a Feature](#request-a-feature)
 15 | * Make Something 🤓👩🏽‍💻📜🍳
 16 |   * [Project Setup](#project-setup)
 17 |   * [Contribute Documentation](#contribute-documentation)
 18 |   * [Contribute Code](#contribute-code)
 19 | * Manage Something ✅🙆🏼💃👔
 20 |   * [Provide Support on Issues](#provide-support-on-issues)
 21 |   * [Label Issues](#label-issues)
 22 |   * [Clean Up Issues and PRs](#clean-up-issues-and-prs)
 23 |   * [Review Pull Requests](#review-pull-requests)
 24 |   * [Merge Pull Requests](#merge-pull-requests)
 25 |   * [Tag a Release](#tag-a-release)
 26 |   * [Join the Project Team](#join-the-project-team)
 27 | * [Add a Guide Like This One To My Project](#attribution) 🤖😻👻
 28 | 
 29 | ## Request Support
 30 | 
 31 | If you have a question about this project, how to use it, or need clarification about something:
 32 | 
 33 | * Open an Issue at https://github.com/daviddarnes/garth/issues
 34 | * Provide as much context as you can about what you're running into.
 35 | * Provide project and platform versions (jekyll, ruby, etc), depending on what seems relevant. If not, please be ready to provide that information if maintainers ask for it.
 36 | 
 37 | Once it's filed:
 38 | 
 39 | * The project team will [label the issue](#label-issues).
 40 | * Someone will try to have a response soon.
 41 | * If you or the maintainers don't respond to an issue for 30 days, the [issue will be closed](#clean-up-issues-and-prs). If you want to come back to it, reply (once, please), and we'll reopen the existing issue. Please avoid filing new issues as extensions of one you already made.
 42 | 
 43 | ## Report an Error or Bug
 44 | 
 45 | If you run into an error or bug with the project:
 46 | 
 47 | * Open an Issue at https://github.com/daviddarnes/garth/issues
 48 | * Include *reproduction steps* that someone else can follow to recreate the bug or error on their own.
 49 | * Provide project and platform versions (jekyll, ruby, etc), depending on what seems relevant. If not, please be ready to provide that information if maintainers ask for it.
 50 | 
 51 | Once it's filed:
 52 | 
 53 | * The project team will [label the issue](#label-issues).
 54 | * A team member will try to reproduce the issue with your provided steps. If there are no repro steps or no clear way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced.
 55 | * If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#contribute-code).
 56 | * If you or the maintainers don't respond to an issue for 30 days, the [issue will be closed](#clean-up-issues-and-prs). If you want to come back to it, reply (once, please), and we'll reopen the existing issue. Please avoid filing new issues as extensions of one you already made.
 57 | * `critical` issues may be left open, depending on perceived immediacy and severity, even past the 30 day deadline.
 58 | 
 59 | ## Request a Feature
 60 | 
 61 | If the project doesn't do something you need or want it to do:
 62 | 
 63 | * Open an Issue at https://github.com/daviddarnes/garth/issues
 64 | * Provide as much context as you can about what you're running into.
 65 | * Please try and be clear about why existing features and alternatives would not work for you.
 66 | 
 67 | Once it's filed:
 68 | 
 69 | * The project team will [label the issue](#label-issues).
 70 | * The project team will evaluate the feature request, possibly asking you more questions to understand its purpose and any relevant requirements. If the issue is closed, the team will convey their reasoning and suggest an alternative path forward.
 71 | * If the feature request is accepted, it will be marked for implementation with `feature-accepted`, which can then be done by either by a core team member or by anyone in the community who wants to [contribute code](#contribute-code).
 72 | 
 73 | Note: The team is unlikely to be able to accept every single feature request that is filed. Please understand if they need to say no.
 74 | 
 75 | ## Project Setup
 76 | 
 77 | So you wanna contribute some code! That's great! This project uses GitHub Pull Requests to manage contributions, so [read up on how to fork a GitHub project and file a PR](https://guides.github.com/activities/forking) if you've never done it before.
 78 | 
 79 | If this seems like a lot or you aren't able to do all this setup, you might also be able to [edit the files directly](https://help.github.com/articles/editing-files-in-another-user-s-repository/) without having to do any of this setup. Yes, [even code](#contribute-code).
 80 | 
 81 | If you want to go the usual route and run the project locally, though:
 82 | 
 83 | * [Install bundler](hhttp://bundler.io/#getting-started)
 84 | * [Fork the project](https://guides.github.com/activities/forking/#fork)
 85 | 
 86 | Then in your terminal:
 87 | * `$ bundle install`
 88 | * `$ bundle exec jekyll serve --watch`
 89 | 
 90 | And you should be ready to go!
 91 | 
 92 | ## Contribute Documentation
 93 | 
 94 | Documentation is a super important, critical part of this project. Docs are how we keep track of what we're doing, how, and why. It's how we stay on the same page about our policies. And it's how we tell others everything they need in order to be able to use this project -- or contribute to it. So thank you in advance.
 95 | 
 96 | Documentation contributions of any size are welcome! Feel free to file a PR even if you're rewording a sentence to be more clear, or fixing a spelling mistake!
 97 | 
 98 | To contribute documentation:
 99 | 
100 | * [Set up the project](#project-setup).
101 | * Edit or add any relevant documentation.
102 | * Make sure your changes are formatted correctly and consistently with the rest of the documentation.
103 | * Re-read what you wrote, and run a spellchecker on it to make sure you didn't miss anything.
104 | * In your commit message(s), begin the first line with `docs: `. For example: `docs: Adding a doc contrib section to CONTRIBUTING.md`.
105 | * Write clear, concise commit message(s) using [conventional-changelog format](https://github.com/conventional-changelog/conventional-changelog-angular/blob/master/convention.md). Documentation commits should use `docs(<component>): <message>`.
106 | * Go to https://github.com/daviddarnes/garth/pulls and open a new pull request with your changes.
107 | * If your PR is connected to an open issue, add a line in your PR's description that says `Fixes: #123`, where `#123` is the number of the issue you're fixing.
108 | 
109 | Once you've filed the PR:
110 | 
111 | * One or more maintainers will use GitHub's review feature to review your PR.
112 | * If the maintainer asks for any changes, edit your changes, push, and ask for another review.
113 | * If the maintainer decides to pass on your PR, they will thank you for the contribution and explain why they won't be accepting the changes. That's ok! We still really appreciate you taking the time to do it, and we don't take that lightly. 💚
114 | * If your PR gets accepted, it will be marked as such, and merged into the `master` branch soon after. Your contribution will be distributed to the masses next time the maintainers [tag a release](#tag-a-release)
115 | 
116 | ## Contribute Code
117 | 
118 | We like code commits a lot! They're super handy, and they keep the project going and doing the work it needs to do to be useful to others.
119 | 
120 | Code contributions of any size are acceptable!
121 | 
122 | The main difference between code contributions and documentation contributions is that contributing code requires inclusion of relevant tests for the code being added or changed. Contributions without accompanying tests will be held off until a test is added, unless the maintainers consider the specific tests to be either impossible, or way too much of a burden for such a contribution.
123 | 
124 | To contribute code:
125 | 
126 | * [Set up the project](#project-setup).
127 | * Make any necessary changes to the source code.
128 | * Include any [additional documentation](#contribute-documentation) the changes might need.
129 | * Write clear, concise commit message(s) using [conventional-changelog format](https://github.com/conventional-changelog/conventional-changelog-angular/blob/master/convention.md).
130 | * Go to https://github.com/daviddarnes/garth/pulls and open a new pull request with your changes.
131 | * If your PR is connected to an open issue, add a line in your PR's description that says `Fixes: #123`, where `#123` is the number of the issue you're fixing.
132 | 
133 | Once you've filed the PR:
134 | 
135 | * One or more maintainers will use GitHub's review feature to review your PR.
136 | * If the maintainer asks for any changes, edit your changes, push, and ask for another review. Additional tags (such as `needs tests`) will be added depending on the review.
137 | * If the maintainer decides to pass on your PR, they will thank you for the contribution and explain why they won't be accepting the changes. That's ok! We still really appreciate you taking the time to do it, and we don't take that lightly. 💚
138 | * If your PR gets accepted, it will be marked as such, and merged into the `master` branch soon after. Your contribution will be distributed to the masses next time the maintainers publish an update.
139 | 
140 | ## Provide Support on Issues
141 | 
142 | [Needs Collaborator](#join-the-project-team): none
143 | 
144 | Helping out other users with their questions is a really awesome way of contributing to any community. It's not uncommon for most of the issues on an open source projects being support-related questions by users trying to understand something they ran into, or find their way around a known bug.
145 | 
146 | Sometimes, the `support` label will be added to things that turn out to actually be other things, like bugs or feature requests. In that case, suss out the details with the person who filed the original issue, add a comment explaining what the bug is, and change the label from `support` to `bug` or `feature`. If you can't do this yourself, @mention a maintainer so they can do it.
147 | 
148 | In order to help other folks out with their questions:
149 | 
150 | * Go to the issue tracker and [filter open issues by the `support` label](https://github.com/daviddarnes/garth/issues?q=is%3Aopen+is%3Aissue+label%3Asupport).
151 | * Read through the list until you find something that you're familiar enough with to give an answer to.
152 | * Respond to the issue with whatever details are needed to clarify the question, or get more details about what's going on.
153 | * Once the discussion wraps up and things are clarified, either close the issue, or ask the original issue filer (or a maintainer) to close it for you.
154 | 
155 | Some notes on picking up support issues:
156 | 
157 | * Avoid responding to issues you don't know you can answer accurately.
158 | * As much as possible, try to refer to past issues with accepted answers. Link to them from your replies with the `#123` format.
159 | * Be kind and patient with users -- often, folks who have run into confusing things might be upset or impatient. This is ok. Try to understand where they're coming from, and if you're too uncomfortable with the tone, feel free to stay away or withdraw from the issue. (note: if the user is outright hostile or is violating the CoC, [refer to the Code of Conduct](CODE_OF_CONDUCT.md) to resolve the conflict).
160 | 
161 | ## Label Issues
162 | 
163 | [Needs Collaborator](#join-the-project-team): Issue Tracker
164 | 
165 | One of the most important tasks in handling issues is labelling them usefully and accurately. All other tasks involving issues ultimately rely on the issue being classified in such a way that relevant parties looking to do their own tasks can find them quickly and without difficulty.
166 | 
167 | In order to label issues, [open up the list of unlabelled issues](https://github.com/daviddarnes/garth/issues?q=is%3Aopen+is%3Aissue+no%3Alabel) and, **from newest to oldest**, read through each one and apply issue labels according to the table below. If you're unsure about what label to apply, skip the issue and try the next one: don't feel obligated to label each and every issue yourself!
168 | 
169 | Label | Apply When | Notes
170 | --- | --- | ---
171 | `bug` | Cases where the code (or documentation) is behaving in a way it wasn't intended to. | If something is happening that surprises the *user* but does not go against the way the code is designed, it should use the `enhancement` label.
172 | `critical` | Added to `bug` issues if the problem described makes the code completely unusable in a common situation. |
173 | `documentation` | Added to issues or pull requests that affect any of the documentation for the project. | Can be combined with other labels, such as `bug` or `enhancement`.
174 | `duplicate` | Added to issues or PRs that refer to the exact same issue as another one that's been previously labeled. | Duplicate issues should be marked and closed right away, with a message referencing the issue it's a duplicate of (with `#123`)
175 | `enhancement` | Added to [feature requests](#request-a-feature), PRs, or documentation issues that are purely additive: the code or docs currently work as expected, but a change is being requested or suggested. |
176 | `help wanted` | Applied by [Committers](#join-the-project-team) to issues and PRs that they would like to get outside help for. Generally, this means it's lower priority for the maintainer team to itself implement, but that the community is encouraged to pick up if they so desire | Never applied on first-pass labelling.
177 | `in progress` | Applied by [Committers](#join-the-project-team) to PRs that are pending some work before they're ready for review. | The original PR submitter should @mention the team member that applied the label once the PR is complete.
178 | `starter` | Applied by [Committers](#join-the-project-team) to issues that they consider good introductions to the project for people who have not contributed before. These are not necessarily "easy", but rather focused around how much context is necessary in order to understand what needs to be done for this project in particular. | Existing project members are expected to stay away from these unless they increase in priority.
179 | `support` | This issue is either asking a question about how to use the project, clarifying the reason for unexpected behaviour, or possibly reporting a `bug` but does not have enough detail yet to determine whether it would count as such. | The label should be switched to `bug` if reliable reproduction steps are provided. Issues primarily with unintended configurations of a user's environment are not considered bugs, even if they cause crashes.
180 | `wontfix` | Labellers may apply this label to issues that clearly have nothing at all to do with the project or are otherwise entirely outside of its scope/sphere of influence. [Committers](#join-the-project-team) may apply this label and close an issue or PR if they decide to pass on an otherwise relevant issue. | The issue or PR should be closed as soon as the label is applied, and a clear explanation provided of why the label was used. Contributors are free to contest the labelling, but the decision ultimately falls on committers as to whether to accept something or not.
181 | 
182 | ## Clean Up Issues and PRs
183 | 
184 | [Needs Collaborator](#join-the-project-team): Issue Tracker
185 | 
186 | Issues and PRs can go stale after a while. Maybe they're abandoned. Maybe the team will not have time to address them any time soon.
187 | 
188 | In these cases, they should be closed until they're brought up again or the interaction starts over.
189 | 
190 | To clean up issues and PRs:
191 | 
192 | * Search the issue tracker for issues or PRs, and add the term `updated:<=YYYY-MM-DD`, where the date is 30 days before today.
193 | * Go through each issue *from oldest to newest*, and close them if **all of the following are true**:
194 |   * not opened by a maintainer
195 |   * not marked as `critical`
196 |   * not marked as `starter` or `help wanted` (these might stick around for a while, in general, as they're intended to be available)
197 |   * no explicit messages in the comments asking for it to be left open
198 |   * does not belong to a milestone
199 | * Leave a message when closing saying "Cleaning up stale issue. Please reopen or ping us if and when you're ready to resume this. See https://github.com/daviddarnes/garth/blob/latest/CONTRIBUTING.md#clean-up-issues-and-prs for more details."
200 | 
201 | ## Review Pull Requests
202 | 
203 | [Needs Collaborator](#join-the-project-team): Issue Tracker
204 | 
205 | While anyone can comment on a PR, add feedback, etc, PRs are only *approved* by team members with Issue Tracker or higher permissions.
206 | 
207 | PR reviews use [GitHub's own review feature](https://help.github.com/articles/about-pull-request-reviews/), which manages comments, approval, and review iteration.
208 | 
209 | Some notes:
210 | 
211 | * You may ask for minor changes ("nitpicks"), but consider whether they are really blockers to merging: try to err on the side of "approve, with comments".
212 | * *ALL PULL REQUESTS* should be covered by a test: either by a previously-failing test, an existing test that covers the entire functionality of the submitted code, or new tests to verify any new/changed behaviour. All tests must also pass and follow established conventions. Test coverage should not drop, unless the specific case is considered reasonable by maintainers.
213 | * Please make sure you're familiar with the code or documentation being updated, unless it's a minor change (spellchecking, minor formatting, etc). You may @mention another project member who you think is better suited for the review, but still provide a non-approving review of your own.
214 | * Be extra kind: people who submit code/doc contributions are putting themselves in a pretty vulnerable position, and have put time and care into what they've done (even if it's not clear to you!) -- always respond with respect, be understanding, but don't feel like you need to sacrifice your standards for their sake, either. Don't be a jerk about it, OK?
215 | 
216 | ## Join the Project Team
217 | 
218 | ### Ways to Join
219 | 
220 | There are many ways to contribute! Most of them don't require any official status unless otherwise noted. That said, there's a couple of positions that grant higher repository abilities, and this section describes how they're granted and what they do.
221 | 
222 | All of the below positions are granted based on the project team's needs, as well as their consensus opinion about whether they would like to work with the person and think that they would fit well into that position. The process is relatively informal, and it's likely that people who express interest in participating can be granted the permissions they'd like.
223 | 
224 | You can spot a collaborator on the repo by looking for the `[Collaborator]` or `[Owner]` tags next to their names.
225 | 
226 | Permission | Description
227 | --- | ---
228 | Issue Tracker | Granted to contributors who express a strong interest in spending time on the project's issue tracker. These tasks are mainly [labelling issues](#label-issues), [cleaning up old ones](#clean-up-issues-and-prs), and [reviewing pull requests](#review-pull-requests), as well as all the usual things non-team-member contributors can do. Issue handlers should not merge pull requests, tag releases, or directly commit code themselves: that should still be done through the usual pull request process. Becoming an Issue Handler means the project team trusts you to understand enough of the team's process and context to implement it on the issue tracker.
229 | Committer | Granted to contributors who want to handle the actual pull request merges, tagging new versions, etc. Committers should have a good level of familiarity with the codebase, and enough context to understand the implications of various changes, as well as a good sense of the will and expectations of the project team.
230 | Admin/Owner | Granted to people ultimately responsible for the project, its community, etc.
231 | 
232 | ## Attribution
233 | 
234 | This guide was generated using the WeAllJS `CONTRIBUTING.md` generator. [Make your own](https://npm.im/weallcontribute)!
235 | 


--------------------------------------------------------------------------------