Merge pull request #6 from daviddarnes/gh-pages

Version 0.4.0 Update
This commit is contained in:
David Darnes 2017-01-04 22:45:52 +00:00 committed by GitHub
commit f7d05a9116
55 changed files with 1510 additions and 515 deletions

2
.gitignore vendored
View File

@ -2,3 +2,5 @@ _site/
.sass-cache/
.jekyll-metadata
garth-jekyll-theme-*.gem
Gemfile.lock
**/Gemfile.lock

7
404.md Executable file
View File

@ -0,0 +1,7 @@
---
title: "404"
excerpt: "Page Not Found"
permalink: 404.html
---
Sorry, but the page could not be found.

1
CNAME Executable file
View File

@ -0,0 +1 @@
garth.darn.es

2
Gemfile Executable file
View File

@ -0,0 +1,2 @@
source "https://rubygems.org"
gemspec

2
LICENSE Normal file → Executable file
View File

@ -1,4 +1,4 @@
The MIT License (MIT)
MIT License
Copyright (c) 2016 David Darnes

64
README.md Normal file → Executable file
View File

@ -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)

63
_config.yml Executable file
View File

@ -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: <!-- more --> # 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

View File

@ -1,18 +0,0 @@
<link rel="apple-touch-icon" sizes="57x57" href="{{ site.logo | replace: "300", "57" }}">
<link rel="apple-touch-icon" sizes="60x60" href="{{ site.logo | replace: "300", "60" }}">
<link rel="apple-touch-icon" sizes="72x72" href="{{ site.logo | replace: "300", "72" }}">
<link rel="apple-touch-icon" sizes="76x76" href="{{ site.logo | replace: "300", "76" }}">
<link rel="apple-touch-icon" sizes="114x114" href="{{ site.logo | replace: "300", "114" }}">
<link rel="apple-touch-icon" sizes="120x120" href="{{ site.logo | replace: "300", "120" }}">
<link rel="apple-touch-icon" sizes="144x144" href="{{ site.logo | replace: "300", "144" }}">
<link rel="apple-touch-icon" sizes="152x152" href="{{ site.logo | replace: "300", "152" }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ site.logo | replace: "300", "180" }}">
<link rel="icon" type="image/png" href="{{ site.logo | replace: "300", "32" }}" sizes="32x32">
<link rel="icon" type="image/png" href="{{ site.logo | replace: "300", "194" }}" sizes="194x194">
<link rel="icon" type="image/png" href="{{ site.logo | replace: "300", "96" }}" sizes="96x96">
<link rel="icon" type="image/png" href="{{ site.logo | replace: "300", "192" }}" sizes="192x192">
<link rel="icon" type="image/png" href="{{ site.logo | replace: "300", "16" }}" sizes="16x16">
<link rel="shortcut icon" href="{{ site.logo }}">
<meta name="msapplication-TileColor" content="{{ site.color }}">
<meta name="msapplication-TileImage" content="{{ site.logo | replace: "300", "144" }}">
<meta name="theme-color" content="{{ site.color }}">

View File

@ -1,9 +0,0 @@
<footer class="footer">
<div class="container">
<small class="small">&copy; {{ site.time | date: '%Y' }}&nbsp;&nbsp;{% if site.title %}{{ site.title }}{% else %}Garth by <a href="https://darn.es/" title="David Darnes">David Darnes</a>{% endif %}</small>
</div>
</footer>

View File

@ -1,25 +0,0 @@
<header class="header">
<div class="container">
{% if site.logo %}
<a class="logo" href="/" title="{{ site.title }}">
<img class="image" src="{{ site.logo | replace: "300", "72" }}" alt="{{ site.title }}" srcset="{{ site.logo | replace: "300", "72" }} 72w, {{ site.logo | replace: "300", "144" }} 144w" width="72" height="72">
</a>
{% endif %}
<button class="button">Menu</button>
<nav class="nav nav--main">
{% for page in site.pages %}
{% if page.title %}
<a class="item" href="{{ page.url | prepend: site.baseurl }}" title="{{ page.title }}">{{ page.title | escape }}</a>
{% endif %}
{% endfor %}
</nav>
</div>
</header>

View File

@ -1,21 +0,0 @@
<aside class="aside">
<nav class="paginator container">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}" class="pagination pagination--previous">&larr; Previous</a>
{% else %}
<span class="pagination pagination--previous">&larr; Previous</span>
{% endif %}
<span class="pagination pagination--divider">&bull;</span>
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path }}" class="pagination pagination--next">Next &rarr;</a>
{% else %}
<span class="pagination pagination--next">Next &rarr;</span>
{% endif %}
</nav>
</aside>

34
_includes/post-list.html Executable file
View File

@ -0,0 +1,34 @@
{% if paginator.posts %}
<ul class="list list--posts">
{% for page in paginator.posts %}
<li class="item item--post">
<article class="article article--post typeset">
<h2><a href="{{ page.url }}" title="{{ page.title }}">{{ page.title }}</a></h2>
{% include post-meta.html %}
{{ page.excerpt | markdownify | truncatewords: 60 }}
</article>
</li>
{% endfor %}
</ul>
{% include post-pagination.html %}
{% else %}
<ul class="list list--posts">
{% for page in site.posts %}
<li class="item item--post">
<article class="article article--post typeset">
<h2><a href="{{ page.url }}" title="{{ page.title }}">{{ page.title }}</a></h2>
{% include post-meta.html %}
{{ page.excerpt | markdownify | truncatewords: 60 }}
</article>
</li>
{% endfor %}
</ul>
{% endif %}

3
_includes/post-meta.html Executable file
View File

@ -0,0 +1,3 @@
<small class="small post-meta">
{% if page.category %}<span class="label label--category">{{ page.category }}</span>&nbsp;&nbsp;&middot;&nbsp;&nbsp;{% endif %}<time datetime="{{ page.date | date_to_xmlschema }}" class="time">{{ page.date | date_to_string }}</time>
</small>

17
_includes/post-pagination.html Executable file
View File

@ -0,0 +1,17 @@
<nav class="nav nav--paginator">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}" class="pagination pagination--previous">&larr; Previous</a>
{% else %}
<span class="pagination pagination--previous">&larr; Previous</span>
{% endif %}
<span class="pagination pagination--counter">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path }}" class="pagination pagination--next">Next &rarr;</a>
{% else %}
<span class="pagination pagination--next">Next &rarr;</span>
{% endif %}
</nav>

View File

@ -1,22 +0,0 @@
<ul class="posts">
{% for item in site.posts %}
<li class="post container">
<article class="article typeset">
<h2>
<a href="{{ item.url }}" title="{{ item.title }}">{{ item.title }}</a>
</h2>
<small class="small">
<time datetime="{{ item.date | date_to_xmlschema }}" class="time">{{ item.date | date_to_string }}</time>
</small>
{{ item.excerpt | markdownify }}
</article>
</li>
{% endfor %}
</ul>

7
_includes/site-footer.html Executable file
View File

@ -0,0 +1,7 @@
<footer class="footer">
<div class="container">
<div class="copyright typeset">
<small class="small">&copy; {{ site.title }} {{ site.time | date: '%Y' }}</small>
</div>
</div>
</footer>

6
_includes/site-header.html Executable file
View File

@ -0,0 +1,6 @@
<header class="header">
<div class="container">
{% include site-logo.html %}
{% include site-nav.html %}
</div>
</header>

3
_includes/site-logo.html Executable file
View File

@ -0,0 +1,3 @@
<a class="logo" href="{{ site.url }}" title="{{ site.title }}">
<img src="{{ site.logo }}" alt="{{ site.title }} logo"/>
</a>

16
_includes/site-nav.html Executable file
View File

@ -0,0 +1,16 @@
<nav class="nav">
<ul class="list list--nav">
{% for item in site.pages %}
{% unless item.url contains ".css" or item.url contains "/page" or item.url contains "/404.html" %}
<li class="item item--nav{% if item.url == page.url %} item--current{% endif %}">
{% if item.collectionpage %}
{% assign collectiondata = site.collections | where: "label", item.collectionpage | first %}
<a href="{{ item.url }}">{{ collectiondata.title }}</a>
{% else %}
<a href="{{ item.url }}">{{ item.title }}</a>
{% endif %}
</li>
{% endunless %}
{% endfor %}
</ul>
</nav>

View File

@ -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();
};
};

19
_layouts/default.html Normal file → Executable file
View File

@ -1,26 +1,21 @@
<!DOCTYPE html>
<html lang="en-GB">
<head>
<!-- General meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page.title }} - {{ site.title }}</title>
{% if site.logo %}
{% include favicons.html %}
{% if page.collectionpage %}
{% assign collectiondata = site.collections | where: "label", page.collectionpage | first %}
<title>{{ collectiondata.title }} - {{ site.title }}</title>
{% else %}
<title>{{ page.title }} - {{ site.title }}</title>
{% endif %}
<link href="/css/styles.css" media="all" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{{ "/assets/styles.css" | relative_url }}">
<link rel="shortcut icon" href="{{ site.logo }}">
</head>
<body>
{% include header.html %}
{{ content }}
{% include footer.html %}
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans|Neuton" rel="stylesheet">
<script src="/js/scripts.js" type="text/javascript"></script>
</body>
</html>

View File

@ -1,17 +0,0 @@
---
layout: default
---
<main class="main container">
<article class="article typeset">
<h1>{{ page.title }}</h1>
{{ content }}
</article>
{% include posts.html %}
</main>

26
_layouts/home.html Executable file
View File

@ -0,0 +1,26 @@
---
layout: default
---
{% include site-header.html %}
<main class="main container">
<div class="content">
<article class="article article--page typeset">
{% assign collectiondata = site.collections | where: "label", page.collectionpage | first %}
<h1>{{ collectiondata.title }}</h1>
{{ collectiondata.description | markdownify }}
</article>
{% include post-list.html %}
</div>
</main>
{% include site-footer.html %}

12
_layouts/page.html Normal file → Executable file
View File

@ -2,14 +2,18 @@
layout: default
---
{% include site-header.html %}
<main class="main container">
<article class="article typeset">
<article class="article article--page content typeset">
<h1>{{ page.title }}</h1>
<h1>{{ page.title }}</h1>
{{ content }}
{{ content }}
</article>
</article>
</main>
{% include site-footer.html %}

19
_layouts/post.html Normal file → Executable file
View File

@ -2,19 +2,18 @@
layout: default
---
{% include site-header.html %}
<main class="main container">
<article class="article typeset">
<article class="article article--post content typeset">
<h1>{{ page.title }}</h1>
<h1>{{ page.title }}</h1>
{% include post-meta.html %}
{{ content }}
<small class="small">
{% assign words = content | number_of_words %}
<time datetime="{{ page.date | date_to_xmlschema }}" class="time">{{ page.date | date_to_string }}</time>&nbsp;&nbsp;<span class="time time--reading">{{ words | divided_by:180 }} minute read</span>
</small>
{{ content }}
</article>
</article>
</main>
{% include site-footer.html %}

View File

@ -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.
<!-- more -->
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))_

View File

@ -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.
<!-- more -->
Myers was born on May 25, 1963 in Scarborough, Ontario, the son of English-born parents Eric Myers (19221991), 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)_

View File

@ -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.
<!-- more -->
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)_

9
_sass/_colors.scss Executable file
View File

@ -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;

394
_sass/_flex.scss Executable file
View File

@ -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: <flex-direction> | <flex-wrap>
// 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 | <flex-grow> <flex-shrink> || <flex-basis>
// 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;
}

419
_sass/_normalize.scss Executable file
View File

@ -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 */
}

61
_sass/_syntax.scss Executable file
View File

@ -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 */

View File

@ -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%);

File diff suppressed because one or more lines are too long

View File

@ -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";

View File

@ -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%);
}

5
about.md Normal file
View File

@ -0,0 +1,5 @@
---
title: About Garth
---
Garth is a really simple Jekyll theme, like really simple. Ya get me?

171
assets/styles.scss Executable file
View File

@ -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%;
}
}

7
demo/404.md Executable file
View File

@ -0,0 +1,7 @@
---
title: "404"
excerpt: "Page Not Found"
permalink: 404.html
---
Sorry, but the page could not be found.

12
demo/Gemfile Executable file
View File

@ -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

View File

@ -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: <!-- more --> # 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

View File

@ -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.

View File

@ -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.

View File

@ -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
<html>
<head>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
```
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.

View File

@ -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.
<!-- more -->
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))_

View File

@ -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.
<!-- more -->
Myers was born on May 25, 1963 in Scarborough, Ontario, the son of English-born parents Eric Myers (19221991), 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)_

View File

@ -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.
<!-- more -->
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)_

84
demo/about.md Executable file → Normal file
View File

@ -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
<html>
<head>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
```
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?

View File

@ -1,6 +0,0 @@
---
title: Blog
layout: front
---
<p>My posts and thoughts.</p>

View File

@ -1,4 +0,0 @@
---
---
@import "theme";

View File

@ -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.

View File

@ -1,4 +0,0 @@
---
---
{% include theme.js %}

15
garth-jekyll-theme.gemspec Normal file → Executable file
View File

@ -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

4
index.html Executable file
View File

@ -0,0 +1,4 @@
---
layout: home
collectionpage: posts
---

Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 160 KiB