` 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:
-
-|
-
-```
-
-Alternatively, you can just download and link to any individual css file (e.g. `
-
-```
-
-```sass
-// Sass
-.viz--beautiful {
- @extend %aden;
-}
-```
-
-or using mixins (more flexible)
-
-```
-// Sass (without adding new CSS3 filters)
-.viz--beautiful {
- @include aden();
-}
-
-// Sass (adding new CSS3 filters)
-.viz--beautiful {
- @include aden(blur(2px) /*...*/);
-}
-```
-
-Alternatively, if you're using only one of the styles, you can download and link any individual `.scss` file in your Sass manifest (i.e. `scss/aden.scss`).
-
-### Available Placeholders
-
-_For use in Sass stylesheets:_
-
-**Extends**
-
-* 1977: `@extend %_1977`
-* Aden: `@extend %aden`
-* Amaro: `@extend %amaro`
-* Brannan: `@extend %brannan`
-* Brooklyn: `@extend %brooklyn`
-* Clarendon: `@extend %clarendon`
-* Gingham: `@extend %gingham`
-* Hudson: `@extend %hudson`
-* Inkwell: `@extend %inkwell`
-* Kelvin: `@extend %kelvin`
-* Lark: `@extend %lark`
-* Lo-fi: `@extend %lofi`
-* Mayfair: `@extend %mayfair`
-* Moon: `@extend %moon`
-* Nashville: `@extend %nashville`
-* Perpetua: `@extend %perpetua`
-* Reyes: `@extend %reyes`
-* Rise: `@extend %rise`
-* Slumber: `@extend %slumber`
-* Stinson: `@extend %stinson`
-* Toaster: `@extend %toaster`
-* Valencia: `@extend %valencia`
-* Walden: `@extend %walden`
-* Willow: `@extend %willow`
-* X-Pro-2: `@extend %xpro2`
-
-**Mixins** (You can add more CSS3 filters as arguments)
-
-* 1977: `@include _1977()`
-* Aden: `@include aden()`
-* Amaro: `@include amaro()`
-* Brannan: `@include brannan()`
-* Brooklyn: `@include brooklyn()`
-* Clarendon: `@include clarendon()`
-* Gingham: `@include gingham()`
-* Hudson: `@include hudson()`
-* Inkwell: `@include inkwell()`
-* Kelvin: `@include kelvin()`
-* Lark: `@include lark()`
-* Lo-fi: `@include lofi()`
-* Mayfair: `@include mayfair()`
-* Moon: `@include moon()`
-* Nashville: `@include nashville()`
-* Perpetua: `@include perpetua()`
-* Reyes: `@include reyes()`
-* Rise: `@include rise()`
-* Slumber: `@include slumber()`
-* Stinson: `@include stinson()`
-* Toaster: `@include toaster()`
-* Valencia: `@include valencia()`
-* Walden: `@include walden()`
-* Willow: `@include willow()`
-* X-Pro-2: `@include xpro2()`
-
-## 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:
-
-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 `CSSGram
-
- A tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes.
-
-
-
-
-
-
-
- #nofilter
-
-
-
-
- 1977
-
-
-
-
- Aden
-
-
-
-
- Brannan
-
-
-
-
- Brooklyn
-
-
-
-
- Clarendon
-
-
-
-
- Earlybird
-
-
-
-
- Gingham
-
-
-
-
- Hudson
-
-
-
-
- Inkwell
-
-
-
-
- Kelvin
-
-
-
-
- Lark
-
-
-
-
- Lo-Fi
-
-
-
-
- Maven
-
-
-
-
- Mayfair
-
-
-
-
- Moon
-
-
-
-
- Nashville
-
-
-
-
- Perpetua
-
-
-
-
- Reyes
-
-
-
-
- Rise
-
-
-
-
- Slumber
-
-
-
-
- Stinson
-
-
-
-
- Toaster
-
-
-
-
- Valencia
-
-
-
-
- Walden
-
-
-
-
- Willow
-
-
-
-
- X-pro II
-
-
-
-
-
-
- What is This?
-
- For more background on CSS Image Effects, you can check out my blog series here , or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters.
-
- Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we're doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. This means less manual image processing and more fun filter effects on the web!
-
- We are using pseudo-elements (i.e. :before and :after) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <img>. The recommendation is to wrap your images in a <figure> tag. More about the tag here.
-
- Browser Support
-
- This library uses CSS Filters and CSS Blend Modes . These features are supported in the following browsers:
-
-
- Google Chrome: 43+
- Mozilla Firefox: 38+
- Internet Explorer: Nope
- Opera: 32+
- Safari: 8+
-
-
- For more information, check on Can I Use .
-
-
-
- Usage
-
- There are currently 3 ways to consume this library:
-
- 1. Use CSS classes
-
- When using CSS classes, you can simply add the class with the filter name to the element containing your image.
-
- The quickest way to do this is to link to our CDN in your <head> tag: <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css"> (OR you can now use CDNJS with <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css"> ). Then, add a class to your figure element with the name of the filter you would like to use (shown below)
-
- If you want to work locally, do the following:
-
-
- Download the CSSgram Library Link to the CSSgram library within your project: <link rel="stylesheet" href="css/vendor/cssgram.min.css">
- Add a class to your figure element with the name of the filter you would like to use
-
-
- For example:
-
-
-
- <figure class="aden" >
- <img src="../img.png">
- </figure>
- Alternatively, you can just download and link to any individual css file: <link rel="stylesheet" href="css/vendor/aden.min.css">, if you're just using one of the styles.
-
- Available Classes
- For use in HTML markup:
- 1977: class="_1977"
- Aden: class="aden"
- Brannan: class="brannan"
- Brooklyn: class="brooklyn"
- Clarendon: class="clarendon"
- Earlybird: class="earlybird"
- Gingham: class="gingham"
- Hudson: class="hudson"
- Inkwell: class="inkwell"
- Kelvin: class="kelvin"
- Lark: class="lark"
- Lo-Fi: class="lofi"
- Maven: class="maven"
- Mayfair: class="mayfair"
- Moon: class="moon"
- Nashville: class="nashville"
- Perpetua: class="perpetua"
- Reyes: class="reyes"
- Rise: class="rise"
- Slumber: class="slumber"
- Stinson: class="stinson"
- Toaster: class="toaster"
- Valencia: class="valencia"
- Walden: class="walden"
- Willow: class="willow"
- X-pro II: class="xpro2"
-
-
- 2. Use Sass @extends
-
- If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then @extend the filter effects within your style definitions. If you think extends are stupid, I will fight you 😊.
-
-
- Download the /scss folder contents Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
- Extend the silent placeholder selector @extend %aden; in your element.
-
-
- For example:
-
-
-
- <figure class="viz--beautiful" >
- <img src="../img.png">
- </figure>
-
-
- .viz--beautiful {
- @extend %aden;
- }
- Alternatively, you can just download and link any individual .scss file in your Sass manifest: scss/aden.scss), if you're just using one of the styles.
-
- Available Extends
- For use in Sass elements:
- 1977: @extend %_1977;
- Aden: @extend %aden;
- Brannan: @extend %brannan;
- Brooklyn: @extend %brooklyn;
- Clarendon: @extend %clarendon;
- Earlybird: @extend %earlybird;
- Gingham: @extend %gingham;
- Hudson: @extend %hudson;
- Inkwell: @extend %inkwell;
- Kelvin: @extend %kelvin;
- Lark: @extend %lark;
- Lo-Fi: @extend %lofi;
- Maven: @extend %maven;
- Mayfair: @extend %mayfair;
- Moon: @extend %moon;
- Nashville: @extend %nashville;
- Perpetua: @extend %perpetua;
- Reyes: @extend %reyes;
- Rise: @extend %rise;
- Slumber: @extend %slumber;
- Stinson: @extend %stinson;
- Toaster: @extend %toaster;
- Valencia: @extend %valencia;
- Walden: @extend %walden;
- Willow: @extend %willow;
- X-pro II: @extend %xpro2;
-
- 3. Use Sass @mixins
-
- Mixins allow for multiple filter arguments to be passed into your classes. This is useful for if you want to add filters in addition to the ones provided (i.e. add a blur).
-
-
- Download the /scss folder contents Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
- Include the mixin @include aden() in your element.
-
-
- For example:
-
-
-
- <figure class="viz--beautiful" >
- <img src="../img.png">
- </figure>
-
-
- .viz--beautiful {
- @include aden()
- }
- As mentioned above, you can also add additional filters as arguments when using the library with mixins:
-
-
-
- .viz--beautiful {
- @include @include aden(blur(2px) /*...*/);
- }
- Available Mixins
- For use in Sass elements:
- 1977: @include _1977();
- Aden: @include aden();
- Brannan: @include brannan();
- Brooklyn: @include brooklyn();
- Clarendon: @include clarendon();
- Earlybird: @include earlybird();
- Gingham: @include gingham();
- Hudson: @include hudson();
- Inkwell: @include inkwell();
- Kelvin: @include kelvin();
- Lark: @include lark();
- Lo-Fi: @include lofi();
- Maven: @include maven();
- Mayfair: @include mayfair();
- Moon: @include moon();
- Nashville: @include nashville();
- Perpetua: @include perpetua();
- Reyes: @include reyes();
- Rise: @include rise();
- Slumber: @include slumber();
- Stinson: @include stinson();
- Toaster: @include toaster();
- Valencia: @include valencia();
- Walden: @include walden();
- Willow: @include willow();
- X-pro II: @include xpro2();
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/site/index.twig b/site/index.twig
deleted file mode 100644
index bc749dc..0000000
--- a/site/index.twig
+++ /dev/null
@@ -1,297 +0,0 @@
-{% extends "twig/template.twig" %}
-
-{% block stylesheets %}
-
- A tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes.
-
-
-
-
-
-
-
- #nofilter
-
-
- {% for i in filters %}
- {% if i.is_done %}
-
-
- {{ i.name }}
-
-
- {% endif %}
- {% endfor %}
-
-
-
-
- What is This?
-
- For more background on CSS Image Effects, you can check out my blog series here , or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters.
-
- Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we're doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. This means less manual image processing and more fun filter effects on the web!
-
- We are using pseudo-elements (i.e. :before and :after) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <img>. The recommendation is to wrap your images in a <figure> tag. More about the tag here.
-
- Browser Support
-
- This library uses CSS Filters and CSS Blend Modes . These features are supported in the following browsers:
-
-
- Google Chrome: 43+
- Mozilla Firefox: 38+
- Internet Explorer: Nope
- Opera: 32+
- Safari: 8+
-
-
- For more information, check on Can I Use .
-
-
-
- Usage
-
- There are currently 3 ways to consume this library:
-
- 1. Use CSS classes
-
- When using CSS classes, you can simply add the class with the filter name to the element containing your image.
-
- The quickest way to do this is to link to our CDN in your <head> tag: <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css"> (OR you can now use CDNJS with <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css"> ). Then, add a class to your figure element with the name of the filter you would like to use (shown below)
-
- If you want to work locally, do the following:
-
-
- Download the CSSgram Library Link to the CSSgram library within your project: <link rel="stylesheet" href="css/vendor/cssgram.min.css">
- Add a class to your figure element with the name of the filter you would like to use
-
-
- For example:
-
-
-
- <figure class="aden" >
- <img src="../img.png">
- </figure>
- Alternatively, you can just download and link to any individual css file: <link rel="stylesheet" href="css/vendor/aden.min.css">, if you're just using one of the styles.
-
- Available Classes
- For use in HTML markup:
- {% for i in filters %}
- {% if i.is_done %}
- {{ i.name }}: class="{{ i.usage }}"
- {% endif %}
- {% endfor %}
-
-
- 2. Use Sass @extends
-
- If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then @extend the filter effects within your style definitions. If you think extends are stupid, I will fight you 😊.
-
-
- Download the /scss folder contents Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
- Extend the silent placeholder selector @extend %aden; in your element.
-
-
- For example:
-
-
-
- <figure class="viz--beautiful" >
- <img src="../img.png">
- </figure>
-
-
- .viz--beautiful {
- @extend %aden;
- }
- Alternatively, you can just download and link any individual .scss file in your Sass manifest: scss/aden.scss), if you're just using one of the styles.
-
- Available Extends
- For use in Sass elements:
- {% for i in filters %}
- {% if i.is_done %}
- {{ i.name }}: @extend %{{ i.usage }};
- {% endif %}
- {% endfor %}
-
- 3. Use Sass @mixins
-
- Mixins allow for multiple filter arguments to be passed into your classes. This is useful for if you want to add filters in addition to the ones provided (i.e. add a blur).
-
-
- Download the /scss folder contents Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
- Include the mixin @include aden() in your element.
-
-
- For example:
-
-
-
- <figure class="viz--beautiful" >
- <img src="../img.png">
- </figure>
-
-
- .viz--beautiful {
- @include aden()
- }
- As mentioned above, you can also add additional filters as arguments when using the library with mixins:
-
-
-
- .viz--beautiful {
- @include @include aden(blur(2px) /*...*/);
- }
- Available Mixins
- For use in Sass elements:
- {% for i in filters %}
- {% if i.is_done %}
- {{ i.name }}: @include {{ i.usage }}();
- {% endif %}
- {% endfor %}
-
-
-
-{% endblock %}
-
-{% block javascript %}
-
-{% endblock %}
diff --git a/site/scss/_home.scss b/site/scss/_home.scss
deleted file mode 100644
index ddab890..0000000
--- a/site/scss/_home.scss
+++ /dev/null
@@ -1,383 +0,0 @@
-&::selection {
- background: $accent;
- color: white;
-}
-
-body {
- font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
- margin: 0 auto;
- padding: 0 2em;
- max-width: 1200px;
- line-height: 1.5;
- font-size: 1.1em;
- overflow-x: hidden;
-
- @include breakpoint(xs) {
- font-size: .9em;
- }
-}
-
-section {
- overflow-x: hidden;
-}
-
-h1,
-h2 {
- color: $accent;
-
- @include breakpoint(xs) {
- text-align: center;
- }
-}
-
-h3,
-em {
- color: $secondary;
-}
-
-pre, code {
- background: $lightergrey;
-
- code {
- border: none;
- background: none;
- }
-}
-
-code {
- font-family: monospace;
- padding: .25em .5em;
-}
-
-.highlight {
- color: $secondary;
- font-weight: 800;
-}
-
-.comment {
- color: $midgrey;
-}
-
-ul {
- width: 100%;
- margin: 0;
- padding: 0;
-}
-
-ul,
-ol {
- line-height: 1.8;
-}
-
-a {
- text-decoration: none;
- color: $accent;
- transition-duration: .35s;
- border-bottom: 1px solid $secondary;
- padding-bottom: .05em;
-
- &:hover,
- &:focus {
- color: mix(white, $secondary, 50%);
- border-color: mix(white, $secondary, 50%);
- }
-}
-
-figure {
- max-width: 350px;
- max-height: 350px;
- overflow: hidden;
- position: relative;
- margin: 0;
- padding: 0;
- transition-duration: .35s;
-
- @include breakpoint(lg) {
- max-width: 300px;
- max-height: 300px;
- }
-
- @include breakpoint(md) {
- max-width: 250px;
- max-height: 250px;
- }
-
- @include breakpoint(sm) {
- max-width: 300px;
- max-height: 300px;
- }
-
- @include breakpoint(xs) {
- max-width: 400px;
- max-height: 400px;
- }
-
- &:hover,
- &:focus {
- filter: none !important;
- }
-
- &:hover::after,
- &:focus::after,
- &:hover::before,
- &:focus::before {
- opacity: 0 !important;
- }
-}
-
-figcaption {
- position: absolute;
- bottom: 1em;
- right: 0;
- padding: .25em 1em .25em .25em;
- background: $black;
- color: white;
- font-weight: 200;
-}
-
-hr {
- clear: both;
- float: none;
- border: 1px solid $lightergrey;
- margin: 2em auto;
- display: block;
-}
-
-img {
- display: block;
- margin: auto;
-
- height: auto;
- max-height: 100%;
-
- width: auto;
- max-width: 100%;
-}
-
-.demo {
- &__section {
- font-weight: 300;
- font-size: 1.2em;
- }
-
- &__subtitle {
- font-size: 2em;
- text-align: center;
- }
-
- &__note {
- font-style: italic;
- text-align: center;
- display: block;
- margin: 2em auto 0;
- }
-
- &__input-area {
- display: block;
- font-size: 1em;
- text-align: center;
- font-weight: 300;
- margin: 1em auto;
- padding: 1em 0;
-
- @include breakpoint(xs) {
- margin: 0;
- font-size: .8em;
- }
- }
-
- &__input-label {
- text-align: center;
- color: $accent;
- }
-
- &__input-img {
- max-width: 16em;
- font-size: 1em;
- padding: .5em;
- border: 2px solid $accent;
- outline: none;
- margin: .5em;
- font-weight: 200;
- transition-duration: .35s;
-
- &:hover {
- background: mix(white, $accent, 90%);
- }
-
- &:focus {
- background: mix(white, $accent, 75%);
- }
- }
-
- &__option-field {
- color: $accent;
- border: 1px solid $lightgrey;
- min-width: 200px;
- }
-
- &__option-img {
- max-width: 150px;
- height: 150px;
- display: inline-block;
- cursor: pointer;
-
- @include breakpoint(sm) {
- height: 100px;
- }
-
- @include breakpoint(xs) {
- height: 60px;
- }
- }
-
- &__list {
- width: 100%;
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
- }
-
- &__item {
- margin: .75em;
- list-style: none;
-
- @include breakpoint(md) {
- margin: .5em;
- }
-
- @include breakpoint(xs) {
- margin: .5em 0;
- }
- }
-}
-
-.title {
- &-section {
- width: 100%;
- text-align: center;
- }
-
- &--logo {
- max-width: 400px;
- }
-
- &--top-sub {
- font-weight: 200;
- margin: 0 auto;
- text-align: center;
- max-width: 26em;
-
- @include breakpoint(xs) {
- font-size: 1.2em;
- }
- }
-}
-
-.how-to-section,
-.explanation-section {
- font-size: 1.2em;
- font-weight: 300;
- max-width: 40em;
- margin: 0 auto;
- display: block;
-}
-
-.attribution {
- padding: 1em 0 4em;
- text-align: center;
-}
-
-.callout {
- max-width: 14em;
- background: $lightergrey;
- padding: 2em;
- margin: -.5em 2em 0;
- display: block;
- font-weight: 200;
- float: right;
-
- @include breakpoint(sm) {
- max-width: 28em;
- margin: 1em auto;
- float: none;
- font-size: .8em;
- }
-}
-
-.available-classes,
-.available-extends,
-.supported-browsers {
- columns: 15em 2;
-}
-
-.supported {
- &:after {
- content: '✔';
- color: $green;
- margin-left: .5em;
- }
-}
-
-.not-supported {
- &:after {
- content: '✘';
- color: $maroon;
- margin-left: .5em;
- }
-}
-
-// vid section
-.take-photo {
- font-size: 1em;
- color: $accent;
- font-weight: 300;
- width: 150px;
- height: 150px;
- display: inline-block;
- cursor: pointer;
- border: 1px dashed $accent;
- outline: none;
- background: none;
- vertical-align: top;
- transition-duration: .25s;
-
- &:hover {
- background: $secondary;
- color: white;
- }
-}
-
-.video-container {
- margin-top: 2em;
- max-height: 0;
- transition-duration: .3s;
- text-align: center;
- width: 100%;
-
- video {
- margin: 0 auto;
- display: block;
- }
-}
-
-#snapshot {
- margin: 0 auto;
-
- font-size: 1em;
- color: $accent;
- font-weight: 300;
- display: inline-block;
- cursor: pointer;
- border: 1px dashed $accent;
- outline: none;
- background: none;
- vertical-align: top;
- transition-duration: .25s;
- margin-top: 1em;
-
- &:hover {
- background: $secondary;
- color: white;
- }
-}
diff --git a/site/scss/_mixins.scss b/site/scss/_mixins.scss
deleted file mode 100644
index 5c29c64..0000000
--- a/site/scss/_mixins.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// Grid Mixin
-
-@mixin breakpoint($class) {
- @if $class == xs {
- @media (max-width: 500px) { @content; }
- }
-
- @else if $class == sm {
- @media (max-width: 768px) { @content; }
- }
-
- @else if $class == md {
- @media (max-width: 992px) { @content; }
- }
-
- @else if $class == lg {
- @media (max-width: 1240px) { @content; }
- }
-
- @else {
- @warn "Breakpoint mixin supports: xs, sm, md, lg";
- }
-}
\ No newline at end of file
diff --git a/site/scss/_vars.scss b/site/scss/_vars.scss
deleted file mode 100644
index 582f868..0000000
--- a/site/scss/_vars.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-$dusky-blue: #649CA7;
-$maroon: #c63082;
-$purple: #9b1c9b;
-$lightgrey: #cad1cc;
-$black: #000;
-$green: #62B859;
-$midgrey: mix($black, $lightgrey, 15%);
-$lightergrey: mix(white, $lightgrey, 70%);
-
-$accent: $purple;
-$secondary: $maroon;
diff --git a/site/scss/demo-site.scss b/site/scss/demo-site.scss
deleted file mode 100644
index e56e761..0000000
--- a/site/scss/demo-site.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import 'source/scss/cssgram';
-@import 'vars';
-@import 'mixins';
-@import 'home';
diff --git a/site/test/css/test-site.css b/site/test/css/test-site.css
deleted file mode 100644
index 50aab46..0000000
--- a/site/test/css/test-site.css
+++ /dev/null
@@ -1,64 +0,0 @@
-.test-page {
- max-width: 650px;
- line-height: 1.5;
- font-size: 1.1em;
- text-align: center;
-}
-
-.test-page a {
- border-bottom: none;
-}
-
-.test-page .logo {
- display: block;
- float: left;
- height: 100px;
- width: auto;
-}
-
-.test-page .blurb {
- display: block;
- float: left;
-
-}
-
-.test-page section {
- display: block;
- margin-bottom: 10px;
- overflow: hidden;
- width: 100%;
-}
-
-.filter-header a {
- color: #9b1c9b;
- text-decoration: none;
-}
-
-.filter-header .done.done--yep{
- color: #62B859;
-}
-
-.filter-header .done.done--nope{
- color: #c63082;
-}
-
-.headers h3{
- float: left;
- width: 50%;
-}
-
-.test-images>div {
- float: left;
- width: 50%;
-}
-
-.test-images figure {
- margin: 10px;
- padding: 0;
-}
-
-.test-images img {
- display: block;
- height: auto;
- width: 100%;
-}
diff --git a/site/test/index.html b/site/test/index.html
deleted file mode 100644
index 29e7a78..0000000
--- a/site/test/index.html
+++ /dev/null
@@ -1,3832 +0,0 @@
-
-
-
-
- CSSgram test sheet
-
- – Test sheet
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
| 
| 
| 
| 
| 
|
-|:---:|:---:|:---:|:---:|:---:|:---:|
-| 43+ ✔ | 38+ ✔ | Nope ✘ | 13 ✔ | 32+ ✔ | 8+ ✔ |
-
-你可以在这里看到最新的浏览器的支持 [Can I Use](http://caniuse.com/#feat=css-filters).
-
-## 如何使用
-
-**你可以使用下面两种方法来使用CSSgram:**
-
-### 使用 CSS Class
-
-使用`class`你可以轻松给你的图片添加各式各样的滤镜
-
-1 使用css 外链
-``` bash
-
-```
-
-*你也可直接下载压缩的[CSS文件](https://raw.githubusercontent.com/una/CSSgram/master/source/css/cssgram.min.css) 。
-
- 然后本地引用:
-`
-`
-
-然后在你的元素添加class即可生效
-
-案例:
-
-``` html
-
-
| 
| 
| 
|
-|:---:|:---:|:---:|:---:|:---:|:---:|
-| 43+ ✔ | 38+ ✔ | Nope ✘ | 13 ✔ | 32+ ✔ | 8+ ✔ |
-
-你可以在這裡看到最新的瀏覽器的支援 [Can I Use](http://caniuse.com/#feat=css-filters).
-
-## 如何使用
-¼
-**你可以使用下面兩種方法來使用CSSgram:**
-
-### 使用 CSS Class
-
-使用 css `class` 你可以輕鬆給你的圖片加上各式各樣的濾鏡
-
- 1. 在你的 `` 標籤中從 CDN 引入 css 資源 : ` `
- * 你也可直接下載 [CSSGram](https://raw.githubusercontent.com/una/CSSgram/master/source/css/cssgram.min.css) 到本地端，並且在專案中使用: ``
- * 把你想要套用的濾鏡類別套用到你的圖片元素上
-
-例如:
-
-``` html
-
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 