diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index b16b98c..0000000
--- a/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-node_modules/
-site/
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
deleted file mode 100644
index fb81747..0000000
--- a/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2015 Una Kravets
-
-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.
diff --git a/README.md b/README.md
deleted file mode 100644
index 2eb65c9..0000000
--- a/README.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# CSSgram
-
-Instagram filter library in Sass and CSS. (This is a WIP)
-
-## Usage
-
-There are currently 2 ways to consume this library.
-
-### Use Sass `@extends`
-
-1. Include `scss/cssgram.scss` or any individual file (i.e. `scss/aden.scss`) into your Sass manifest
-2. Extend the silent placeholder selector `@extend %aden;` in your element.
-
-For example:
-
-```html
-
-
-
-```
-
-```scss
-// Sass
-.viz--beautiful {
- @extend %aden;
-}
-```
-
-### Use CSS classes
-
-1. Link to the cssgram library: `
-
-```
-
-## Current Filters
-
-- [x] Aden
-- [x] Reyes
-- [x] Perpetua
-- [x] Inkwell
-- [x] Toaster
-- [x] Gingham
-
-## Contributing
-
-1. Fork this repo
-2. Clone the fork onto your system
-3. `npm install` dependancies (must have Node installed)
-4. Run `gulp` to compile CSS and the site
-5. Make changes (see file structure outline below)
-6. Submit a PR with a smile :smile:
-
-## File Structure Outline
-
-- `dist/cssgram.css` contains each of the css classes you can apply to your `
+
+
+
+
+
+
+
+
+ C SS
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/img/lakegeneva.jpg b/img/lakegeneva.jpg
new file mode 100644
index 0000000..d288621
Binary files /dev/null and b/img/lakegeneva.jpg differ
diff --git a/img/logo-temp.png b/img/logo-temp.png
new file mode 100644
index 0000000..796b4ec
Binary files /dev/null and b/img/logo-temp.png differ
diff --git a/img/tahoe.jpg b/img/tahoe.jpg
new file mode 100644
index 0000000..aff1063
Binary files /dev/null and b/img/tahoe.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a6678b1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,522 @@
+
+
+
+
+ CSSGram
+
+ A tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes.
+
+
+
+
+
+
+
+ #nofilter
+
+
+
+
+ 1977
+
+
+
+
+ Aden
+
+
+
+
+ Brannan
+
+
+
+
+ Brooklyn
+
+
+
+
+ Clarendon
+
+
+
+
+ Earlybird
+
+
+
+
+ Gingham
+
+
+
+
+ Hudson
+
+
+
+
+ Inkwell
+
+
+
+
+ Kelvin
+
+
+
+
+ Lark
+
+
+
+
+ Lo-Fi
+
+
+
+
+ Maven
+
+
+
+
+ Mayfair
+
+
+
+
+ Moon
+
+
+
+
+ Nashville
+
+
+
+
+ Perpetua
+
+
+
+
+ Reyes
+
+
+
+
+ Rise
+
+
+
+
+ Slumber
+
+
+
+
+ Stinson
+
+
+
+
+ Toaster
+
+
+
+
+ Valencia
+
+
+
+
+ Walden
+
+
+
+
+ Willow
+
+
+
+
+ X-pro II
+
+
+
+
+
+
+ What is This?
+
+ For more background on CSS Image Effects, you can check out my blog series here , or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters.
+
+ Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we're doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. This means less manual image processing and more fun filter effects on the web!
+
+ We are using pseudo-elements (i.e. :before and :after) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <img>. The recommendation is to wrap your images in a <figure> tag. More about the tag here.
+
+ Browser Support
+
+ This library uses CSS Filters and CSS Blend Modes . These features are supported in the following browsers:
+
+
+ Google Chrome: 43+
+ Mozilla Firefox: 38+
+ Internet Explorer: Nope
+ Opera: 32+
+ Safari: 8+
+
+
+ For more information, check on Can I Use .
+
+
+
+ Usage
+
+ There are currently 3 ways to consume this library:
+
+ 1. Use CSS classes
+
+ When using CSS classes, you can simply add the class with the filter name to the element containing your image.
+
+ The quickest way to do this is to link to our CDN in your <head> tag: <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css"> (OR you can now use CDNJS with <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css"> ). Then, add a class to your figure element with the name of the filter you would like to use (shown below)
+
+ If you want to work locally, do the following:
+
+
+ Download the CSSgram Library Link to the CSSgram library within your project: <link rel="stylesheet" href="css/vendor/cssgram.min.css">
+ Add a class to your figure element with the name of the filter you would like to use
+
+
+ For example:
+
+
+
+ <figure class="aden" >
+ <img src="../img.png">
+ </figure>
+ Alternatively, you can just download and link to any individual css file: <link rel="stylesheet" href="css/vendor/aden.min.css">, if you're just using one of the styles.
+
+ Available Classes
+ For use in HTML markup:
+ 1977: class="_1977"
+ Aden: class="aden"
+ Brannan: class="brannan"
+ Brooklyn: class="brooklyn"
+ Clarendon: class="clarendon"
+ Earlybird: class="earlybird"
+ Gingham: class="gingham"
+ Hudson: class="hudson"
+ Inkwell: class="inkwell"
+ Kelvin: class="kelvin"
+ Lark: class="lark"
+ Lo-Fi: class="lofi"
+ Maven: class="maven"
+ Mayfair: class="mayfair"
+ Moon: class="moon"
+ Nashville: class="nashville"
+ Perpetua: class="perpetua"
+ Reyes: class="reyes"
+ Rise: class="rise"
+ Slumber: class="slumber"
+ Stinson: class="stinson"
+ Toaster: class="toaster"
+ Valencia: class="valencia"
+ Walden: class="walden"
+ Willow: class="willow"
+ X-pro II: class="xpro2"
+
+
+ 2. Use Sass @extends
+
+ If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then @extend the filter effects within your style definitions. If you think extends are stupid, I will fight you 😊.
+
+
+ Download the /scss folder contents Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
+ Extend the silent placeholder selector @extend %aden; in your element.
+
+
+ For example:
+
+
+
+ <figure class="viz--beautiful" >
+ <img src="../img.png">
+ </figure>
+
+
+ .viz--beautiful {
+ @extend %aden;
+ }
+ Alternatively, you can just download and link any individual .scss file in your Sass manifest: scss/aden.scss), if you're just using one of the styles.
+
+ Available Extends
+ For use in Sass elements:
+ 1977: @extend %_1977;
+ Aden: @extend %aden;
+ Brannan: @extend %brannan;
+ Brooklyn: @extend %brooklyn;
+ Clarendon: @extend %clarendon;
+ Earlybird: @extend %earlybird;
+ Gingham: @extend %gingham;
+ Hudson: @extend %hudson;
+ Inkwell: @extend %inkwell;
+ Kelvin: @extend %kelvin;
+ Lark: @extend %lark;
+ Lo-Fi: @extend %lofi;
+ Maven: @extend %maven;
+ Mayfair: @extend %mayfair;
+ Moon: @extend %moon;
+ Nashville: @extend %nashville;
+ Perpetua: @extend %perpetua;
+ Reyes: @extend %reyes;
+ Rise: @extend %rise;
+ Slumber: @extend %slumber;
+ Stinson: @extend %stinson;
+ Toaster: @extend %toaster;
+ Valencia: @extend %valencia;
+ Walden: @extend %walden;
+ Willow: @extend %willow;
+ X-pro II: @extend %xpro2;
+
+ 3. Use Sass @mixins
+
+ Mixins allow for multiple filter arguments to be passed into your classes. This is useful for if you want to add filters in addition to the ones provided (i.e. add a blur).
+
+
+ Download the /scss folder contents Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
+ Include the mixin @include aden() in your element.
+
+
+ For example:
+
+
+
+ <figure class="viz--beautiful" >
+ <img src="../img.png">
+ </figure>
+
+
+ .viz--beautiful {
+ @include aden()
+ }
+ As mentioned above, you can also add additional filters as arguments when using the library with mixins:
+
+
+
+ .viz--beautiful {
+ @include @include aden(blur(2px) /*...*/);
+ }
+ Available Mixins
+ For use in Sass elements:
+ 1977: @include _1977();
+ Aden: @include aden();
+ Brannan: @include brannan();
+ Brooklyn: @include brooklyn();
+ Clarendon: @include clarendon();
+ Earlybird: @include earlybird();
+ Gingham: @include gingham();
+ Hudson: @include hudson();
+ Inkwell: @include inkwell();
+ Kelvin: @include kelvin();
+ Lark: @include lark();
+ Lo-Fi: @include lofi();
+ Maven: @include maven();
+ Mayfair: @include mayfair();
+ Moon: @include moon();
+ Nashville: @include nashville();
+ Perpetua: @include perpetua();
+ Reyes: @include reyes();
+ Rise: @include rise();
+ Slumber: @include slumber();
+ Stinson: @include stinson();
+ Toaster: @include toaster();
+ Valencia: @include valencia();
+ Walden: @include walden();
+ Willow: @include willow();
+ X-pro II: @include xpro2();
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.twig b/index.twig
new file mode 100644
index 0000000..bc749dc
--- /dev/null
+++ b/index.twig
@@ -0,0 +1,297 @@
+{% extends "twig/template.twig" %}
+
+{% block stylesheets %}
+
+ A tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes.
+
+
+
+
+
+
+
+ #nofilter
+
+
+ {% for i in filters %}
+ {% if i.is_done %}
+
+
+ {{ i.name }}
+
+
+ {% endif %}
+ {% endfor %}
+
+
+
+
+ What is This?
+
+ For more background on CSS Image Effects, you can check out my blog series here , or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters.
+
+ Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we're doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. This means less manual image processing and more fun filter effects on the web!
+
+ We are using pseudo-elements (i.e. :before and :after) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <img>. The recommendation is to wrap your images in a <figure> tag. More about the tag here.
+
+ Browser Support
+
+ This library uses CSS Filters and CSS Blend Modes . These features are supported in the following browsers:
+
+
+ Google Chrome: 43+
+ Mozilla Firefox: 38+
+ Internet Explorer: Nope
+ Opera: 32+
+ Safari: 8+
+
+
+ For more information, check on Can I Use .
+
+
+
+ Usage
+
+ There are currently 3 ways to consume this library:
+
+ 1. Use CSS classes
+
+ When using CSS classes, you can simply add the class with the filter name to the element containing your image.
+
+ The quickest way to do this is to link to our CDN in your <head> tag: <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css"> (OR you can now use CDNJS with <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css"> ). Then, add a class to your figure element with the name of the filter you would like to use (shown below)
+
+ If you want to work locally, do the following:
+
+
+ Download the CSSgram Library Link to the CSSgram library within your project: <link rel="stylesheet" href="css/vendor/cssgram.min.css">
+ Add a class to your figure element with the name of the filter you would like to use
+
+
+ For example:
+
+
+
+ <figure class="aden" >
+ <img src="../img.png">
+ </figure>
+ Alternatively, you can just download and link to any individual css file: <link rel="stylesheet" href="css/vendor/aden.min.css">, if you're just using one of the styles.
+
+ Available Classes
+ For use in HTML markup:
+ {% for i in filters %}
+ {% if i.is_done %}
+ {{ i.name }}: class="{{ i.usage }}"
+ {% endif %}
+ {% endfor %}
+
+
+ 2. Use Sass @extends
+
+ If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then @extend the filter effects within your style definitions. If you think extends are stupid, I will fight you 😊.
+
+
+ Download the /scss folder contents Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
+ Extend the silent placeholder selector @extend %aden; in your element.
+
+
+ For example:
+
+
+
+ <figure class="viz--beautiful" >
+ <img src="../img.png">
+ </figure>
+
+
+ .viz--beautiful {
+ @extend %aden;
+ }
+ Alternatively, you can just download and link any individual .scss file in your Sass manifest: scss/aden.scss), if you're just using one of the styles.
+
+ Available Extends
+ For use in Sass elements:
+ {% for i in filters %}
+ {% if i.is_done %}
+ {{ i.name }}: @extend %{{ i.usage }};
+ {% endif %}
+ {% endfor %}
+
+ 3. Use Sass @mixins
+
+ Mixins allow for multiple filter arguments to be passed into your classes. This is useful for if you want to add filters in addition to the ones provided (i.e. add a blur).
+
+
+ Download the /scss folder contents Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
+ Include the mixin @include aden() in your element.
+
+
+ For example:
+
+
+
+ <figure class="viz--beautiful" >
+ <img src="../img.png">
+ </figure>
+
+
+ .viz--beautiful {
+ @include aden()
+ }
+ As mentioned above, you can also add additional filters as arguments when using the library with mixins:
+
+
+
+ .viz--beautiful {
+ @include @include aden(blur(2px) /*...*/);
+ }
+ Available Mixins
+ For use in Sass elements:
+ {% for i in filters %}
+ {% if i.is_done %}
+ {{ i.name }}: @include {{ i.usage }}();
+ {% endif %}
+ {% endfor %}
+
+
+
+{% endblock %}
+
+{% block javascript %}
+
+{% endblock %}
diff --git a/package.json b/package.json
deleted file mode 100644
index 00b0bbd..0000000
--- a/package.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
- "name": "cssgram",
- "author": "Una Kravets",
- "version": "0.1.0",
- "dependencies": {},
- "devDependencies": {
- "browser-sync": "^2.0.0-rc4",
- "gulp": "^3.8.10",
- "gulp-autoprefixer": "^2.1.0",
- "gulp-cached": "^1.0.2",
- "gulp-concat": "^2.4.3",
- "gulp-gh-pages": "^0.4.0",
- "gulp-imagemin": "^2.1.0",
- "gulp-minify-css": "^0.3.12",
- "gulp-minify-html": "^0.1.8",
- "gulp-notify": "^2.2.0",
- "gulp-plumber": "^0.6.6",
- "gulp-rename": "^1.2.0",
- "gulp-sass": "^1.3.2",
- "gulp-sass-lint": "0.1.0-beta.2",
- "gulp-size": "^1.2.0",
- "gulp-uglify": "^1.0.2",
- "imagemin-pngquant": "^4.0.0"
- }
-}
diff --git a/sass-lint.yml b/sass-lint.yml
deleted file mode 100644
index fb64bba..0000000
--- a/sass-lint.yml
+++ /dev/null
@@ -1,34 +0,0 @@
-files:
- include: '**/*.s+(a|c)ss'
- ignore:
-rules:
- # Consistency Rules
- extends-before-mixins: 1
- extends-before-declarations: 1
- mixins-before-declarations: 1
- # Require an empty line between blocks
- empty-line-between-blocks: 1
- no-empty-rulesets: 1
- no-extends: 0
- final-newline: 1
- no-ids: 1
- indentation: 1
- no-important: 1
- leading-zero: 1
- nesting-depth: 1
- placeholder-in-extend: 1
- property-sort-order: 1
- one-declaration-per-line: 1
- single-line-per-selector: 1
- space-after-comma: 1
- # Space surrounding colons
- space-before-colon: 1
- space-after-colon: 1
-
- space-before-brace: 1
-
- space-before-bang: 1
- space-after-bang: 1
-
- space-between-parens: 1
- trailing-semicolon: 1
\ No newline at end of file
diff --git a/scss/_home.scss b/scss/_home.scss
new file mode 100644
index 0000000..ddab890
--- /dev/null
+++ b/scss/_home.scss
@@ -0,0 +1,383 @@
+&::selection {
+ background: $accent;
+ color: white;
+}
+
+body {
+ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+ margin: 0 auto;
+ padding: 0 2em;
+ max-width: 1200px;
+ line-height: 1.5;
+ font-size: 1.1em;
+ overflow-x: hidden;
+
+ @include breakpoint(xs) {
+ font-size: .9em;
+ }
+}
+
+section {
+ overflow-x: hidden;
+}
+
+h1,
+h2 {
+ color: $accent;
+
+ @include breakpoint(xs) {
+ text-align: center;
+ }
+}
+
+h3,
+em {
+ color: $secondary;
+}
+
+pre, code {
+ background: $lightergrey;
+
+ code {
+ border: none;
+ background: none;
+ }
+}
+
+code {
+ font-family: monospace;
+ padding: .25em .5em;
+}
+
+.highlight {
+ color: $secondary;
+ font-weight: 800;
+}
+
+.comment {
+ color: $midgrey;
+}
+
+ul {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+ul,
+ol {
+ line-height: 1.8;
+}
+
+a {
+ text-decoration: none;
+ color: $accent;
+ transition-duration: .35s;
+ border-bottom: 1px solid $secondary;
+ padding-bottom: .05em;
+
+ &:hover,
+ &:focus {
+ color: mix(white, $secondary, 50%);
+ border-color: mix(white, $secondary, 50%);
+ }
+}
+
+figure {
+ max-width: 350px;
+ max-height: 350px;
+ overflow: hidden;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ transition-duration: .35s;
+
+ @include breakpoint(lg) {
+ max-width: 300px;
+ max-height: 300px;
+ }
+
+ @include breakpoint(md) {
+ max-width: 250px;
+ max-height: 250px;
+ }
+
+ @include breakpoint(sm) {
+ max-width: 300px;
+ max-height: 300px;
+ }
+
+ @include breakpoint(xs) {
+ max-width: 400px;
+ max-height: 400px;
+ }
+
+ &:hover,
+ &:focus {
+ filter: none !important;
+ }
+
+ &:hover::after,
+ &:focus::after,
+ &:hover::before,
+ &:focus::before {
+ opacity: 0 !important;
+ }
+}
+
+figcaption {
+ position: absolute;
+ bottom: 1em;
+ right: 0;
+ padding: .25em 1em .25em .25em;
+ background: $black;
+ color: white;
+ font-weight: 200;
+}
+
+hr {
+ clear: both;
+ float: none;
+ border: 1px solid $lightergrey;
+ margin: 2em auto;
+ display: block;
+}
+
+img {
+ display: block;
+ margin: auto;
+
+ height: auto;
+ max-height: 100%;
+
+ width: auto;
+ max-width: 100%;
+}
+
+.demo {
+ &__section {
+ font-weight: 300;
+ font-size: 1.2em;
+ }
+
+ &__subtitle {
+ font-size: 2em;
+ text-align: center;
+ }
+
+ &__note {
+ font-style: italic;
+ text-align: center;
+ display: block;
+ margin: 2em auto 0;
+ }
+
+ &__input-area {
+ display: block;
+ font-size: 1em;
+ text-align: center;
+ font-weight: 300;
+ margin: 1em auto;
+ padding: 1em 0;
+
+ @include breakpoint(xs) {
+ margin: 0;
+ font-size: .8em;
+ }
+ }
+
+ &__input-label {
+ text-align: center;
+ color: $accent;
+ }
+
+ &__input-img {
+ max-width: 16em;
+ font-size: 1em;
+ padding: .5em;
+ border: 2px solid $accent;
+ outline: none;
+ margin: .5em;
+ font-weight: 200;
+ transition-duration: .35s;
+
+ &:hover {
+ background: mix(white, $accent, 90%);
+ }
+
+ &:focus {
+ background: mix(white, $accent, 75%);
+ }
+ }
+
+ &__option-field {
+ color: $accent;
+ border: 1px solid $lightgrey;
+ min-width: 200px;
+ }
+
+ &__option-img {
+ max-width: 150px;
+ height: 150px;
+ display: inline-block;
+ cursor: pointer;
+
+ @include breakpoint(sm) {
+ height: 100px;
+ }
+
+ @include breakpoint(xs) {
+ height: 60px;
+ }
+ }
+
+ &__list {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ }
+
+ &__item {
+ margin: .75em;
+ list-style: none;
+
+ @include breakpoint(md) {
+ margin: .5em;
+ }
+
+ @include breakpoint(xs) {
+ margin: .5em 0;
+ }
+ }
+}
+
+.title {
+ &-section {
+ width: 100%;
+ text-align: center;
+ }
+
+ &--logo {
+ max-width: 400px;
+ }
+
+ &--top-sub {
+ font-weight: 200;
+ margin: 0 auto;
+ text-align: center;
+ max-width: 26em;
+
+ @include breakpoint(xs) {
+ font-size: 1.2em;
+ }
+ }
+}
+
+.how-to-section,
+.explanation-section {
+ font-size: 1.2em;
+ font-weight: 300;
+ max-width: 40em;
+ margin: 0 auto;
+ display: block;
+}
+
+.attribution {
+ padding: 1em 0 4em;
+ text-align: center;
+}
+
+.callout {
+ max-width: 14em;
+ background: $lightergrey;
+ padding: 2em;
+ margin: -.5em 2em 0;
+ display: block;
+ font-weight: 200;
+ float: right;
+
+ @include breakpoint(sm) {
+ max-width: 28em;
+ margin: 1em auto;
+ float: none;
+ font-size: .8em;
+ }
+}
+
+.available-classes,
+.available-extends,
+.supported-browsers {
+ columns: 15em 2;
+}
+
+.supported {
+ &:after {
+ content: '✔';
+ color: $green;
+ margin-left: .5em;
+ }
+}
+
+.not-supported {
+ &:after {
+ content: '✘';
+ color: $maroon;
+ margin-left: .5em;
+ }
+}
+
+// vid section
+.take-photo {
+ font-size: 1em;
+ color: $accent;
+ font-weight: 300;
+ width: 150px;
+ height: 150px;
+ display: inline-block;
+ cursor: pointer;
+ border: 1px dashed $accent;
+ outline: none;
+ background: none;
+ vertical-align: top;
+ transition-duration: .25s;
+
+ &:hover {
+ background: $secondary;
+ color: white;
+ }
+}
+
+.video-container {
+ margin-top: 2em;
+ max-height: 0;
+ transition-duration: .3s;
+ text-align: center;
+ width: 100%;
+
+ video {
+ margin: 0 auto;
+ display: block;
+ }
+}
+
+#snapshot {
+ margin: 0 auto;
+
+ font-size: 1em;
+ color: $accent;
+ font-weight: 300;
+ display: inline-block;
+ cursor: pointer;
+ border: 1px dashed $accent;
+ outline: none;
+ background: none;
+ vertical-align: top;
+ transition-duration: .25s;
+ margin-top: 1em;
+
+ &:hover {
+ background: $secondary;
+ color: white;
+ }
+}
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
new file mode 100644
index 0000000..5c29c64
--- /dev/null
+++ b/scss/_mixins.scss
@@ -0,0 +1,23 @@
+// Grid Mixin
+
+@mixin breakpoint($class) {
+ @if $class == xs {
+ @media (max-width: 500px) { @content; }
+ }
+
+ @else if $class == sm {
+ @media (max-width: 768px) { @content; }
+ }
+
+ @else if $class == md {
+ @media (max-width: 992px) { @content; }
+ }
+
+ @else if $class == lg {
+ @media (max-width: 1240px) { @content; }
+ }
+
+ @else {
+ @warn "Breakpoint mixin supports: xs, sm, md, lg";
+ }
+}
\ No newline at end of file
diff --git a/scss/_vars.scss b/scss/_vars.scss
new file mode 100644
index 0000000..582f868
--- /dev/null
+++ b/scss/_vars.scss
@@ -0,0 +1,11 @@
+$dusky-blue: #649CA7;
+$maroon: #c63082;
+$purple: #9b1c9b;
+$lightgrey: #cad1cc;
+$black: #000;
+$green: #62B859;
+$midgrey: mix($black, $lightgrey, 15%);
+$lightergrey: mix(white, $lightgrey, 70%);
+
+$accent: $purple;
+$secondary: $maroon;
diff --git a/scss/demo-site.scss b/scss/demo-site.scss
new file mode 100644
index 0000000..e56e761
--- /dev/null
+++ b/scss/demo-site.scss
@@ -0,0 +1,4 @@
+@import 'source/scss/cssgram';
+@import 'vars';
+@import 'mixins';
+@import 'home';
diff --git a/source/css/aden.css b/source/css/aden.css
deleted file mode 100644
index ab00f31..0000000
--- a/source/css/aden.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- *
- * Aden
- *
- */
-.aden {
- position: relative; }
- .aden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.aden {
- -webkit-filter: hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2);
- filter: hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2); }
- .aden:after {
- background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent);
- background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
- mix-blend-mode: darken; }
diff --git a/source/css/aden.min.css b/source/css/aden.min.css
deleted file mode 100644
index e5d9f44..0000000
--- a/source/css/aden.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.aden{position:relative}.aden:after{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute}.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2)}.aden:after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}
\ No newline at end of file
diff --git a/source/css/cssgram.css b/source/css/cssgram.css
deleted file mode 100644
index e8038e2..0000000
--- a/source/css/cssgram.css
+++ /dev/null
@@ -1,161 +0,0 @@
-.aden, .perpetua, .reyes, .gingham, .toaster, .walden {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-/*
- *
- * Aden
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster, .walden {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.aden {
- -webkit-filter: hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2);
- filter: hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2); }
- .aden:after {
- background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent);
- background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
- mix-blend-mode: darken; }
-
-/*
- *
- * Inkwell
- *
- */
-.inkwell {
- -webkit-filter: sepia(30%) contrast(1.2) brightness(1.1) grayscale(1);
- filter: sepia(30%) contrast(1.2) brightness(1.1) grayscale(1); }
-
-/*
- *
- * Perpetua
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster, .walden {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.perpetua:after {
- background: -webkit-linear-gradient(top, #005B9A, #E6C13D);
- background: linear-gradient(to bottom, #005B9A, #E6C13D);
- mix-blend-mode: soft-light;
- opacity: .5; }
-
-/*
- *
- * Reyes
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster, .walden {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.reyes {
- -webkit-filter: sepia(22%) brightness(1.1) contrast(.85) saturate(0.75);
- filter: sepia(22%) brightness(1.1) contrast(.85) saturate(0.75); }
- .reyes:after {
- background: #EFCDAD;
- mix-blend-mode: soft-light;
- opacity: .5; }
-
-/*
- *
- * Gingham
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster, .walden {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.gingham {
- -webkit-filter: brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2);
- filter: brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2); }
- .gingham:after {
- background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent);
- background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
- mix-blend-mode: darken; }
-
-/*
- *
- * Toaster
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster, .walden {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.toaster {
- -webkit-filter: contrast(1.5) brightness(.9);
- filter: contrast(1.5) brightness(.9); }
- .toaster:after {
- background: -webkit-radial-gradient(circle, #804E0F, #3B003B);
- background: radial-gradient(circle, #804E0F, #3B003B);
- mix-blend-mode: screen; }
-
-/*
- *
- * Walden
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster, .walden {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.walden {
- -webkit-filter: brightness(110%) hue-rotate(-10deg) sepia(30%) saturate(1.6);
- filter: brightness(110%) hue-rotate(-10deg) sepia(30%) saturate(1.6); }
- .walden:after {
- background: #04c;
- mix-blend-mode: screen;
- opacity: .3; }
diff --git a/source/css/cssgram.min.css b/source/css/cssgram.min.css
deleted file mode 100644
index 4516dfd..0000000
--- a/source/css/cssgram.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2)}.aden:after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.inkwell{-webkit-filter:sepia(30%) contrast(1.2) brightness(1.1) grayscale(1);filter:sepia(30%) contrast(1.2) brightness(1.1) grayscale(1)}.perpetua:after{background:-webkit-linear-gradient(top,#005B9A,#E6C13D);background:linear-gradient(to bottom,#005B9A,#E6C13D);mix-blend-mode:soft-light;opacity:.5}.reyes{-webkit-filter:sepia(22%) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(22%) brightness(1.1) contrast(.85) saturate(.75)}.reyes:after{background:#EFCDAD;mix-blend-mode:soft-light;opacity:.5}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2);filter:brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2)}.gingham:after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster:after{background:-webkit-radial-gradient(circle,#804E0F,#3B003B);background:radial-gradient(circle,#804E0F,#3B003B);mix-blend-mode:screen}.aden,.gingham,.perpetua,.reyes,.toaster,.walden{position:relative}.aden:after,.gingham:after,.perpetua:after,.reyes:after,.toaster:after,.walden:after{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute}.walden{-webkit-filter:brightness(110%) hue-rotate(-10deg) sepia(30%) saturate(1.6);filter:brightness(110%) hue-rotate(-10deg) sepia(30%) saturate(1.6)}.walden:after{background:#04c;mix-blend-mode:screen;opacity:.3}
\ No newline at end of file
diff --git a/source/css/demo-page.css b/source/css/demo-page.css
deleted file mode 100644
index c16b4d8..0000000
--- a/source/css/demo-page.css
+++ /dev/null
@@ -1,179 +0,0 @@
-.aden, .perpetua, .reyes, .gingham, .toaster {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-/*
- *
- * Aden
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.aden {
- -webkit-filter: hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2);
- filter: hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2); }
- .aden:after {
- background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent);
- background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
- mix-blend-mode: darken; }
-
-/*
- *
- * Inkwell
- *
- */
-.inkwell {
- -webkit-filter: sepia(30%) contrast(1.2) brightness(1.1) grayscale(1);
- filter: sepia(30%) contrast(1.2) brightness(1.1) grayscale(1); }
-
-/*
- *
- * Perpetua
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.perpetua:after {
- background: -webkit-linear-gradient(top, #005B9A, #E6C13D);
- background: linear-gradient(to bottom, #005B9A, #E6C13D);
- mix-blend-mode: soft-light;
- opacity: .5; }
-
-/*
- *
- * Reyes
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.reyes {
- -webkit-filter: sepia(22%) brightness(1.1) contrast(.85) saturate(0.75);
- filter: sepia(22%) brightness(1.1) contrast(.85) saturate(0.75); }
- .reyes:after {
- background: #EFCDAD;
- mix-blend-mode: soft-light;
- opacity: .5; }
-
-/*
- *
- * Gingham
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.gingham {
- -webkit-filter: brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2);
- filter: brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2); }
- .gingham:after {
- background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent);
- background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
- mix-blend-mode: darken; }
-
-/*
- *
- * Toaster
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.toaster {
- -webkit-filter: contrast(1.5) brightness(.9);
- filter: contrast(1.5) brightness(.9); }
- .toaster:after {
- background: -webkit-radial-gradient(circle, #804E0F, #3B003B);
- background: radial-gradient(circle, #804E0F, #3B003B);
- mix-blend-mode: screen; }
-
-body {
- font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
- margin: 2em auto;
- max-width: 1200px;
- line-height: 1.5; }
-
-p {
- max-width: 32em; }
-
-ul {
- width: 100%; }
-
-.demo__item {
- margin: 1em;
- list-style: none;
- display: inline-block; }
-
-figure {
- width: 350px;
- height: 350px;
- overflow: hidden;
- position: relative;
- margin: 0;
- padding: 0; }
- figure:hover {
- -webkit-filter: none !important;
- filter: none !important; }
- figure:hover:after {
- background: none !important; }
-
-figcaption {
- position: absolute;
- bottom: 1em;
- right: 0;
- padding: .25em 1em .25em .25em;
- background: black;
- color: white;
- font-weight: 200; }
-
-img {
- width: 100%; }
diff --git a/source/css/demo-page.min.css b/source/css/demo-page.min.css
deleted file mode 100644
index 495cb89..0000000
--- a/source/css/demo-page.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2)}.aden:after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.inkwell{-webkit-filter:sepia(30%) contrast(1.2) brightness(1.1) grayscale(1);filter:sepia(30%) contrast(1.2) brightness(1.1) grayscale(1)}.perpetua:after{background:-webkit-linear-gradient(top,#005B9A,#E6C13D);background:linear-gradient(to bottom,#005B9A,#E6C13D);mix-blend-mode:soft-light;opacity:.5}.reyes{-webkit-filter:sepia(22%) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(22%) brightness(1.1) contrast(.85) saturate(.75)}.reyes:after{background:#EFCDAD;mix-blend-mode:soft-light;opacity:.5}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2);filter:brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2)}.gingham:after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.aden,.gingham,.perpetua,.reyes,.toaster{position:relative}.aden:after,.gingham:after,.perpetua:after,.reyes:after,.toaster:after{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster:after{background:-webkit-radial-gradient(circle,#804E0F,#3B003B);background:radial-gradient(circle,#804E0F,#3B003B);mix-blend-mode:screen}body{font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;margin:2em auto;max-width:1200px;line-height:1.5}p{max-width:32em}ul{width:100%}.demo__item{margin:1em;list-style:none;display:inline-block}figure{width:350px;height:350px;overflow:hidden;position:relative;margin:0;padding:0}figure:hover{-webkit-filter:none!important;filter:none!important}figure:hover:after{background:0 0!important}figcaption{position:absolute;bottom:1em;right:0;padding:.25em 1em .25em .25em;background:#000;color:#fff;font-weight:200}img{width:100%}
\ No newline at end of file
diff --git a/source/css/demo-site.css b/source/css/demo-site.css
deleted file mode 100644
index 132745c..0000000
--- a/source/css/demo-site.css
+++ /dev/null
@@ -1,203 +0,0 @@
-.aden, .perpetua, .reyes, .gingham, .toaster, .walden {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-/*
- *
- * Aden
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster, .walden {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.aden {
- -webkit-filter: hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2);
- filter: hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2); }
- .aden:after {
- background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent);
- background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
- mix-blend-mode: darken; }
-
-/*
- *
- * Inkwell
- *
- */
-.inkwell {
- -webkit-filter: sepia(30%) contrast(1.2) brightness(1.1) grayscale(1);
- filter: sepia(30%) contrast(1.2) brightness(1.1) grayscale(1); }
-
-/*
- *
- * Perpetua
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster, .walden {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.perpetua:after {
- background: -webkit-linear-gradient(top, #005B9A, #E6C13D);
- background: linear-gradient(to bottom, #005B9A, #E6C13D);
- mix-blend-mode: soft-light;
- opacity: .5; }
-
-/*
- *
- * Reyes
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster, .walden {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.reyes {
- -webkit-filter: sepia(22%) brightness(1.1) contrast(.85) saturate(0.75);
- filter: sepia(22%) brightness(1.1) contrast(.85) saturate(0.75); }
- .reyes:after {
- background: #EFCDAD;
- mix-blend-mode: soft-light;
- opacity: .5; }
-
-/*
- *
- * Gingham
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster, .walden {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.gingham {
- -webkit-filter: brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2);
- filter: brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2); }
- .gingham:after {
- background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent);
- background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
- mix-blend-mode: darken; }
-
-/*
- *
- * Toaster
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster, .walden {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.toaster {
- -webkit-filter: contrast(1.5) brightness(.9);
- filter: contrast(1.5) brightness(.9); }
- .toaster:after {
- background: -webkit-radial-gradient(circle, #804E0F, #3B003B);
- background: radial-gradient(circle, #804E0F, #3B003B);
- mix-blend-mode: screen; }
-
-/*
- *
- * Walden
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster, .walden {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.walden {
- -webkit-filter: brightness(110%) hue-rotate(-10deg) sepia(30%) saturate(1.6);
- filter: brightness(110%) hue-rotate(-10deg) sepia(30%) saturate(1.6); }
- .walden:after {
- background: #04c;
- mix-blend-mode: screen;
- opacity: .3; }
-
-body {
- font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
- margin: 2em auto;
- max-width: 1200px;
- line-height: 1.5; }
-
-p {
- max-width: 32em; }
-
-ul {
- width: 100%; }
-
-.demo__item {
- margin: 1em;
- list-style: none;
- display: inline-block; }
-
-figure {
- width: 350px;
- height: 350px;
- overflow: hidden;
- position: relative;
- margin: 0;
- padding: 0; }
- figure:hover {
- -webkit-filter: none !important;
- filter: none !important; }
- figure:hover:after {
- background: none !important; }
-
-figcaption {
- position: absolute;
- bottom: 1em;
- right: 0;
- padding: .25em 1em .25em .25em;
- background: black;
- color: white;
- font-weight: 200; }
-
-img {
- width: 100%; }
diff --git a/source/css/demo-site.min.css b/source/css/demo-site.min.css
deleted file mode 100644
index 69b788f..0000000
--- a/source/css/demo-site.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2)}.aden:after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.inkwell{-webkit-filter:sepia(30%) contrast(1.2) brightness(1.1) grayscale(1);filter:sepia(30%) contrast(1.2) brightness(1.1) grayscale(1)}.perpetua:after{background:-webkit-linear-gradient(top,#005B9A,#E6C13D);background:linear-gradient(to bottom,#005B9A,#E6C13D);mix-blend-mode:soft-light;opacity:.5}.reyes{-webkit-filter:sepia(22%) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(22%) brightness(1.1) contrast(.85) saturate(.75)}.reyes:after{background:#EFCDAD;mix-blend-mode:soft-light;opacity:.5}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2);filter:brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2)}.gingham:after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster:after{background:-webkit-radial-gradient(circle,#804E0F,#3B003B);background:radial-gradient(circle,#804E0F,#3B003B);mix-blend-mode:screen}.aden,.gingham,.perpetua,.reyes,.toaster,.walden{position:relative}.aden:after,.gingham:after,.perpetua:after,.reyes:after,.toaster:after,.walden:after{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute}.walden{-webkit-filter:brightness(110%) hue-rotate(-10deg) sepia(30%) saturate(1.6);filter:brightness(110%) hue-rotate(-10deg) sepia(30%) saturate(1.6)}.walden:after{background:#04c;mix-blend-mode:screen;opacity:.3}body{font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;margin:2em auto;max-width:1200px;line-height:1.5}p{max-width:32em}ul{width:100%}.demo__item{margin:1em;list-style:none;display:inline-block}figure{width:350px;height:350px;overflow:hidden;position:relative;margin:0;padding:0}figure:hover{-webkit-filter:none!important;filter:none!important}figure:hover:after{background:0 0!important}figcaption{position:absolute;bottom:1em;right:0;padding:.25em 1em .25em .25em;background:#000;color:#fff;font-weight:200}img{width:100%}
\ No newline at end of file
diff --git a/source/css/gingham.css b/source/css/gingham.css
deleted file mode 100644
index afb13a4..0000000
--- a/source/css/gingham.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- *
- * Gingham
- *
- */
-.gingham {
- position: relative; }
- .gingham:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.gingham {
- -webkit-filter: brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2);
- filter: brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2); }
- .gingham:after {
- background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent);
- background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
- mix-blend-mode: darken; }
diff --git a/source/css/gingham.min.css b/source/css/gingham.min.css
deleted file mode 100644
index c9f55b5..0000000
--- a/source/css/gingham.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.gingham{position:relative}.gingham:after{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2);filter:brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2)}.gingham:after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}
\ No newline at end of file
diff --git a/source/css/inkwell.css b/source/css/inkwell.css
deleted file mode 100644
index 5e2b55f..0000000
--- a/source/css/inkwell.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- *
- * Inkwell
- *
- */
-.inkwell {
- -webkit-filter: sepia(30%) contrast(1.2) brightness(1.1) grayscale(1);
- filter: sepia(30%) contrast(1.2) brightness(1.1) grayscale(1); }
diff --git a/source/css/inkwell.min.css b/source/css/inkwell.min.css
deleted file mode 100644
index b420b7c..0000000
--- a/source/css/inkwell.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.inkwell{-webkit-filter:sepia(30%) contrast(1.2) brightness(1.1) grayscale(1);filter:sepia(30%) contrast(1.2) brightness(1.1) grayscale(1)}
\ No newline at end of file
diff --git a/source/css/main.css b/source/css/main.css
deleted file mode 100644
index c16b4d8..0000000
--- a/source/css/main.css
+++ /dev/null
@@ -1,179 +0,0 @@
-.aden, .perpetua, .reyes, .gingham, .toaster {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-/*
- *
- * Aden
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.aden {
- -webkit-filter: hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2);
- filter: hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2); }
- .aden:after {
- background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent);
- background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
- mix-blend-mode: darken; }
-
-/*
- *
- * Inkwell
- *
- */
-.inkwell {
- -webkit-filter: sepia(30%) contrast(1.2) brightness(1.1) grayscale(1);
- filter: sepia(30%) contrast(1.2) brightness(1.1) grayscale(1); }
-
-/*
- *
- * Perpetua
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.perpetua:after {
- background: -webkit-linear-gradient(top, #005B9A, #E6C13D);
- background: linear-gradient(to bottom, #005B9A, #E6C13D);
- mix-blend-mode: soft-light;
- opacity: .5; }
-
-/*
- *
- * Reyes
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.reyes {
- -webkit-filter: sepia(22%) brightness(1.1) contrast(.85) saturate(0.75);
- filter: sepia(22%) brightness(1.1) contrast(.85) saturate(0.75); }
- .reyes:after {
- background: #EFCDAD;
- mix-blend-mode: soft-light;
- opacity: .5; }
-
-/*
- *
- * Gingham
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.gingham {
- -webkit-filter: brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2);
- filter: brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2); }
- .gingham:after {
- background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent);
- background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
- mix-blend-mode: darken; }
-
-/*
- *
- * Toaster
- *
- */
-.aden, .perpetua, .reyes, .gingham, .toaster {
- position: relative; }
- .aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.toaster {
- -webkit-filter: contrast(1.5) brightness(.9);
- filter: contrast(1.5) brightness(.9); }
- .toaster:after {
- background: -webkit-radial-gradient(circle, #804E0F, #3B003B);
- background: radial-gradient(circle, #804E0F, #3B003B);
- mix-blend-mode: screen; }
-
-body {
- font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
- margin: 2em auto;
- max-width: 1200px;
- line-height: 1.5; }
-
-p {
- max-width: 32em; }
-
-ul {
- width: 100%; }
-
-.demo__item {
- margin: 1em;
- list-style: none;
- display: inline-block; }
-
-figure {
- width: 350px;
- height: 350px;
- overflow: hidden;
- position: relative;
- margin: 0;
- padding: 0; }
- figure:hover {
- -webkit-filter: none !important;
- filter: none !important; }
- figure:hover:after {
- background: none !important; }
-
-figcaption {
- position: absolute;
- bottom: 1em;
- right: 0;
- padding: .25em 1em .25em .25em;
- background: black;
- color: white;
- font-weight: 200; }
-
-img {
- width: 100%; }
diff --git a/source/css/main.min.css b/source/css/main.min.css
deleted file mode 100644
index 495cb89..0000000
--- a/source/css/main.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2)}.aden:after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.inkwell{-webkit-filter:sepia(30%) contrast(1.2) brightness(1.1) grayscale(1);filter:sepia(30%) contrast(1.2) brightness(1.1) grayscale(1)}.perpetua:after{background:-webkit-linear-gradient(top,#005B9A,#E6C13D);background:linear-gradient(to bottom,#005B9A,#E6C13D);mix-blend-mode:soft-light;opacity:.5}.reyes{-webkit-filter:sepia(22%) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(22%) brightness(1.1) contrast(.85) saturate(.75)}.reyes:after{background:#EFCDAD;mix-blend-mode:soft-light;opacity:.5}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2);filter:brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2)}.gingham:after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.aden,.gingham,.perpetua,.reyes,.toaster{position:relative}.aden:after,.gingham:after,.perpetua:after,.reyes:after,.toaster:after{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster:after{background:-webkit-radial-gradient(circle,#804E0F,#3B003B);background:radial-gradient(circle,#804E0F,#3B003B);mix-blend-mode:screen}body{font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;margin:2em auto;max-width:1200px;line-height:1.5}p{max-width:32em}ul{width:100%}.demo__item{margin:1em;list-style:none;display:inline-block}figure{width:350px;height:350px;overflow:hidden;position:relative;margin:0;padding:0}figure:hover{-webkit-filter:none!important;filter:none!important}figure:hover:after{background:0 0!important}figcaption{position:absolute;bottom:1em;right:0;padding:.25em 1em .25em .25em;background:#000;color:#fff;font-weight:200}img{width:100%}
\ No newline at end of file
diff --git a/source/css/perpetua.css b/source/css/perpetua.css
deleted file mode 100644
index 4aad44b..0000000
--- a/source/css/perpetua.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- *
- * Perpetua
- *
- */
-.perpetua {
- position: relative; }
- .perpetua:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.perpetua:after {
- background: -webkit-linear-gradient(top, #005B9A, #E6C13D);
- background: linear-gradient(to bottom, #005B9A, #E6C13D);
- mix-blend-mode: soft-light;
- opacity: .5; }
diff --git a/source/css/perpetua.min.css b/source/css/perpetua.min.css
deleted file mode 100644
index cc01404..0000000
--- a/source/css/perpetua.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.perpetua{position:relative}.perpetua:after{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;background:-webkit-linear-gradient(top,#005B9A,#E6C13D);background:linear-gradient(to bottom,#005B9A,#E6C13D);mix-blend-mode:soft-light;opacity:.5}
\ No newline at end of file
diff --git a/source/css/reyes.css b/source/css/reyes.css
deleted file mode 100644
index 9b2a959..0000000
--- a/source/css/reyes.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- *
- * Reyes
- *
- */
-.reyes {
- position: relative; }
- .reyes:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.reyes {
- -webkit-filter: sepia(22%) brightness(1.1) contrast(.85) saturate(0.75);
- filter: sepia(22%) brightness(1.1) contrast(.85) saturate(0.75); }
- .reyes:after {
- background: #EFCDAD;
- mix-blend-mode: soft-light;
- opacity: .5; }
diff --git a/source/css/reyes.min.css b/source/css/reyes.min.css
deleted file mode 100644
index 47aac29..0000000
--- a/source/css/reyes.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.reyes{position:relative}.reyes:after{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute}.reyes{-webkit-filter:sepia(22%) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(22%) brightness(1.1) contrast(.85) saturate(.75)}.reyes:after{background:#EFCDAD;mix-blend-mode:soft-light;opacity:.5}
\ No newline at end of file
diff --git a/source/css/toaster.css b/source/css/toaster.css
deleted file mode 100644
index 7972776..0000000
--- a/source/css/toaster.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- *
- * Toaster
- *
- */
-.toaster {
- position: relative; }
- .toaster:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.toaster {
- -webkit-filter: contrast(1.5) brightness(.9);
- filter: contrast(1.5) brightness(.9); }
- .toaster:after {
- background: -webkit-radial-gradient(circle, #804E0F, #3B003B);
- background: radial-gradient(circle, #804E0F, #3B003B);
- mix-blend-mode: screen; }
diff --git a/source/css/toaster.min.css b/source/css/toaster.min.css
deleted file mode 100644
index 96e256d..0000000
--- a/source/css/toaster.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.toaster{position:relative}.toaster:after{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster:after{background:-webkit-radial-gradient(circle,#804E0F,#3B003B);background:radial-gradient(circle,#804E0F,#3B003B);mix-blend-mode:screen}
\ No newline at end of file
diff --git a/source/css/walden.css b/source/css/walden.css
deleted file mode 100644
index ac7845c..0000000
--- a/source/css/walden.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- *
- * Walden
- *
- */
-.walden {
- position: relative; }
- .walden:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- position: absolute; }
-
-.walden {
- -webkit-filter: brightness(110%) hue-rotate(-10deg) sepia(30%) saturate(1.6);
- filter: brightness(110%) hue-rotate(-10deg) sepia(30%) saturate(1.6); }
- .walden:after {
- background: #04c;
- mix-blend-mode: screen;
- opacity: .3; }
diff --git a/source/css/walden.min.css b/source/css/walden.min.css
deleted file mode 100644
index c5f9f01..0000000
--- a/source/css/walden.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.walden{position:relative}.walden:after{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute}.walden{-webkit-filter:brightness(110%) hue-rotate(-10deg) sepia(30%) saturate(1.6);filter:brightness(110%) hue-rotate(-10deg) sepia(30%) saturate(1.6)}.walden:after{background:#04c;mix-blend-mode:screen;opacity:.3}
\ No newline at end of file
diff --git a/source/scss/_shared.scss b/source/scss/_shared.scss
deleted file mode 100644
index e9f9f46..0000000
--- a/source/scss/_shared.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-%filter-base {
- position: relative;
-
- &:after {
- content: '';
- display: block;
- height: 100%;
- width: 100%;
- top: 0; left: 0;
- position: absolute;
- }
-}
\ No newline at end of file
diff --git a/source/scss/_site-setup.scss b/source/scss/_site-setup.scss
deleted file mode 100644
index f921900..0000000
--- a/source/scss/_site-setup.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-body {
- font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
- margin: 2em auto;
- max-width: 1200px;
- line-height: 1.5;
-}
-
-p {
- max-width: 32em;
-}
-
-ul {
- width: 100%;
-}
-
-.demo {
- &__item {
- margin: 1em;
- list-style: none;
- display: inline-block;
- }
-}
-
-figure {
- width: 350px;
- height: 350px;
- overflow: hidden;
- position: relative;
- margin: 0;
- padding: 0;
-
- &:hover {
- filter: none !important;
- }
-
- &:hover:after {
- background: none !important;
- }
-}
-
-figcaption {
- position: absolute;
- bottom: 1em;
- right: 0;
- padding: .25em 1em .25em .25em;
- background: black;
- color: white;
- font-weight: 200;
-}
-
-img {
- width: 100%;
-}
\ No newline at end of file
diff --git a/source/scss/aden.scss b/source/scss/aden.scss
deleted file mode 100644
index e1f4b0d..0000000
--- a/source/scss/aden.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- *
- * Aden
- *
- */
-
-@import 'shared';
-
-%aden,
-.aden {
- @extend %filter-base;
- filter: hue-rotate(-20deg) contrast(.9) saturate(85%) brightness(1.2);
-
- &:after{
- background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
- mix-blend-mode: darken;
- }
-}
\ No newline at end of file
diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss
deleted file mode 100644
index 0fc1185..0000000
--- a/source/scss/cssgram.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import 'shared';
-@import 'aden';
-@import 'inkwell';
-@import 'perpetua';
-@import 'reyes';
-@import 'gingham';
-@import 'toaster';
-@import 'walden';
diff --git a/source/scss/demo-site.scss b/source/scss/demo-site.scss
deleted file mode 100644
index 3c6218b..0000000
--- a/source/scss/demo-site.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'cssgram';
-@import 'site-setup';
diff --git a/source/scss/gingham.scss b/source/scss/gingham.scss
deleted file mode 100644
index 5bd20a4..0000000
--- a/source/scss/gingham.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- *
- * Gingham
- *
- */
-@import 'shared';
-
-%gingham,
-.gingham {
- @extend %filter-base;
- filter: brightness(1.05) hue-rotate(-10deg) contrast(1.3) saturate(1.2);
-
- &:after{
- background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
- mix-blend-mode: darken;
- }
-}
\ No newline at end of file
diff --git a/source/scss/inkwell.scss b/source/scss/inkwell.scss
deleted file mode 100644
index 0b493cc..0000000
--- a/source/scss/inkwell.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- *
- * Inkwell
- *
- */
-
-%inkwell,
-.inkwell {
- filter: sepia(30%) contrast(1.2) brightness(1.1) grayscale(1);
-}
diff --git a/source/scss/perpetua.scss b/source/scss/perpetua.scss
deleted file mode 100644
index 90a3575..0000000
--- a/source/scss/perpetua.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- *
- * Perpetua
- *
- */
-@import 'shared';
-
-%perpetua,
-.perpetua {
- @extend %filter-base;
-
- &:after{
- background: linear-gradient(to bottom, #005B9A, #E6C13D);
- mix-blend-mode: soft-light;
- opacity: .5;
- }
-}
\ No newline at end of file
diff --git a/source/scss/reyes.scss b/source/scss/reyes.scss
deleted file mode 100644
index a0bd843..0000000
--- a/source/scss/reyes.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- *
- * Reyes
- *
- */
-@import 'shared';
-
-%reyes,
-.reyes {
- @extend %filter-base;
- filter: sepia(22%) brightness(1.1) contrast(.85) saturate(.75);
-
- &:after{
- background: #EFCDAD;
- mix-blend-mode: soft-light;
- opacity: .5;
- }
-}
\ No newline at end of file
diff --git a/source/scss/toaster.scss b/source/scss/toaster.scss
deleted file mode 100644
index 4862374..0000000
--- a/source/scss/toaster.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- *
- * Toaster
- *
- */
-@import 'shared';
-
-%toaster,
-.toaster {
- @extend %filter-base;
- filter: contrast(1.5) brightness(.9);
-
- &:after{
- background: radial-gradient(circle, #804E0F, #3B003B);
- mix-blend-mode: screen;
- }
-}
\ No newline at end of file
diff --git a/source/scss/walden.scss b/source/scss/walden.scss
deleted file mode 100644
index d1942a0..0000000
--- a/source/scss/walden.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- *
- * Walden
- *
- */
-@import 'shared';
-
-%walden,
-.walden {
- @extend %filter-base;
- filter: brightness(110%) hue-rotate(-10deg)sepia(30%) saturate(1.6);
-
- &:after{
- background: #04c;
- mix-blend-mode: screen;
- opacity: .3;
- }
-}
\ No newline at end of file
diff --git a/test/css/test-site.css b/test/css/test-site.css
new file mode 100644
index 0000000..50aab46
--- /dev/null
+++ b/test/css/test-site.css
@@ -0,0 +1,64 @@
+.test-page {
+ max-width: 650px;
+ line-height: 1.5;
+ font-size: 1.1em;
+ text-align: center;
+}
+
+.test-page a {
+ border-bottom: none;
+}
+
+.test-page .logo {
+ display: block;
+ float: left;
+ height: 100px;
+ width: auto;
+}
+
+.test-page .blurb {
+ display: block;
+ float: left;
+
+}
+
+.test-page section {
+ display: block;
+ margin-bottom: 10px;
+ overflow: hidden;
+ width: 100%;
+}
+
+.filter-header a {
+ color: #9b1c9b;
+ text-decoration: none;
+}
+
+.filter-header .done.done--yep{
+ color: #62B859;
+}
+
+.filter-header .done.done--nope{
+ color: #c63082;
+}
+
+.headers h3{
+ float: left;
+ width: 50%;
+}
+
+.test-images>div {
+ float: left;
+ width: 50%;
+}
+
+.test-images figure {
+ margin: 10px;
+ padding: 0;
+}
+
+.test-images img {
+ display: block;
+ height: auto;
+ width: 100%;
+}
diff --git a/test/index.html b/test/index.html
new file mode 100644
index 0000000..29e7a78
--- /dev/null
+++ b/test/index.html
@@ -0,0 +1,3832 @@
+
+
+
+
+ CSSgram test sheet
+
+ – Test sheet
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test/index.twig b/test/index.twig
new file mode 100644
index 0000000..909e14f
--- /dev/null
+++ b/test/index.twig
@@ -0,0 +1,49 @@
+{% set title = 'CSSgram test sheet' %}
+{% set body_class = 'test-page' %}
+
+{% extends '../twig/template.twig' %}
+
+{% block stylesheets %}
+
+ – Test sheet
+
+
+ {% for f in filters %}
+
+
+
+
+
+ {% for i in images %}
+
+
+ {# ig #}
+
+
+
+
+
+
+ {% endfor %}
+
+
+ {% endfor %}
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/test/ref/atx-_1977.jpg b/test/ref/atx-_1977.jpg
new file mode 100644
index 0000000..6ad83e0
Binary files /dev/null and b/test/ref/atx-_1977.jpg differ
diff --git a/test/ref/atx-aden.jpg b/test/ref/atx-aden.jpg
new file mode 100644
index 0000000..9240d5b
Binary files /dev/null and b/test/ref/atx-aden.jpg differ
diff --git a/test/ref/atx-amaro.jpg b/test/ref/atx-amaro.jpg
new file mode 100644
index 0000000..a6196f3
Binary files /dev/null and b/test/ref/atx-amaro.jpg differ
diff --git a/test/ref/atx-ashby.jpg b/test/ref/atx-ashby.jpg
new file mode 100644
index 0000000..31d48f6
Binary files /dev/null and b/test/ref/atx-ashby.jpg differ
diff --git a/test/ref/atx-brannan.jpg b/test/ref/atx-brannan.jpg
new file mode 100644
index 0000000..247d8ca
Binary files /dev/null and b/test/ref/atx-brannan.jpg differ
diff --git a/test/ref/atx-brooklyn.jpg b/test/ref/atx-brooklyn.jpg
new file mode 100644
index 0000000..fe50a95
Binary files /dev/null and b/test/ref/atx-brooklyn.jpg differ
diff --git a/test/ref/atx-charmes.jpg b/test/ref/atx-charmes.jpg
new file mode 100644
index 0000000..a4e7de9
Binary files /dev/null and b/test/ref/atx-charmes.jpg differ
diff --git a/test/ref/atx-clarendon.jpg b/test/ref/atx-clarendon.jpg
new file mode 100644
index 0000000..5bf6075
Binary files /dev/null and b/test/ref/atx-clarendon.jpg differ
diff --git a/test/ref/atx-crema.jpg b/test/ref/atx-crema.jpg
new file mode 100644
index 0000000..5cdcd6d
Binary files /dev/null and b/test/ref/atx-crema.jpg differ
diff --git a/test/ref/atx-dogpatch.jpg b/test/ref/atx-dogpatch.jpg
new file mode 100644
index 0000000..7dd2303
Binary files /dev/null and b/test/ref/atx-dogpatch.jpg differ
diff --git a/test/ref/atx-earlybird.jpg b/test/ref/atx-earlybird.jpg
new file mode 100644
index 0000000..39289cb
Binary files /dev/null and b/test/ref/atx-earlybird.jpg differ
diff --git a/test/ref/atx-gingham.jpg b/test/ref/atx-gingham.jpg
new file mode 100644
index 0000000..1959f66
Binary files /dev/null and b/test/ref/atx-gingham.jpg differ
diff --git a/test/ref/atx-ginza.jpg b/test/ref/atx-ginza.jpg
new file mode 100644
index 0000000..334d3e9
Binary files /dev/null and b/test/ref/atx-ginza.jpg differ
diff --git a/test/ref/atx-hefe.jpg b/test/ref/atx-hefe.jpg
new file mode 100644
index 0000000..a1f5014
Binary files /dev/null and b/test/ref/atx-hefe.jpg differ
diff --git a/test/ref/atx-helena.jpg b/test/ref/atx-helena.jpg
new file mode 100644
index 0000000..3e1ba8a
Binary files /dev/null and b/test/ref/atx-helena.jpg differ
diff --git a/test/ref/atx-hudson.jpg b/test/ref/atx-hudson.jpg
new file mode 100644
index 0000000..36ef6c3
Binary files /dev/null and b/test/ref/atx-hudson.jpg differ
diff --git a/test/ref/atx-inkwell.jpg b/test/ref/atx-inkwell.jpg
new file mode 100644
index 0000000..352668e
Binary files /dev/null and b/test/ref/atx-inkwell.jpg differ
diff --git a/test/ref/atx-juno.jpg b/test/ref/atx-juno.jpg
new file mode 100644
index 0000000..12cc11e
Binary files /dev/null and b/test/ref/atx-juno.jpg differ
diff --git a/test/ref/atx-kelvin.jpg b/test/ref/atx-kelvin.jpg
new file mode 100644
index 0000000..3bdf9d0
Binary files /dev/null and b/test/ref/atx-kelvin.jpg differ
diff --git a/test/ref/atx-lark.jpg b/test/ref/atx-lark.jpg
new file mode 100644
index 0000000..bfea095
Binary files /dev/null and b/test/ref/atx-lark.jpg differ
diff --git a/test/ref/atx-lofi.jpg b/test/ref/atx-lofi.jpg
new file mode 100644
index 0000000..59a243e
Binary files /dev/null and b/test/ref/atx-lofi.jpg differ
diff --git a/test/ref/atx-ludwig.jpg b/test/ref/atx-ludwig.jpg
new file mode 100644
index 0000000..4a1c020
Binary files /dev/null and b/test/ref/atx-ludwig.jpg differ
diff --git a/test/ref/atx-maven.jpg b/test/ref/atx-maven.jpg
new file mode 100644
index 0000000..2d72584
Binary files /dev/null and b/test/ref/atx-maven.jpg differ
diff --git a/test/ref/atx-mayfair.jpg b/test/ref/atx-mayfair.jpg
new file mode 100644
index 0000000..4d40f7a
Binary files /dev/null and b/test/ref/atx-mayfair.jpg differ
diff --git a/test/ref/atx-moon.jpg b/test/ref/atx-moon.jpg
new file mode 100644
index 0000000..fd8a0cd
Binary files /dev/null and b/test/ref/atx-moon.jpg differ
diff --git a/test/ref/atx-nashville.jpg b/test/ref/atx-nashville.jpg
new file mode 100644
index 0000000..7455eaf
Binary files /dev/null and b/test/ref/atx-nashville.jpg differ
diff --git a/test/ref/atx-perpetua.jpg b/test/ref/atx-perpetua.jpg
new file mode 100644
index 0000000..e4fe618
Binary files /dev/null and b/test/ref/atx-perpetua.jpg differ
diff --git a/test/ref/atx-reyes.jpg b/test/ref/atx-reyes.jpg
new file mode 100644
index 0000000..1aac9dc
Binary files /dev/null and b/test/ref/atx-reyes.jpg differ
diff --git a/test/ref/atx-rise.jpg b/test/ref/atx-rise.jpg
new file mode 100644
index 0000000..c46e1f8
Binary files /dev/null and b/test/ref/atx-rise.jpg differ
diff --git a/test/ref/atx-sierra.jpg b/test/ref/atx-sierra.jpg
new file mode 100644
index 0000000..5bd7105
Binary files /dev/null and b/test/ref/atx-sierra.jpg differ
diff --git a/test/ref/atx-skyline.jpg b/test/ref/atx-skyline.jpg
new file mode 100644
index 0000000..d2362dc
Binary files /dev/null and b/test/ref/atx-skyline.jpg differ
diff --git a/test/ref/atx-slumber.jpg b/test/ref/atx-slumber.jpg
new file mode 100644
index 0000000..908d691
Binary files /dev/null and b/test/ref/atx-slumber.jpg differ
diff --git a/test/ref/atx-stinson.jpg b/test/ref/atx-stinson.jpg
new file mode 100644
index 0000000..d7d71cc
Binary files /dev/null and b/test/ref/atx-stinson.jpg differ
diff --git a/test/ref/atx-sutro.jpg b/test/ref/atx-sutro.jpg
new file mode 100644
index 0000000..1733c00
Binary files /dev/null and b/test/ref/atx-sutro.jpg differ
diff --git a/test/ref/atx-toaster.jpg b/test/ref/atx-toaster.jpg
new file mode 100644
index 0000000..3c26961
Binary files /dev/null and b/test/ref/atx-toaster.jpg differ
diff --git a/test/ref/atx-valencia.jpg b/test/ref/atx-valencia.jpg
new file mode 100644
index 0000000..a0c128f
Binary files /dev/null and b/test/ref/atx-valencia.jpg differ
diff --git a/test/ref/atx-vesper.jpg b/test/ref/atx-vesper.jpg
new file mode 100644
index 0000000..58646f7
Binary files /dev/null and b/test/ref/atx-vesper.jpg differ
diff --git a/test/ref/atx-walden.jpg b/test/ref/atx-walden.jpg
new file mode 100644
index 0000000..9d08278
Binary files /dev/null and b/test/ref/atx-walden.jpg differ
diff --git a/test/ref/atx-willow.jpg b/test/ref/atx-willow.jpg
new file mode 100644
index 0000000..9c749b0
Binary files /dev/null and b/test/ref/atx-willow.jpg differ
diff --git a/test/ref/atx-xpro2.jpg b/test/ref/atx-xpro2.jpg
new file mode 100644
index 0000000..d994bec
Binary files /dev/null and b/test/ref/atx-xpro2.jpg differ
diff --git a/test/ref/bike-_1977.jpg b/test/ref/bike-_1977.jpg
new file mode 100644
index 0000000..68e4a18
Binary files /dev/null and b/test/ref/bike-_1977.jpg differ
diff --git a/test/ref/bike-aden.jpg b/test/ref/bike-aden.jpg
new file mode 100644
index 0000000..bac6443
Binary files /dev/null and b/test/ref/bike-aden.jpg differ
diff --git a/test/ref/bike-amaro.jpg b/test/ref/bike-amaro.jpg
new file mode 100644
index 0000000..a968dd4
Binary files /dev/null and b/test/ref/bike-amaro.jpg differ
diff --git a/test/ref/bike-ashby.jpg b/test/ref/bike-ashby.jpg
new file mode 100644
index 0000000..099e898
Binary files /dev/null and b/test/ref/bike-ashby.jpg differ
diff --git a/test/ref/bike-brannan.jpg b/test/ref/bike-brannan.jpg
new file mode 100644
index 0000000..b15a773
Binary files /dev/null and b/test/ref/bike-brannan.jpg differ
diff --git a/test/ref/bike-brooklyn.jpg b/test/ref/bike-brooklyn.jpg
new file mode 100644
index 0000000..22c3824
Binary files /dev/null and b/test/ref/bike-brooklyn.jpg differ
diff --git a/test/ref/bike-charmes.jpg b/test/ref/bike-charmes.jpg
new file mode 100644
index 0000000..d784194
Binary files /dev/null and b/test/ref/bike-charmes.jpg differ
diff --git a/test/ref/bike-clarendon.jpg b/test/ref/bike-clarendon.jpg
new file mode 100644
index 0000000..6b0f675
Binary files /dev/null and b/test/ref/bike-clarendon.jpg differ
diff --git a/test/ref/bike-crema.jpg b/test/ref/bike-crema.jpg
new file mode 100644
index 0000000..a73f36e
Binary files /dev/null and b/test/ref/bike-crema.jpg differ
diff --git a/test/ref/bike-dogpatch.jpg b/test/ref/bike-dogpatch.jpg
new file mode 100644
index 0000000..b6cc9b8
Binary files /dev/null and b/test/ref/bike-dogpatch.jpg differ
diff --git a/test/ref/bike-earlybird.jpg b/test/ref/bike-earlybird.jpg
new file mode 100644
index 0000000..ee69f6b
Binary files /dev/null and b/test/ref/bike-earlybird.jpg differ
diff --git a/test/ref/bike-gingham.jpg b/test/ref/bike-gingham.jpg
new file mode 100644
index 0000000..053599a
Binary files /dev/null and b/test/ref/bike-gingham.jpg differ
diff --git a/test/ref/bike-ginza.jpg b/test/ref/bike-ginza.jpg
new file mode 100644
index 0000000..72d8317
Binary files /dev/null and b/test/ref/bike-ginza.jpg differ
diff --git a/test/ref/bike-hefe.jpg b/test/ref/bike-hefe.jpg
new file mode 100644
index 0000000..65dc8ae
Binary files /dev/null and b/test/ref/bike-hefe.jpg differ
diff --git a/test/ref/bike-helena.jpg b/test/ref/bike-helena.jpg
new file mode 100644
index 0000000..045612e
Binary files /dev/null and b/test/ref/bike-helena.jpg differ
diff --git a/test/ref/bike-hudson.jpg b/test/ref/bike-hudson.jpg
new file mode 100644
index 0000000..4f2a426
Binary files /dev/null and b/test/ref/bike-hudson.jpg differ
diff --git a/test/ref/bike-inkwell.jpg b/test/ref/bike-inkwell.jpg
new file mode 100644
index 0000000..d202ee9
Binary files /dev/null and b/test/ref/bike-inkwell.jpg differ
diff --git a/test/ref/bike-juno.jpg b/test/ref/bike-juno.jpg
new file mode 100644
index 0000000..d7f8a87
Binary files /dev/null and b/test/ref/bike-juno.jpg differ
diff --git a/test/ref/bike-kelvin.jpg b/test/ref/bike-kelvin.jpg
new file mode 100644
index 0000000..e680c4b
Binary files /dev/null and b/test/ref/bike-kelvin.jpg differ
diff --git a/test/ref/bike-lark.jpg b/test/ref/bike-lark.jpg
new file mode 100644
index 0000000..4c73f08
Binary files /dev/null and b/test/ref/bike-lark.jpg differ
diff --git a/test/ref/bike-lofi.jpg b/test/ref/bike-lofi.jpg
new file mode 100644
index 0000000..c08aede
Binary files /dev/null and b/test/ref/bike-lofi.jpg differ
diff --git a/test/ref/bike-ludwig.jpg b/test/ref/bike-ludwig.jpg
new file mode 100644
index 0000000..eba5683
Binary files /dev/null and b/test/ref/bike-ludwig.jpg differ
diff --git a/test/ref/bike-maven.jpg b/test/ref/bike-maven.jpg
new file mode 100644
index 0000000..67b9fab
Binary files /dev/null and b/test/ref/bike-maven.jpg differ
diff --git a/test/ref/bike-mayfair.jpg b/test/ref/bike-mayfair.jpg
new file mode 100644
index 0000000..9b44694
Binary files /dev/null and b/test/ref/bike-mayfair.jpg differ
diff --git a/test/ref/bike-moon.jpg b/test/ref/bike-moon.jpg
new file mode 100644
index 0000000..f011aee
Binary files /dev/null and b/test/ref/bike-moon.jpg differ
diff --git a/test/ref/bike-nashville.jpg b/test/ref/bike-nashville.jpg
new file mode 100644
index 0000000..d62b2ef
Binary files /dev/null and b/test/ref/bike-nashville.jpg differ
diff --git a/test/ref/bike-perpetua.jpg b/test/ref/bike-perpetua.jpg
new file mode 100644
index 0000000..d275377
Binary files /dev/null and b/test/ref/bike-perpetua.jpg differ
diff --git a/test/ref/bike-reyes.jpg b/test/ref/bike-reyes.jpg
new file mode 100644
index 0000000..fe83a61
Binary files /dev/null and b/test/ref/bike-reyes.jpg differ
diff --git a/test/ref/bike-rise.jpg b/test/ref/bike-rise.jpg
new file mode 100644
index 0000000..8d0ba33
Binary files /dev/null and b/test/ref/bike-rise.jpg differ
diff --git a/test/ref/bike-sierra.jpg b/test/ref/bike-sierra.jpg
new file mode 100644
index 0000000..0fdaf6f
Binary files /dev/null and b/test/ref/bike-sierra.jpg differ
diff --git a/test/ref/bike-skyline.jpg b/test/ref/bike-skyline.jpg
new file mode 100644
index 0000000..f3727cc
Binary files /dev/null and b/test/ref/bike-skyline.jpg differ
diff --git a/test/ref/bike-slumber.jpg b/test/ref/bike-slumber.jpg
new file mode 100644
index 0000000..778f082
Binary files /dev/null and b/test/ref/bike-slumber.jpg differ
diff --git a/test/ref/bike-stinson.jpg b/test/ref/bike-stinson.jpg
new file mode 100644
index 0000000..1816af1
Binary files /dev/null and b/test/ref/bike-stinson.jpg differ
diff --git a/test/ref/bike-sutro.jpg b/test/ref/bike-sutro.jpg
new file mode 100644
index 0000000..7d4cea5
Binary files /dev/null and b/test/ref/bike-sutro.jpg differ
diff --git a/test/ref/bike-toaster.jpg b/test/ref/bike-toaster.jpg
new file mode 100644
index 0000000..a71dcfd
Binary files /dev/null and b/test/ref/bike-toaster.jpg differ
diff --git a/test/ref/bike-valencia.jpg b/test/ref/bike-valencia.jpg
new file mode 100644
index 0000000..f088761
Binary files /dev/null and b/test/ref/bike-valencia.jpg differ
diff --git a/test/ref/bike-vesper.jpg b/test/ref/bike-vesper.jpg
new file mode 100644
index 0000000..df653e4
Binary files /dev/null and b/test/ref/bike-vesper.jpg differ
diff --git a/test/ref/bike-walden.jpg b/test/ref/bike-walden.jpg
new file mode 100644
index 0000000..b75000f
Binary files /dev/null and b/test/ref/bike-walden.jpg differ
diff --git a/test/ref/bike-willow.jpg b/test/ref/bike-willow.jpg
new file mode 100644
index 0000000..45aeac1
Binary files /dev/null and b/test/ref/bike-willow.jpg differ
diff --git a/test/ref/bike-xpro2.jpg b/test/ref/bike-xpro2.jpg
new file mode 100644
index 0000000..e4874c3
Binary files /dev/null and b/test/ref/bike-xpro2.jpg differ
diff --git a/test/ref/cacti-_1977.jpg b/test/ref/cacti-_1977.jpg
new file mode 100644
index 0000000..c6591a9
Binary files /dev/null and b/test/ref/cacti-_1977.jpg differ
diff --git a/test/ref/cacti-aden.jpg b/test/ref/cacti-aden.jpg
new file mode 100644
index 0000000..ed49313
Binary files /dev/null and b/test/ref/cacti-aden.jpg differ
diff --git a/test/ref/cacti-amaro.jpg b/test/ref/cacti-amaro.jpg
new file mode 100644
index 0000000..e8ef42a
Binary files /dev/null and b/test/ref/cacti-amaro.jpg differ
diff --git a/test/ref/cacti-ashby.jpg b/test/ref/cacti-ashby.jpg
new file mode 100644
index 0000000..bc33421
Binary files /dev/null and b/test/ref/cacti-ashby.jpg differ
diff --git a/test/ref/cacti-brannan.jpg b/test/ref/cacti-brannan.jpg
new file mode 100644
index 0000000..8ed0f00
Binary files /dev/null and b/test/ref/cacti-brannan.jpg differ
diff --git a/test/ref/cacti-brooklyn.jpg b/test/ref/cacti-brooklyn.jpg
new file mode 100644
index 0000000..fbd64e7
Binary files /dev/null and b/test/ref/cacti-brooklyn.jpg differ
diff --git a/test/ref/cacti-charmes.jpg b/test/ref/cacti-charmes.jpg
new file mode 100644
index 0000000..4566322
Binary files /dev/null and b/test/ref/cacti-charmes.jpg differ
diff --git a/test/ref/cacti-clarendon.jpg b/test/ref/cacti-clarendon.jpg
new file mode 100644
index 0000000..d5d4cf8
Binary files /dev/null and b/test/ref/cacti-clarendon.jpg differ
diff --git a/test/ref/cacti-crema.jpg b/test/ref/cacti-crema.jpg
new file mode 100644
index 0000000..df82a0d
Binary files /dev/null and b/test/ref/cacti-crema.jpg differ
diff --git a/test/ref/cacti-dogpatch.jpg b/test/ref/cacti-dogpatch.jpg
new file mode 100644
index 0000000..e5631f2
Binary files /dev/null and b/test/ref/cacti-dogpatch.jpg differ
diff --git a/test/ref/cacti-earlybird.jpg b/test/ref/cacti-earlybird.jpg
new file mode 100644
index 0000000..099218c
Binary files /dev/null and b/test/ref/cacti-earlybird.jpg differ
diff --git a/test/ref/cacti-gingham.jpg b/test/ref/cacti-gingham.jpg
new file mode 100644
index 0000000..fd54759
Binary files /dev/null and b/test/ref/cacti-gingham.jpg differ
diff --git a/test/ref/cacti-ginza.jpg b/test/ref/cacti-ginza.jpg
new file mode 100644
index 0000000..bafe6cb
Binary files /dev/null and b/test/ref/cacti-ginza.jpg differ
diff --git a/test/ref/cacti-hefe.jpg b/test/ref/cacti-hefe.jpg
new file mode 100644
index 0000000..52737fa
Binary files /dev/null and b/test/ref/cacti-hefe.jpg differ
diff --git a/test/ref/cacti-helena.jpg b/test/ref/cacti-helena.jpg
new file mode 100644
index 0000000..4b4fe37
Binary files /dev/null and b/test/ref/cacti-helena.jpg differ
diff --git a/test/ref/cacti-hudson.jpg b/test/ref/cacti-hudson.jpg
new file mode 100644
index 0000000..c6eeb9f
Binary files /dev/null and b/test/ref/cacti-hudson.jpg differ
diff --git a/test/ref/cacti-inkwell.jpg b/test/ref/cacti-inkwell.jpg
new file mode 100644
index 0000000..81dcfb7
Binary files /dev/null and b/test/ref/cacti-inkwell.jpg differ
diff --git a/test/ref/cacti-juno.jpg b/test/ref/cacti-juno.jpg
new file mode 100644
index 0000000..2c47770
Binary files /dev/null and b/test/ref/cacti-juno.jpg differ
diff --git a/test/ref/cacti-kelvin.jpg b/test/ref/cacti-kelvin.jpg
new file mode 100644
index 0000000..a1236c8
Binary files /dev/null and b/test/ref/cacti-kelvin.jpg differ
diff --git a/test/ref/cacti-lark.jpg b/test/ref/cacti-lark.jpg
new file mode 100644
index 0000000..78a8550
Binary files /dev/null and b/test/ref/cacti-lark.jpg differ
diff --git a/test/ref/cacti-lofi.jpg b/test/ref/cacti-lofi.jpg
new file mode 100644
index 0000000..c0683f5
Binary files /dev/null and b/test/ref/cacti-lofi.jpg differ
diff --git a/test/ref/cacti-ludwig.jpg b/test/ref/cacti-ludwig.jpg
new file mode 100644
index 0000000..5ab3e32
Binary files /dev/null and b/test/ref/cacti-ludwig.jpg differ
diff --git a/test/ref/cacti-maven.jpg b/test/ref/cacti-maven.jpg
new file mode 100644
index 0000000..66e1fc2
Binary files /dev/null and b/test/ref/cacti-maven.jpg differ
diff --git a/test/ref/cacti-mayfair.jpg b/test/ref/cacti-mayfair.jpg
new file mode 100644
index 0000000..9d8598d
Binary files /dev/null and b/test/ref/cacti-mayfair.jpg differ
diff --git a/test/ref/cacti-moon.jpg b/test/ref/cacti-moon.jpg
new file mode 100644
index 0000000..ee8964d
Binary files /dev/null and b/test/ref/cacti-moon.jpg differ
diff --git a/test/ref/cacti-nashville.jpg b/test/ref/cacti-nashville.jpg
new file mode 100644
index 0000000..66d50a7
Binary files /dev/null and b/test/ref/cacti-nashville.jpg differ
diff --git a/test/ref/cacti-perpetua.jpg b/test/ref/cacti-perpetua.jpg
new file mode 100644
index 0000000..3ad0fe3
Binary files /dev/null and b/test/ref/cacti-perpetua.jpg differ
diff --git a/test/ref/cacti-reyes.jpg b/test/ref/cacti-reyes.jpg
new file mode 100644
index 0000000..9cde2a1
Binary files /dev/null and b/test/ref/cacti-reyes.jpg differ
diff --git a/test/ref/cacti-rise.jpg b/test/ref/cacti-rise.jpg
new file mode 100644
index 0000000..510e508
Binary files /dev/null and b/test/ref/cacti-rise.jpg differ
diff --git a/test/ref/cacti-sierra.jpg b/test/ref/cacti-sierra.jpg
new file mode 100644
index 0000000..d2a55ba
Binary files /dev/null and b/test/ref/cacti-sierra.jpg differ
diff --git a/test/ref/cacti-skyline.jpg b/test/ref/cacti-skyline.jpg
new file mode 100644
index 0000000..785e055
Binary files /dev/null and b/test/ref/cacti-skyline.jpg differ
diff --git a/test/ref/cacti-slumber.jpg b/test/ref/cacti-slumber.jpg
new file mode 100644
index 0000000..f879c28
Binary files /dev/null and b/test/ref/cacti-slumber.jpg differ
diff --git a/test/ref/cacti-stinson.jpg b/test/ref/cacti-stinson.jpg
new file mode 100644
index 0000000..8691c95
Binary files /dev/null and b/test/ref/cacti-stinson.jpg differ
diff --git a/test/ref/cacti-sutro.jpg b/test/ref/cacti-sutro.jpg
new file mode 100644
index 0000000..eb99e5a
Binary files /dev/null and b/test/ref/cacti-sutro.jpg differ
diff --git a/test/ref/cacti-toaster.jpg b/test/ref/cacti-toaster.jpg
new file mode 100644
index 0000000..b2d701c
Binary files /dev/null and b/test/ref/cacti-toaster.jpg differ
diff --git a/test/ref/cacti-valencia.jpg b/test/ref/cacti-valencia.jpg
new file mode 100644
index 0000000..761901d
Binary files /dev/null and b/test/ref/cacti-valencia.jpg differ
diff --git a/test/ref/cacti-vesper.jpg b/test/ref/cacti-vesper.jpg
new file mode 100644
index 0000000..a2d8699
Binary files /dev/null and b/test/ref/cacti-vesper.jpg differ
diff --git a/test/ref/cacti-walden.jpg b/test/ref/cacti-walden.jpg
new file mode 100644
index 0000000..862985a
Binary files /dev/null and b/test/ref/cacti-walden.jpg differ
diff --git a/test/ref/cacti-willow.jpg b/test/ref/cacti-willow.jpg
new file mode 100644
index 0000000..a449409
Binary files /dev/null and b/test/ref/cacti-willow.jpg differ
diff --git a/test/ref/cacti-xpro2.jpg b/test/ref/cacti-xpro2.jpg
new file mode 100644
index 0000000..a5c52c1
Binary files /dev/null and b/test/ref/cacti-xpro2.jpg differ
diff --git a/test/ref/lakegeneva-_1977.jpg b/test/ref/lakegeneva-_1977.jpg
new file mode 100644
index 0000000..c1fe21e
Binary files /dev/null and b/test/ref/lakegeneva-_1977.jpg differ
diff --git a/test/ref/lakegeneva-aden.jpg b/test/ref/lakegeneva-aden.jpg
new file mode 100644
index 0000000..2444605
Binary files /dev/null and b/test/ref/lakegeneva-aden.jpg differ
diff --git a/test/ref/lakegeneva-amaro.jpg b/test/ref/lakegeneva-amaro.jpg
new file mode 100644
index 0000000..3a93011
Binary files /dev/null and b/test/ref/lakegeneva-amaro.jpg differ
diff --git a/test/ref/lakegeneva-ashby.jpg b/test/ref/lakegeneva-ashby.jpg
new file mode 100644
index 0000000..bd70462
Binary files /dev/null and b/test/ref/lakegeneva-ashby.jpg differ
diff --git a/test/ref/lakegeneva-brannan.jpg b/test/ref/lakegeneva-brannan.jpg
new file mode 100644
index 0000000..a8836cf
Binary files /dev/null and b/test/ref/lakegeneva-brannan.jpg differ
diff --git a/test/ref/lakegeneva-brooklyn.jpg b/test/ref/lakegeneva-brooklyn.jpg
new file mode 100644
index 0000000..928e1ed
Binary files /dev/null and b/test/ref/lakegeneva-brooklyn.jpg differ
diff --git a/test/ref/lakegeneva-charmes.jpg b/test/ref/lakegeneva-charmes.jpg
new file mode 100644
index 0000000..259d969
Binary files /dev/null and b/test/ref/lakegeneva-charmes.jpg differ
diff --git a/test/ref/lakegeneva-clarendon.jpg b/test/ref/lakegeneva-clarendon.jpg
new file mode 100644
index 0000000..dd4cd4b
Binary files /dev/null and b/test/ref/lakegeneva-clarendon.jpg differ
diff --git a/test/ref/lakegeneva-crema.jpg b/test/ref/lakegeneva-crema.jpg
new file mode 100644
index 0000000..4c5a2e7
Binary files /dev/null and b/test/ref/lakegeneva-crema.jpg differ
diff --git a/test/ref/lakegeneva-dogpatch.jpg b/test/ref/lakegeneva-dogpatch.jpg
new file mode 100644
index 0000000..5f9607e
Binary files /dev/null and b/test/ref/lakegeneva-dogpatch.jpg differ
diff --git a/test/ref/lakegeneva-earlybird.jpg b/test/ref/lakegeneva-earlybird.jpg
new file mode 100644
index 0000000..2788aa3
Binary files /dev/null and b/test/ref/lakegeneva-earlybird.jpg differ
diff --git a/test/ref/lakegeneva-gingham.jpg b/test/ref/lakegeneva-gingham.jpg
new file mode 100644
index 0000000..47932ba
Binary files /dev/null and b/test/ref/lakegeneva-gingham.jpg differ
diff --git a/test/ref/lakegeneva-ginza.jpg b/test/ref/lakegeneva-ginza.jpg
new file mode 100644
index 0000000..3478df3
Binary files /dev/null and b/test/ref/lakegeneva-ginza.jpg differ
diff --git a/test/ref/lakegeneva-hefe.jpg b/test/ref/lakegeneva-hefe.jpg
new file mode 100644
index 0000000..9e8799a
Binary files /dev/null and b/test/ref/lakegeneva-hefe.jpg differ
diff --git a/test/ref/lakegeneva-helena.jpg b/test/ref/lakegeneva-helena.jpg
new file mode 100644
index 0000000..12b4ba9
Binary files /dev/null and b/test/ref/lakegeneva-helena.jpg differ
diff --git a/test/ref/lakegeneva-hudson.jpg b/test/ref/lakegeneva-hudson.jpg
new file mode 100644
index 0000000..a162c2c
Binary files /dev/null and b/test/ref/lakegeneva-hudson.jpg differ
diff --git a/test/ref/lakegeneva-inkwell.jpg b/test/ref/lakegeneva-inkwell.jpg
new file mode 100644
index 0000000..320b47f
Binary files /dev/null and b/test/ref/lakegeneva-inkwell.jpg differ
diff --git a/test/ref/lakegeneva-juno.jpg b/test/ref/lakegeneva-juno.jpg
new file mode 100644
index 0000000..7cb6cc9
Binary files /dev/null and b/test/ref/lakegeneva-juno.jpg differ
diff --git a/test/ref/lakegeneva-kelvin.jpg b/test/ref/lakegeneva-kelvin.jpg
new file mode 100644
index 0000000..7f7c306
Binary files /dev/null and b/test/ref/lakegeneva-kelvin.jpg differ
diff --git a/test/ref/lakegeneva-lark.jpg b/test/ref/lakegeneva-lark.jpg
new file mode 100644
index 0000000..932ff8b
Binary files /dev/null and b/test/ref/lakegeneva-lark.jpg differ
diff --git a/test/ref/lakegeneva-lofi.jpg b/test/ref/lakegeneva-lofi.jpg
new file mode 100644
index 0000000..535fc35
Binary files /dev/null and b/test/ref/lakegeneva-lofi.jpg differ
diff --git a/test/ref/lakegeneva-ludwig.jpg b/test/ref/lakegeneva-ludwig.jpg
new file mode 100644
index 0000000..43c0556
Binary files /dev/null and b/test/ref/lakegeneva-ludwig.jpg differ
diff --git a/test/ref/lakegeneva-maven.jpg b/test/ref/lakegeneva-maven.jpg
new file mode 100644
index 0000000..3ea1066
Binary files /dev/null and b/test/ref/lakegeneva-maven.jpg differ
diff --git a/test/ref/lakegeneva-mayfair.jpg b/test/ref/lakegeneva-mayfair.jpg
new file mode 100644
index 0000000..0eb179f
Binary files /dev/null and b/test/ref/lakegeneva-mayfair.jpg differ
diff --git a/test/ref/lakegeneva-moon.jpg b/test/ref/lakegeneva-moon.jpg
new file mode 100644
index 0000000..c1d9df1
Binary files /dev/null and b/test/ref/lakegeneva-moon.jpg differ
diff --git a/test/ref/lakegeneva-nashville.jpg b/test/ref/lakegeneva-nashville.jpg
new file mode 100644
index 0000000..d78edcc
Binary files /dev/null and b/test/ref/lakegeneva-nashville.jpg differ
diff --git a/test/ref/lakegeneva-perpetua.jpg b/test/ref/lakegeneva-perpetua.jpg
new file mode 100644
index 0000000..3b120f8
Binary files /dev/null and b/test/ref/lakegeneva-perpetua.jpg differ
diff --git a/test/ref/lakegeneva-reyes.jpg b/test/ref/lakegeneva-reyes.jpg
new file mode 100644
index 0000000..a2ea134
Binary files /dev/null and b/test/ref/lakegeneva-reyes.jpg differ
diff --git a/test/ref/lakegeneva-rise.jpg b/test/ref/lakegeneva-rise.jpg
new file mode 100644
index 0000000..8393125
Binary files /dev/null and b/test/ref/lakegeneva-rise.jpg differ
diff --git a/test/ref/lakegeneva-sierra.jpg b/test/ref/lakegeneva-sierra.jpg
new file mode 100644
index 0000000..a23f774
Binary files /dev/null and b/test/ref/lakegeneva-sierra.jpg differ
diff --git a/test/ref/lakegeneva-skyline.jpg b/test/ref/lakegeneva-skyline.jpg
new file mode 100644
index 0000000..b3081b9
Binary files /dev/null and b/test/ref/lakegeneva-skyline.jpg differ
diff --git a/test/ref/lakegeneva-slumber.jpg b/test/ref/lakegeneva-slumber.jpg
new file mode 100644
index 0000000..7b8ff1b
Binary files /dev/null and b/test/ref/lakegeneva-slumber.jpg differ
diff --git a/test/ref/lakegeneva-stinson.jpg b/test/ref/lakegeneva-stinson.jpg
new file mode 100644
index 0000000..8f8617e
Binary files /dev/null and b/test/ref/lakegeneva-stinson.jpg differ
diff --git a/test/ref/lakegeneva-sutro.jpg b/test/ref/lakegeneva-sutro.jpg
new file mode 100644
index 0000000..a930989
Binary files /dev/null and b/test/ref/lakegeneva-sutro.jpg differ
diff --git a/test/ref/lakegeneva-toaster.jpg b/test/ref/lakegeneva-toaster.jpg
new file mode 100644
index 0000000..2e2fc82
Binary files /dev/null and b/test/ref/lakegeneva-toaster.jpg differ
diff --git a/test/ref/lakegeneva-valencia.jpg b/test/ref/lakegeneva-valencia.jpg
new file mode 100644
index 0000000..a3ef04c
Binary files /dev/null and b/test/ref/lakegeneva-valencia.jpg differ
diff --git a/test/ref/lakegeneva-vesper.jpg b/test/ref/lakegeneva-vesper.jpg
new file mode 100644
index 0000000..52c9bb0
Binary files /dev/null and b/test/ref/lakegeneva-vesper.jpg differ
diff --git a/test/ref/lakegeneva-walden.jpg b/test/ref/lakegeneva-walden.jpg
new file mode 100644
index 0000000..428f3e3
Binary files /dev/null and b/test/ref/lakegeneva-walden.jpg differ
diff --git a/test/ref/lakegeneva-willow.jpg b/test/ref/lakegeneva-willow.jpg
new file mode 100644
index 0000000..75ec5cf
Binary files /dev/null and b/test/ref/lakegeneva-willow.jpg differ
diff --git a/test/ref/lakegeneva-xpro2.jpg b/test/ref/lakegeneva-xpro2.jpg
new file mode 100644
index 0000000..c952875
Binary files /dev/null and b/test/ref/lakegeneva-xpro2.jpg differ
diff --git a/test/ref/tahoe-_1977.jpg b/test/ref/tahoe-_1977.jpg
new file mode 100644
index 0000000..70bfa49
Binary files /dev/null and b/test/ref/tahoe-_1977.jpg differ
diff --git a/test/ref/tahoe-aden.jpg b/test/ref/tahoe-aden.jpg
new file mode 100644
index 0000000..7a6e2fa
Binary files /dev/null and b/test/ref/tahoe-aden.jpg differ
diff --git a/test/ref/tahoe-amaro.jpg b/test/ref/tahoe-amaro.jpg
new file mode 100644
index 0000000..c6a1a42
Binary files /dev/null and b/test/ref/tahoe-amaro.jpg differ
diff --git a/test/ref/tahoe-ashby.jpg b/test/ref/tahoe-ashby.jpg
new file mode 100644
index 0000000..d7ba420
Binary files /dev/null and b/test/ref/tahoe-ashby.jpg differ
diff --git a/test/ref/tahoe-brannan.jpg b/test/ref/tahoe-brannan.jpg
new file mode 100644
index 0000000..a7b5c33
Binary files /dev/null and b/test/ref/tahoe-brannan.jpg differ
diff --git a/test/ref/tahoe-brooklyn.jpg b/test/ref/tahoe-brooklyn.jpg
new file mode 100644
index 0000000..01b814c
Binary files /dev/null and b/test/ref/tahoe-brooklyn.jpg differ
diff --git a/test/ref/tahoe-charmes.jpg b/test/ref/tahoe-charmes.jpg
new file mode 100644
index 0000000..25439d4
Binary files /dev/null and b/test/ref/tahoe-charmes.jpg differ
diff --git a/test/ref/tahoe-clarendon.jpg b/test/ref/tahoe-clarendon.jpg
new file mode 100644
index 0000000..64f981b
Binary files /dev/null and b/test/ref/tahoe-clarendon.jpg differ
diff --git a/test/ref/tahoe-crema.jpg b/test/ref/tahoe-crema.jpg
new file mode 100644
index 0000000..145eab6
Binary files /dev/null and b/test/ref/tahoe-crema.jpg differ
diff --git a/test/ref/tahoe-dogpatch.jpg b/test/ref/tahoe-dogpatch.jpg
new file mode 100644
index 0000000..87d55a8
Binary files /dev/null and b/test/ref/tahoe-dogpatch.jpg differ
diff --git a/test/ref/tahoe-earlybird.jpg b/test/ref/tahoe-earlybird.jpg
new file mode 100644
index 0000000..0726047
Binary files /dev/null and b/test/ref/tahoe-earlybird.jpg differ
diff --git a/test/ref/tahoe-gingham.jpg b/test/ref/tahoe-gingham.jpg
new file mode 100644
index 0000000..4920f5e
Binary files /dev/null and b/test/ref/tahoe-gingham.jpg differ
diff --git a/test/ref/tahoe-ginza.jpg b/test/ref/tahoe-ginza.jpg
new file mode 100644
index 0000000..fdaaa65
Binary files /dev/null and b/test/ref/tahoe-ginza.jpg differ
diff --git a/test/ref/tahoe-hefe.jpg b/test/ref/tahoe-hefe.jpg
new file mode 100644
index 0000000..a9de2a1
Binary files /dev/null and b/test/ref/tahoe-hefe.jpg differ
diff --git a/test/ref/tahoe-helena.jpg b/test/ref/tahoe-helena.jpg
new file mode 100644
index 0000000..365eaf8
Binary files /dev/null and b/test/ref/tahoe-helena.jpg differ
diff --git a/test/ref/tahoe-hudson.jpg b/test/ref/tahoe-hudson.jpg
new file mode 100644
index 0000000..4ed45a2
Binary files /dev/null and b/test/ref/tahoe-hudson.jpg differ
diff --git a/test/ref/tahoe-inkwell.jpg b/test/ref/tahoe-inkwell.jpg
new file mode 100644
index 0000000..c84ab82
Binary files /dev/null and b/test/ref/tahoe-inkwell.jpg differ
diff --git a/test/ref/tahoe-juno.jpg b/test/ref/tahoe-juno.jpg
new file mode 100644
index 0000000..ea6e8f6
Binary files /dev/null and b/test/ref/tahoe-juno.jpg differ
diff --git a/test/ref/tahoe-kelvin.jpg b/test/ref/tahoe-kelvin.jpg
new file mode 100644
index 0000000..6e53324
Binary files /dev/null and b/test/ref/tahoe-kelvin.jpg differ
diff --git a/test/ref/tahoe-lark.jpg b/test/ref/tahoe-lark.jpg
new file mode 100644
index 0000000..942b817
Binary files /dev/null and b/test/ref/tahoe-lark.jpg differ
diff --git a/test/ref/tahoe-lofi.jpg b/test/ref/tahoe-lofi.jpg
new file mode 100644
index 0000000..10af832
Binary files /dev/null and b/test/ref/tahoe-lofi.jpg differ
diff --git a/test/ref/tahoe-ludwig.jpg b/test/ref/tahoe-ludwig.jpg
new file mode 100644
index 0000000..fb2569c
Binary files /dev/null and b/test/ref/tahoe-ludwig.jpg differ
diff --git a/test/ref/tahoe-maven.jpg b/test/ref/tahoe-maven.jpg
new file mode 100644
index 0000000..a5baa13
Binary files /dev/null and b/test/ref/tahoe-maven.jpg differ
diff --git a/test/ref/tahoe-mayfair.jpg b/test/ref/tahoe-mayfair.jpg
new file mode 100644
index 0000000..cb211c9
Binary files /dev/null and b/test/ref/tahoe-mayfair.jpg differ
diff --git a/test/ref/tahoe-moon.jpg b/test/ref/tahoe-moon.jpg
new file mode 100644
index 0000000..b084ec3
Binary files /dev/null and b/test/ref/tahoe-moon.jpg differ
diff --git a/test/ref/tahoe-nashville.jpg b/test/ref/tahoe-nashville.jpg
new file mode 100644
index 0000000..82c4ae6
Binary files /dev/null and b/test/ref/tahoe-nashville.jpg differ
diff --git a/test/ref/tahoe-perpetua.jpg b/test/ref/tahoe-perpetua.jpg
new file mode 100644
index 0000000..6b95032
Binary files /dev/null and b/test/ref/tahoe-perpetua.jpg differ
diff --git a/test/ref/tahoe-reyes.jpg b/test/ref/tahoe-reyes.jpg
new file mode 100644
index 0000000..fb5bc73
Binary files /dev/null and b/test/ref/tahoe-reyes.jpg differ
diff --git a/test/ref/tahoe-rise.jpg b/test/ref/tahoe-rise.jpg
new file mode 100644
index 0000000..b1fb077
Binary files /dev/null and b/test/ref/tahoe-rise.jpg differ
diff --git a/test/ref/tahoe-sierra.jpg b/test/ref/tahoe-sierra.jpg
new file mode 100644
index 0000000..a0b981e
Binary files /dev/null and b/test/ref/tahoe-sierra.jpg differ
diff --git a/test/ref/tahoe-skyline.jpg b/test/ref/tahoe-skyline.jpg
new file mode 100644
index 0000000..dda912e
Binary files /dev/null and b/test/ref/tahoe-skyline.jpg differ
diff --git a/test/ref/tahoe-slumber.jpg b/test/ref/tahoe-slumber.jpg
new file mode 100644
index 0000000..ddeaaa0
Binary files /dev/null and b/test/ref/tahoe-slumber.jpg differ
diff --git a/test/ref/tahoe-stinson.jpg b/test/ref/tahoe-stinson.jpg
new file mode 100644
index 0000000..cf2b63b
Binary files /dev/null and b/test/ref/tahoe-stinson.jpg differ
diff --git a/test/ref/tahoe-sutro.jpg b/test/ref/tahoe-sutro.jpg
new file mode 100644
index 0000000..b08fc71
Binary files /dev/null and b/test/ref/tahoe-sutro.jpg differ
diff --git a/test/ref/tahoe-toaster.jpg b/test/ref/tahoe-toaster.jpg
new file mode 100644
index 0000000..d64c4f3
Binary files /dev/null and b/test/ref/tahoe-toaster.jpg differ
diff --git a/test/ref/tahoe-valencia.jpg b/test/ref/tahoe-valencia.jpg
new file mode 100644
index 0000000..0115d2d
Binary files /dev/null and b/test/ref/tahoe-valencia.jpg differ
diff --git a/test/ref/tahoe-vesper.jpg b/test/ref/tahoe-vesper.jpg
new file mode 100644
index 0000000..c4d7c12
Binary files /dev/null and b/test/ref/tahoe-vesper.jpg differ
diff --git a/test/ref/tahoe-walden.jpg b/test/ref/tahoe-walden.jpg
new file mode 100644
index 0000000..cfb7fdf
Binary files /dev/null and b/test/ref/tahoe-walden.jpg differ
diff --git a/test/ref/tahoe-willow.jpg b/test/ref/tahoe-willow.jpg
new file mode 100644
index 0000000..58a58ac
Binary files /dev/null and b/test/ref/tahoe-willow.jpg differ
diff --git a/test/ref/tahoe-xpro2.jpg b/test/ref/tahoe-xpro2.jpg
new file mode 100644
index 0000000..2c31bdc
Binary files /dev/null and b/test/ref/tahoe-xpro2.jpg differ
diff --git a/twig/template.twig b/twig/template.twig
new file mode 100644
index 0000000..b62b0dd
--- /dev/null
+++ b/twig/template.twig
@@ -0,0 +1,32 @@
+{% set title = title|default('CSSGram') %}
+{% set body_class = body_class|default('home') %}
+
+
+
+
+ {{title}}
+ 
-
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 