aria/buymymojo.net
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

First release

Browse source
This commit is contained in:
Owen Quinlan 2021-07-02 19:29:34 +10:00
commit fa6c85266e
2339 changed files with 761050 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
node_modules/cssgram/.npmignore generated vendored Normal file
View file

@ -0,0 +1,2 @@
node_modules/
assets/

21
node_modules/cssgram/LICENSE generated vendored Normal file
View file

@ -0,0 +1,21 @@
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.

149
node_modules/cssgram/README.md generated vendored Normal file
View file

@ -0,0 +1,149 @@
![](http://una.im/CSSgram/img/cssgram-logo.png)
# CSSgram
Instagram filter library in Sass and CSS.
## What is This?
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 *replaced element* like `<img>`). The recommendation is to wrap your images in a `<figure>` tag. More about the tag [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure).
## Browser Support
This library uses [CSS Filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) and [CSS Blend Modes](https://css-tricks.com/basics-css-blend-modes/). These features are supported in the following browsers:
| <img src="http://i.imgur.com/dJC1GUv.png" width="48px" height="48px" alt="Chrome logo"> | <img src="http://i.imgur.com/o1m5RcQ.png" width="48px" height="48px" alt="Firefox logo"> | <img src="http://i.imgur.com/8h3iz5H.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="http://i.imgur.com/iQV4nmJ.png" width="48px" height="48px" alt="Opera logo"> | <img src="http://i.imgur.com/j3tgNKJ.png" width="48px" height="48px" alt="Safari logo"> |
|:---:|:---:|:---:|:---:|:---:|
| 43+ ✔ | 38+ ✔ | Nope ✘ | 32+ ✔ | 8+ ✔ |
For more information, check on [Can I Use](http://caniuse.com/).
## Usage
**There are currently 2 ways to consume this library:**
### Use CSS classes
When using CSS classes, you can simply add the class with the filter name to the element containing your image.
1. Include the CDN link in your `<head>` tag: `<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">`
* Alternatively, you can [download the CSSgram library](https://raw.githubusercontent.com/una/CSSgram/master/source/css/cssgram.min.css) locally and link to the it within your project: `<link rel="stylesheet" href="css/vendor/cssgram.min.css">`
* Add a class to your image element with the name of the filter you would like to use
For example:
```
<!-- HTML -->
<figure class="aden">
<img src="../img.png">
</figure>
```
Alternatively, you can just download and link to any individual css file (e.g. `<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:_
* Aden: `class="aden"`
* Reyes: `class="reyes"`
* Perpetua: `class="perpetua"`
* Inkwell: `class="inkwell"`
* Toaster: `class="toaster"`
* Walden: `class="walden"`
* Hudson: `class="hudson"`
* Gingham: `class="gingham"`
* Mayfair: `class="mayfair"`
* Lo-fi: `class="lofi"`
* X-Pro II: `class="xpro2"`
* 1977: `class="_1977"`
* Brooklyn: `class="brooklyn"`
* Nashville: `class="nashville"`
* * *
### Use Sass `@extend`
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 😊.
1. [Download the `scss/` folder contents](https://github.com/una/CSSgram/tree/master/source/scss)
* 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 placeholder selector (e.g. `@extend %aden`) in your element.
For example:
```
<!-- HTML -->
<figure class="viz--beautiful">
<img src="../img.png">
</figure>
```
```
// Sass
.viz--beautiful {
@extend %aden;
}
```
Alternatively, you can just download and link any individual `.scss` file in your Sass manifest (i.e. `scss/aden.scss`), if you're just using one of the styles.
### Available Placeholders
_For use in Sass stylesheets:_
* Aden: `@extend %aden`
* Reyes: `@extend %reyes`
* Perpetua: `@extend %perpetua`
* Inkwell: `@extend %inkwell`
* Toaster: `@extend %toaster`
* Walden: `@extend %walden`
* Hudson: `@extend %hudson`
* Gingham: `@extend %gingham`
* Mayfair: `@extend %mayfair`
* Lo-fi: `@extend %lofi`
* X-Pro II: `@extend %xpro2`
* 1977: `@extend %_1977`
* Brooklyn: `@extend %brooklyn`
* Nashville: `@extend %nashville`
## Contributing
Either:
1. Create an [issue](https://github.com/una/CSSgram/issues)
Or:
1. Fork this repository
2. Clone the fork onto your system
3. `npm install` dependencies (must have Node installed)
4. Run `gulp` to compile CSS and the test site
5. Make changes and check the test site with your changes (see file structure outline below)
6. Submit a PR referencing the issue with a smile :smile:
If you’d like to contribute, the following filters are yet to be added:
- [ ] [Charmes](https://github.com/una/CSSgram/issues/22)
- [ ] [Stinsen](https://github.com/una/CSSgram/issues/21)
- [ ] [Kelvin](https://github.com/una/CSSgram/issues/20)
- [ ] [Sutro](https://github.com/una/CSSgram/issues/19)
- [ ] [Hefe](https://github.com/una/CSSgram/issues/17)
- [ ] [Valencia](https://github.com/una/CSSgram/issues/16)
- [ ] [Rise](https://github.com/una/CSSgram/issues/15)
- [ ] [Sierra](https://github.com/una/CSSgram/issues/14)
- [ ] [Amaro](https://github.com/una/CSSgram/issues/13)
- [ ] [Crema](https://github.com/una/CSSgram/issues/12)
Filters are really fun to create! Reference photos created by [Miles Croxford](https://twitter.com/milescroxford) can be found [here](https://instagram.com/cssgram/).
## File Structure Outline
- `source/css/cssgram.css` contains each of the CSS classes you can apply to your `<img>` to give it the filter. You should use `source/css/cssgram.min.css` for production if you want access to all of the library
- `source/scss/` contains the source files for individual classes and placeholder selectors you can use to extend CSS classes in Sass
- `site/` is the public facing website
- `site/test` is how you test filters if you're developing, remember to change `is_done` for the filter you're creating in `site/test/index.twig` whilst gulp is running.
Note: this will also have mixin options and a PostCSS Component.

30
node_modules/cssgram/bower.json generated vendored Normal file
View file

@ -0,0 +1,30 @@
{
"name": "cssgram",
"description": "Instagram filter library in Sass and CSS.",
"main": [
"source/css/cssgram.min.css",
"source/scss/cssgram.scss"
],
"authors": [
"Una Kravets"
],
"license": "MIT",
"keywords": [
"cssgram",
"filters",
"CSS",
"library",
"photo",
"effects"
],
"homepage": "http://una.im/CSSgram/",
"moduleType": [],
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"site"
]
}

111
node_modules/cssgram/gulpfile.js generated vendored Normal file
View file

@ -0,0 +1,111 @@
var gulp = require('gulp'),
sass = require('gulp-sass'),
rename = require('gulp-rename'),
cssmin = require('gulp-minify-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
cache = require('gulp-cached'),
prefix = require('gulp-autoprefixer'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
size = require('gulp-size'),
imagemin = require('gulp-imagemin'),
minifyHTML = require('gulp-minify-html'),
pngquant = require('imagemin-pngquant'),
plumber = require('gulp-plumber'),
deploy = require('gulp-gh-pages'),
notify = require('gulp-notify'),
sassLint = require('gulp-sass-lint'),
twig = require('gulp-twig');
gulp.task('lib-scss', function() {
var onError = function(err) {
notify.onError({
title: "Gulp",
subtitle: "Failure!",
message: "Error: <%= error.message %>",
sound: "Beep"
})(err);
this.emit('end');
};
return gulp.src('source/scss/**/*.scss')
.pipe(plumber({errorHandler: onError}))
.pipe(sass())
.pipe(size({ gzip: true, showFiles: true }))
.pipe(prefix())
.pipe(gulp.dest('source/css'))
.pipe(reload({stream:true}))
.pipe(cssmin())
.pipe(size({ gzip: true, showFiles: true }))
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('source/css'))
.pipe(gulp.dest('site/css'));
});
gulp.task('site-scss', function() {
var onError = function(err) {
notify.onError({
title: "Gulp",
subtitle: "Failure!",
message: "Error: <%= error.message %>",
sound: "Beep"
})(err);
this.emit('end');
};
return gulp.src('site/scss/**/*.scss')
.pipe(plumber({errorHandler: onError}))
.pipe(sass())
.pipe(size({ gzip: true, showFiles: true }))
.pipe(prefix())
.pipe(gulp.dest('site/css'))
.pipe(reload({stream:true}))
.pipe(cssmin())
.pipe(size({ gzip: true, showFiles: true }))
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('site/css'));
});
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "site"
}
});
});
gulp.task('deploy', function () {
return gulp.src('site/**/*')
.pipe(deploy());
});
gulp.task('sass-lint', function () {
gulp.src('scss/**/*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError());
});
gulp.task('twig', function () {
gulp.src('site/**/*.twig', {base: './'})
.pipe(twig())
.pipe(gulp.dest('./'));
});
gulp.task('watch', function() {
gulp.watch('source/scss/**/*.scss', ['lib-scss', 'site-scss', 'sass-lint']);
gulp.watch('source/scss/**/*.html', ['minify-html']);
gulp.watch('site/**/*.twig', ['twig']);
});
gulp.task('jshint', function() {
gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
gulp.task('default', ['browser-sync', 'twig', 'lib-scss', 'site-scss', 'watch']);

77
node_modules/cssgram/package.json generated vendored Normal file
View file

@ -0,0 +1,77 @@
{
"_args": [
[
"cssgram@0.1.3",
"F:\\Documents\\websites\\BMM"
]
],
"_from": "cssgram@0.1.3",
"_id": "cssgram@0.1.3",
"_inBundle": false,
"_integrity": "sha1-zIBiLOrqyhjUoqqFz4U8RCA0ol4=",
"_location": "/cssgram",
"_phantomChildren": {},
"_requested": {
"type": "version",
"registry": true,
"raw": "cssgram@0.1.3",
"name": "cssgram",
"escapedName": "cssgram",
"rawSpec": "0.1.3",
"saveSpec": null,
"fetchSpec": "0.1.3"
},
"_requiredBy": [
"/"
],
"_resolved": "https://registry.npmjs.org/cssgram/-/cssgram-0.1.3.tgz",
"_spec": "0.1.3",
"_where": "F:\\Documents\\websites\\BMM",
"author": {
"name": "Una Kravets",
"email": "una.kravets@gmail.com",
"url": "http://una.im"
},
"bugs": {
"url": "https://github.com/una/CSSgram/issues"
},
"dependencies": {},
"description": "![](http://una.im/CSSgram/img/cssgram-logo.png)",
"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-twig": "~0.4.0",
"gulp-uglify": "^1.0.2",
"imagemin-pngquant": "^4.0.0"
},
"homepage": "https://github.com/una/CSSgram#readme",
"keywords": [
"cssgram",
"filters",
"CSS",
"library",
"photo",
"effects"
],
"license": "MIT",
"name": "cssgram",
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/una/CSSgram.git"
},
"style": "source/css/cssgram.css",
"version": "0.1.3"
}

34
node_modules/cssgram/sass-lint.yml generated vendored Normal file
View file

@ -0,0 +1,34 @@
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

1
node_modules/cssgram/site/css/1977.min.css generated vendored Normal file
View file

@ -0,0 +1 @@
._1977:after,._1977:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977{position:relative}._1977 img{width:100%;z-index:1}._1977:before{z-index:2}._1977:after{z-index:3}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen}

1
node_modules/cssgram/site/css/aden.min.css generated vendored Normal file
View file

@ -0,0 +1 @@
.aden:after,.aden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.aden{position:relative}.aden img{width:100%;z-index:1}.aden:before{z-index:2}.aden:after{z-index:3}.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}

1
node_modules/cssgram/site/css/brooklyn.min.css generated vendored Normal file
View file

@ -0,0 +1 @@
.brooklyn:after,.brooklyn:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brooklyn{position:relative}.brooklyn img{width:100%;z-index:1}.brooklyn:before{z-index:2}.brooklyn:after{z-index:3}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn:after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}

1
node_modules/cssgram/site/css/cssgram.min.css generated vendored Normal file
View file

File diff suppressed because one or more lines are too long

746
node_modules/cssgram/site/css/demo-site.css generated vendored Normal file
View file

@ -0,0 +1,746 @@
@charset "UTF-8";
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none; }
.aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville {
position: relative; }
.aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img {
width: 100%;
z-index: 1; }
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before {
z-index: 2; }
.aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
z-index: 3; }
/*
*
* Aden
*
*/
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none; }
.aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville {
position: relative; }
.aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img {
width: 100%;
z-index: 1; }
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before {
z-index: 2; }
.aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
z-index: 3; }
.aden {
-webkit-filter: hue-rotate(-20deg) contrast(.9) saturate(0.85) brightness(1.2);
filter: hue-rotate(-20deg) contrast(.9) saturate(0.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(.3) contrast(1.1) brightness(1.1) grayscale(1);
filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1); }
/*
*
* Perpetua
*
*/
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none; }
.aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville {
position: relative; }
.aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img {
width: 100%;
z-index: 1; }
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before {
z-index: 2; }
.aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
z-index: 3; }
.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:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none; }
.aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville {
position: relative; }
.aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img {
width: 100%;
z-index: 1; }
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before {
z-index: 2; }
.aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
z-index: 3; }
.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:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none; }
.aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville {
position: relative; }
.aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img {
width: 100%;
z-index: 1; }
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before {
z-index: 2; }
.aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
z-index: 3; }
.gingham {
-webkit-filter: brightness(1.05) hue-rotate(-10deg);
filter: brightness(1.05) hue-rotate(-10deg); }
.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:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none; }
.aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville {
position: relative; }
.aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img {
width: 100%;
z-index: 1; }
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before {
z-index: 2; }
.aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
z-index: 3; }
.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:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none; }
.aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville {
position: relative; }
.aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img {
width: 100%;
z-index: 1; }
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before {
z-index: 2; }
.aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
z-index: 3; }
.walden {
-webkit-filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);
filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6); }
.walden:after {
background: #04c;
mix-blend-mode: screen;
opacity: .3; }
/*
*
* Hudson
*
*/
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none; }
.aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville {
position: relative; }
.aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img {
width: 100%;
z-index: 1; }
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before {
z-index: 2; }
.aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
z-index: 3; }
.hudson {
-webkit-filter: brightness(1.2) contrast(.9) saturate(1.1);
filter: brightness(1.2) contrast(.9) saturate(1.1); }
.hudson:after {
background: -webkit-radial-gradient(circle, #a6b1ff 50%, #342134);
background: radial-gradient(circle, #a6b1ff 50%, #342134);
mix-blend-mode: multiply;
opacity: .5; }
/*
*
* Earlybird
*
*/
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none; }
.aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville {
position: relative; }
.aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img {
width: 100%;
z-index: 1; }
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before {
z-index: 2; }
.aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
z-index: 3; }
.earlybird {
-webkit-filter: contrast(.9) sepia(.2);
filter: contrast(.9) sepia(.2); }
.earlybird:after {
background: -webkit-radial-gradient(circle, #d0ba8e 20%, #360309 85%, #1d0210 100%);
background: radial-gradient(circle, #d0ba8e 20%, #360309 85%, #1d0210 100%);
mix-blend-mode: overlay; }
/*
*
* Mayfair
*
*/
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none; }
.aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville {
position: relative; }
.aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img {
width: 100%;
z-index: 1; }
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before {
z-index: 2; }
.aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
z-index: 3; }
.mayfair {
-webkit-filter: contrast(1.1) saturate(1.1);
filter: contrast(1.1) saturate(1.1); }
.mayfair:after {
background: -webkit-radial-gradient(40% 40%, circle, rgba(255, 255, 255, 0.8), rgba(255, 200, 200, 0.6), #111 60%);
background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.8), rgba(255, 200, 200, 0.6), #111 60%);
mix-blend-mode: overlay;
opacity: .4; }
/*
* Lo-fi
*
*/
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none; }
.aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville {
position: relative; }
.aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img {
width: 100%;
z-index: 1; }
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before {
z-index: 2; }
.aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
z-index: 3; }
.lofi {
-webkit-filter: saturate(1.1) contrast(1.5);
filter: saturate(1.1) contrast(1.5); }
.lofi:after {
background: -webkit-radial-gradient(circle, transparent 70%, #222 150%);
background: radial-gradient(circle, transparent 70%, #222 150%);
mix-blend-mode: multiply; }
/*
* 1977
*
*/
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none; }
.aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville {
position: relative; }
.aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img {
width: 100%;
z-index: 1; }
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before {
z-index: 2; }
.aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
z-index: 3; }
._1977 {
-webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3);
filter: contrast(1.1) brightness(1.1) saturate(1.3); }
._1977:after {
background: rgba(243, 106, 188, 0.3);
mix-blend-mode: screen; }
/*
*
* Brooklyn
*
*/
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none; }
.aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville {
position: relative; }
.aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img {
width: 100%;
z-index: 1; }
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before {
z-index: 2; }
.aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
z-index: 3; }
.brooklyn {
-webkit-filter: contrast(.9) brightness(1.1);
filter: contrast(.9) brightness(1.1); }
.brooklyn:after {
background: -webkit-radial-gradient(circle, rgba(168, 223, 193, 0.4) 70%, #c4b7c8);
background: radial-gradient(circle, rgba(168, 223, 193, 0.4) 70%, #c4b7c8);
mix-blend-mode: overlay; }
/*
*
* X-Pro II
*
*/
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none; }
.aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville {
position: relative; }
.aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img {
width: 100%;
z-index: 1; }
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before {
z-index: 2; }
.aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
z-index: 3; }
.xpro2 {
-webkit-filter: sepia(.3);
filter: sepia(.3); }
.xpro2:after {
background: -webkit-radial-gradient(circle, #E6E7E0 40%, rgba(43, 42, 161, 0.6) 110%);
background: radial-gradient(circle, #E6E7E0 40%, rgba(43, 42, 161, 0.6) 110%);
mix-blend-mode: color-burn; }
/*
*
* Nashville
*
*/
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none; }
.aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville {
position: relative; }
.aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img {
width: 100%;
z-index: 1; }
.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before {
z-index: 2; }
.aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after {
z-index: 3; }
.nashville {
-webkit-filter: sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);
filter: sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2); }
.nashville::after {
background: rgba(0, 70, 150, 0.4);
mix-blend-mode: lighten; }
.nashville::before {
background: rgba(247, 176, 153, 0.56);
mix-blend-mode: darken; }
::-moz-selection {
background: #9b1c9b;
color: white; }
::selection {
background: #9b1c9b;
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; }
@media (max-width: 500px) {
body {
font-size: .9em; } }
section {
overflow-x: hidden; }
h1, h2 {
color: #9b1c9b; }
@media (max-width: 500px) {
h1, h2 {
text-align: center; } }
h3, em {
color: #c63082; }
pre, code {
background: #eff1ef; }
pre code, code code {
border: none;
background: none; }
code {
font-family: monospace;
padding: 0;
padding: .25em .5em; }
.highlight {
color: #c63082;
font-weight: 800; }
.comment {
color: #abb1ad; }
ul {
width: 100%;
margin: 0;
padding: 0; }
ul, ol {
line-height: 1.8; }
a {
text-decoration: none;
color: #9b1c9b;
-webkit-transition-duration: .35s;
transition-duration: .35s;
border-bottom: 1px solid #c63082;
padding-bottom: .05em; }
a:hover, a:focus {
color: #e297c0;
border-color: #e297c0; }
figure {
max-width: 350px;
max-height: 350px;
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
-webkit-transition-duration: .35s;
transition-duration: .35s; }
@media (max-width: 1240px) {
figure {
max-width: 300px;
max-height: 300px; } }
@media (max-width: 992px) {
figure {
max-width: 250px;
max-height: 250px; } }
@media (max-width: 768px) {
figure {
max-width: 300px;
max-height: 300px; } }
@media (max-width: 500px) {
figure {
max-width: 400px;
max-height: 400px; } }
figure:hover, figure:focus {
-webkit-filter: none !important;
filter: none !important; }
figure:hover::after, figure:focus::after, figure:hover::before, figure:focus::before {
opacity: 0 !important; }
figcaption {
position: absolute;
bottom: 1em;
right: 0;
padding: .25em 1em .25em .25em;
background: #000;
color: white;
font-weight: 200; }
hr {
clear: both;
float: none;
border: 1px solid #eff1ef;
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; }
.demo__subtitle {
font-size: 2em;
text-align: center; }
.demo__note {
font-style: italic;
text-align: center;
display: block;
margin: 2em auto 0; }
.demo__input-area {
display: block;
font-size: 1em;
text-align: center;
font-weight: 300;
margin: 1em auto;
padding: 1em 0; }
@media (max-width: 500px) {
.demo__input-area {
margin: 0;
font-size: .8em; } }
.demo__input-label {
text-align: center;
color: #9b1c9b; }
.demo__input-img {
max-width: 16em;
font-size: 1em;
padding: .5em;
border: 2px solid #9b1c9b;
outline: none;
margin: .5em;
font-weight: 200;
-webkit-transition-duration: .35s;
transition-duration: .35s; }
.demo__input-img:hover {
background: #f5e8f5; }
.demo__input-img:focus {
background: #e6c6e6; }
.demo__option-field {
color: #9b1c9b;
border: 1px solid #cad1cc;
min-width: 200px; }
.demo__option-img {
max-width: 150px;
height: 150px;
display: inline-block;
cursor: pointer; }
@media (max-width: 768px) {
.demo__option-img {
height: 100px; } }
@media (max-width: 500px) {
.demo__option-img {
height: 60px; } }
.demo__list {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.demo__item {
margin: .75em;
list-style: none; }
@media (max-width: 992px) {
.demo__item {
margin: .5em; } }
@media (max-width: 500px) {
.demo__item {
margin: .5em 0; } }
.title-section {
width: 100%;
text-align: center; }
.title--logo {
max-width: 400px; }
.title--top-sub {
font-weight: 200;
margin: 0 auto;
text-align: center;
max-width: 26em; }
@media (max-width: 500px) {
.title--top-sub {
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: #eff1ef;
padding: 2em;
margin: -.5em 2em 0;
display: block;
font-weight: 200;
float: right; }
@media (max-width: 768px) {
.callout {
max-width: 28em;
margin: 1em auto;
float: none;
font-size: .8em; } }
.available-classes, .available-extends, .supported-browsers {
-webkit-columns: 15em 2;
-moz-columns: 15em 2;
columns: 15em 2; }
.supported:after {
content: '✔';
color: #62B859;
margin-left: .5em; }
.not-supported:after {
content: '✘';
color: #c63082;
margin-left: .5em; }

1
node_modules/cssgram/site/css/demo-site.min.css generated vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
node_modules/cssgram/site/css/earlybird.min.css generated vendored Normal file
View file

@ -0,0 +1 @@
.earlybird:after,.earlybird:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.earlybird{position:relative}.earlybird img{width:100%;z-index:1}.earlybird:before{z-index:2}.earlybird:after{z-index:3}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird:after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}

1
node_modules/cssgram/site/css/gingham.min.css generated vendored Normal file
View file

@ -0,0 +1 @@
.gingham:after,.gingham:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.gingham{position:relative}.gingham img{width:100%;z-index:1}.gingham:before{z-index:2}.gingham:after{z-index:3}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.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}

1
node_modules/cssgram/site/css/hudson.min.css generated vendored Normal file
View file

@ -0,0 +1 @@
.hudson:after,.hudson:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.hudson{position:relative}.hudson img{width:100%;z-index:1}.hudson:before{z-index:2}.hudson:after{z-index:3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson:after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}

1
node_modules/cssgram/site/css/inkwell.min.css generated vendored Normal file
View file

@ -0,0 +1 @@
.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}

1
node_modules/cssgram/site/css/lofi.min.css generated vendored Normal file
View file

@ -0,0 +1 @@
.lofi:after,.lofi:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lofi{position:relative}.lofi img{width:100%;z-index:1}.lofi:before{z-index:2}.lofi:after{z-index:3}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi:after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}

1
node_modules/cssgram/site/css/mayfair.min.css generated vendored Normal file
View file

@ -0,0 +1 @@
.mayfair:after,.mayfair:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.mayfair{position:relative}.mayfair img{width:100%;z-index:1}.mayfair:before{z-index:2}.mayfair:after{z-index:3}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair:after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}

1
node_modules/cssgram/site/css/nashville.min.css generated vendored Normal file
View file

@ -0,0 +1 @@
.nashville:after,.nashville:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.nashville{position:relative}.nashville img{width:100%;z-index:1}.nashville:before{z-index:2}.nashville:after{z-index:3}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}

1
node_modules/cssgram/site/css/perpetua.min.css generated vendored Normal file
View file

@ -0,0 +1 @@
.perpetua:after,.perpetua:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.perpetua{position:relative}.perpetua img{width:100%;z-index:1}.perpetua:before{z-index:2}.perpetua:after{z-index:3;background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d);mix-blend-mode:soft-light;opacity:.5}

1
node_modules/cssgram/site/css/reyes.min.css generated vendored Normal file
View file

@ -0,0 +1 @@
.reyes:after,.reyes:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.reyes{position:relative}.reyes img{width:100%;z-index:1}.reyes:before{z-index:2}.reyes:after{z-index:3}.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}

1
node_modules/cssgram/site/css/toaster.min.css generated vendored Normal file
View file

@ -0,0 +1 @@
.toaster:after,.toaster:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.toaster{position:relative}.toaster img{width:100%;z-index:1}.toaster:before{z-index:2}.toaster:after{z-index:3}.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}

1
node_modules/cssgram/site/css/walden.min.css generated vendored Normal file
View file

@ -0,0 +1 @@
.walden:after,.walden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.walden{position:relative}.walden img{width:100%;z-index:1}.walden:before{z-index:2}.walden:after{z-index:3}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden:after{background:#04c;mix-blend-mode:screen;opacity:.3}

1
node_modules/cssgram/site/css/xpro2.min.css generated vendored Normal file
View file

@ -0,0 +1 @@
.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.xpro2{position:relative}.xpro2 img{width:100%;z-index:1}.xpro2:before{z-index:2}.xpro2:after{z-index:3}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2:after{background:-webkit-radial-gradient(circle,#E6E7E0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#E6E7E0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}

BIN
node_modules/cssgram/site/img/atx.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
node_modules/cssgram/site/img/bike.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 125 KiB

BIN
node_modules/cssgram/site/img/cacti.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 178 KiB

BIN
node_modules/cssgram/site/img/cssgram-logo.png generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

121
node_modules/cssgram/site/img/cssgram-logo.svg generated vendored Normal file
View file

@ -0,0 +1,121 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1046.9 430.5" enable-background="new 0 0 1046.9 430.5" xml:space="preserve">
<g id="Layer_3" display="none" opacity="0.31">
<image display="inline" overflow="visible" width="1005" height="375" xlink:href="logo-temp.png" transform="matrix(1 0 0 1 15.3837 34.8985)">
</image>
</g>
<g id="base-lineart" display="none">
<path display="inline" fill="#E9000D" d="M611.8,119.1c0,0-9.7-4.6-22.7-3.5c-11.8,1-47.8,59.5,38.6,89.1c0,0-33.8-22.1-35.8-43.5
C588.2,122.1,611.8,119.1,611.8,119.1z"/>
<path display="inline" fill="none" stroke="#E9000D" stroke-width="9" stroke-linecap="round" d="M991,238.9c0,0-39,48-52,48
s22-103,10-103s-54.1,71.4-68.1,77.4c-14,6,13.1-72.4,6.1-79.4s-64,81-73,82s13-89,13-89s-55,81-81,89c-26,8,2-79,2-79
c-18,79.5-52.3,84.3-60.4,74.5c-40.6-49.5,52.5-79.9,52.5-79.9c-28.5-21-61.5,36-61.5,36s-49.5,64.5-70.5,63
c-21-1.5,19.5-73.5,19.5-73.5c-51-13.5-37.5-81-22.5-82.5s36,34.5-36,104.4s-79.5,117.6-72,134.1s24,13.5,37.5,0s0-162,0-162
s-13-25.1-35.8-17.1s-34.8,26-33.8,45s5,31,19,37s29.7-9.7,48.7-34.7"/>
<path display="inline" fill="#E9000D" d="M530.2,186.9c0,0,0.4,6-10.7,1.3c-12.1-5-33.2,3.6-39.5,31.3c-5.1,22.7,0.7,38.5,10.4,42
c10.8,3.8,9.9,5.5,9.9,5.5s-20,11.6-38.7-10.4c-7.5-8.9-8-32.8-1.7-53.6c10.3-33.5,34.4-34,52.4-28
C524.8,179.2,530.2,186.9,530.2,186.9z"/>
<path display="inline" fill="#E9000D" d="M546.9,183.9c4.2,2.6,1.7,28.9,2.9,76.4c0.9,37,5.7,124-36.3,116.5
c-17.9-3.2-14.1-8-0.5-10.5c31.8-5.9,9.6-181.4,13.4-185.9C530.2,175.9,542.1,181,546.9,183.9z"/>
<path display="inline" fill="#E9000D" d="M610,197.8c0,0-30,69.1-6,84.1c0,0,10.2-75.8,23.6-76.9C641,203.9,610,197.8,610,197.8z"
/>
<path display="inline" fill="#E9000D" d="M748,184.9c0,0-5-22.7-32-12.3s-45,50.3-46,65.8s13,30.2,26,29.2
c15.9-1.2,21-11.3,1.6-9.3C682.9,259.9,687.2,192.3,748,184.9z"/>
<path display="inline" fill="#E9000D" d="M748,170.3c2.3-2.3,17.3,2.9,18,6.3s-20.3,77.2-11.3,82.7c0,0-22.7,14.5-23.3-1.5
S745.7,172.6,748,170.3z"/>
<path display="inline" fill="#E9000D" d="M824,172.5c6-2.7,17.5,3.4,17.5,6.9s-18.8,66.9-13.8,71.4S814,263.9,814,263.9
S818,175.2,824,172.5z"/>
<path display="inline" fill="#E9000D" d="M886,177.4c1.5-2.1,18.4,5.8,19,7.6c2,6.2-15.4,55.9-11.8,60.2l-12.3,16l-2.1-18.8
C878.8,242.4,884.5,179.5,886,177.4z"/>
<path display="inline" fill="#E9000D" d="M951,179.9c0,0,16.6,3.3,17,6.3c2.5,20.7-25.4,94.3-16.8,94.3c0,0-14,6.6-14.6,4.1
C936,282.2,951,179.9,951,179.9z"/>
<path display="inline" fill="#E9000D" d="M840.5,181.4"/>
</g>
<g id="text" display="none">
<rect x="29.9" y="76.9" display="inline" fill="none" width="710.7" height="276"/>
<text transform="matrix(1 0 0 1 29.9167 260.6391)" display="inline"><tspan x="0" y="0" font-family="'Signika-Regular'" font-size="250px" letter-spacing="1">C</tspan><tspan x="152.2" y="0" font-family="'Signika-Regular'" font-size="250px">SS</tspan></text>
</g>
<g id="expanded-logo--all">
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="747.0778" y1="372.0088" x2="747.0778" y2="110.1039">
<stop offset="0" style="stop-color:#621559"/>
<stop offset="1" style="stop-color:#9F2171"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M1015.4,230.1c-1.9-1.6-4.8-1.3-6.3,0.7c-0.1,0.1-9.8,12-20.9,23.7c-7.4,7.8-13,12.9-17.1,16.3
c0.7-16.3,20.6-72.3,18.4-89.8c-0.3-2.6-12.8-5.5-16.2-6.2c-0.9-0.4-1.8-0.7-2.8-0.7c-7.8,0-18,12.6-39.3,41.4
c-5.4,7.4-11.5,15.6-17,22.4c-0.3-10.5,14.1-52.5,12.3-58.2c-0.5-1.5-13.5-7.8-17.8-7.9c-0.5-0.1-1.1-0.2-1.7-0.1
c-6.6,0.4-16,11.5-42.8,46.6c-4.9,6.4-10.6,13.9-15.7,20.3c1.5-17.5,14.4-61.6,14.4-64.5c0-3.5-11.5-9.6-17.5-6.9
c-0.1,0-0.1,0.1-0.2,0.1l-0.6-0.2c-13.3,19.5-48.5,67.5-70.5,82.9c-2.7-16.7,13.8-75.6,13.2-78.7c-0.7-3.4-15.7-8.6-18-6.3
c-0.4,0.4-1.3,3.2-2.5,7.6l-1.7-1.3c-3.6-4.5-10.2-8.5-21.6-5.9c-0.5,0.1-0.9,0.2-1.4,0.3c-23.5,4.9-43.8,38.4-46,42
c-1.5,2-13.2,16.9-26.9,31.5c-25.8,27.4-36.2,29.8-39.5,29.5c-1-0.1-1.1-0.4-1.3-0.6c-3.9-7.2,9.6-39.9,24.4-66.2l2.9-5.1
l-5.6-1.5c-3.5-0.9-10.1-3.2-16.5-8.1c-1.5-1.3-2.9-2.7-4.4-4.2c4.6-7,8.3-13.8,11-20.4c6.3-15.1,7.3-28.8,2.8-38.6
c-2.3-4.9-5.9-8.5-10-10.2c0.1,0,0.2,0,0.2,0s-9.7-4.6-22.7-3.5c-10,0.8-37.4,42.9,7,73.8c-7.2,10-17,21.4-30.3,34.3
c-5.9,5.8-11.4,11.3-16.5,16.8c-0.3-34.9,1-54.3-2.6-56.5c-4.7-2.9-16.6-8-20.4-3.5c-0.2,0.2-0.3,0.9-0.4,1.9
c-1-0.7-2.1-1.4-3.2-2.1c-2.7-1.8-6.2-3.7-10.5-5.2c-18-6-42.1-5.5-52.4,28c-6.4,20.8-5.8,44.7,1.7,53.6
c12.3,14.5,25.2,14.4,32.5,12.7c10.9-2.1,22.2-12.6,34.8-28.1c0.4,7.1,0.7,14.4,0.9,21.8c-40.5,50.9-43.4,85.6-36.9,99.8
c4.4,9.6,11.1,12.7,15.9,13.6c1.2,0.2,2.4,0.3,3.7,0.3c0.1,0,0.1,0,0.2,0c0.3,0,0.5,0.1,0.8,0.1c42,7.5,37.2-79.6,36.3-116.5
c-0.1-2.3-0.1-4.5-0.1-6.7c6.9-7.8,14.4-15.6,22.6-23.5c12.1-11.8,22.2-23.2,30.2-34.1c1.9,1.8,3.9,3.6,6.2,5.2
c-5,12.5-21.4,56.7-10,75.2c0.2,0.4,0.4,0.8,0.6,1.2c1.7,3.2,4.8,5.1,8.6,5.4c3.8,0.3,15.3,1.1,46.7-32.3
c6.2-6.6,11.9-13.2,16.6-18.7c-0.6,2.4-1,4.6-1.1,6.5c-1,15.5,13,30.2,26,29.2c0.1,0,0.1,0,0.2,0c1.9,0.1,4-0.1,6-0.6
c6-1.4,17.2-6.4,28.4-23.8c-0.5,7.1,0,12.1,0.8,15.5c0.2,2.4,1,4,2.1,5.1c0.5,0.8,1.1,1.5,1.6,2.1c2.1,2.1,5.9,4.3,12.1,2.4
c11.7-3.6,29.3-20.1,52.4-49c6.6-8.2,12.7-16.3,17.7-23.2c-1.3,6.1-2.8,12.9-4.2,19.8c-9,44.8-5.7,48.5-3.8,50.7
c1.3,1.4,3.1,2.1,4.9,1.9c5.2-0.6,12.2-8.9,35.4-39.3c10.8-14.2,26.5-34.7,33.8-41.2c-0.2,6.9-3.3,21.4-5.5,31.7
c-6.2,29.3-8.1,40.7-2.8,45.1c0.9,0.8,3.5,2.4,7.2,0.8c7.2-3.1,17.8-16.9,34.3-39.2c9-12.2,23.5-31.8,30.1-36.7
c0.2,7.7-4.4,28.9-7.5,43.4c-7.5,34.5-10.4,50.3-5.7,56c1.3,1.6,3.1,2.5,5.2,2.5c4.3,0,12.6-2.6,34.1-25.4
c11.4-12,21.3-24.1,21.4-24.3C1017.6,234.5,1017.3,231.6,1015.4,230.1z M509.6,255.1c-8.3-5-12.8-20.1-8.1-40.9
c6-26.5,25.5-35.6,37.8-31.9c3.5,2,6.4,4.7,8.5,7.2c0.4,8.3,1.2,19.8,1.9,32.7C535.6,240.8,521.1,257.2,509.6,255.1z M534.5,361.1
c-1.4,0.3-2.7,0.5-3.8,0.8c-3.3-1.1-6-3.8-8-8.1c-4.8-10.5,0.1-29.3,6.2-43.3c5.3-12.1,13-25,22.9-38.4
C552.7,315.7,549.9,358.2,534.5,361.1z M623.5,175.5c-4.3-7.3-6.9-17.2-5.9-30.5c1.2-14.6,6.8-23.1,9.4-23.4c0.1,0,0.3,0,0.4,0
c2.2,0,5.4,1.6,7.5,6.2C636.7,131.4,641.6,146.7,623.5,175.5z M758.1,203.8c-4.3,12.7-9.4,23.2-15.1,31.5
c-8.9,12.8-16.9,16.5-21.1,17.5c-0.9,0-1.8,0.1-2.8,0.2c-14.2,1.5-10.6-62.3,45.5-72.7C763.4,184.3,760.7,193.2,758.1,203.8z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="106.5419" y1="263.8887" x2="106.5419" y2="86.6392">
<stop offset="0" style="stop-color:#621559"/>
<stop offset="1" style="stop-color:#9F2171"/>
</linearGradient>
<path fill="url(#SVGID_2_)" d="M109.4,108.1c6.5,0,12,1.1,16.5,3.4s8.2,5.2,11,9c2.8,3.8,4.9,8.1,6.1,13c1.2,4.9,1.9,10,1.9,15.4
c4.2,1,7.8,1.5,11,1.5c10,0,15-5,15-15c0-6.5-1.4-12.7-4.2-18.5c-2.8-5.8-7-11-12.4-15.5c-5.4-4.5-11.9-8.1-19.5-10.8
c-7.6-2.7-16.1-4-25.6-4c-9.2,0-17.8,1.9-26,5.6C75,96,67.9,101.6,61.8,109c-6.1,7.4-10.9,16.7-14.4,27.9
c-3.5,11.2-5.2,24.2-5.2,39.2c0,11.3,1.2,22.3,3.6,32.9c2.4,10.6,6.1,19.9,11,28c4.9,8.1,11.7,14.6,20.4,19.5
c8.7,4.9,19.4,7.4,32.2,7.4c5.3,0,10.8-0.6,16.4-1.9c5.6-1.2,11-3,16.2-5.2c5.2-2.3,10.2-4.9,15-7.9s9-6.3,12.6-10
c-2-7-6.4-12.8-13.2-17.2c-15.2,12.5-29.8,18.7-43.8,18.7s-24.6-5.6-31.8-16.8c-7.2-11.2-10.8-27.5-10.8-48.8
c0-21.5,3.3-37.9,10-49.4C86.8,113.9,96.6,108.1,109.4,108.1z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="250.289" y1="263.8887" x2="250.289" y2="86.6392">
<stop offset="0" style="stop-color:#621559"/>
<stop offset="1" style="stop-color:#9F2171"/>
</linearGradient>
<path fill="url(#SVGID_3_)" d="M273.4,167.1l-29-12.5c-7-2.8-12.2-6-15.6-9.4c-3.4-3.4-5.1-8.2-5.1-14.4c0-6,2.8-11.2,8.2-15.6
c5.5-4.4,12.8-6.6,21.8-6.6c12.5,0,26.7,3.9,42.7,11.8c6.3-5.8,9.6-12.8,9.8-20.8c-17.2-8.7-34.5-13-52-13
c-8.5,0-16.3,1.2-23.4,3.5c-7.1,2.3-13.1,5.8-18.1,10.2s-8.9,9.7-11.8,15.6c-2.8,5.9-4.2,12.3-4.2,19.1c0,19,11.4,33.4,34.2,43.2
l29.5,12.8c15.2,6.5,22.8,15.5,22.8,27c0,7-2.9,12.7-8.6,17c-5.8,4.3-13.5,6.5-23.4,6.5c-16.2,0-32.9-5.7-50.2-17
c-6.8,5.5-10.6,12.3-11.2,20.5c17.7,12.5,37.1,18.8,58.2,18.8c21.2,0,37-4.6,47.4-13.9c10.4-9.2,15.6-21.4,15.6-36.4
c0-10.5-3.1-19.5-9.4-27.1C295.3,178.9,285.9,172.5,273.4,167.1z"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="389.2889" y1="263.8887" x2="389.2889" y2="86.6392">
<stop offset="0" style="stop-color:#621559"/>
<stop offset="1" style="stop-color:#9F2171"/>
</linearGradient>
<path fill="url(#SVGID_4_)" d="M412.4,167.1l-29-12.5c-7-2.8-12.2-6-15.6-9.4c-3.4-3.4-5.1-8.2-5.1-14.4c0-6,2.8-11.2,8.2-15.6
c5.5-4.4,12.8-6.6,21.8-6.6c12.5,0,26.8,3.9,42.8,11.8c6.3-5.8,9.6-12.8,9.8-20.8c-17.2-8.7-34.5-13-52-13
c-8.5,0-16.3,1.2-23.4,3.5c-7.1,2.3-13.1,5.8-18.1,10.2s-8.9,9.7-11.8,15.6c-2.8,5.9-4.2,12.3-4.2,19.1c0,19,11.4,33.4,34.2,43.2
l29.5,12.8c15.2,6.5,22.8,15.5,22.8,27c0,7-2.9,12.7-8.6,17c-5.8,4.3-13.5,6.5-23.4,6.5c-16.2,0-32.9-5.7-50.2-17
c-6.8,5.5-10.6,12.3-11.2,20.5c17.7,12.5,37.1,18.8,58.2,18.8c21.2,0,37-4.6,47.4-13.9c10.4-9.2,15.6-21.4,15.6-36.4
c0-10.5-3.1-19.5-9.4-27.1C434.3,178.9,424.9,172.5,412.4,167.1z"/>
</g>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="287.1743" y1="358.0213" x2="287.1743" y2="288.7131">
<stop offset="0" style="stop-color:#621559"/>
<stop offset="1" style="stop-color:#9F2171"/>
</linearGradient>
<path fill="url(#SVGID_5_)" d="M503,303.7C237,296.4,93.1,359,80.4,358c-12.7-1-25.1-19.2-8-25.1C250.3,271.5,510.3,292,510.3,292
L503,303.7z"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="703.0169" y1="323.7527" x2="703.0169" y2="366.449" gradientTransform="matrix(-1 0 0 -1 1494.1555 662.8813)">
<stop offset="0" style="stop-color:#621559"/>
<stop offset="1" style="stop-color:#9F2171"/>
</linearGradient>
<path fill="url(#SVGID_6_)" d="M589.9,296.4C668,317,743,325.6,794.1,328.6C981.5,339.9,984.9,306,992,317
c7.8,12.2-94.9,25.7-197.7,21.3c-98.9-4.2-203.7-26.1-203.7-26.1L589.9,296.4z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
node_modules/cssgram/site/img/lakegeneva.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
node_modules/cssgram/site/img/logo-temp.png generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
node_modules/cssgram/site/img/tahoe.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 105 KiB

300
node_modules/cssgram/site/index.html generated vendored Normal file
View file

@ -0,0 +1,300 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSSGram</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/demo-site.min.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-36758177-8', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<section class="title-section">
<img class="title--logo" src="img/cssgram-logo.svg" alt="CSSgram">
<h2 class="title--top-sub">A tiny (&lt;1kb gzipped!) library for recreating <a href="http://instagram.com">Instagram</a> filters with CSS filters and blend modes.</h2>
</section>
<section class="demo__section">
<div class="demo__input-area">
<fieldset class="demo__option-field">
<legend>Choose a sample image:</legend>
<img class="demo__option-img" src="img/atx.jpg" alt="atx image">
<img class="demo__option-img" src="img/bike.jpg" alt="bike image">
<img class="demo__option-img" src="img/cacti.jpg" alt="cacti image">
<img class="demo__option-img" src="img/lakegeneva.jpg" alt="lakegeneva image">
<img class="demo__option-img" src="img/tahoe.jpg" alt="tahoe image">
<br>
<label class="demo__input-label">
Or paste in a link to your own photo:
<input class="demo__input-img" type="text">
</label>
</fieldset>
<small class="demo__note">Hovering over any of these images (or clicking on mobile) will remove the filter effect to visualize the changes.</small>
</div>
<ul class="demo__list">
<li class="demo__item">
<figure>
<img>
<figcaption>#nofilter</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="aden">
<img>
<figcaption>Aden</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="reyes">
<img>
<figcaption>Reyes</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="perpetua">
<img>
<figcaption>Perpetua</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="inkwell">
<img>
<figcaption>Inkwell</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="earlybird">
<img>
<figcaption>Earlybird</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="toaster">
<img>
<figcaption>Toaster</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="walden">
<img>
<figcaption>Walden</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="hudson">
<img>
<figcaption>Hudson</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="gingham">
<img>
<figcaption>Gingham</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="mayfair">
<img>
<figcaption>Mayfair</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="lofi">
<img>
<figcaption>Lo-fi</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="xpro2">
<img>
<figcaption>X-Pro II</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="_1977">
<img>
<figcaption>1977</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="brooklyn">
<img>
<figcaption>Brooklyn</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="nashville">
<img>
<figcaption>Nashville</figcaption>
</figure>
</li>
</ul>
</section>
<section class="explanation-section">
<h2>What is This?</h2>
<p><strong class="callout">For more background on CSS Image Effects, you can check out my blog series <a href="http://una.im">here</a>, or watch my <a href="https://www.youtube.com/watch?v=LY65F2e4B5w">video</a> from CSS Conf EU, which gives a baseline on blend modes and filters.</strong></p>
<p>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 <em>less manual image processing</em> and more fun filter effects on the web!</p>
<p>We are using pseudo-elements (i.e. <code>:before</code> and <code>:after</code>) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <code>&lt;img&gt;</code>. The recommendation is to wrap your images in a <code>&lt;figure&gt;</code> tag. More about the tag <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure">here.</a></p>
<h3>Browser Support</h3>
<p>This library uses <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter">CSS Filters</a> and <a href="https://css-tricks.com/basics-css-blend-modes/">CSS Blend Modes</a>. This features are supported in the following browsers:</p>
<ul class="supported-browsers">
<li class="supported">Google Chrome: 43+</li>
<li class="supported">Mozilla Firefox: 38+</li>
<li class="not-supported">Internet Explorer: Nope</li>
<li class="supported">Opera: 32+</li>
<li class="supported">Safari: 8+</li>
</ul>
<p>For more information, check on <a href="http://caniuse.com/">Can I Use</a>.</p>
<hr>
</section>
<section class="how-to-section">
<h2>Usage</h2>
<p><strong>There are currently 2 ways to consume this library:</strong></p>
<h3 id="use-css-classes">Use CSS classes</h3>
<p>When using CSS classes, you can simply add the class with the filter name to the element containing your image.</p>
<p><strong>The quickest way to do this is to link to our CDN</strong> in your <code>&lt;head&gt;</code> tag: <code>&lt;link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css"&gt;</code>. Then, add a class to your figure element with the name of the filter you would like to use (shown below)</p>
<p>If you want to work locally, do the following:</p>
<ol>
<li><a href="https://raw.githubusercontent.com/una/CSSgram/master/source/css/cssgram.min.css" download>Download the CSSgram Library</a></li>
<li>Link to the CSSgram library within your project: <br><code>&lt;link rel="stylesheet" href="css/vendor/cssgram.min.css"&gt;</code></li>
<li>Add a class to your figure element with the name of the filter you would like to use</li>
</ol>
<p>For example:</p>
<pre><code>
<span class="comment">&lt;!-- HTML --&gt;</span>
&lt;figure <span class="highlight">class="aden"</span>&gt;
&lt;img src="../img.png"&gt;
&lt;/figure&gt;
</code></pre>
<small>Alternatively, you can just download and link to any individual css file: <br> <code>&lt;link rel="stylesheet" href="css/vendor/aden.min.css"&gt;</code>, if you're just using one of the styles.</li></small>
<h3>Available Classes</h3>
<small><em>For use in HTML markup:</em></small>
<ul class="available-classes">
<li>Aden: <code>class="aden"</code></li>
<li>Reyes: <code>class="reyes"</code></li>
<li>Perpetua: <code>class="perpetua"</code></li>
<li>Inkwell: <code>class="inkwell"</code></li>
<li>Toaster: <code>class="toaster"</code></li>
<li>Walden: <code>class="walden"</code></li>
<li>Hudson: <code>class="hudson"</code></li>
<li>Gingham: <code>class="gingham"</code></li>
<li>Mayfair: <code>class="mayfair"</code></li>
<li>Lo-fi: <code>class="lofi"</code></li>
<li>X-Pro II: <code>class="xpro2"</code></li>
<li>1977: <code>class="_1977"</code></li>
<li>Brooklyn: <code>class="brooklyn"</code></li>
<li>Nashville: <code>class="nashville"</code></li>
</ul>
<hr>
<h3>Use Sass <code>@extends</code></h3>
<p>If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then <code>@extend</code> the filter effects within your style definitions. If you think extends are stupid, I will fight you 😊.</p>
<ol>
<li><a href="https://github.com/una/CSSgram/tree/master/source/scss" download>Download the /scss folder contents</a></li>
<li>Include a link to <code>scss/cssgram.scss</code> via an import statement in your Sass manifest file (i.e. <code>main.scss</code>). It may look like: <code>@import 'vendor/cssgram';</code></li>
<li>Extend the silent placeholder selector <code>@extend %aden;</code> in your element.</li>
</ol>
<p>For example:</p>
<pre><code>
<span class="comment">&lt;!-- HTML --&gt;</span>
&lt;figure class=<span class="highlight">"viz--beautiful"</span>&gt;
&lt;img src="../img.png"&gt;
&lt;/figure&gt;
</code></pre>
<pre><code>
<span class="comment">// Sass</span>
<span class="highlight">.viz--beautiful</span> {
@extend %aden;
}
</code></pre>
<small>Alternatively, you can just download and link any individual .scss file in your Sass manifest: <br> (i.e. <code>scss/aden.scss</code>), if you're just using one of the styles.</li></small>
<h3>Available Extends</h3>
<small><em>For use in Sass elements:</em></small>
<ul class="available-classes">
<li>Aden: <code>@extend %aden;</code></li>
<li>Reyes: <code>@extend %reyes;</code></li>
<li>Perpetua: <code>@extend %perpetua;</code></li>
<li>Inkwell: <code>@extend %inkwell;</code></li>
<li>Toaster: <code>@extend %toaster;</code></li>
<li>Walden: <code>@extend %walden;</code></li>
<li>Hudson: <code>@extend %hudson;</code></li>
<li>Gingham: <code>@extend %gingham;</code></li>
<li>Mayfair: <code>@extend %mayfair;</code></li>
<li>Lo-fi: <code>@extend %lofi;</code></li>
<li>X-Pro II: <code>@extend %xpro2;</code></li>
<li>1977: <code>@extend %_1977;</code></li>
<li>Brooklyn: <code>@extend %brooklyn;</code></li>
<li>Nashville: <code>@extend %nashville;</code></li>
</ul>
<hr>
</section>
<footer class="attribution">Made with love by <a href="http://twitter.com/una">Una</a> | <a href="http://github.com/una/CSSgram">View Source</a></footer>
<script>
var inputField = document.querySelector(".demo__input-img")
function pickSample(img) {
updateImages(img.src)
inputField.value = img.getAttribute("src")
}
function updateImages(src) {
var imgs = document.querySelectorAll(".demo__item img")
for (var i = 0; i < imgs.length; i++) imgs[i].src = src
}
document.addEventListener("click", function(event) {
if (/demo__option-img/.test(event.target.className)) pickSample(event.target)
}, false)
inputField.addEventListener("input", function() {
updateImages(this.value)
}, false)
inputField.addEventListener("focus", function() {
this.select()
}, false)
pickSample(document.querySelector(".demo__option-img"))
</script>
</body>
</html>

299
node_modules/cssgram/site/index.twig generated vendored Normal file
View file

@ -0,0 +1,299 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSSGram</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/demo-site.min.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-36758177-8', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<section class="title-section">
<img class="title--logo" src="img/cssgram-logo.svg" alt="CSSgram">
<h2 class="title--top-sub">A tiny (&lt;1kb gzipped!) library for recreating <a href="http://instagram.com">Instagram</a> filters with CSS filters and blend modes.</h2>
</section>
{% set images = ['atx', 'bike', 'cacti', 'lakegeneva', 'tahoe'] %}
<section class="demo__section">
<div class="demo__input-area">
<fieldset class="demo__option-field">
<legend>Choose a sample image:</legend>
{% for i in images %}
<img class="demo__option-img" src="img/{{i}}.jpg" alt="{{i}} image">
{% endfor %}
<br>
<label class="demo__input-label">
Or paste in a link to your own photo:
<input class="demo__input-img" type="text">
</label>
</fieldset>
<small class="demo__note">Hovering over any of these images (or clicking on mobile) will remove the filter effect to visualize the changes.</small>
</div>
<ul class="demo__list">
<li class="demo__item">
<figure>
<img>
<figcaption>#nofilter</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="aden">
<img>
<figcaption>Aden</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="reyes">
<img>
<figcaption>Reyes</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="perpetua">
<img>
<figcaption>Perpetua</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="inkwell">
<img>
<figcaption>Inkwell</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="earlybird">
<img>
<figcaption>Earlybird</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="toaster">
<img>
<figcaption>Toaster</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="walden">
<img>
<figcaption>Walden</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="hudson">
<img>
<figcaption>Hudson</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="gingham">
<img>
<figcaption>Gingham</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="mayfair">
<img>
<figcaption>Mayfair</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="lofi">
<img>
<figcaption>Lo-fi</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="xpro2">
<img>
<figcaption>X-Pro II</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="_1977">
<img>
<figcaption>1977</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="brooklyn">
<img>
<figcaption>Brooklyn</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="nashville">
<img>
<figcaption>Nashville</figcaption>
</figure>
</li>
</ul>
</section>
<section class="explanation-section">
<h2>What is This?</h2>
<p><strong class="callout">For more background on CSS Image Effects, you can check out my blog series <a href="http://una.im">here</a>, or watch my <a href="https://www.youtube.com/watch?v=LY65F2e4B5w">video</a> from CSS Conf EU, which gives a baseline on blend modes and filters.</strong></p>
<p>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 <em>less manual image processing</em> and more fun filter effects on the web!</p>
<p>We are using pseudo-elements (i.e. <code>:before</code> and <code>:after</code>) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <code>&lt;img&gt;</code>. The recommendation is to wrap your images in a <code>&lt;figure&gt;</code> tag. More about the tag <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure">here.</a></p>
<h3>Browser Support</h3>
<p>This library uses <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter">CSS Filters</a> and <a href="https://css-tricks.com/basics-css-blend-modes/">CSS Blend Modes</a>. This features are supported in the following browsers:</p>
<ul class="supported-browsers">
<li class="supported">Google Chrome: 43+</li>
<li class="supported">Mozilla Firefox: 38+</li>
<li class="not-supported">Internet Explorer: Nope</li>
<li class="supported">Opera: 32+</li>
<li class="supported">Safari: 8+</li>
</ul>
<p>For more information, check on <a href="http://caniuse.com/">Can I Use</a>.</p>
<hr>
</section>
<section class="how-to-section">
<h2>Usage</h2>
<p><strong>There are currently 2 ways to consume this library:</strong></p>
<h3 id="use-css-classes">Use CSS classes</h3>
<p>When using CSS classes, you can simply add the class with the filter name to the element containing your image.</p>
<p><strong>The quickest way to do this is to link to our CDN</strong> in your <code>&lt;head&gt;</code> tag: <code>&lt;link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css"&gt;</code>. Then, add a class to your figure element with the name of the filter you would like to use (shown below)</p>
<p>If you want to work locally, do the following:</p>
<ol>
<li><a href="https://raw.githubusercontent.com/una/CSSgram/master/source/css/cssgram.min.css" download>Download the CSSgram Library</a></li>
<li>Link to the CSSgram library within your project: <br><code>&lt;link rel="stylesheet" href="css/vendor/cssgram.min.css"&gt;</code></li>
<li>Add a class to your figure element with the name of the filter you would like to use</li>
</ol>
<p>For example:</p>
<pre><code>
<span class="comment">&lt;!-- HTML --&gt;</span>
&lt;figure <span class="highlight">class="aden"</span>&gt;
&lt;img src="../img.png"&gt;
&lt;/figure&gt;
</code></pre>
<small>Alternatively, you can just download and link to any individual css file: <br> <code>&lt;link rel="stylesheet" href="css/vendor/aden.min.css"&gt;</code>, if you're just using one of the styles.</li></small>
<h3>Available Classes</h3>
<small><em>For use in HTML markup:</em></small>
<ul class="available-classes">
<li>Aden: <code>class="aden"</code></li>
<li>Reyes: <code>class="reyes"</code></li>
<li>Perpetua: <code>class="perpetua"</code></li>
<li>Inkwell: <code>class="inkwell"</code></li>
<li>Toaster: <code>class="toaster"</code></li>
<li>Walden: <code>class="walden"</code></li>
<li>Hudson: <code>class="hudson"</code></li>
<li>Gingham: <code>class="gingham"</code></li>
<li>Mayfair: <code>class="mayfair"</code></li>
<li>Lo-fi: <code>class="lofi"</code></li>
<li>X-Pro II: <code>class="xpro2"</code></li>
<li>1977: <code>class="_1977"</code></li>
<li>Brooklyn: <code>class="brooklyn"</code></li>
<li>Nashville: <code>class="nashville"</code></li>
</ul>
<hr>
<h3>Use Sass <code>@extends</code></h3>
<p>If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then <code>@extend</code> the filter effects within your style definitions. If you think extends are stupid, I will fight you 😊.</p>
<ol>
<li><a href="https://github.com/una/CSSgram/tree/master/source/scss" download>Download the /scss folder contents</a></li>
<li>Include a link to <code>scss/cssgram.scss</code> via an import statement in your Sass manifest file (i.e. <code>main.scss</code>). It may look like: <code>@import 'vendor/cssgram';</code></li>
<li>Extend the silent placeholder selector <code>@extend %aden;</code> in your element.</li>
</ol>
<p>For example:</p>
<pre><code>
<span class="comment">&lt;!-- HTML --&gt;</span>
&lt;figure class=<span class="highlight">"viz--beautiful"</span>&gt;
&lt;img src="../img.png"&gt;
&lt;/figure&gt;
</code></pre>
<pre><code>
<span class="comment">// Sass</span>
<span class="highlight">.viz--beautiful</span> {
@extend %aden;
}
</code></pre>
<small>Alternatively, you can just download and link any individual .scss file in your Sass manifest: <br> (i.e. <code>scss/aden.scss</code>), if you're just using one of the styles.</li></small>
<h3>Available Extends</h3>
<small><em>For use in Sass elements:</em></small>
<ul class="available-classes">
<li>Aden: <code>@extend %aden;</code></li>
<li>Reyes: <code>@extend %reyes;</code></li>
<li>Perpetua: <code>@extend %perpetua;</code></li>
<li>Inkwell: <code>@extend %inkwell;</code></li>
<li>Toaster: <code>@extend %toaster;</code></li>
<li>Walden: <code>@extend %walden;</code></li>
<li>Hudson: <code>@extend %hudson;</code></li>
<li>Gingham: <code>@extend %gingham;</code></li>
<li>Mayfair: <code>@extend %mayfair;</code></li>
<li>Lo-fi: <code>@extend %lofi;</code></li>
<li>X-Pro II: <code>@extend %xpro2;</code></li>
<li>1977: <code>@extend %_1977;</code></li>
<li>Brooklyn: <code>@extend %brooklyn;</code></li>
<li>Nashville: <code>@extend %nashville;</code></li>
</ul>
<hr>
</section>
<footer class="attribution">Made with love by <a href="http://twitter.com/una">Una</a> | <a href="http://github.com/una/CSSgram">View Source</a></footer>
<script>
var inputField = document.querySelector(".demo__input-img")
function pickSample(img) {
updateImages(img.src)
inputField.value = img.getAttribute("src")
}
function updateImages(src) {
var imgs = document.querySelectorAll(".demo__item img")
for (var i = 0; i < imgs.length; i++) imgs[i].src = src
}
document.addEventListener("click", function(event) {
if (/demo__option-img/.test(event.target.className)) pickSample(event.target)
}, false)
inputField.addEventListener("input", function() {
updateImages(this.value)
}, false)
inputField.addEventListener("focus", function() {
this.select()
}, false)
pickSample(document.querySelector(".demo__option-img"))
</script>
</body>
</html>

329
node_modules/cssgram/site/scss/_home.scss generated vendored Normal file
View file

@ -0,0 +1,329 @@
&::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: 0;
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;
}
}

23
node_modules/cssgram/site/scss/_mixins.scss generated vendored Normal file
View file

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

11
node_modules/cssgram/site/scss/_vars.scss generated vendored Normal file
View file

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

4
node_modules/cssgram/site/scss/demo-site.scss generated vendored Normal file
View file

@ -0,0 +1,4 @@
@import 'source/scss/cssgram';
@import 'vars';
@import 'mixins';
@import 'home';

64
node_modules/cssgram/site/test/css/test-site.css generated vendored Normal file
View file

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

2116
node_modules/cssgram/site/test/index.html generated vendored Normal file
View file

File diff suppressed because it is too large Load diff

82
node_modules/cssgram/site/test/index.twig generated vendored Normal file
View file

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="description" content="Testing CSSgram filters"/>
<meta name="author" content="Miles Croxford"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../css/cssgram.min.css">
<title>CSSgram test sheet</title>
<link rel="stylesheet" href="../css/demo-site.min.css">
<link rel="stylesheet" href="css/test-site.css">
</head>
<body class="test-page">
{% set filters = [
{name: 'aden', is_done: true},
{name: 'amaro', is_done: false},
{name: 'brannan', is_done: false},
{name: 'crema', is_done: false},
{name: 'earlybird', is_done: true},
{name: 'hefe', is_done: false},
{name: 'hudson', is_done: true},
{name: 'inkwell', is_done: true},
{name: 'juno', is_done: false},
{name: 'lark', is_done: false},
{name: 'lofi', is_done: true},
{name: 'ludwig', is_done: false},
{name: 'mayfair', is_done: true},
{name: 'nashville', is_done: true},
{name: 'perpetua', is_done: true},
{name: 'reyes', is_done: true},
{name: 'rise', is_done: false},
{name: 'sierra', is_done: false},
{name: 'slumber', is_done: false},
{name: 'valencia', is_done: false},
{name: 'willow', is_done: false},
{name: 'xpro2', is_done: true},
] %}
{% set images = ['atx', 'bike', 'cacti', 'lakegeneva', 'tahoe'] %}
<header>
<img class="logo" src="../img/cssgram-logo.svg" alt="CSSgram logo"> <h1 class="blurb"> – Test sheet </h1>
</header>
{% for f in filters %}
<section id="{{f.name}}">
<h2 class="filter-header"><a href="#{{f.name}}">{{f.name|title}}</a> <span class="done done--{{f.is_done ? 'yep' : 'nope'}}">{{f.is_done ? '✓' : '✗'}}</span></h2>
<div class="headers">
<h3>Instagram</h3>
<h3>CSSgram</h3>
</div>
{% for i in images %}
<section class="test-images">
{# ig #}
<div>
<figure>
<img src="ref/{{i}}-{{f.name}}.jpg" alt="Instagram version of {{f.name}}">
</figure>
</div>
{# cssgram #}
<div>
<figure class="{{f.name}}">
<img src="../img/{{i}}.jpg" alt="CSSgram version of {{f.name}}"></div>
</figure>
</div>
</section>
{% endfor %}
</section>
{% endfor %}
<footer class="attribution">Made with love by <a href="http://twitter.com/una">Una</a> | <a href="http://github.com/una/CSSgram">View Source and Contribute</a></footer>
</body>
</html>

BIN
node_modules/cssgram/site/test/ref/atx-aden.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
node_modules/cssgram/site/test/ref/atx-amaro.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
node_modules/cssgram/site/test/ref/atx-brannan.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
node_modules/cssgram/site/test/ref/atx-crema.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
node_modules/cssgram/site/test/ref/atx-earlybird.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
node_modules/cssgram/site/test/ref/atx-hefe.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
node_modules/cssgram/site/test/ref/atx-hudson.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
node_modules/cssgram/site/test/ref/atx-inkwell.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
node_modules/cssgram/site/test/ref/atx-juno.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
node_modules/cssgram/site/test/ref/atx-lark.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
node_modules/cssgram/site/test/ref/atx-lofi.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
node_modules/cssgram/site/test/ref/atx-ludwig.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
node_modules/cssgram/site/test/ref/atx-mayfair.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
node_modules/cssgram/site/test/ref/atx-nashville.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
node_modules/cssgram/site/test/ref/atx-perpetua.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
node_modules/cssgram/site/test/ref/atx-reyes.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
node_modules/cssgram/site/test/ref/atx-rise.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
node_modules/cssgram/site/test/ref/atx-sierra.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
node_modules/cssgram/site/test/ref/atx-slumber.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
node_modules/cssgram/site/test/ref/atx-valencia.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
node_modules/cssgram/site/test/ref/atx-willow.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
node_modules/cssgram/site/test/ref/atx-xpro2.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
node_modules/cssgram/site/test/ref/bike-aden.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 158 KiB

BIN
node_modules/cssgram/site/test/ref/bike-amaro.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 171 KiB

BIN
node_modules/cssgram/site/test/ref/bike-brannan.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 173 KiB

BIN
node_modules/cssgram/site/test/ref/bike-crema.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
node_modules/cssgram/site/test/ref/bike-earlybird.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 159 KiB

BIN
node_modules/cssgram/site/test/ref/bike-hefe.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
node_modules/cssgram/site/test/ref/bike-hudson.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 168 KiB

BIN
node_modules/cssgram/site/test/ref/bike-inkwell.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 159 KiB

BIN
node_modules/cssgram/site/test/ref/bike-juno.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 174 KiB

BIN
node_modules/cssgram/site/test/ref/bike-lark.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 165 KiB

BIN
node_modules/cssgram/site/test/ref/bike-lofi.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 178 KiB

BIN
node_modules/cssgram/site/test/ref/bike-ludwig.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 171 KiB

BIN
node_modules/cssgram/site/test/ref/bike-mayfair.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 162 KiB

BIN
node_modules/cssgram/site/test/ref/bike-nashville.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
node_modules/cssgram/site/test/ref/bike-perpetua.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 165 KiB

BIN
node_modules/cssgram/site/test/ref/bike-reyes.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 147 KiB

BIN
node_modules/cssgram/site/test/ref/bike-rise.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 164 KiB

BIN
node_modules/cssgram/site/test/ref/bike-sierra.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 160 KiB

BIN
node_modules/cssgram/site/test/ref/bike-slumber.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 160 KiB

BIN
node_modules/cssgram/site/test/ref/bike-valencia.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 168 KiB

BIN
node_modules/cssgram/site/test/ref/bike-willow.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 150 KiB

BIN
node_modules/cssgram/site/test/ref/bike-xpro2.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
node_modules/cssgram/site/test/ref/cacti-aden.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
node_modules/cssgram/site/test/ref/cacti-amaro.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 215 KiB

BIN
node_modules/cssgram/site/test/ref/cacti-brannan.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 230 KiB

BIN
node_modules/cssgram/site/test/ref/cacti-crema.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 220 KiB

BIN
node_modules/cssgram/site/test/ref/cacti-earlybird.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 204 KiB

BIN
node_modules/cssgram/site/test/ref/cacti-hefe.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 226 KiB

BIN
node_modules/cssgram/site/test/ref/cacti-hudson.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
node_modules/cssgram/site/test/ref/cacti-inkwell.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
node_modules/cssgram/site/test/ref/cacti-juno.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 231 KiB

BIN
node_modules/cssgram/site/test/ref/cacti-lark.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 222 KiB

BIN
node_modules/cssgram/site/test/ref/cacti-lofi.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 235 KiB

BIN
node_modules/cssgram/site/test/ref/cacti-ludwig.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 228 KiB

BIN
node_modules/cssgram/site/test/ref/cacti-mayfair.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 214 KiB

BIN
node_modules/cssgram/site/test/ref/cacti-nashville.jpg generated vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 222 KiB

Some files were not shown because too many files have changed in this diff Show more