garth-jekyll-theme 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0c7d24f363f16a93a9c916c43935380847caa3e4
-  data.tar.gz: d8b5596cb6faf40be628107d8f9fc08df51dccc4
+  metadata.gz: 004eead2d127310d23252ab056dde4b50ca735a4
+  data.tar.gz: 366a373cbd7fb4f7ba3634cded8b6e7787e1213b
 SHA512:
-  metadata.gz: 78ca81a207833769ecbdff5b0dd7b71ccd08a4c725030e12f8d042466b5d591729f552fd96dc60e34bee218af0c04fb8f57e5d8d778c5cd01d644e5ef153be36
-  data.tar.gz: 1aa382c2390853423f1f9a81db24fb4c864863f5e9d7e9248c8963ecc85cbc68d058eb0b071812e1c12924f6ea7af6921d7eec14a13b530dcb9686684312ae7f
+  metadata.gz: 5230972b3f270e3de554b8ee1fbb5f7ea680bbd47df90af51030be259caf8f9e4f523ae12f5fa40ef2f3ed7b22f5148adeea2c95e82d6c8f2cd340b2cb4ba8a1
+  data.tar.gz: e821bccf321a2286d6c42de058b363b792759230115e6bbb2767ddb97fb645f976b82d86f315476aa1e09b01055340658341556118c6a4500717173a6eb4e5bf

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 David Darnes
+
+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.

data/README.md

@@ -0,0 +1,50 @@
+# [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, 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
+
+### As a Fork
+
+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
+
+### As a Jekyll 3.3 theme gem
+
+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
+
+## Site settings
+
+You'll need to change the `description`, `title` and `url` to match with the project.
+
+## Page layouts
+
+There are 3 layouts; `page`, `post` and `home` (home acts as the font page blog).
+
+> **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)
+
+## Credits
+
+- 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)

data/_includes/post-list.html

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

data/_includes/post-meta.html

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

data/_includes/post-pagination.html

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

data/_includes/site-footer.html

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

data/_includes/site-header.html

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

data/_includes/site-logo.html

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

data/_includes/site-nav.html

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

data/_layouts/default.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		{% 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 rel="stylesheet" href="{{ "/assets/styles.css" | relative_url }}">
+		<link rel="shortcut icon" href="{{ site.logo }}">
+	</head>
+	<body>
+
+		{{ content }}
+
+		<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans|Neuton" rel="stylesheet">
+	</body>
+</html>

data/_layouts/home.html

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

data/_layouts/page.html

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

data/_layouts/post.html

@@ -0,0 +1,19 @@
+---
+layout: default
+---
+
+{% include site-header.html %}
+
+<main class="main  container">
+
+	<article class="article  article--post  content  typeset">
+
+    <h1>{{ page.title }}</h1>
+		{% include post-meta.html %}
+    {{ content }}
+
+  </article>
+
+</main>
+
+{% include site-footer.html %}

data/_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;

data/_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: <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;
+}