First release
This commit is contained in:
Owen Quinlan
commit
fa6c85266e
2339 changed files with 761050 additions and 0 deletions
1
node_modules/cssgram/site/css/1977.min.css
generated
vendored
Normal file
1
node_modules/cssgram/site/css/1977.min.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/aden.min.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/brooklyn.min.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/cssgram.min.css
generated
vendored
Normal 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
746
node_modules/cssgram/site/css/demo-site.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/demo-site.min.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/earlybird.min.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/gingham.min.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/hudson.min.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/inkwell.min.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/lofi.min.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/mayfair.min.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/nashville.min.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/perpetua.min.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/reyes.min.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/toaster.min.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/walden.min.css
generated
vendored
Normal 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
1
node_modules/cssgram/site/css/xpro2.min.css
generated
vendored
Normal 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
BIN
node_modules/cssgram/site/img/atx.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
node_modules/cssgram/site/img/bike.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/img/bike.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
node_modules/cssgram/site/img/cacti.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/img/cacti.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
node_modules/cssgram/site/img/cssgram-logo.png
generated
vendored
Normal file
BIN
node_modules/cssgram/site/img/cssgram-logo.png
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
121
node_modules/cssgram/site/img/cssgram-logo.svg
generated
vendored
Normal file
121
node_modules/cssgram/site/img/cssgram-logo.svg
generated
vendored
Normal 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>
|
||||
|
After Width: | Height: | Size: 10 KiB |
BIN
node_modules/cssgram/site/img/lakegeneva.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/img/lakegeneva.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
node_modules/cssgram/site/img/logo-temp.png
generated
vendored
Normal file
BIN
node_modules/cssgram/site/img/logo-temp.png
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
node_modules/cssgram/site/img/tahoe.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/img/tahoe.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
300
node_modules/cssgram/site/index.html
generated
vendored
Normal file
300
node_modules/cssgram/site/index.html
generated
vendored
Normal 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 (<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><img></code>. The recommendation is to wrap your images in a <code><figure></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><head></code> tag: <code><link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css"></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><link rel="stylesheet" href="css/vendor/cssgram.min.css"></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"><!-- HTML --></span>
|
||||
<figure <span class="highlight">class="aden"</span>>
|
||||
<img src="../img.png">
|
||||
</figure>
|
||||
</code></pre>
|
||||
|
||||
<small>Alternatively, you can just download and link to any individual css file: <br> <code><link rel="stylesheet" href="css/vendor/aden.min.css"></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"><!-- HTML --></span>
|
||||
<figure class=<span class="highlight">"viz--beautiful"</span>>
|
||||
<img src="../img.png">
|
||||
</figure>
|
||||
</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
299
node_modules/cssgram/site/index.twig
generated
vendored
Normal 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 (<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><img></code>. The recommendation is to wrap your images in a <code><figure></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><head></code> tag: <code><link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css"></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><link rel="stylesheet" href="css/vendor/cssgram.min.css"></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"><!-- HTML --></span>
|
||||
<figure <span class="highlight">class="aden"</span>>
|
||||
<img src="../img.png">
|
||||
</figure>
|
||||
</code></pre>
|
||||
|
||||
<small>Alternatively, you can just download and link to any individual css file: <br> <code><link rel="stylesheet" href="css/vendor/aden.min.css"></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"><!-- HTML --></span>
|
||||
<figure class=<span class="highlight">"viz--beautiful"</span>>
|
||||
<img src="../img.png">
|
||||
</figure>
|
||||
</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
329
node_modules/cssgram/site/scss/_home.scss
generated
vendored
Normal 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
23
node_modules/cssgram/site/scss/_mixins.scss
generated
vendored
Normal 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
11
node_modules/cssgram/site/scss/_vars.scss
generated
vendored
Normal 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
4
node_modules/cssgram/site/scss/demo-site.scss
generated
vendored
Normal 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
64
node_modules/cssgram/site/test/css/test-site.css
generated
vendored
Normal 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
2116
node_modules/cssgram/site/test/index.html
generated
vendored
Normal file
File diff suppressed because it is too large
Load diff
82
node_modules/cssgram/site/test/index.twig
generated
vendored
Normal file
82
node_modules/cssgram/site/test/index.twig
generated
vendored
Normal 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
BIN
node_modules/cssgram/site/test/ref/atx-aden.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-amaro.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-amaro.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-brannan.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-brannan.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-crema.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-crema.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-earlybird.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-earlybird.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-hefe.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-hefe.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-hudson.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-hudson.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-inkwell.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-inkwell.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-juno.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-juno.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-lark.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-lark.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-lofi.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-lofi.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-ludwig.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-ludwig.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-mayfair.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-mayfair.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-nashville.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-nashville.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-perpetua.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-perpetua.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-reyes.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-reyes.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-rise.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-rise.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-sierra.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-sierra.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-slumber.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-slumber.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-valencia.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-valencia.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-willow.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-willow.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
node_modules/cssgram/site/test/ref/atx-xpro2.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/atx-xpro2.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-aden.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-aden.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-amaro.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-amaro.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-brannan.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-brannan.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-crema.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-crema.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-earlybird.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-earlybird.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-hefe.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-hefe.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-hudson.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-hudson.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-inkwell.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-inkwell.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-juno.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-juno.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-lark.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-lark.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-lofi.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-lofi.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-ludwig.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-ludwig.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-mayfair.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-mayfair.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-nashville.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-nashville.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-perpetua.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-perpetua.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-reyes.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-reyes.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-rise.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-rise.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-sierra.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-sierra.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-slumber.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-slumber.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-valencia.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-valencia.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-willow.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-willow.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
BIN
node_modules/cssgram/site/test/ref/bike-xpro2.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/bike-xpro2.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-aden.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-aden.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-amaro.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-amaro.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-brannan.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-brannan.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-crema.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-crema.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-earlybird.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-earlybird.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-hefe.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-hefe.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-hudson.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-hudson.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-inkwell.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-inkwell.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-juno.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-juno.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-lark.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-lark.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-lofi.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-lofi.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-ludwig.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-ludwig.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-mayfair.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-mayfair.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-nashville.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-nashville.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-perpetua.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-perpetua.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-reyes.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-reyes.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-rise.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-rise.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 205 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-sierra.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-sierra.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-slumber.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-slumber.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-valencia.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-valencia.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 217 KiB |
BIN
node_modules/cssgram/site/test/ref/cacti-willow.jpg
generated
vendored
Normal file
BIN
node_modules/cssgram/site/test/ref/cacti-willow.jpg
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue