diff --git a/.gitignore b/.gitignore index e9e786d..87a6267 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ _site/ .sass-cache/ .jekyll-metadata garth-jekyll-theme-*.gem +Gemfile.lock +**/Gemfile.lock diff --git a/404.md b/404.md new file mode 100755 index 0000000..3ddb248 --- /dev/null +++ b/404.md @@ -0,0 +1,7 @@ +--- +title: "404" +excerpt: "Page Not Found" +permalink: 404.html +--- + +Sorry, but the page could not be found. diff --git a/CNAME b/CNAME new file mode 100755 index 0000000..6957ea1 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +garth.darn.es diff --git a/Gemfile b/Gemfile new file mode 100755 index 0000000..3be9c3c --- /dev/null +++ b/Gemfile @@ -0,0 +1,2 @@ +source "https://rubygems.org" +gemspec diff --git a/LICENSE b/LICENSE old mode 100644 new mode 100755 index b713588..674beeb --- a/LICENSE +++ b/LICENSE @@ -1,4 +1,4 @@ -The MIT License (MIT) +MIT License Copyright (c) 2016 David Darnes diff --git a/README.md b/README.md old mode 100644 new mode 100755 index 4977b09..8c313b3 --- a/README.md +++ b/README.md @@ -1,48 +1,50 @@ -# Garth Jekyll Theme - +# [Garth](https://garth.darn.es/) [![Gem Version](https://badge.fury.io/rb/garth-jekyll-theme.svg)](https://badge.fury.io/rb/garth-jekyll-theme) -A stupidly simple theme for Jekyll (3.2), using official Jekyll theme implementation. +🥁 A stupidly simple theme for Jekyll, using the official Jekyll theme implementation. ![Screenshot](https://raw.githubusercontent.com/daviddarnes/garth-jekyll-theme/master/screenshot.png) +## Contents +- [Installation](#installation) +- [Site settings](#site-settings) +- [Page layouts](#page-layouts) +- [Credits](#credits) + ## Installation -1. `$ gem install jekyll` -2. `$ gem install garth-jekyll-theme` -3. Add the following to your config file: +### As a Fork - ``` yml - # Typical site settings - title: "Website title" - description: "Website description" - logo: https://www.gravatar.com/avatar/6c0377abcf4da91cdd35dea4554b2a4c?s=300 # Provide an avatar/logo +1. [Fork the repo](https://github.com/daviddarnes/garth-jekyll-theme#fork-destination-box) +2. Clone down the repo with `$ git clone git@github.com:username/reponame.git` +3. Delete the `demo/` folder and `screenshot.png` files +4. Change the `CNAME` record to your projects' record +5. Install bundler with `$ gem install bundler` +6. Install gems with `$ bundle install` +7. Run Jekyll with `$ bundle exec jekyll serve --watch` +8. Begin hacking for your project - theme: garth-jekyll-theme # Set the theme - ``` +### As a Jekyll 3.3 theme gem -5. Add the following to your `css/styles.scss` file: +1. Download the starter `/demo` content, [quick download link](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/daviddarnes/garth-jekyll-theme/tree/master/demo) +2. Install bundler with `$ gem install bundler` +3. Install gems with `$ bundle install` +4. Run Jekyll with `$ bundle exec jekyll serve --watch` +5. Begin hacking for your project - ``` css - --- - --- - @import "theme"; - ``` +## Site settings -6. Add the following to your `js/scripts.js` file: +You'll need to change the `description`, `title` and `url` to match with the project. - ``` html - --- - --- - {% include theme.js %} - ``` +## Page layouts -7. `$ jekyll serve --watch` +There are 3 layouts; `page`, `post` and `home` (home acts as the font page blog). -## Additional notes +> **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) -There's 3 templates within the theme: +## Credits -- `front.html`: For blog homepage, you'll need `jekyll-paginate` to paginate posts in your blog -- `page.html`: For pages -- `post.html`: For blog posts +- Thanks to [Sassline](https://sassline.com/) for the typographic basis, by [Jake Giltsoff](https://twitter.com/jakegiltsoff) +- Thanks to [Flexbox mixin](https://github.com/mastastealth/sass-flex-mixin) by [Brian Franco](https://twitter.com/brianfranco) +- Thanks to [Normalize](https://necolas.github.io/normalize.css/) by [Nicolas Gallagher](https://twitter.com/necolas) and [Jonathan Neal](https://twitter.com/jon_neal). +- Thanks to [pygments-css](http://richleland.github.io/pygments-css/) for the autumn syntax highlighting, by [Rich Leland](https://twitter.com/richleland) diff --git a/_config.yml b/_config.yml new file mode 100755 index 0000000..cd093b5 --- /dev/null +++ b/_config.yml @@ -0,0 +1,63 @@ +# Site configuration +# 1. Files excluded from Jekyll builds +# 2. Installed Gems +# 3. Gem settings +# 4. Jekyll settings +# 5. Collections +# 6. Jekyll collections settings +# 7. Site settings + +# 1. Files excluded from Jekyll builds +exclude: +- README.md +- screenshot.png +- LICENSE +- CNAME +- Gemfile +- Gemfile.lock +- demo/* +- garth-jekyll-theme.gemspec + +# 2. Installed Gems +gems: +- jekyll-paginate + +# 3. Gem settings +paginate: 2 # jekyll-paginate > items per page +paginate_path: page:num # jekyll-paginate > blog page + +# 4. Jekyll settings +sass: + style: compressed # Style compression +permalink: pretty # Permalink style (/YYYY/MM/DD/page-name/) +excerpt_separator: # Marks end of excerpt in posts +timezone: Europe/London # Timezone for blog posts and alike + +# 5. Collections +collections: + posts: + title: Welcome # Needed for Siteleaf + output: true + description: "Welcome to my blog!" # The post list page content + +# 6. Jekyll collections settings +defaults: + - + scope: + path: "" + type: pages + values: + layout: page # Default layout + - + scope: + path: "" + type: posts + values: + layout: post # Default layout + +# 7. Site settings +encoding: utf-8 # Make sure the encoding is right +title: "Garth" # Site name or title +logo: "https://www.gravatar.com/avatar/6c0377abcf4da91cdd35dea4554b2a4c?s=500" # Site logo +description: "A stupidly simple theme for Jekyll, using the official Jekyll theme implementation" # Site description and default description +url: "https://garth.darn.es" # Site url diff --git a/_includes/favicons.html b/_includes/favicons.html deleted file mode 100644 index 51935ef..0000000 --- a/_includes/favicons.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/_includes/footer.html b/_includes/footer.html deleted file mode 100644 index a033c4e..0000000 --- a/_includes/footer.html +++ /dev/null @@ -1,9 +0,0 @@ - diff --git a/_includes/header.html b/_includes/header.html deleted file mode 100644 index 785bb1d..0000000 --- a/_includes/header.html +++ /dev/null @@ -1,25 +0,0 @@ -
- -
- - {% if site.logo %} - - {% endif %} - - - - - -
- -
diff --git a/_includes/pagination.html b/_includes/pagination.html deleted file mode 100644 index 819dd61..0000000 --- a/_includes/pagination.html +++ /dev/null @@ -1,21 +0,0 @@ - diff --git a/_includes/post-list.html b/_includes/post-list.html new file mode 100755 index 0000000..b660ca7 --- /dev/null +++ b/_includes/post-list.html @@ -0,0 +1,34 @@ +{% if paginator.posts %} + + + {% include post-pagination.html %} + +{% else %} + + + +{% endif %} diff --git a/_includes/post-meta.html b/_includes/post-meta.html new file mode 100755 index 0000000..ee28564 --- /dev/null +++ b/_includes/post-meta.html @@ -0,0 +1,3 @@ + + {% if page.category %}{{ page.category }}  ·  {% endif %} + diff --git a/_includes/post-pagination.html b/_includes/post-pagination.html new file mode 100755 index 0000000..7aee453 --- /dev/null +++ b/_includes/post-pagination.html @@ -0,0 +1,17 @@ + diff --git a/_includes/posts.html b/_includes/posts.html deleted file mode 100644 index 734ab21..0000000 --- a/_includes/posts.html +++ /dev/null @@ -1,22 +0,0 @@ - diff --git a/_includes/site-footer.html b/_includes/site-footer.html new file mode 100755 index 0000000..bf85f1d --- /dev/null +++ b/_includes/site-footer.html @@ -0,0 +1,7 @@ + diff --git a/_includes/site-header.html b/_includes/site-header.html new file mode 100755 index 0000000..fa02f3e --- /dev/null +++ b/_includes/site-header.html @@ -0,0 +1,6 @@ +
+
+ {% include site-logo.html %} + {% include site-nav.html %} +
+
diff --git a/_includes/site-logo.html b/_includes/site-logo.html new file mode 100755 index 0000000..e67dc72 --- /dev/null +++ b/_includes/site-logo.html @@ -0,0 +1,3 @@ + diff --git a/_includes/site-nav.html b/_includes/site-nav.html new file mode 100755 index 0000000..4ac7df4 --- /dev/null +++ b/_includes/site-nav.html @@ -0,0 +1,16 @@ + diff --git a/_includes/theme.js b/_includes/theme.js deleted file mode 100644 index 64d4067..0000000 --- a/_includes/theme.js +++ /dev/null @@ -1,14 +0,0 @@ -// Data attribute switch -var toggleState = function (elem, one, two) { -var elem = document.querySelector(elem); -elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one); -}; - -// Mobile navigation toggle selector -var buttonMenu = document.querySelector('.button--nav'); -if (typeof(buttonMenu) != 'undefined' && buttonMenu != null) { - buttonMenu.onclick = function (e) { - toggleState('.nav', 'open', 'closed'); - e.preventDefault(); - }; -}; diff --git a/_layouts/default.html b/_layouts/default.html old mode 100644 new mode 100755 index f942349..1146460 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,26 +1,21 @@ - - - {{ page.title }} - {{ site.title }} - - {% if site.logo %} - {% include favicons.html %} + {% if page.collectionpage %} + {% assign collectiondata = site.collections | where: "label", page.collectionpage | first %} + {{ collectiondata.title }} - {{ site.title }} + {% else %} + {{ page.title }} - {{ site.title }} {% endif %} - + + - {% include header.html %} - {{ content }} - {% include footer.html %} - - diff --git a/_layouts/front.html b/_layouts/front.html deleted file mode 100644 index b2d0bf3..0000000 --- a/_layouts/front.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: default ---- - -
- -
- -

{{ page.title }}

- - {{ content }} - -
- - {% include posts.html %} - -
diff --git a/_layouts/home.html b/_layouts/home.html new file mode 100755 index 0000000..5a23303 --- /dev/null +++ b/_layouts/home.html @@ -0,0 +1,26 @@ +--- +layout: default +--- + +{% include site-header.html %} + +
+ +
+ +
+ + {% assign collectiondata = site.collections | where: "label", page.collectionpage | first %} +

{{ collectiondata.title }}

+ + {{ collectiondata.description | markdownify }} + +
+ + {% include post-list.html %} + +
+ +
+ +{% include site-footer.html %} diff --git a/_layouts/page.html b/_layouts/page.html old mode 100644 new mode 100755 index 4b18656..661d9ba --- a/_layouts/page.html +++ b/_layouts/page.html @@ -2,14 +2,18 @@ layout: default --- +{% include site-header.html %} +
-
+
-

{{ page.title }}

+

{{ page.title }}

- {{ content }} + {{ content }} -
+
+ +{% include site-footer.html %} diff --git a/_layouts/post.html b/_layouts/post.html old mode 100644 new mode 100755 index 5b49853..2d736be --- a/_layouts/post.html +++ b/_layouts/post.html @@ -2,19 +2,18 @@ layout: default --- +{% include site-header.html %} +
-
+
-

{{ page.title }}

+

{{ page.title }}

+ {% include post-meta.html %} + {{ content }} - - {% assign words = content | number_of_words %} -  – {{ words | divided_by:180 }} minute read - - - {{ content }} - -
+
+ +{% include site-footer.html %} diff --git a/_posts/2016-08-27-example-post-one.md b/_posts/2016-08-27-example-post-one.md new file mode 100755 index 0000000..dd3508b --- /dev/null +++ b/_posts/2016-08-27-example-post-one.md @@ -0,0 +1,14 @@ +--- +title: What was Wayne's World? +category: General +--- + +Wayne's World is a 1992 American 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. + + + +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. + +Wayne's World was Myers' feature film debut. It also features Rob Lowe, Tia Carrere, Lara Flynn Boyle, Brian Doyle-Murray, Robert Patrick (spoofing his 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. + +_Originally from [Wayne's World (film) - Wikipedia](https://en.wikipedia.org/wiki/Wayne%27s_World_(film))_ diff --git a/_posts/2016-08-28-example-post-two.md b/_posts/2016-08-28-example-post-two.md new file mode 100755 index 0000000..6e059f1 --- /dev/null +++ b/_posts/2016-08-28-example-post-two.md @@ -0,0 +1,20 @@ +--- +title: Who is Mike Myers? +category: People +--- + +Michael John "Mike" Myers (born May 25, 1963) is a Canadian-born actor, comedian, screenwriter, and film producer, who also holds UK and US citizenship.[1] He is known for his 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. He also directed the documentary film Supermensch: The Legend of Shep Gordon, and had a small role in Quentin Tarantino's Inglourious Basterds in 2009. + + + +Myers was born on May 25, 1963 in Scarborough, Ontario, the son of English-born parents Eric Myers (1922–1991), an insurance agent, and his wife, Alice E. (née Hind; born 1926), an office supervisor and a veteran of the Royal Air Force. + +Both his parents were from Liverpool and he has two older brothers, Paul, an indie rock singer-songwriter, broadcaster and author, and Peter, a Sears Canada employee. + +The family is of English, Scottish and Irish ancestry. Myers was raised Protestant. + +Myers reportedly holds Canadian, U.S. and British citizenship. + +Myers grew up in North York and then Scarborough, where he attended Sir John A. MacDonald Collegiate Institute and then graduated from Stephen Leacock Collegiate Institute in 1982. + +_Originally from [Mike Myers - Wikipedia](https://en.wikipedia.org/wiki/Mike_Myers)_ diff --git a/_posts/2016-08-29-example-post-three.md b/_posts/2016-08-29-example-post-three.md new file mode 100755 index 0000000..0aa997e --- /dev/null +++ b/_posts/2016-08-29-example-post-three.md @@ -0,0 +1,14 @@ +--- +title: Who is Dana Carvey? +category: People +--- + +Dana Thomas Carvey (born June 2, 1955) is an American actor and stand-up comedian known for his work as a cast member on Saturday Night Live and for playing the role of Garth Algar in the Wayne's World films. + + + +Carvey was born in Missoula, Montana, the son of Billie Dahl, a schoolteacher, and Bud Carvey, a high-school business teacher. Carvey is the brother 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 he was three years old, his family moved to San Carlos, California, in the San Francisco Bay Area. He received his first drum kit at an early age. He attended Tierra Linda Junior High in San Carlos, Carlmont High School in Belmont, California (where he was a member of the Central Coast Section champion cross country team), College of San Mateo in San Mateo, California, and received his bachelor's degree in broadcast communications from San Francisco State University. + +He 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 he played a mime, with fellow comedian Billy Crystal (who tells him "Mime is money!"). He also appeared in the short-lived film-based action television series Blue Thunder. + +_Originally from [Dana Carvey - Wikipedia](https://en.wikipedia.org/wiki/Dana_Carvey)_ diff --git a/_sass/_colors.scss b/_sass/_colors.scss new file mode 100755 index 0000000..41fde2e --- /dev/null +++ b/_sass/_colors.scss @@ -0,0 +1,9 @@ +// Colours +$color__site--background: #ffefc8; +$color__site--heading: darken(#46412A, 5%); +$color__site--body: #46412A; +$color__site--captions: lighten($color__site--heading, 40%); +$color__site--link: #5B5BFF; +$color__site--link--hover: darken($color__site--link, 10%); +$color__site--link--current: desaturate($color__site--link, 100%); +$color__site--accent: #5B5BFF; diff --git a/_sass/_flex.scss b/_sass/_flex.scss new file mode 100755 index 0000000..4a38431 --- /dev/null +++ b/_sass/_flex.scss @@ -0,0 +1,394 @@ +// Flexbox Mixins +// http://philipwalton.github.io/solved-by-flexbox/ +// https://github.com/philipwalton/solved-by-flexbox +// +// Copyright (c) 2013 Brian Franco +// +// Permission is hereby granted, free of charge, to any person obtaining a +// copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject to +// the following conditions: +// The above copyright notice and this permission notice shall be included +// in all copies or substantial portions of the Software. +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS +// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. +// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY +// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, +// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE +// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +// +// This is a set of mixins for those who want to mess around with flexbox +// using the native support of current browsers. For full support table +// check: http://caniuse.com/flexbox +// +// Basically this will use: +// +// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping) +// * Final standards syntax (FF, Safari, Chrome, IE11, Opera) +// +// This was inspired by: +// +// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ +// +// With help from: +// +// * http://w3.org/tr/css3-flexbox/ +// * http://the-echoplex.net/flexyboxes/ +// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx +// * http://css-tricks.com/using-flexbox/ +// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ +// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes + +//---------------------------------------------------------------------- + +// Flexbox Containers +// +// The 'flex' value causes an element to generate a block-level flex +// container box. +// +// The 'inline-flex' value causes an element to generate a inline-level +// flex container box. +// +// display: flex | inline-flex +// +// http://w3.org/tr/css3-flexbox/#flex-containers +// +// (Placeholder selectors for each type, for those who rather @extend) + +@mixin flexbox { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; +} + +%flexbox { @include flexbox; } + +//---------------------------------- + +@mixin inline-flex { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -moz-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +%inline-flex { @include inline-flex; } + +//---------------------------------------------------------------------- + +// Flexbox Direction +// +// The 'flex-direction' property specifies how flex items are placed in +// the flex container, by setting the direction of the flex container's +// main axis. This determines the direction that flex items are laid out in. +// +// Values: row | row-reverse | column | column-reverse +// Default: row +// +// http://w3.org/tr/css3-flexbox/#flex-direction-property + +@mixin flex-direction($value: row) { + @if $value == row-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; + } @else if $value == column { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + } @else if $value == column-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; + } @else { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + } + -webkit-flex-direction: $value; + -moz-flex-direction: $value; + -ms-flex-direction: $value; + flex-direction: $value; +} + // Shorter version: + @mixin flex-dir($args...) { @include flex-direction($args...); } + +//---------------------------------------------------------------------- + +// Flexbox Wrap +// +// The 'flex-wrap' property controls whether the flex container is single-line +// or multi-line, and the direction of the cross-axis, which determines +// the direction new lines are stacked in. +// +// Values: nowrap | wrap | wrap-reverse +// Default: nowrap +// +// http://w3.org/tr/css3-flexbox/#flex-wrap-property + +@mixin flex-wrap($value: nowrap) { + // No Webkit Box fallback. + -webkit-flex-wrap: $value; + -moz-flex-wrap: $value; + @if $value == nowrap { + -ms-flex-wrap: none; + } @else { + -ms-flex-wrap: $value; + } + flex-wrap: $value; +} + +//---------------------------------------------------------------------- + +// Flexbox Flow (shorthand) +// +// The 'flex-flow' property is a shorthand for setting the 'flex-direction' +// and 'flex-wrap' properties, which together define the flex container's +// main and cross axes. +// +// Values: | +// Default: row nowrap +// +// http://w3.org/tr/css3-flexbox/#flex-flow-property + +@mixin flex-flow($values: (row nowrap)) { + // No Webkit Box fallback. + -webkit-flex-flow: $values; + -moz-flex-flow: $values; + -ms-flex-flow: $values; + flex-flow: $values; +} + +//---------------------------------------------------------------------- + +// Flexbox Order +// +// The 'order' property controls the order in which flex items appear within +// their flex container, by assigning them to ordinal groups. +// +// Default: 0 +// +// http://w3.org/tr/css3-flexbox/#order-property + +@mixin order($int: 0) { + -webkit-box-ordinal-group: $int + 1; + -webkit-order: $int; + -moz-order: $int; + -ms-flex-order: $int; + order: $int; +} + +//---------------------------------------------------------------------- + +// Flexbox Grow +// +// The 'flex-grow' property sets the flex grow factor. Negative numbers +// are invalid. +// +// Default: 0 +// +// http://w3.org/tr/css3-flexbox/#flex-grow-property + +@mixin flex-grow($int: 0) { + -webkit-box-flex: $int; + -webkit-flex-grow: $int; + -moz-flex-grow: $int; + -ms-flex-positive: $int; + flex-grow: $int; +} + +//---------------------------------------------------------------------- + +// Flexbox Shrink +// +// The 'flex-shrink' property sets the flex shrink factor. Negative numbers +// are invalid. +// +// Default: 1 +// +// http://w3.org/tr/css3-flexbox/#flex-shrink-property + +@mixin flex-shrink($int: 1) { + -webkit-flex-shrink: $int; + -moz-flex-shrink: $int; + -ms-flex-negative: $int; + flex-shrink: $int; +} + +//---------------------------------------------------------------------- + +// Flexbox Basis +// +// The 'flex-basis' property sets the flex basis. Negative lengths are invalid. +// +// Values: Like "width" +// Default: auto +// +// http://www.w3.org/TR/css3-flexbox/#flex-basis-property + +@mixin flex-basis($value: auto) { + -webkit-flex-basis: $value; + -moz-flex-basis: $value; + -ms-flex-preferred-size: $value; + flex-basis: $value; +} + +//---------------------------------------------------------------------- + +// Flexbox "Flex" (shorthand) +// +// The 'flex' property specifies the components of a flexible length: the +// flex grow factor and flex shrink factor, and the flex basis. When an +// element is a flex item, 'flex' is consulted instead of the main size +// property to determine the main size of the element. If an element is +// not a flex item, 'flex' has no effect. +// +// Values: none | || +// Default: See individual properties (1 1 0). +// +// http://w3.org/tr/css3-flexbox/#flex-property + +@mixin flex($fg: 1, $fs: null, $fb: null) { + + // Set a variable to be used by box-flex properties + $fg-boxflex: $fg; + + // Box-Flex only supports a flex-grow value so let's grab the + // first item in the list and just return that. + @if type-of($fg) == 'list' { + $fg-boxflex: nth($fg, 1); + } + + -webkit-box-flex: $fg-boxflex; + -webkit-flex: $fg $fs $fb; + -moz-box-flex: $fg-boxflex; + -moz-flex: $fg $fs $fb; + -ms-flex: $fg $fs $fb; + flex: $fg $fs $fb; +} + +//---------------------------------------------------------------------- + +// Flexbox Justify Content +// +// The 'justify-content' property aligns flex items along the main axis +// of the current line of the flex container. This is done after any flexible +// lengths and any auto margins have been resolved. Typically it helps distribute +// extra free space leftover when either all the flex items on a line are +// inflexible, or are flexible but have reached their maximum size. It also +// exerts some control over the alignment of items when they overflow the line. +// +// Note: 'space-*' values not supported in older syntaxes. +// +// Values: flex-start | flex-end | center | space-between | space-around +// Default: flex-start +// +// http://w3.org/tr/css3-flexbox/#justify-content-property + +@mixin justify-content($value: flex-start) { + @if $value == flex-start { + -webkit-box-pack: start; + -ms-flex-pack: start; + } @else if $value == flex-end { + -webkit-box-pack: end; + -ms-flex-pack: end; + } @else if $value == space-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + } @else if $value == space-around { + -ms-flex-pack: distribute; + } @else { + -webkit-box-pack: $value; + -ms-flex-pack: $value; + } + -webkit-justify-content: $value; + -moz-justify-content: $value; + justify-content: $value; +} + // Shorter version: + @mixin flex-just($args...) { @include justify-content($args...); } + +//---------------------------------------------------------------------- + +// Flexbox Align Items +// +// Flex items can be aligned in the cross axis of the current line of the +// flex container, similar to 'justify-content' but in the perpendicular +// direction. 'align-items' sets the default alignment for all of the flex +// container's items, including anonymous flex items. 'align-self' allows +// this default alignment to be overridden for individual flex items. (For +// anonymous flex items, 'align-self' always matches the value of 'align-items' +// on their associated flex container.) +// +// Values: flex-start | flex-end | center | baseline | stretch +// Default: stretch +// +// http://w3.org/tr/css3-flexbox/#align-items-property + +@mixin align-items($value: stretch) { + @if $value == flex-start { + -webkit-box-align: start; + -ms-flex-align: start; + } @else if $value == flex-end { + -webkit-box-align: end; + -ms-flex-align: end; + } @else { + -webkit-box-align: $value; + -ms-flex-align: $value; + } + -webkit-align-items: $value; + -moz-align-items: $value; + align-items: $value; +} + +//---------------------------------- + +// Flexbox Align Self +// +// Values: auto | flex-start | flex-end | center | baseline | stretch +// Default: auto + +@mixin align-self($value: auto) { + // No Webkit Box Fallback. + -webkit-align-self: $value; + -moz-align-self: $value; + @if $value == flex-start { + -ms-flex-item-align: start; + } @else if $value == flex-end { + -ms-flex-item-align: end; + } @else { + -ms-flex-item-align: $value; + } + align-self: $value; +} + +//---------------------------------------------------------------------- + +// Flexbox Align Content +// +// The 'align-content' property aligns a flex container's lines within the +// flex container when there is extra space in the cross-axis, similar to +// how 'justify-content' aligns individual items within the main-axis. Note, +// this property has no effect when the flexbox has only a single line. +// +// Values: flex-start | flex-end | center | space-between | space-around | stretch +// Default: stretch +// +// http://w3.org/tr/css3-flexbox/#align-content-property + +@mixin align-content($value: stretch) { + // No Webkit Box Fallback. + -webkit-align-content: $value; + -moz-align-content: $value; + @if $value == flex-start { + -ms-flex-line-pack: start; + } @else if $value == flex-end { + -ms-flex-line-pack: end; + } @else { + -ms-flex-line-pack: $value; + } + align-content: $value; +} diff --git a/_sass/_normalize.scss b/_sass/_normalize.scss new file mode 100755 index 0000000..18ddf7f --- /dev/null +++ b/_sass/_normalize.scss @@ -0,0 +1,419 @@ +/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + * 2. Add the correct display in IE. + */ + +article, +aside, +details, /* 1 */ +figcaption, +figure, +footer, +header, +main, /* 2 */ +menu, +nav, +section, +summary { /* 1 */ + display: block; +} + +/** + * Add the correct display in IE 9-. + */ + +audio, +canvas, +progress, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Add the correct display in IE 10-. + * 1. Add the correct display in IE. + */ + +template, /* 1 */ +[hidden] { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +select, +textarea { + font: inherit; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Restore the font weight unset by the previous rule. + */ + +optgroup { + font-weight: bold; +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss new file mode 100755 index 0000000..dc60655 --- /dev/null +++ b/_sass/_syntax.scss @@ -0,0 +1,61 @@ +.hll { background-color: #ffffcc } +.c { color: #999988; font-style: italic } /* Comment */ +.err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.k { color: #000000; font-weight: bold } /* Keyword */ +.o { color: #000000; font-weight: bold } /* Operator */ +.cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ +.c1 { color: #999988; font-style: italic } /* Comment.Single */ +.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.ge { color: #000000; font-style: italic } /* Generic.Emph */ +.gr { color: #aa0000 } /* Generic.Error */ +.gh { color: #999999 } /* Generic.Heading */ +.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.go { color: #888888 } /* Generic.Output */ +.gp { color: #555555 } /* Generic.Prompt */ +.gs { font-weight: bold } /* Generic.Strong */ +.gu { color: #aaaaaa } /* Generic.Subheading */ +.gt { color: #aa0000 } /* Generic.Traceback */ +.kc { color: #000000; font-weight: bold } /* Keyword.Constant */ +.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ +.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ +.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ +.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ +.kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.m { color: #009999 } /* Literal.Number */ +.s { color: #d01040 } /* Literal.String */ +.na { color: #008080 } /* Name.Attribute */ +.nb { color: #0086B3 } /* Name.Builtin */ +.nc { color: #445588; font-weight: bold } /* Name.Class */ +.no { color: #008080 } /* Name.Constant */ +.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ +.ni { color: #800080 } /* Name.Entity */ +.ne { color: #990000; font-weight: bold } /* Name.Exception */ +.nf { color: #990000; font-weight: bold } /* Name.Function */ +.nl { color: #990000; font-weight: bold } /* Name.Label */ +.nn { color: #555555 } /* Name.Namespace */ +.nt { color: #000080 } /* Name.Tag */ +.nv { color: #008080 } /* Name.Variable */ +.ow { color: #000000; font-weight: bold } /* Operator.Word */ +.w { color: #bbbbbb } /* Text.Whitespace */ +.mf { color: #009999 } /* Literal.Number.Float */ +.mh { color: #009999 } /* Literal.Number.Hex */ +.mi { color: #009999 } /* Literal.Number.Integer */ +.mo { color: #009999 } /* Literal.Number.Oct */ +.sb { color: #d01040 } /* Literal.String.Backtick */ +.sc { color: #d01040 } /* Literal.String.Char */ +.sd { color: #d01040 } /* Literal.String.Doc */ +.s2 { color: #d01040 } /* Literal.String.Double */ +.se { color: #d01040 } /* Literal.String.Escape */ +.sh { color: #d01040 } /* Literal.String.Heredoc */ +.si { color: #d01040 } /* Literal.String.Interpol */ +.sx { color: #d01040 } /* Literal.String.Other */ +.sr { color: #009926 } /* Literal.String.Regex */ +.s1 { color: #d01040 } /* Literal.String.Single */ +.ss { color: #990073 } /* Literal.String.Symbol */ +.bp { color: #999999 } /* Name.Builtin.Pseudo */ +.vc { color: #008080 } /* Name.Variable.Class */ +.vg { color: #008080 } /* Name.Variable.Global */ +.vi { color: #008080 } /* Name.Variable.Instance */ +.il { color: #009999 } /* Literal.Number.Integer.Long */ diff --git a/_sass/sassline-base/_variables.scss b/_sass/sassline-base/_variables.scss index 2f246c0..16bb2c1 100755 --- a/_sass/sassline-base/_variables.scss +++ b/_sass/sassline-base/_variables.scss @@ -84,13 +84,25 @@ $monospacetype: ( // 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 // Text colours. British English. -$headingColour: darken(#46412A, 5%) !default; -$bodyColour: #46412A !default; -$linkColour: #5B5BFF !default; -$hoverColour: darken(#5B5BFF, 10%) !default; -$captionColour: #46412A !default; +$headingColour: #2E2E2E !default; +$bodyColour: #494949 !default; +$linkColour: #0E58F5 !default; +$hoverColour: #0B348B !default; +$captionColour: #BDC8CC !default; $white: #FFFFFF !default; // Background colours. -$backgroundColour: #ffefc8 !default; -$codeBackgroundColour: darken(#ffefc8, 5%) !default; +$backgroundColour: #FCFCFC !default; +$codeBackgroundColour: #F5F4F2 !default; + + +// Alembic reassigned variables +$headingColour: $color__site--heading; +$bodyColour: $color__site--body; +$linkColour: $color__site--link; +$hoverColour: $color__site--link--hover; +$captionColour: $color__site--captions; +$white: #fff; + +$backgroundColour: $color__site--background; +$codeBackgroundColour: darken($color__site--background, 5%); diff --git a/_sass/sassline.scss b/_sass/sassline.scss deleted file mode 100644 index e96db8d..0000000 --- a/_sass/sassline.scss +++ /dev/null @@ -1 +0,0 @@ -.typeset pre,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}.typeset p,body{line-height:2rem}caption,img,td,th{vertical-align:middle}body,html{height:100%}a img{border:none}blockquote{quotes:none}blockquote:after,blockquote:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}caption,td,th{text-align:left;font-weight:400}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size:75%}@media screen and (min-width:40em){html{font-size:87.5%}}@media screen and (min-width:50em){html{font-size:93.75%}}@media screen and (min-width:64em){html{font-size:106.25%}}@media screen and (min-width:100em){html{font-size:118.75%}}body{font-family:Georgia,serif;font-style:normal;font-weight:400;font-size:1.33333rem}a{color:#0E58F5;text-decoration:none;transition:color .1s,background-color .1s}a:active,a:focus,a:hover{color:#0B348B;text-decoration:none}.typeset li a,.typeset p a{background-image:linear-gradient(to bottom,transparent 50%,#709cf9 50%);background-position:0 93%;background-repeat:repeat-x;background-size:100% .15rem;text-shadow:.1rem 0 #FCFCFC,.15rem 0 #FCFCFC,-.1rem 0 #FCFCFC,-.15rem 0 #FCFCFC}.typeset li a:active,.typeset li a:focus,.typeset li a:hover,.typeset p a:active,.typeset p a:focus,.typeset p a:hover{background-image:linear-gradient(to bottom,transparent 50%,#1257ea 50%)}.typeset p{-webkit-font-feature-settings:'kern','onum','liga';font-feature-settings:'kern','onum','liga';margin-bottom:1.43999rem;padding-top:.56001rem}@media screen and (min-width:40em){body{font-size:1.21429rem}.typeset p{margin-bottom:1.4007rem;padding-top:.5993rem}}@media screen and (min-width:50em){body{font-size:1.2rem}.typeset p{margin-bottom:1.39599rem;padding-top:.60401rem}}@media screen and (min-width:64em){body{font-size:1.17647rem}.typeset p{margin-bottom:1.38823rem;padding-top:.61177rem}}@media screen and (min-width:100em){body{font-size:1.15789rem}.typeset p{margin-bottom:1.3821rem;padding-top:.6179rem}}.typeset h1,.typeset h2,.typeset h3,.typeset h4,.typeset h5,.typeset h6{color:#2E2E2E;font-family:Helvetica,sans-serif;-webkit-font-feature-settings:'dlig','liga','lnum','kern';font-feature-settings:'dlig','liga','lnum','kern';font-style:normal;font-weight:700}.typeset .alpha,.typeset h1{line-height:3rem;font-size:2.33333rem;margin-bottom:.26999rem;padding-top:.73001rem}@media screen and (min-width:40em){.typeset .alpha,.typeset h1{font-size:2.14286rem;margin-bottom:.20713rem;padding-top:.79287rem}}@media screen and (min-width:50em){.typeset .alpha,.typeset h1{font-size:2.13333rem;margin-bottom:.20399rem;padding-top:.79601rem}}@media screen and (min-width:64em){.typeset .alpha,.typeset h1{font-size:2.35294rem;margin-bottom:.27646rem;padding-top:.72354rem}}@media screen and (min-width:100em){.typeset .alpha,.typeset h1{font-size:2.63158rem;margin-bottom:.36841rem;padding-top:.63159rem}}.typeset .beta,.typeset h2{line-height:3rem;font-size:2.08333rem;margin-bottom:.18749rem;padding-top:.81251rem}@media screen and (min-width:40em){.typeset .beta,.typeset h2{font-size:1.9rem;margin-bottom:.12699rem;padding-top:.87301rem}}@media screen and (min-width:50em){.typeset .beta,.typeset h2{font-size:1.87333rem;margin-bottom:.11819rem;padding-top:.88181rem}}@media screen and (min-width:64em){.typeset .beta,.typeset h2{font-size:2.08824rem;margin-bottom:.18911rem;padding-top:.81089rem}}@media screen and (min-width:100em){.typeset .beta,.typeset h2{font-size:2.31053rem;margin-bottom:.26246rem;padding-top:.73754rem}}.typeset .gamma,.typeset h3{line-height:3rem;font-size:1.86667rem;margin-bottom:.11599rem;padding-top:.88401rem}@media screen and (min-width:40em){.typeset .gamma,.typeset h3{font-size:1.71429rem;margin-bottom:.0657rem;padding-top:.9343rem}}@media screen and (min-width:50em){.typeset .gamma,.typeset h3{font-size:1.70667rem;margin-bottom:.06319rem;padding-top:.93681rem}}@media screen and (min-width:64em){.typeset .gamma,.typeset h3{font-size:1.76471rem;margin-bottom:.08234rem;padding-top:.91766rem}}@media screen and (min-width:100em){.typeset .gamma,.typeset h3{font-size:1.85789rem;margin-bottom:.1131rem;padding-top:.8869rem}}.typeset .delta,.typeset h4{line-height:2rem;font-size:1.66667rem;margin-bottom:-.45001rem;padding-top:.45001rem}@media screen and (min-width:40em){.typeset .delta,.typeset h4{font-size:1.52143rem;margin-bottom:-.49794rem;padding-top:.49794rem}}@media screen and (min-width:50em){.typeset .delta,.typeset h4{font-size:1.5rem;margin-bottom:-.50501rem;padding-top:.50501rem}}@media screen and (min-width:64em){.typeset .delta,.typeset h4{font-size:1.57059rem;margin-bottom:-.48172rem;padding-top:.48172rem}}@media screen and (min-width:100em){.typeset .delta,.typeset h4{font-size:1.63684rem;margin-bottom:-.45985rem;padding-top:.45985rem}}.typeset .epsilon,.typeset h5{line-height:2rem;font-size:1.49167rem;margin-bottom:-.50776rem;padding-top:.50776rem}@media screen and (min-width:40em){.typeset .epsilon,.typeset h5{font-size:1.37143rem;margin-bottom:-.54744rem;padding-top:.54744rem}}@media screen and (min-width:50em){.typeset .epsilon,.typeset h5{font-size:1.36667rem;margin-bottom:-.54901rem;padding-top:.54901rem}}@media screen and (min-width:64em){.typeset .epsilon,.typeset h5{font-size:1.32353rem;margin-bottom:-.56325rem;padding-top:.56325rem}}@media screen and (min-width:100em){.typeset .epsilon,.typeset h5{font-size:1.31579rem;margin-bottom:-.5658rem;padding-top:.5658rem}}.typeset .zeta,.typeset h6{line-height:2rem;font-size:1.33333rem;margin-bottom:-.56001rem;padding-top:.56001rem}@media screen and (min-width:40em){.typeset .zeta,.typeset h6{font-size:1.21429rem;margin-bottom:-.5993rem;padding-top:.5993rem}}@media screen and (min-width:50em){.typeset .zeta,.typeset h6{font-size:1.2rem;margin-bottom:-.60401rem;padding-top:.60401rem}}@media screen and (min-width:64em){.typeset .zeta,.typeset h6{font-size:1.17647rem;margin-bottom:-.61177rem;padding-top:.61177rem}}@media screen and (min-width:100em){.typeset .zeta,.typeset h6{font-size:1.15789rem;margin-bottom:-.6179rem;padding-top:.6179rem}}.typeset ol,.typeset ul{line-height:2rem;margin-bottom:1.43999rem;padding-top:.56001rem}@media screen and (min-width:40em){.typeset ol,.typeset ul{margin-bottom:1.4007rem;padding-top:.5993rem}}@media screen and (min-width:50em){.typeset ol,.typeset ul{margin-bottom:1.39599rem;padding-top:.60401rem}}@media screen and (min-width:64em){.typeset ol,.typeset ul{margin-bottom:1.38823rem;padding-top:.61177rem}}@media screen and (min-width:100em){.typeset ol,.typeset ul{margin-bottom:1.3821rem;padding-top:.6179rem}}.typeset ol li,.typeset ul li{-webkit-font-feature-settings:'kern','onum','liga';font-feature-settings:'kern','onum','liga';margin-left:2rem}@media screen and (min-width:40em){.typeset ol li,.typeset ul li{margin-left:0}}.typeset ol li ol,.typeset ol li ul,.typeset ul li ol,.typeset ul li ul{padding-top:1rem;margin-bottom:1rem;margin-left:2rem}.typeset ol{list-style-type:none}.typeset ol li{counter-increment:top-level}.typeset ol li:before{content:counter(top-level) ".";-webkit-font-feature-settings:'lnum','tnum';font-feature-settings:'lnum','tnum';margin-left:-3rem;position:absolute;text-align:right;width:2em}.typeset ol li ul li:before{content:''}.typeset ol li ul li ol li{counter-increment:alt-level}.typeset ol li ul li ol li:before{content:counter(alt-level) "."}.typeset ol li ol li{counter-increment:sub-level}.typeset ol li ol li:before{content:counter(top-level) "." counter(sub-level)}.typeset ol li ol li ul li:before{content:''}.typeset ol li ol li ol li{counter-increment:sub-sub-level}.typeset ol li ol li ol li:before{content:counter(top-level) "." counter(sub-level) "." counter(sub-sub-level)}.typeset dl{line-height:2rem;margin-bottom:1.43999rem;padding-top:.56001rem}@media screen and (min-width:40em){.typeset dl{margin-bottom:1.4007rem;padding-top:.5993rem}}@media screen and (min-width:50em){.typeset dl{margin-bottom:1.39599rem;padding-top:.60401rem}}@media screen and (min-width:64em){.typeset dl{margin-bottom:1.38823rem;padding-top:.61177rem}}@media screen and (min-width:100em){.typeset dl{margin-bottom:1.3821rem;padding-top:.6179rem}}.typeset dl dd,.typeset dl dt{-webkit-font-feature-settings:'kern','onum','liga';font-feature-settings:'kern','onum','liga';margin-left:2rem}.typeset dl dt{font-weight:700}.typeset dl dd+dt{padding-top:1rem}.typeset table{font-family:Helvetica,sans-serif;-webkit-font-feature-settings:'liga','lnum','tnum','kern';font-feature-settings:'liga','lnum','tnum','kern';font-style:normal;font-weight:400;width:100%;line-height:2rem;font-size:1.19167rem;margin-bottom:-.60676rem;padding-top:.60676rem}@media screen and (min-width:40em){.typeset dl dd,.typeset dl dt{margin-left:0}.typeset table{font-size:1.09286rem;margin-bottom:-.63937rem;padding-top:.63937rem}}@media screen and (min-width:50em){.typeset table{font-size:1.08667rem;margin-bottom:-.64141rem;padding-top:.64141rem}}@media screen and (min-width:64em){.typeset table{font-size:.99412rem;margin-bottom:-.67195rem;padding-top:.67195rem}}@media screen and (min-width:100em){.typeset table{font-size:.92632rem;margin-bottom:-.69433rem;padding-top:.69433rem}}.typeset table thead th{line-height:2rem;font-size:1.33333rem;margin-bottom:-.56001rem;padding-top:.56001rem;padding-bottom:1px}@media screen and (min-width:40em){.typeset table thead th{font-size:1.21429rem;margin-bottom:-.5993rem;padding-top:.5993rem}}@media screen and (min-width:50em){.typeset table thead th{font-size:1.2rem;margin-bottom:-.60401rem;padding-top:.60401rem}}@media screen and (min-width:64em){.typeset table thead th{font-size:1.17647rem;margin-bottom:-.61177rem;padding-top:.61177rem}}@media screen and (min-width:100em){.typeset table thead th{font-size:1.15789rem;margin-bottom:-.6179rem;padding-top:.6179rem}}.typeset .bold,.typeset b,.typeset strong{font-weight:700}.typeset .italic,.typeset em,.typeset i{font-style:italic}.typeset .caption,.typeset small{font-family:Helvetica,sans-serif;font-style:normal;font-weight:400;font-size:1.06667rem}.typeset small{line-height:1rem}.typeset .caption{color:#BDC8CC;line-height:2rem;margin-bottom:1.35199rem;padding-top:.64801rem}@media screen and (min-width:40em){.typeset .caption,.typeset small{font-size:.97143rem}.typeset .caption{margin-bottom:1.32056rem;padding-top:.67944rem}}@media screen and (min-width:50em){.typeset .caption,.typeset small{font-size:.96rem}.typeset .caption{margin-bottom:1.31679rem;padding-top:.68321rem}}@media screen and (min-width:64em){.typeset .caption,.typeset small{font-size:.88235rem}.typeset .caption{margin-bottom:1.29117rem;padding-top:.70883rem}}@media screen and (min-width:100em){.typeset .caption,.typeset small{font-size:.82105rem}.typeset .caption{margin-bottom:1.27094rem;padding-top:.72906rem}}.typeset .alpha+.caption,.typeset .beta+.caption,.typeset .gamma+.caption,.typeset h1+.caption,.typeset h2+.caption,.typeset h3+.caption{margin-top:-1rem}.typeset .delta+.caption,.typeset .epsilon+.caption,.typeset .zeta+.caption{margin-top:0}.typeset blockquote p{border-left:.15rem solid #0E58F5;font-style:italic;padding-left:1rem;margin-bottom:1.87999rem;padding-bottom:.56001rem}@media screen and (min-width:40em){.typeset blockquote p{margin-bottom:1.80142rem;padding-bottom:.5993rem}.typeset blockquote{margin-left:-1rem}}@media screen and (min-width:50em){.typeset blockquote p{margin-bottom:1.79199rem;padding-bottom:.60401rem}}@media screen and (min-width:64em){.typeset blockquote p{margin-bottom:1.77646rem;padding-bottom:.61177rem}}@media screen and (min-width:100em){.typeset blockquote p{margin-bottom:1.7642rem;padding-bottom:.6179rem}}.typeset hr{background-image:linear-gradient(to bottom,transparent 50%,#BDC8CC 50%);background-position:0 50%;background-repeat:repeat-x;background-size:100% .15rem;border:0;margin:0;padding-bottom:3rem;padding-top:3rem}.typeset code,.typeset pre{background-color:#F5F4F2;font-family:Menlo,monospace}.typeset pre{margin-bottom:2rem;padding:1rem;white-space:pre;white-space:pre-wrap;word-break:break-all;word-wrap:break-word}.typeset code{line-height:1rem;font-size:1.06667rem}@media screen and (min-width:40em){.typeset code{font-size:.97143rem}}@media screen and (min-width:50em){.typeset code{font-size:.96rem}}.typeset .upper{-webkit-font-kerning:normal;font-kerning:normal;letter-spacing:.1rem;text-transform:uppercase}.typeset .small-caps{-webkit-font-feature-settings:'smcp','kern';font-feature-settings:'smcp','kern';-webkit-font-kerning:normal;font-kerning:normal;letter-spacing:.1rem}.typeset .lining-numerals{-webkit-font-feature-settings:'lnum','kern';font-feature-settings:'lnum','kern'}.typeset .oldstyle-numerals{-webkit-font-feature-settings:'onum','kern';font-feature-settings:'onum','kern'}.section{margin:0;position:relative;width:94%}.section:after,.section:before{display:table;content:""}.section:after{clear:both}@media screen and (min-width:64em){.typeset code{font-size:.88235rem}.section{max-width:64.70588rem}}@media screen and (min-width:100em){.typeset code{font-size:.82105rem}.section{max-width:68.42105rem}}.single-measure{margin:0 auto;max-width:41.66667rem}@media screen and (min-width:40em){.single-measure{max-width:39.28571rem}}@media screen and (min-width:50em){.single-measure{max-width:40rem}}@media screen and (min-width:64em){.single-measure{max-width:40rem}}@media screen and (min-width:100em){.single-measure{max-width:39.47368rem}}.column{margin:0 auto;width:100%;max-width:41.66667rem}@media screen and (min-width:40em){.column{float:left;margin:inherit;max-width:auto;padding-left:1rem;padding-right:1rem}.column--duo{width:50%}.column--duo:nth-child(3n){clear:left}.column--duo:nth-child(n+3){margin-top:2rem}.column--trio{width:33.333%}.column--trio:nth-child(4n){clear:left}.column--trio:nth-child(n+4){margin-top:2rem}.column--quad{width:50%}.column--main{max-width:65%}}@media screen and (min-width:50em){.column--quad{width:25%}.column--main{max-width:65%}}@media screen and (min-width:64em){.column{padding-left:2rem;padding-right:2rem}.column--main{max-width:65%}}@media screen and (min-width:100em){.column--main{max-width:63.53846%}}@media screen and (min-width:40em){.column--sidebar{padding-right:2rem;max-width:35%}}@media screen and (min-width:50em){.column--sidebar{max-width:35%}}@media screen and (min-width:64em){.column--sidebar{padding-right:4rem;max-width:35%}}@media screen and (min-width:40em){.column--main+.column--sidebar{padding-left:2rem;padding-right:1rem}}@media screen and (min-width:64em){.column--main+.column--sidebar{padding-left:4rem;padding-right:2rem}.column--quad p,.column--sidebar p,.column--trio p{line-height:2rem;font-size:.99412rem;margin-bottom:1.32805rem;padding-top:.67195rem}.column--quad li,.column--sidebar li,.column--trio li{font-size:.99412rem}}@media screen and (min-width:100em){.column--sidebar{max-width:36.46154%}.column--quad p,.column--sidebar p,.column--trio p{line-height:2rem;font-size:.92632rem;margin-bottom:1.30567rem;padding-top:.69433rem}.column--quad li,.column--sidebar li,.column--trio li{font-size:.92632rem}}@media screen and (min-width:40em){.column--right{max-width:65%;margin-left:35%}}@media screen and (min-width:50em){.column--right{max-width:65%;margin-left:35%}}@media screen and (min-width:64em){.column--right{max-width:65%;margin-left:35%}}@media screen and (min-width:100em){.column--right{max-width:63.53846%;margin-left:36.46154%}}@media screen and (min-width:40em){.column--right .sidenote{left:0;padding-left:1rem;padding-right:2rem;position:absolute;max-width:35%}}@media screen and (min-width:50em){.column--right .sidenote{max-width:35%}}@media screen and (min-width:64em){.column--right .sidenote{padding-right:4rem;max-width:35%}}@media screen and (min-width:100em){.column--right .sidenote{padding-left:2rem;max-width:36.46154%}}@media screen and (min-width:40em){.column--left{max-width:65%}}@media screen and (min-width:50em){.column--left{max-width:65%}}@media screen and (min-width:64em){.column--left{max-width:65%}}@media screen and (min-width:100em){.column--left{max-width:63.53846%}}@media screen and (min-width:40em){.column--left .sidenote{padding-left:2rem;padding-right:1rem;position:absolute;max-width:35%;left:65%}}@media screen and (min-width:50em){.column--left .sidenote{max-width:35%;left:65%}}@media screen and (min-width:64em){.column--left .sidenote{padding-left:4rem;max-width:35%;left:65%}}@media screen and (min-width:100em){.column--left .sidenote{padding-right:2rem;max-width:36.46154%;left:63.53846%}}body{background-color:#FCFCFC;color:#494949;overflow-x:hidden}.section{padding:2rem 0}@media screen and (min-width:40em){.section{padding:3rem 0}}@media screen and (min-width:50em){.section{padding:4rem 0}}img{-ms-interpolation-mode:bicubic;height:auto;width:100%}@media screen and (min-width:40em){img{margin:0 auto;max-width:100%;width:auto}}.nav-collapse li,.nav-collapse ul{width:100%;display:block}.button-align{line-height:2rem;margin-bottom:1.43999rem;padding-top:.56001rem}@media screen and (min-width:40em){.button-align{margin-bottom:1.4007rem;padding-top:.5993rem}}@media screen and (min-width:50em){.button-align{margin-bottom:1.39599rem;padding-top:.60401rem}}@media screen and (min-width:64em){.button-align{margin-bottom:1.38823rem;padding-top:.61177rem}}@media screen and (min-width:100em){.button-align{margin-bottom:1.3821rem;padding-top:.6179rem}}.nav-collapse ul{list-style:none;margin:0;padding:0}.nav-collapse.opened{max-height:9999px}.js .nav-collapse{clip:rect(0 0 0 0);display:block;max-height:0;overflow:hidden;position:absolute;zoom:1}.disable-pointer-events{pointer-events:none}.nav-toggle{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.main-nav .main-nav__list{border-top:.1rem solid #d9d9d9}@media screen and (min-width:40em){.js .nav-collapse{max-height:none;position:relative}.nav-toggle{display:none}.main-nav{display:inline-block;width:calc(100% - 132px - 2rem);vertical-align:middle}.main-nav .main-nav__list{border:0;background-color:transparent;margin-left:0;text-align:right;width:100%}}.main-nav li{font-family:Helvetica,sans-serif;font-style:normal;font-weight:400;font-size:1.33333rem}.main-nav li a,.main-nav li span{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-bottom:.1rem solid #d9d9d9;color:#0E58F5;cursor:pointer;display:block;padding:10px 3%}.main-nav li a:active,.main-nav li a:focus,.main-nav li a:hover,.main-nav li span:active,.main-nav li span:focus,.main-nav li span:hover{background-color:#0E58F5;color:#FFF}@media screen and (min-width:40em){.main-nav li{display:inline-block;letter-spacing:.1rem;margin-right:2rem;padding:1rem 0;text-transform:uppercase;width:auto;font-size:.85714rem}.main-nav li a,.main-nav li span{border:0;color:#BDC8CC;display:inline;padding:0}.main-nav li a:active,.main-nav li a:focus,.main-nav li a:hover,.main-nav li span:active,.main-nav li span:focus,.main-nav li span:hover{background-color:transparent;color:#0E58F5}.js .nav-collapse{display:inline-block;max-height:none;position:relative}}@media screen and (min-width:50em){.main-nav li{font-size:.8rem}}@media screen and (min-width:64em){.main-nav li{font-size:.70588rem}}@media screen and (min-width:100em){.main-nav li{font-size:.63158rem}}.js .nav-toggle{display:block;line-height:0;position:absolute;right:3%;top:1.3rem}.js .nav-toggle:after{background-image:url(../img/menu.svg);background-position:0 0;background-size:30px 60px;content:'';display:block;height:30px;width:30px}.js .nav-toggle.active:after{background-position:0 30px}@media screen and (min-width:40em){.js .nav-toggle{display:none}}.global-header{background-color:#FCFCFC;font-size:0}.global-header .global-header__logo{background-image:url(../img/sassline-logo.svg);background-size:132px 19px;color:transparent;display:inline-block;font:0/0 a;height:19px;margin:2rem 0 2rem 3%;position:relative;vertical-align:middle;width:132px}@media screen and (min-width:40em){.global-header .global-header__logo{margin-left:2rem}}.global-header .global-header__logo a{bottom:0;left:0;position:absolute;right:0;top:0}.global-footer p{color:#BDC8CC;font-family:Helvetica,sans-serif;font-style:normal;font-weight:400;padding:1rem 0;margin:0;text-align:center;font-size:1.19167rem}@media screen and (min-width:40em){.global-footer p{font-size:1.09286rem}}@media screen and (min-width:50em){.global-footer p{font-size:1.08667rem}}@media screen and (min-width:64em){.global-footer p{font-size:.99412rem}}@media screen and (min-width:100em){.global-footer p{font-size:.92632rem}}#baseline.show-grid{background-image:linear-gradient(to bottom,#0ff 0,rgba(255,255,255,0) 1px);background-repeat:repeat-y;background-size:100% 1rem} diff --git a/_sass/style.scss b/_sass/style.scss deleted file mode 100755 index 5c06465..0000000 --- a/_sass/style.scss +++ /dev/null @@ -1,12 +0,0 @@ -/* CSS compiled from SCSS. */ -/* --------------------------------------- */ - -// Import Sassline base. -@import "sassline-base"; - -// Import your project SCSS module partials. -@import "modules/globals"; -@import "modules/nav"; -@import "modules/header"; -@import "modules/footer"; -@import "modules/show-grid"; diff --git a/_sass/theme.scss b/_sass/theme.scss deleted file mode 100644 index 21933be..0000000 --- a/_sass/theme.scss +++ /dev/null @@ -1,84 +0,0 @@ -// Imports -@import "sassline-base"; - -// Layout -body { - margin: 0; - background: $backgroundColour; -} - -.container { - max-width: 900px; - margin: 0 auto; - padding-left: 20px; - padding-right: 20px; -} - -// Header -.header { - background: darken($backgroundColour, 10%); - border-bottom: 1px solid darken($backgroundColour, 15%); - .button { - display: none; - } - .container { - display: flex; - align-items: center; - justify-content: space-between; - } -} - -// Logo -.logo { - padding: 10px 10px 10px 0; - .image { - max-width: 52px; - height: auto; - border-radius: 100%; - } - display: inline-block; - line-height: 0; -} - -// Navigation -.nav { - text-align: right; - .item { - display: inline-block; - margin-left: 20px; - } -} - -// Main -.main { - padding-bottom: 20px; -} - -// Article -.article { - .small { - color: lighten($bodyColour, 15%); - } -} - -// Posts -.posts { - list-style: none; - .post { - padding: 0; - } -} - -// Pagination -.paginator { - text-align: center; - .pagination { - margin: 0 5px; - } -} - -// Footer -.footer { - padding: 20px 0; - border-top: 1px solid darken($backgroundColour, 10%); -} diff --git a/about.md b/about.md new file mode 100644 index 0000000..2f4d980 --- /dev/null +++ b/about.md @@ -0,0 +1,5 @@ +--- +title: About Garth +--- + +Garth is a really simple Jekyll theme, like really simple. Ya get me? diff --git a/assets/styles.scss b/assets/styles.scss new file mode 100755 index 0000000..ef77b5d --- /dev/null +++ b/assets/styles.scss @@ -0,0 +1,171 @@ +--- +styles: true +--- + + +// Frameworks & Imports +@charset "utf-8"; +@import "colors.scss"; +@import "normalize"; +@import "sassline-base"; +@import "syntax"; +@import "flex"; + + +// Structural elements +body { + background: $color__site--background; + color: $color__site--body; + height: 100%; + display: flex; + @include flex-direction(column); + overflow-x: hidden; +} + +.container { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + + +// Header, feature and footer +.header, +.footer { + .container { + padding: 1rem 0; + @include flexbox; + @include flex-direction(column); + @include align-items(center); + text-align: center; + } + @include breakpoint(break-1) { + .container { + @include flex-direction(row); + @include justify-content(space-between); + text-align: inherit; + } + } +} + +.header { + @include flex(0, 0, auto); + background: darken($color__site--background, 10%); +} + +.logo { + display: inline-block; + line-height: 0; + border-radius: 100%; + overflow: hidden; + img { + width: 4rem; + height: 4rem; + } +} + +.small { + padding-top: .6rem; + color: $color__site--captions; + display: inline-block; +} + +.footer { + border-top: 1px solid darken($color__site--background, 15%); +} + + +// Nav and copyright +.nav { + &--paginator { + @include flexbox; + @include justify-content(center); + color: $color__site--captions; + text-align: center; + } +} + +.pagination { + margin: 0 1rem; +} + + +// Main content +.main { + @include flexbox; + @include flex-direction(column); + @include flex(1, 0, auto); + margin-bottom: 1.6rem; + @include breakpoint(break-1) { + @include flex-direction(row); + } +} + + +// Lists +.list { + &--posts { + list-style: none; + } + &--nav { + list-style: none; + } + .item--post { + margin-left: 0; + } +} + +.item { + &--nav { + display: inline-block; + margin-left: 1rem; + &:first-of-type { + margin-left: 0; + } + } + &--current { + a { + color: $color__site--link--current; + } + } +} + + +// Images and media elements +img { + max-width: 100%; + height: auto; +} + +audio, +video { + width: 100%; +} + + +// Text selection +::selection { + background: $color__site--heading; + color: $color__site--background; + text-shadow: none; +} + + +// Sassline overrides +.typeset { + .button, + button { + background-image: none; + text-shadow: none; + color: lighten(invert($color__site--body), 15%); + &:hover, + &:active, + &:focus { + background-image: none; + color: lighten(invert($color__site--body), 15%); + } + } + hr { + width: 100%; + } +} diff --git a/demo/404.md b/demo/404.md new file mode 100755 index 0000000..3ddb248 --- /dev/null +++ b/demo/404.md @@ -0,0 +1,7 @@ +--- +title: "404" +excerpt: "Page Not Found" +permalink: 404.html +--- + +Sorry, but the page could not be found. diff --git a/demo/Gemfile b/demo/Gemfile new file mode 100755 index 0000000..44e7566 --- /dev/null +++ b/demo/Gemfile @@ -0,0 +1,12 @@ +source "https://rubygems.org" + +# Make sure Jekyll 3.3 is running +gem "jekyll", "~> 3.3" + +# The theme for the site +gem "garth-jekyll-theme", "~> 0.4" + +# The plugins for the site +group :jekyll_plugins do + gem "jekyll-paginate" +end diff --git a/demo/_config.yml b/demo/_config.yml index 11a2340..68c7e37 100755 --- a/demo/_config.yml +++ b/demo/_config.yml @@ -1,10 +1,63 @@ +# Site configuration +# 1. Files excluded from Jekyll builds +# 2. Installed Gems +# 3. Gem settings +# 4. Jekyll settings +# 5. Collections +# 6. Jekyll collections settings +# 7. Site settings + +# 1. Files excluded from Jekyll builds +exclude: +- README.md +- screenshot.png +- LICENSE +- CNAME +- Gemfile +- Gemfile.lock + +# 2. Installed Gems +gems: +- jekyll-paginate + theme: garth-jekyll-theme -title: This is Garth -description: "Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." +# 3. Gem settings +paginate: 2 # jekyll-paginate > items per page +paginate_path: blog/page:num # jekyll-paginate > blog page +# 4. Jekyll settings +sass: + style: compressed # Style compression +permalink: pretty # Permalink style (/YYYY/MM/DD/page-name/) +excerpt_separator: # Marks end of excerpt in posts +timezone: Europe/London # Timezone for blog posts and alike + +# 5. Collections collections: posts: - permalink: /posts/:title + title: Welcome # Needed for Siteleaf + output: true + description: "Welcome to my blog!" # The post list page content -logo: https://avatars3.githubusercontent.com/u/1177460?v=3&s=300 +# 6. Jekyll collections settings +defaults: + - + scope: + path: "" + type: pages + values: + layout: page # Default layout + - + scope: + path: "" + type: posts + values: + layout: post # Default layout + +# 7. Site settings +encoding: utf-8 # Make sure the encoding is right +title: "Garth" # Site name or title +logo: "https://www.gravatar.com/avatar/6c0377abcf4da91cdd35dea4554b2a4c?s=500" # Site logo +description: "A stupidly simple theme for Jekyll, using the official Jekyll theme implementation" # Site description and default description +url: "https://garth.darn.es" # Site url diff --git a/demo/_posts/2016-05-20-my-example-post.md b/demo/_posts/2016-05-20-my-example-post.md deleted file mode 100755 index 145b21d..0000000 --- a/demo/_posts/2016-05-20-my-example-post.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -layout: post ---- - -Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te. - -{% comment %} -Might you have an include in your theme? Why not try it here! -{% include my-themes-great-include.html %} -{% endcomment %} - -No laudem altera adolescens has, volumus lucilius eum no. Eam ei nulla audiam efficiantur. Suas affert per no, ei tale nibh sea. Sea ne magna harum, in denique scriptorem sea, cetero alienum tibique ei eos. Labores persequeris referrentur eos ei. diff --git a/demo/_posts/2016-05-20-super-long-article.md b/demo/_posts/2016-05-20-super-long-article.md deleted file mode 100755 index 5652a9a..0000000 --- a/demo/_posts/2016-05-20-super-long-article.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -layout: post -title: "Some articles are just so long they deserve a really long title to see if things will break well" -categories: misc ---- - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. diff --git a/demo/_posts/2016-05-20-this-post-demonstrates-post-content-styles.md b/demo/_posts/2016-05-20-this-post-demonstrates-post-content-styles.md deleted file mode 100755 index 606eac2..0000000 --- a/demo/_posts/2016-05-20-this-post-demonstrates-post-content-styles.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -layout: post -title: "This post demonstrates post content styles" -categories: junk -author: "Bart Simpson" -meta: "Springfield" ---- - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. - -## Some great heading (h2) - -Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. - -Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. - -## Another great heading (h2) - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. - -### Some great subheading (h3) - -Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. - -Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. - -### Some great subheading (h3) - -Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. - -> This quote will change your life. It will reveal the secrets of the universe, and all the wonders of humanity. Don't misuse it. - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. - -### Some great subheading (h3) - -Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. - -```html - - - - -

Hello, World!

- - -``` - - -In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. - -#### You might want a sub-subheading (h4) - -In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. - -In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. - -#### But it's probably overkill (h4) - -In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. - -### Oh hai, an unordered list!! - -In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. - -- First item, yo -- Second item, dawg -- Third item, what what?! -- Fourth item, fo sheezy my neezy - -### Oh hai, an ordered list!! - -In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. - -1. First item, yo -2. Second item, dawg -3. Third item, what what?! -4. Fourth item, fo sheezy my neezy - - - -## Headings are cool! (h2) - -Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. - -Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. - -Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. diff --git a/demo/_posts/2016-08-27-example-post-one.md b/demo/_posts/2016-08-27-example-post-one.md new file mode 100755 index 0000000..dd3508b --- /dev/null +++ b/demo/_posts/2016-08-27-example-post-one.md @@ -0,0 +1,14 @@ +--- +title: What was Wayne's World? +category: General +--- + +Wayne's World is a 1992 American 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. + + + +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. + +Wayne's World was Myers' feature film debut. It also features Rob Lowe, Tia Carrere, Lara Flynn Boyle, Brian Doyle-Murray, Robert Patrick (spoofing his 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. + +_Originally from [Wayne's World (film) - Wikipedia](https://en.wikipedia.org/wiki/Wayne%27s_World_(film))_ diff --git a/demo/_posts/2016-08-28-example-post-two.md b/demo/_posts/2016-08-28-example-post-two.md new file mode 100755 index 0000000..6e059f1 --- /dev/null +++ b/demo/_posts/2016-08-28-example-post-two.md @@ -0,0 +1,20 @@ +--- +title: Who is Mike Myers? +category: People +--- + +Michael John "Mike" Myers (born May 25, 1963) is a Canadian-born actor, comedian, screenwriter, and film producer, who also holds UK and US citizenship.[1] He is known for his 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. He also directed the documentary film Supermensch: The Legend of Shep Gordon, and had a small role in Quentin Tarantino's Inglourious Basterds in 2009. + + + +Myers was born on May 25, 1963 in Scarborough, Ontario, the son of English-born parents Eric Myers (1922–1991), an insurance agent, and his wife, Alice E. (née Hind; born 1926), an office supervisor and a veteran of the Royal Air Force. + +Both his parents were from Liverpool and he has two older brothers, Paul, an indie rock singer-songwriter, broadcaster and author, and Peter, a Sears Canada employee. + +The family is of English, Scottish and Irish ancestry. Myers was raised Protestant. + +Myers reportedly holds Canadian, U.S. and British citizenship. + +Myers grew up in North York and then Scarborough, where he attended Sir John A. MacDonald Collegiate Institute and then graduated from Stephen Leacock Collegiate Institute in 1982. + +_Originally from [Mike Myers - Wikipedia](https://en.wikipedia.org/wiki/Mike_Myers)_ diff --git a/demo/_posts/2016-08-29-example-post-three.md b/demo/_posts/2016-08-29-example-post-three.md new file mode 100755 index 0000000..0aa997e --- /dev/null +++ b/demo/_posts/2016-08-29-example-post-three.md @@ -0,0 +1,14 @@ +--- +title: Who is Dana Carvey? +category: People +--- + +Dana Thomas Carvey (born June 2, 1955) is an American actor and stand-up comedian known for his work as a cast member on Saturday Night Live and for playing the role of Garth Algar in the Wayne's World films. + + + +Carvey was born in Missoula, Montana, the son of Billie Dahl, a schoolteacher, and Bud Carvey, a high-school business teacher. Carvey is the brother 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 he was three years old, his family moved to San Carlos, California, in the San Francisco Bay Area. He received his first drum kit at an early age. He attended Tierra Linda Junior High in San Carlos, Carlmont High School in Belmont, California (where he was a member of the Central Coast Section champion cross country team), College of San Mateo in San Mateo, California, and received his bachelor's degree in broadcast communications from San Francisco State University. + +He 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 he played a mime, with fellow comedian Billy Crystal (who tells him "Mime is money!"). He also appeared in the short-lived film-based action television series Blue Thunder. + +_Originally from [Dana Carvey - Wikipedia](https://en.wikipedia.org/wiki/Dana_Carvey)_ diff --git a/demo/about.md b/demo/about.md old mode 100755 new mode 100644 index e6c5270..2f4d980 --- a/demo/about.md +++ b/demo/about.md @@ -1,85 +1,5 @@ --- -title: About -layout: page +title: About Garth --- -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. - -## Some great heading (h2) - -Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. - -Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. - -## Another great heading (h2) - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. - -### Some great subheading (h3) - -Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. - -Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. - -### Some great subheading (h3) - -Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. - -> This quote will change your life. It will reveal the secrets of the universe, and all the wonders of humanity. Don't misuse it. - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. - -### Some great subheading (h3) - -Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. - -```html - - - - -

Hello, World!

- - -``` - - -In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. - -#### You might want a sub-subheading (h4) - -In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. - -In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. - -#### But it's probably overkill (h4) - -In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. - -### Oh hai, an unordered list!! - -In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. - -- First item, yo -- Second item, dawg -- Third item, what what?! -- Fourth item, fo sheezy my neezy - -### Oh hai, an ordered list!! - -In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. - -1. First item, yo -2. Second item, dawg -3. Third item, what what?! -4. Fourth item, fo sheezy my neezy - - - -## Headings are cool! (h2) - -Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. - -Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est. - -Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. +Garth is a really simple Jekyll theme, like really simple. Ya get me? diff --git a/demo/blog.html b/demo/blog.html deleted file mode 100755 index 86414bd..0000000 --- a/demo/blog.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Blog -layout: front ---- - -

My posts and thoughts.

diff --git a/demo/css/styles.scss b/demo/css/styles.scss deleted file mode 100755 index eea1305..0000000 --- a/demo/css/styles.scss +++ /dev/null @@ -1,4 +0,0 @@ ---- ---- - -@import "theme"; diff --git a/demo/index.md b/demo/index.md deleted file mode 100644 index 2ac1f8e..0000000 --- a/demo/index.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Home -layout: page ---- - -Lorem ipsum dolor sit amet, quo id prima corrumpit pertinacia, id ius dolor dolores, an veri pertinax explicari mea. Agam solum et qui, his id ludus graeco adipiscing. Duis theophrastus nam in, at his vidisse atomorum. Tantas gloriatur scripserit ne eos. Est wisi tempor habemus at, ei graeco dissentiet eos. Ne usu aliquip sanctus conceptam, te vis ignota animal, modus latine contentiones ius te. - -Te falli veritus sea, at molestiae scribentur deterruisset vix, et mea zril phaedrum vulputate. No cum dicit consulatu. Ut has nostro noluisse expetendis, te pro quaeque disputando, eu sed summo omnes. Eos at tale aperiam, usu cu propriae quaestio constituto, sed aperiam erroribus temporibus an. - -Quo eu liber mediocritatem, vix an delectus eleifend, iuvaret suscipit ei vel. Partem invenire per an, mea postulant dissentias eu, ius tantas audire nominavi eu. Dicunt tritani veritus ex vis, mei in case sententiae. At exerci democritum nam, cu lobortis iracundia mei. Alia eligendi consectetuer eu sed, paulo docendi noluisse sit ex. diff --git a/demo/js/scripts.js b/demo/js/scripts.js deleted file mode 100644 index 64f7d3f..0000000 --- a/demo/js/scripts.js +++ /dev/null @@ -1,4 +0,0 @@ ---- ---- - -{% include theme.js %} diff --git a/garth-jekyll-theme.gemspec b/garth-jekyll-theme.gemspec old mode 100644 new mode 100755 index 35439b7..c657901 --- a/garth-jekyll-theme.gemspec +++ b/garth-jekyll-theme.gemspec @@ -2,16 +2,19 @@ Gem::Specification.new do |spec| spec.name = "garth-jekyll-theme" - spec.version = "0.3.0" + spec.version = "0.4.0" spec.authors = ["David Darnes"] spec.email = ["me@daviddarnes.com"] - spec.summary = "A stupidly simple theme for Jekyll (3.2)" - spec.description = 'A stupidly simple theme for Jekyll (3.2), using official Jekyll theme implementation' - spec.homepage = "https://github.com/daviddarnes/garth-jekyll-theme" + spec.summary = %q{A stupidly simple theme for Jekyll.} + spec.description = "A stupidly simple theme for Jekyll, using the official Jekyll theme implementation." + spec.homepage = "https://garth.darn.es" spec.license = "MIT" - spec.files = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(_layouts|_includes|_sass|LICENSE|README)/i}) } + spec.files = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|_layouts|_includes|_sass|LICENSE|README)}i) } - spec.add_runtime_dependency "jekyll", "~> 3.2" + spec.add_runtime_dependency "jekyll", "~> 3.3" + spec.add_runtime_dependency "jekyll-paginate", "~> 1.1" + + spec.add_development_dependency "bundler", "~> 1.12" end diff --git a/index.html b/index.html new file mode 100755 index 0000000..4f9a305 --- /dev/null +++ b/index.html @@ -0,0 +1,4 @@ +--- +layout: home +collectionpage: posts +--- diff --git a/screenshot.png b/screenshot.png index b84edbd..0f962b8 100644 Binary files a/screenshot.png and b/screenshot.png differ