From 7cf50665757f799fdff0792e8d2349d02300f021 Mon Sep 17 00:00:00 2001 From: Raymond Chung Date: Wed, 12 Oct 2016 14:56:46 -0400 Subject: [PATCH] Added the stinson filter --- site/css/1977.min.css | 2 +- site/css/aden.min.css | 2 +- site/css/brannan.min.css | 2 +- site/css/brooklyn.min.css | 2 +- site/css/clarendon.min.css | 2 +- site/css/cssgram.min.css | 2 +- site/css/demo-site.css | 4307 +++++----------------------------- site/css/demo-site.min.css | 2 +- site/css/earlybird.min.css | 2 +- site/css/gingham.min.css | 2 +- site/css/hudson.min.css | 2 +- site/css/inkwell.min.css | 2 +- site/css/kelvin.min.css | 1 + site/css/lark.min.css | 2 +- site/css/lofi.min.css | 2 +- site/css/mayfair.min.css | 2 +- site/css/moon.min.css | 2 +- site/css/nashville.min.css | 2 +- site/css/perpetua.min.css | 2 +- site/css/reyes.min.css | 2 +- site/css/rise.min.css | 2 +- site/css/slumber.min.css | 2 +- site/css/stinson.min.css | 1 + site/css/toaster.min.css | 2 +- site/css/valencia.min.css | 2 +- site/css/walden.min.css | 2 +- site/css/willow.min.css | 2 +- site/css/xpro2.min.css | 2 +- site/filters.json | 4 +- site/index.html | 17 +- site/test/index.html | 2 +- source/css/1977.css | 37 +- source/css/1977.min.css | 2 +- source/css/aden.css | 37 +- source/css/aden.min.css | 2 +- source/css/brannan.css | 37 +- source/css/brannan.min.css | 2 +- source/css/brooklyn.css | 37 +- source/css/brooklyn.min.css | 2 +- source/css/clarendon.css | 37 +- source/css/clarendon.min.css | 2 +- source/css/cssgram.css | 281 ++- source/css/cssgram.min.css | 2 +- source/css/earlybird.css | 37 +- source/css/earlybird.min.css | 2 +- source/css/gingham.css | 37 +- source/css/gingham.min.css | 2 +- source/css/hudson.css | 37 +- source/css/hudson.min.css | 2 +- source/css/inkwell.css | 37 +- source/css/inkwell.min.css | 2 +- source/css/kelvin.css | 41 + source/css/kelvin.min.css | 1 + source/css/lark.css | 37 +- source/css/lark.min.css | 2 +- source/css/lofi.css | 37 +- source/css/lofi.min.css | 2 +- source/css/mayfair.css | 37 +- source/css/mayfair.min.css | 2 +- source/css/moon.css | 37 +- source/css/moon.min.css | 2 +- source/css/nashville.css | 37 +- source/css/nashville.min.css | 2 +- source/css/perpetua.css | 41 +- source/css/perpetua.min.css | 2 +- source/css/reyes.css | 37 +- source/css/reyes.min.css | 2 +- source/css/rise.css | 37 +- source/css/rise.min.css | 2 +- source/css/slumber.css | 37 +- source/css/slumber.min.css | 2 +- source/css/stinson.css | 40 + source/css/stinson.min.css | 1 + source/css/toaster.css | 37 +- source/css/toaster.min.css | 2 +- source/css/valencia.css | 37 +- source/css/valencia.min.css | 2 +- source/css/walden.css | 37 +- source/css/walden.min.css | 2 +- source/css/willow.css | 37 +- source/css/willow.min.css | 2 +- source/css/xpro2.css | 37 +- source/css/xpro2.min.css | 2 +- source/scss/cssgram.scss | 3 +- source/scss/stinson.scss | 41 + 85 files changed, 1500 insertions(+), 4193 deletions(-) create mode 100644 site/css/kelvin.min.css create mode 100644 site/css/stinson.min.css create mode 100644 source/css/kelvin.css create mode 100644 source/css/kelvin.min.css create mode 100644 source/css/stinson.css create mode 100644 source/css/stinson.min.css create mode 100644 source/scss/stinson.scss diff --git a/site/css/1977.min.css b/site/css/1977.min.css index ee9be67..b7582e1 100644 --- a/site/css/1977.min.css +++ b/site/css/1977.min.css @@ -1 +1 @@ -._1977:after,._1977:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977{position:relative;-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977 img{width:100%;z-index:1}._1977:before{z-index:2}._1977:after{z-index:3;background:rgba(243,106,188,.3);mix-blend-mode:screen} \ No newline at end of file +._1977{position:relative;-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after,._1977:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977 img{width:100%;z-index:1}._1977:before{z-index:2}._1977:after{z-index:3;background:rgba(243,106,188,.3);mix-blend-mode:screen} \ No newline at end of file diff --git a/site/css/aden.min.css b/site/css/aden.min.css index e3819b8..defb744 100644 --- a/site/css/aden.min.css +++ b/site/css/aden.min.css @@ -1 +1 @@ -.aden:after,.aden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.aden{position:relative;-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden img{width:100%;z-index:1}.aden:before{z-index:2}.aden:after{z-index:3}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken} \ No newline at end of file +.aden{position:relative;-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,.aden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.aden img{width:100%;z-index:1}.aden:before{z-index:2}.aden:after{z-index:3}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken} \ No newline at end of file diff --git a/site/css/brannan.min.css b/site/css/brannan.min.css index 3a25c89..3b75313 100644 --- a/site/css/brannan.min.css +++ b/site/css/brannan.min.css @@ -1 +1 @@ -.brannan:after,.brannan:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brannan{position:relative;-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan img{width:100%;z-index:1}.brannan:before{z-index:2}.brannan:after{z-index:3}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten} \ No newline at end of file +.brannan{position:relative;-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan:after,.brannan:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brannan img{width:100%;z-index:1}.brannan:before{z-index:2}.brannan:after{z-index:3}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten} \ No newline at end of file diff --git a/site/css/brooklyn.min.css b/site/css/brooklyn.min.css index 71a7c3d..0a10bac 100644 --- a/site/css/brooklyn.min.css +++ b/site/css/brooklyn.min.css @@ -1 +1 @@ -.brooklyn:after,.brooklyn:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brooklyn{position:relative;-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn img{width:100%;z-index:1}.brooklyn:before{z-index:2}.brooklyn:after{z-index:3}.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} \ No newline at end of file +.brooklyn{position:relative;-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn:after,.brooklyn:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brooklyn img{width:100%;z-index:1}.brooklyn:before{z-index:2}.brooklyn:after{z-index:3}.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} \ No newline at end of file diff --git a/site/css/clarendon.min.css b/site/css/clarendon.min.css index cdef66b..fe4032f 100644 --- a/site/css/clarendon.min.css +++ b/site/css/clarendon.min.css @@ -1 +1 @@ -.clarendon:after,.clarendon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.clarendon{position:relative;-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon img{width:100%;z-index:1}.clarendon:before{z-index:2;background:rgba(127,187,227,.2);mix-blend-mode:overlay}.clarendon:after{z-index:3} \ No newline at end of file +.clarendon{position:relative;-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:after,.clarendon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.clarendon img{width:100%;z-index:1}.clarendon:before{z-index:2;background:rgba(127,187,227,.2);mix-blend-mode:overlay}.clarendon:after{z-index:3} \ No newline at end of file diff --git a/site/css/cssgram.min.css b/site/css/cssgram.min.css index 5c8b20c..47469ed 100644 --- a/site/css/cssgram.min.css +++ b/site/css/cssgram.min.css @@ -1 +1 @@ -.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}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.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::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.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}.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}.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{-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{-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{-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{-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}.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{-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}.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}.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}.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}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.valencia:after,.valencia:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.valencia,.walden,.willow,.xpro2{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.valencia img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.valencia:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.valencia:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.valencia{-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5} \ No newline at end of file +.aden{position:relative;-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,.aden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.aden img{width:100%;z-index:1}.aden:before{z-index:2}.aden:after{z-index:3}.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}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{position:relative;-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.inkwell:after,.inkwell:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.inkwell img{width:100%;z-index:1}.inkwell:before{z-index:2}.inkwell:after{z-index:3}.perpetua{position:relative}.perpetua:after,.perpetua:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.perpetua img{width:100%;z-index:1}.perpetua:before{z-index:2}.perpetua:after{z-index:3}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{position:relative;-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes:after,.reyes:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.reyes img{width:100%;z-index:1}.reyes:before{z-index:2}.reyes:after{z-index:3}.reyes::after{background:#efcdad}.gingham{position:relative;-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham:after,.gingham:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.gingham img{width:100%;z-index:1}.gingham:before{z-index:2}.gingham:after{z-index:3}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{position:relative;-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster:after,.toaster:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.toaster img{width:100%;z-index:1}.toaster:before{z-index:2}.toaster:after{z-index:3}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{position:relative;-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,.walden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.walden img{width:100%;z-index:1}.walden:before{z-index:2}.walden:after{z-index:3}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{position:relative;-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson:after,.hudson:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.hudson img{width:100%;z-index:1}.hudson:before{z-index:2}.hudson:after{z-index:3}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{position:relative;-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird:after,.earlybird:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.earlybird img{width:100%;z-index:1}.earlybird:before{z-index:2}.earlybird:after{z-index:3}.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{position:relative;-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair:after,.mayfair:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.mayfair img{width:100%;z-index:1}.mayfair:before{z-index:2}.mayfair:after{z-index:3}.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}.lofi{position:relative;-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi:after,.lofi:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lofi img{width:100%;z-index:1}.lofi:before{z-index:2}.lofi:after{z-index:3}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{position:relative;-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after,._1977:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977 img{width:100%;z-index:1}._1977:before{z-index:2}._1977:after{z-index:3;background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{position:relative;-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn:after,.brooklyn:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brooklyn img{width:100%;z-index:1}.brooklyn:before{z-index:2}.brooklyn:after{z-index:3}.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}.xpro2{position:relative;-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.xpro2 img{width:100%;z-index:1}.xpro2:before{z-index:2}.xpro2:after{z-index: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}.nashville{position:relative;-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,.nashville:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.nashville img{width:100%;z-index:1}.nashville:before{z-index:2}.nashville:after{z-index:3}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{position:relative;-webkit-filter:contrast(.9);filter:contrast(.9)}.lark:after,.lark:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lark img{width:100%;z-index:1}.lark:before{z-index:2}.lark:after{z-index:3}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{position:relative;-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon:after,.moon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.moon img{width:100%;z-index:1}.moon:before{z-index:2}.moon:after{z-index:3}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{position:relative;-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:after,.clarendon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.clarendon img{width:100%;z-index:1}.clarendon:before{z-index:2;background:rgba(127,187,227,.2);mix-blend-mode:overlay}.clarendon:after{z-index:3}.willow{position:relative;-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow:after,.willow:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.willow img{width:100%;z-index:1}.willow:before{z-index:2}.willow:after{z-index:3}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{position:relative;-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise:after,.rise:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.rise img{width:100%;z-index:1}.rise:before{z-index:2}.rise:after{z-index:3}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{position:relative;-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber:after,.slumber:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.slumber img{width:100%;z-index:1}.slumber:before{z-index:2}.slumber:after{z-index:3}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.stinson{position:relative;-webkit-filter:brightness(1.24) contrast(.94) hue-rotate(12deg);filter:brightness(1.24) contrast(.94) hue-rotate(12deg)}.stinson:after,.stinson:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.stinson img{width:100%;z-index:1}.stinson:before{z-index:2}.stinson:after{z-index:3}.stinson::after{background:#ebe4de;mix-blend-mode:multiply}.brannan{position:relative;-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan:after,.brannan:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brannan img{width:100%;z-index:1}.brannan:before{z-index:2}.brannan:after{z-index:3}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}.valencia{position:relative;-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia:after,.valencia:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.valencia img{width:100%;z-index:1}.valencia:before{z-index:2}.valencia:after{z-index:3}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5}.kelvin{position:relative}.kelvin:after,.kelvin:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.kelvin img{width:100%;z-index:1}.kelvin:before{z-index:2}.kelvin:after{z-index:3}.kelvin::after{background:#b77d21;mix-blend-mode:overlay}.kelvin::before{background:#382c34;mix-blend-mode:color-dodge} \ No newline at end of file diff --git a/site/css/demo-site.css b/site/css/demo-site.css index d5d0458..a7a9342 100644 --- a/site/css/demo-site.css +++ b/site/css/demo-site.css @@ -1,329 +1,40 @@ @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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - 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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia: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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia: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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.aden { + position: relative; + -webkit-filter: hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2); + filter: hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .aden 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .aden:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .aden:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.aden { - -webkit-filter: hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2); - filter: hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2); } .aden::after { background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent); @@ -336,337 +47,77 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.inkwell { + position: relative; + -webkit-filter: sepia(0.3) contrast(1.1) brightness(1.1) grayscale(1); + filter: sepia(0.3) contrast(1.1) brightness(1.1) grayscale(1); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .inkwell 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .inkwell:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .inkwell:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - -.inkwell { - -webkit-filter: sepia(0.3) contrast(1.1) brightness(1.1) grayscale(1); - filter: sepia(0.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { +.perpetua { 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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .perpetua 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .perpetua:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .perpetua:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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; } + + .perpetua::after { + background: -webkit-linear-gradient(top, #005b9a, #e6c13d); + background: linear-gradient(to bottom, #005b9a, #e6c13d); + mix-blend-mode: soft-light; + opacity: .5; } /* * @@ -674,167 +125,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.reyes { + position: relative; + -webkit-filter: sepia(0.22) brightness(1.1) contrast(0.85) saturate(0.75); + filter: sepia(0.22) brightness(1.1) contrast(0.85) saturate(0.75); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .reyes 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .reyes:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .reyes:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.reyes { - -webkit-filter: sepia(0.22) brightness(1.1) contrast(0.85) saturate(0.75); - filter: sepia(0.22) brightness(1.1) contrast(0.85) saturate(0.75); } .reyes::after { background: #efcdad; @@ -847,167 +167,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.gingham { + position: relative; + -webkit-filter: brightness(1.05) hue-rotate(-10deg); + filter: brightness(1.05) hue-rotate(-10deg); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .gingham 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .gingham:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .gingham:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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); @@ -1020,167 +209,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.toaster { + position: relative; + -webkit-filter: contrast(1.5) brightness(0.9); + filter: contrast(1.5) brightness(0.9); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .toaster 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .toaster:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .toaster:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.toaster { - -webkit-filter: contrast(1.5) brightness(0.9); - filter: contrast(1.5) brightness(0.9); } .toaster::after { background: -webkit-radial-gradient(circle, #804e0f, #3b003b); @@ -1193,167 +251,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.walden { + position: relative; + -webkit-filter: brightness(1.1) hue-rotate(-10deg) sepia(0.3) saturate(1.6); + filter: brightness(1.1) hue-rotate(-10deg) sepia(0.3) saturate(1.6); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .walden 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .walden:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .walden:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.walden { - -webkit-filter: brightness(1.1) hue-rotate(-10deg) sepia(0.3) saturate(1.6); - filter: brightness(1.1) hue-rotate(-10deg) sepia(0.3) saturate(1.6); } .walden::after { background: #0044cc; @@ -1366,167 +293,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.hudson { + position: relative; + -webkit-filter: brightness(1.2) contrast(0.9) saturate(1.1); + filter: brightness(1.2) contrast(0.9) saturate(1.1); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .hudson 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .hudson:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .hudson:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.hudson { - -webkit-filter: brightness(1.2) contrast(0.9) saturate(1.1); - filter: brightness(1.2) contrast(0.9) saturate(1.1); } .hudson::after { background: -webkit-radial-gradient(circle, #a6b1ff 50%, #342134); @@ -1540,167 +336,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.earlybird { + position: relative; + -webkit-filter: contrast(0.9) sepia(0.2); + filter: contrast(0.9) sepia(0.2); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .earlybird 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .earlybird:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .earlybird:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.earlybird { - -webkit-filter: contrast(0.9) sepia(0.2); - filter: contrast(0.9) sepia(0.2); } .earlybird::after { background: -webkit-radial-gradient(circle, #d0ba8e 20%, #360309 85%, #1d0210 100%); @@ -1713,167 +378,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.mayfair { + position: relative; + -webkit-filter: contrast(1.1) saturate(1.1); + filter: contrast(1.1) saturate(1.1); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .mayfair 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .mayfair:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .mayfair:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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), #111111 60%); @@ -1886,167 +420,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.lofi { + position: relative; + -webkit-filter: saturate(1.1) contrast(1.5); + filter: saturate(1.1) contrast(1.5); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .lofi 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .lofi:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .lofi:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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%, #222222 150%); @@ -2058,167 +461,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +._1977 { + position: relative; + -webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3); + filter: contrast(1.1) brightness(1.1) saturate(1.3); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + ._1977 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + ._1977:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + ._1977:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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); @@ -2230,167 +502,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.brooklyn { + position: relative; + -webkit-filter: contrast(0.9) brightness(1.1); + filter: contrast(0.9) brightness(1.1); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .brooklyn 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .brooklyn:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .brooklyn:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.brooklyn { - -webkit-filter: contrast(0.9) brightness(1.1); - filter: contrast(0.9) brightness(1.1); } .brooklyn::after { background: -webkit-radial-gradient(circle, rgba(168, 223, 193, 0.4) 70%, #c4b7c8); @@ -2403,167 +544,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.xpro2 { + position: relative; + -webkit-filter: sepia(0.3); + filter: sepia(0.3); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .xpro2 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .xpro2:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .xpro2:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.xpro2 { - -webkit-filter: sepia(0.3); - filter: sepia(0.3); } .xpro2::after { background: -webkit-radial-gradient(circle, #e6e7e0 40%, rgba(43, 42, 161, 0.6) 110%); @@ -2576,167 +586,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.nashville { + position: relative; + -webkit-filter: sepia(0.2) contrast(1.2) brightness(1.05) saturate(1.2); + filter: sepia(0.2) contrast(1.2) brightness(1.05) saturate(1.2); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .nashville:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.nashville { - -webkit-filter: sepia(0.2) contrast(1.2) brightness(1.05) saturate(1.2); - filter: sepia(0.2) contrast(1.2) brightness(1.05) saturate(1.2); } .nashville::after { background: rgba(0, 70, 150, 0.4); @@ -2751,167 +630,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.lark { + position: relative; + -webkit-filter: contrast(0.9); + filter: contrast(0.9); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .lark 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .lark:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .lark:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.lark { - -webkit-filter: contrast(0.9); - filter: contrast(0.9); } .lark::after { background: rgba(242, 242, 242, 0.8); @@ -2926,167 +674,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.moon { + position: relative; + -webkit-filter: grayscale(1) contrast(1.1) brightness(1.1); + filter: grayscale(1) contrast(1.1) brightness(1.1); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .moon 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .moon:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .moon:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.moon { - -webkit-filter: grayscale(1) contrast(1.1) brightness(1.1); - filter: grayscale(1) contrast(1.1) brightness(1.1); } .moon::before { background: #a0a0a0; @@ -3101,167 +718,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.clarendon { + position: relative; + -webkit-filter: contrast(1.2) saturate(1.35); + filter: contrast(1.2) saturate(1.35); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .clarendon 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .clarendon:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .clarendon:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.clarendon { - -webkit-filter: contrast(1.2) saturate(1.35); - filter: contrast(1.2) saturate(1.35); } .clarendon:before { background: rgba(127, 187, 227, 0.2); @@ -3272,167 +758,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.willow { + position: relative; + -webkit-filter: grayscale(0.5) contrast(0.95) brightness(0.9); + filter: grayscale(0.5) contrast(0.95) brightness(0.9); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .willow 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .willow:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .willow:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.willow { - -webkit-filter: grayscale(0.5) contrast(0.95) brightness(0.9); - filter: grayscale(0.5) contrast(0.95) brightness(0.9); } .willow::before { background-color: radial-gradient(40%, circle, #d4a9af 55%, black 150%); @@ -3448,167 +803,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.rise { + position: relative; + -webkit-filter: brightness(1.05) sepia(0.2) contrast(0.9) saturate(0.9); + filter: brightness(1.05) sepia(0.2) contrast(0.9) saturate(0.9); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .rise 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .rise:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .rise:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.rise { - -webkit-filter: brightness(1.05) sepia(0.2) contrast(0.9) saturate(0.9); - filter: brightness(1.05) sepia(0.2) contrast(0.9) saturate(0.9); } .rise::after { background: -webkit-radial-gradient(circle, rgba(232, 197, 152, 0.8), transparent 90%); @@ -3627,167 +851,36 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.slumber { + position: relative; + -webkit-filter: saturate(0.66) brightness(1.05); + filter: saturate(0.66) brightness(1.05); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .slumber 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .slumber:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .slumber:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.slumber { - -webkit-filter: saturate(0.66) brightness(1.05); - filter: saturate(0.66) brightness(1.05); } .slumber::after { background: rgba(125, 105, 24, 0.5); @@ -3799,172 +892,82 @@ /* * - * Brannan + * Stinson * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, -.valencia { - position: relative; } +.stinson { + position: relative; + -webkit-filter: brightness(1.24) contrast(0.94) hue-rotate(12deg); + filter: brightness(1.24) contrast(0.94) hue-rotate(12deg); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, - .valencia img { + .stinson 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, - .valencia:before { + .stinson:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, - .valencia:after { + .stinson:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } + + .stinson::after { + background: #ebe4de; + mix-blend-mode: multiply; } +/* + * + * Brannan + * + */ .brannan { + position: relative; -webkit-filter: sepia(0.5) contrast(1.4); filter: sepia(0.5) contrast(1.4); } + .brannan img { + width: 100%; + z-index: 1; } + + .brannan:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; + z-index: 2; } + + .brannan:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; + z-index: 3; } + .brannan::after { background-color: rgba(161, 44, 199, 0.31); mix-blend-mode: lighten; } @@ -3975,173 +978,84 @@ * */ -.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, -.lark:before, -.moon:before, -.clarendon:before, -.willow:before, -.rise:before, -.slumber:before, -.brannan:before, -.valencia: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, -.lark:after, -.moon:after, -.clarendon:after, -.willow:after, -.rise:after, -.slumber:after, -.brannan:after, -.valencia: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, -.lark, -.moon, -.clarendon, -.willow, -.rise, -.slumber, -.brannan, .valencia { - position: relative; } + position: relative; + -webkit-filter: contrast(1.08) brightness(1.08) sepia(0.08); + filter: contrast(1.08) brightness(1.08) sepia(0.08); } - .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, - .lark img, - .moon img, - .clarendon img, - .willow img, - .rise img, - .slumber img, - .brannan img, .valencia 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, - .lark:before, - .moon:before, - .clarendon:before, - .willow:before, - .rise:before, - .slumber:before, - .brannan:before, .valencia:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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, - .lark:after, - .moon:after, - .clarendon:after, - .willow:after, - .rise:after, - .slumber:after, - .brannan:after, .valencia:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.valencia { - -webkit-filter: contrast(1.08) brightness(1.08) sepia(0.08); - filter: contrast(1.08) brightness(1.08) sepia(0.08); } .valencia::after { background: #3a0339; mix-blend-mode: exclusion; opacity: .5; } +/* + * Kelvin + * + */ + +.kelvin { + position: relative; } + + .kelvin img { + width: 100%; + z-index: 1; } + + .kelvin:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; + z-index: 2; } + + .kelvin:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; + z-index: 3; } + + .kelvin::after { + background: #b77d21; + mix-blend-mode: overlay; } + + .kelvin::before { + background: #382c34; + mix-blend-mode: color-dodge; } + ::-moz-selection { background: #9b1c9b; color: white; } @@ -4335,16 +1249,13 @@ img { .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; } + -ms-flex-wrap: wrap; + flex-wrap: wrap; } .demo__item { margin: .75em; diff --git a/site/css/demo-site.min.css b/site/css/demo-site.min.css index 857ca58..c2ec575 100644 --- a/site/css/demo-site.min.css +++ b/site/css/demo-site.min.css @@ -1 +1 @@ -@charset "UTF-8";body,section{overflow-x:hidden}a,figure{-webkit-transition-duration:.35s}figure,ul{margin:0;padding:0}.demo__input-area,.demo__note,hr,img{display:block}.attribution,.demo__input-area,.demo__note,.demo__subtitle,.title--top-sub,.title-section,.video-container{text-align:center}.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}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.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::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.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}.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}.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{-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{-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{-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{-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}.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{-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}.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}.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}.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}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.valencia:after,.valencia:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.valencia,.walden,.willow,.xpro2,figure{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.valencia img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.valencia:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.valencia:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.valencia{-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5}::-moz-selection{background:#9b1c9b;color:#fff}::selection{background:#9b1c9b;color:#fff}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}h1,h2{color:#9b1c9b}.highlight,em,h3{color:#c63082}code,pre{background:#eff1f0}code code,pre code{border:none;background:0 0}code{font-family:monospace;padding:.25em .5em}.highlight{font-weight:800}.comment{color:#acb2ad}ul{width:100%}ol,ul{line-height:1.8}a{text-decoration:none;color:#9b1c9b;transition-duration:.35s;border-bottom:1px solid #c63082;padding-bottom:.05em}a:focus,a:hover{color:#e398c1;border-color:#e398c1}figure{max-width:350px;max-height:350px;overflow:hidden;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){body{font-size:.9em}h1,h2{text-align:center}figure{max-width:400px;max-height:400px}}figure:focus,figure:hover{-webkit-filter:none!important;filter:none!important}figure:focus::after,figure:focus::before,figure:hover::after,figure:hover::before{opacity:0!important}figcaption{position:absolute;bottom:1em;right:0;padding:.25em 1em .25em .25em;background:#000;color:#fff;font-weight:200}hr{clear:both;float:none;border:1px solid #eff1f0;margin:2em auto}img{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}.demo__note{font-style:italic;margin:2em auto 0}.demo__input-area{font-size:1em;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:0;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}}.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__option-img{height:60px}.demo__item{margin:.5em 0}.title--top-sub{font-size:1.2em}}.title-section{width:100%}.title--logo{max-width:400px}.title--top-sub{font-weight:200;margin:0 auto;max-width:26em}.explanation-section,.how-to-section{font-size:1.2em;font-weight:300;max-width:40em;margin:0 auto;display:block}.attribution{padding:1em 0 4em}.callout{max-width:14em;background:#eff1f0;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}}#snapshot,.take-photo{font-size:1em;font-weight:300;cursor:pointer;border:1px dashed #9b1c9b;outline:0;vertical-align:top}.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}.take-photo{color:#9b1c9b;width:150px;height:150px;display:inline-block;background:0 0;-webkit-transition-duration:.25s;transition-duration:.25s}#snapshot:hover,.take-photo:hover{background:#c63082;color:#fff}.video-container{margin-top:2em;max-height:0;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.video-container video{margin:0 auto;display:block}#snapshot{margin:1em auto 0;color:#9b1c9b;display:inline-block;background:0 0;-webkit-transition-duration:.25s;transition-duration:.25s} \ No newline at end of file +@charset "UTF-8";body,section{overflow-x:hidden}a,figure{-webkit-transition-duration:.35s}figure,ul{margin:0;padding:0}.attribution,.demo__input-area,.demo__note,.demo__subtitle,.title--top-sub,.title-section,.video-container{text-align:center}.aden{position:relative;-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,.aden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.aden img{width:100%;z-index:1}.aden:before{z-index:2}.aden:after{z-index:3}.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}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{position:relative;-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.inkwell:after,.inkwell:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.inkwell img{width:100%;z-index:1}.inkwell:before{z-index:2}.inkwell:after{z-index:3}.perpetua{position:relative}.perpetua:after,.perpetua:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.perpetua img{width:100%;z-index:1}.perpetua:before{z-index:2}.perpetua:after{z-index:3}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{position:relative;-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes:after,.reyes:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.reyes img{width:100%;z-index:1}.reyes:before{z-index:2}.reyes:after{z-index:3}.reyes::after{background:#efcdad}.gingham{position:relative;-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham:after,.gingham:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.gingham img{width:100%;z-index:1}.gingham:before{z-index:2}.gingham:after{z-index:3}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{position:relative;-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster:after,.toaster:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.toaster img{width:100%;z-index:1}.toaster:before{z-index:2}.toaster:after{z-index:3}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{position:relative;-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,.walden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.walden img{width:100%;z-index:1}.walden:before{z-index:2}.walden:after{z-index:3}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{position:relative;-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson:after,.hudson:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.hudson img{width:100%;z-index:1}.hudson:before{z-index:2}.hudson:after{z-index:3}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{position:relative;-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird:after,.earlybird:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.earlybird img{width:100%;z-index:1}.earlybird:before{z-index:2}.earlybird:after{z-index:3}.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{position:relative;-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair:after,.mayfair:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.mayfair img{width:100%;z-index:1}.mayfair:before{z-index:2}.mayfair:after{z-index:3}.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}.lofi{position:relative;-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi:after,.lofi:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lofi img{width:100%;z-index:1}.lofi:before{z-index:2}.lofi:after{z-index:3}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{position:relative;-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after,._1977:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977 img{width:100%;z-index:1}._1977:before{z-index:2}._1977:after{z-index:3;background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{position:relative;-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn:after,.brooklyn:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brooklyn img{width:100%;z-index:1}.brooklyn:before{z-index:2}.brooklyn:after{z-index:3}.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}.xpro2{position:relative;-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.xpro2 img{width:100%;z-index:1}.xpro2:before{z-index:2}.xpro2:after{z-index: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}.nashville{position:relative;-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,.nashville:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.nashville img{width:100%;z-index:1}.nashville:before{z-index:2}.nashville:after{z-index:3}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{position:relative;-webkit-filter:contrast(.9);filter:contrast(.9)}.lark:after,.lark:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lark img{width:100%;z-index:1}.lark:before{z-index:2}.lark:after{z-index:3}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{position:relative;-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon:after,.moon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.moon img{width:100%;z-index:1}.moon:before{z-index:2}.moon:after{z-index:3}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{position:relative;-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:after,.clarendon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.clarendon img{width:100%;z-index:1}.clarendon:before{z-index:2;background:rgba(127,187,227,.2);mix-blend-mode:overlay}.clarendon:after{z-index:3}.willow{position:relative;-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow:after,.willow:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.willow img{width:100%;z-index:1}.willow:before{z-index:2}.willow:after{z-index:3}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{position:relative;-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise:after,.rise:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.rise img{width:100%;z-index:1}.rise:before{z-index:2}.rise:after{z-index:3}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{position:relative;-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber:after,.slumber:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.slumber img{width:100%;z-index:1}.slumber:before{z-index:2}.slumber:after{z-index:3}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.stinson{position:relative;-webkit-filter:brightness(1.24) contrast(.94) hue-rotate(12deg);filter:brightness(1.24) contrast(.94) hue-rotate(12deg)}.stinson:after,.stinson:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.stinson img{width:100%;z-index:1}.stinson:before{z-index:2}.stinson:after{z-index:3}.stinson::after{background:#ebe4de;mix-blend-mode:multiply}.brannan{position:relative;-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan:after,.brannan:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brannan img{width:100%;z-index:1}.brannan:before{z-index:2}.brannan:after{z-index:3}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}.valencia{position:relative;-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia:after,.valencia:before{position:absolute;content:'';height:100%;top:0;left:0;pointer-events:none;width:100%;display:block}.valencia img{width:100%;z-index:1}.valencia:before{z-index:2}.valencia:after{z-index:3}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5}.kelvin{position:relative}.kelvin img{width:100%;z-index:1}.kelvin:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none;z-index:2}.kelvin:after{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none;z-index:3}.kelvin::after{background:#b77d21;mix-blend-mode:overlay}.kelvin::before{background:#382c34;mix-blend-mode:color-dodge}::-moz-selection{background:#9b1c9b;color:#fff}::selection{background:#9b1c9b;color:#fff}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}h1,h2{color:#9b1c9b}.highlight,em,h3{color:#c63082}code,pre{background:#eff1f0}code code,pre code{border:none;background:0 0}code{font-family:monospace;padding:.25em .5em}.highlight{font-weight:800}.comment{color:#acb2ad}ul{width:100%}ol,ul{line-height:1.8}a{text-decoration:none;color:#9b1c9b;transition-duration:.35s;border-bottom:1px solid #c63082;padding-bottom:.05em}a:focus,a:hover{color:#e398c1;border-color:#e398c1}figure{max-width:350px;max-height:350px;overflow:hidden;position:relative;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){body{font-size:.9em}h1,h2{text-align:center}figure{max-width:400px;max-height:400px}}figure:focus,figure:hover{-webkit-filter:none!important;filter:none!important}figure:focus::after,figure:focus::before,figure:hover::after,figure:hover::before{opacity:0!important}figcaption{position:absolute;bottom:1em;right:0;padding:.25em 1em .25em .25em;background:#000;color:#fff;font-weight:200}hr{clear:both;float:none;border:1px solid #eff1f0;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}.demo__note{font-style:italic;display:block;margin:2em auto 0}.demo__input-area{display:block;font-size:1em;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:0;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}}.demo__list{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-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__option-img{height:60px}.demo__item{margin:.5em 0}.title--top-sub{font-size:1.2em}}.title-section{width:100%}.title--logo{max-width:400px}.title--top-sub{font-weight:200;margin:0 auto;max-width:26em}.explanation-section,.how-to-section{font-size:1.2em;font-weight:300;max-width:40em;margin:0 auto;display:block}.attribution{padding:1em 0 4em}.callout{max-width:14em;background:#eff1f0;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}}#snapshot,.take-photo{font-size:1em;font-weight:300;cursor:pointer;border:1px dashed #9b1c9b;outline:0;vertical-align:top}.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}.take-photo{color:#9b1c9b;width:150px;height:150px;display:inline-block;background:0 0;-webkit-transition-duration:.25s;transition-duration:.25s}#snapshot:hover,.take-photo:hover{background:#c63082;color:#fff}.video-container{margin-top:2em;max-height:0;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.video-container video{margin:0 auto;display:block}#snapshot{margin:1em auto 0;color:#9b1c9b;display:inline-block;background:0 0;-webkit-transition-duration:.25s;transition-duration:.25s} \ No newline at end of file diff --git a/site/css/earlybird.min.css b/site/css/earlybird.min.css index dd72762..f1cabf9 100644 --- a/site/css/earlybird.min.css +++ b/site/css/earlybird.min.css @@ -1 +1 @@ -.earlybird:after,.earlybird:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.earlybird{position:relative;-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird img{width:100%;z-index:1}.earlybird:before{z-index:2}.earlybird:after{z-index:3}.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} \ No newline at end of file +.earlybird{position:relative;-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird:after,.earlybird:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.earlybird img{width:100%;z-index:1}.earlybird:before{z-index:2}.earlybird:after{z-index:3}.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} \ No newline at end of file diff --git a/site/css/gingham.min.css b/site/css/gingham.min.css index f2dc80b..e69cb24 100644 --- a/site/css/gingham.min.css +++ b/site/css/gingham.min.css @@ -1 +1 @@ -.gingham:after,.gingham:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.gingham{position:relative;-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham img{width:100%;z-index:1}.gingham:before{z-index:2}.gingham:after{z-index:3}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken} \ No newline at end of file +.gingham{position:relative;-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham:after,.gingham:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.gingham img{width:100%;z-index:1}.gingham:before{z-index:2}.gingham:after{z-index:3}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken} \ No newline at end of file diff --git a/site/css/hudson.min.css b/site/css/hudson.min.css index 334a161..65c801b 100644 --- a/site/css/hudson.min.css +++ b/site/css/hudson.min.css @@ -1 +1 @@ -.hudson:after,.hudson:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.hudson{position:relative;-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson img{width:100%;z-index:1}.hudson:before{z-index:2}.hudson:after{z-index:3}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5} \ No newline at end of file +.hudson{position:relative;-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson:after,.hudson:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.hudson img{width:100%;z-index:1}.hudson:before{z-index:2}.hudson:after{z-index:3}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5} \ No newline at end of file diff --git a/site/css/inkwell.min.css b/site/css/inkwell.min.css index 082c158..a0dc5e1 100644 --- a/site/css/inkwell.min.css +++ b/site/css/inkwell.min.css @@ -1 +1 @@ -.inkwell:after,.inkwell:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.inkwell{position:relative;-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.inkwell img{width:100%;z-index:1}.inkwell:before{z-index:2}.inkwell:after{z-index:3} \ No newline at end of file +.inkwell{position:relative;-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.inkwell:after,.inkwell:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.inkwell img{width:100%;z-index:1}.inkwell:before{z-index:2}.inkwell:after{z-index:3} \ No newline at end of file diff --git a/site/css/kelvin.min.css b/site/css/kelvin.min.css new file mode 100644 index 0000000..7560361 --- /dev/null +++ b/site/css/kelvin.min.css @@ -0,0 +1 @@ +.kelvin{position:relative}.kelvin:after,.kelvin:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.kelvin img{width:100%;z-index:1}.kelvin:before{z-index:2}.kelvin:after{z-index:3}.kelvin::after{background:#b77d21;mix-blend-mode:overlay}.kelvin::before{background:#382c34;mix-blend-mode:color-dodge} \ No newline at end of file diff --git a/site/css/lark.min.css b/site/css/lark.min.css index d412c8d..31255c1 100644 --- a/site/css/lark.min.css +++ b/site/css/lark.min.css @@ -1 +1 @@ -.lark:after,.lark:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lark{position:relative;-webkit-filter:contrast(.9);filter:contrast(.9)}.lark img{width:100%;z-index:1}.lark:before{z-index:2}.lark:after{z-index:3}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge} \ No newline at end of file +.lark{position:relative;-webkit-filter:contrast(.9);filter:contrast(.9)}.lark:after,.lark:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lark img{width:100%;z-index:1}.lark:before{z-index:2}.lark:after{z-index:3}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge} \ No newline at end of file diff --git a/site/css/lofi.min.css b/site/css/lofi.min.css index cdd0df0..b1a61cf 100644 --- a/site/css/lofi.min.css +++ b/site/css/lofi.min.css @@ -1 +1 @@ -.lofi:after,.lofi:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lofi{position:relative;-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi img{width:100%;z-index:1}.lofi:before{z-index:2}.lofi:after{z-index:3}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply} \ No newline at end of file +.lofi{position:relative;-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi:after,.lofi:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lofi img{width:100%;z-index:1}.lofi:before{z-index:2}.lofi:after{z-index:3}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply} \ No newline at end of file diff --git a/site/css/mayfair.min.css b/site/css/mayfair.min.css index 0b54183..004db56 100644 --- a/site/css/mayfair.min.css +++ b/site/css/mayfair.min.css @@ -1 +1 @@ -.mayfair:after,.mayfair:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.mayfair{position:relative;-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair img{width:100%;z-index:1}.mayfair:before{z-index:2}.mayfair:after{z-index:3}.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} \ No newline at end of file +.mayfair{position:relative;-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair:after,.mayfair:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.mayfair img{width:100%;z-index:1}.mayfair:before{z-index:2}.mayfair:after{z-index:3}.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} \ No newline at end of file diff --git a/site/css/moon.min.css b/site/css/moon.min.css index 2ed21ac..c7c43ff 100644 --- a/site/css/moon.min.css +++ b/site/css/moon.min.css @@ -1 +1 @@ -.moon:after,.moon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.moon{position:relative;-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon img{width:100%;z-index:1}.moon:before{z-index:2}.moon:after{z-index:3}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten} \ No newline at end of file +.moon{position:relative;-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon:after,.moon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.moon img{width:100%;z-index:1}.moon:before{z-index:2}.moon:after{z-index:3}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten} \ No newline at end of file diff --git a/site/css/nashville.min.css b/site/css/nashville.min.css index 014ed23..81eb00a 100644 --- a/site/css/nashville.min.css +++ b/site/css/nashville.min.css @@ -1 +1 @@ -.nashville:after,.nashville:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.nashville{position:relative;-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 img{width:100%;z-index:1}.nashville:before{z-index:2}.nashville:after{z-index:3}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken} \ No newline at end of file +.nashville{position:relative;-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,.nashville:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.nashville img{width:100%;z-index:1}.nashville:before{z-index:2}.nashville:after{z-index:3}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken} \ No newline at end of file diff --git a/site/css/perpetua.min.css b/site/css/perpetua.min.css index 5c8fc45..ff9b159 100644 --- a/site/css/perpetua.min.css +++ b/site/css/perpetua.min.css @@ -1 +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}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d);mix-blend-mode:soft-light;opacity:.5} \ No newline at end of file +.perpetua{position:relative}.perpetua:after,.perpetua:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.perpetua img{width:100%;z-index:1}.perpetua:before{z-index:2}.perpetua: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} \ No newline at end of file diff --git a/site/css/reyes.min.css b/site/css/reyes.min.css index 7c2a10d..6024edc 100644 --- a/site/css/reyes.min.css +++ b/site/css/reyes.min.css @@ -1 +1 @@ -.reyes:after,.reyes:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.reyes{position:relative;-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes img{width:100%;z-index:1}.reyes:before{z-index:2}.reyes:after{z-index:3}.reyes::after{background:#efcdad;mix-blend-mode:soft-light;opacity:.5} \ No newline at end of file +.reyes{position:relative;-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes:after,.reyes:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.reyes img{width:100%;z-index:1}.reyes:before{z-index:2}.reyes:after{z-index:3}.reyes::after{background:#efcdad;mix-blend-mode:soft-light;opacity:.5} \ No newline at end of file diff --git a/site/css/rise.min.css b/site/css/rise.min.css index 092540e..a70471e 100644 --- a/site/css/rise.min.css +++ b/site/css/rise.min.css @@ -1 +1 @@ -.rise:after,.rise:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.rise{position:relative;-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise img{width:100%;z-index:1}.rise:before{z-index:2}.rise:after{z-index:3}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply} \ No newline at end of file +.rise{position:relative;-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise:after,.rise:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.rise img{width:100%;z-index:1}.rise:before{z-index:2}.rise:after{z-index:3}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply} \ No newline at end of file diff --git a/site/css/slumber.min.css b/site/css/slumber.min.css index 3aa0e75..7e7ae5c 100644 --- a/site/css/slumber.min.css +++ b/site/css/slumber.min.css @@ -1 +1 @@ -.slumber:after,.slumber:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.slumber{position:relative;-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber img{width:100%;z-index:1}.slumber:before{z-index:2}.slumber:after{z-index:3}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten} \ No newline at end of file +.slumber{position:relative;-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber:after,.slumber:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.slumber img{width:100%;z-index:1}.slumber:before{z-index:2}.slumber:after{z-index:3}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten} \ No newline at end of file diff --git a/site/css/stinson.min.css b/site/css/stinson.min.css new file mode 100644 index 0000000..5163c24 --- /dev/null +++ b/site/css/stinson.min.css @@ -0,0 +1 @@ +.stinson{position:relative;-webkit-filter:brightness(1.24) contrast(.94) hue-rotate(12deg);filter:brightness(1.24) contrast(.94) hue-rotate(12deg)}.stinson:after,.stinson:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.stinson img{width:100%;z-index:1}.stinson:before{z-index:2}.stinson:after{z-index:3}.stinson::after{background:#ebe4de;mix-blend-mode:multiply} \ No newline at end of file diff --git a/site/css/toaster.min.css b/site/css/toaster.min.css index 8beefc4..f2c2098 100644 --- a/site/css/toaster.min.css +++ b/site/css/toaster.min.css @@ -1 +1 @@ -.toaster:after,.toaster:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.toaster{position:relative;-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster img{width:100%;z-index:1}.toaster:before{z-index:2}.toaster:after{z-index:3}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen} \ No newline at end of file +.toaster{position:relative;-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster:after,.toaster:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.toaster img{width:100%;z-index:1}.toaster:before{z-index:2}.toaster:after{z-index:3}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen} \ No newline at end of file diff --git a/site/css/valencia.min.css b/site/css/valencia.min.css index 7839daf..2adbc34 100644 --- a/site/css/valencia.min.css +++ b/site/css/valencia.min.css @@ -1 +1 @@ -.valencia:after,.valencia:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.valencia{position:relative;-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia img{width:100%;z-index:1}.valencia:before{z-index:2}.valencia:after{z-index:3}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5} \ No newline at end of file +.valencia{position:relative;-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia:after,.valencia:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.valencia img{width:100%;z-index:1}.valencia:before{z-index:2}.valencia:after{z-index:3}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5} \ No newline at end of file diff --git a/site/css/walden.min.css b/site/css/walden.min.css index ea2e6eb..bd6e95f 100644 --- a/site/css/walden.min.css +++ b/site/css/walden.min.css @@ -1 +1 @@ -.walden:after,.walden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.walden{position:relative;-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 img{width:100%;z-index:1}.walden:before{z-index:2}.walden:after{z-index:3}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3} \ No newline at end of file +.walden{position:relative;-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,.walden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.walden img{width:100%;z-index:1}.walden:before{z-index:2}.walden:after{z-index:3}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3} \ No newline at end of file diff --git a/site/css/willow.min.css b/site/css/willow.min.css index 4b00dca..32e76b0 100644 --- a/site/css/willow.min.css +++ b/site/css/willow.min.css @@ -1 +1 @@ -.willow:after,.willow:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.willow{position:relative;-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow img{width:100%;z-index:1}.willow:before{z-index:2}.willow:after{z-index:3}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color} \ No newline at end of file +.willow{position:relative;-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow:after,.willow:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.willow img{width:100%;z-index:1}.willow:before{z-index:2}.willow:after{z-index:3}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color} \ No newline at end of file diff --git a/site/css/xpro2.min.css b/site/css/xpro2.min.css index dfc5050..d7ac0a6 100644 --- a/site/css/xpro2.min.css +++ b/site/css/xpro2.min.css @@ -1 +1 @@ -.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.xpro2{position:relative;-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2 img{width:100%;z-index:1}.xpro2:before{z-index:2}.xpro2:after{z-index: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} \ No newline at end of file +.xpro2{position:relative;-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.xpro2 img{width:100%;z-index:1}.xpro2:before{z-index:2}.xpro2:after{z-index: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} \ No newline at end of file diff --git a/site/filters.json b/site/filters.json index de5138e..c26d3a3 100644 --- a/site/filters.json +++ b/site/filters.json @@ -162,7 +162,7 @@ }, { "name": "Stinson", - "is_done": false, + "is_done": true, "usage": "stinson" }, { @@ -203,4 +203,4 @@ ], "images": ["atx", "bike", "cacti", "lakegeneva", "tahoe"] -} \ No newline at end of file +} diff --git a/site/index.html b/site/index.html index 2643312..5004bac 100644 --- a/site/index.html +++ b/site/index.html @@ -165,7 +165,13 @@

A tiny (<1kb gzipped!) library for recreating Slumber -
  • +
  • +
    + +
    Stinson
    +
    +
    • +
  • Toaster
    @@ -274,7 +280,8 @@

    Available Classes

  • Reyes: class="reyes"
  • Rise: class="rise"
  • Slumber: class="slumber"
    • -
  • Toaster: class="toaster"
    • +
  • Stinson: class="stinson"
    • +
  • Toaster: class="toaster"
  • Valencia: class="valencia"
  • Walden: class="walden"
  • Willow: class="willow"
    • @@ -332,7 +339,8 @@

    Available Extends

  • Reyes: @extend %reyes;
  • Rise: @extend %rise;
  • Slumber: @extend %slumber;
    • -
  • Toaster: @extend %toaster;
    • +
  • Stinson: @extend %stinson;
    • +
  • Toaster: @extend %toaster;
  • Valencia: @extend %valencia;
  • Walden: @extend %walden;
  • Willow: @extend %willow;
    • @@ -396,7 +404,8 @@

    Available Mixins

  • Reyes: @include reyes();
  • Rise: @include rise();
  • Slumber: @include slumber();
    • -
  • Toaster: @include toaster();
    • +
  • Stinson: @include stinson();
    • +
  • Toaster: @include toaster();
  • Valencia: @include valencia();
  • Walden: @include walden();
  • Willow: @include willow();
    • diff --git a/site/test/index.html b/site/test/index.html index cbce576..3a89ea0 100644 --- a/site/test/index.html +++ b/site/test/index.html @@ -3067,7 +3067,7 @@

    CSSgram

    -

    Stinson ✗

    +

    Stinson ✓

    Instagram

    diff --git a/source/css/1977.css b/source/css/1977.css index d78ef21..75d8f08 100644 --- a/source/css/1977.css +++ b/source/css/1977.css @@ -3,35 +3,36 @@ * */ -._1977:before, -._1977:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - ._1977 { - position: relative; } + position: relative; + -webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3); + filter: contrast(1.1) brightness(1.1) saturate(1.3); } ._1977 img { width: 100%; z-index: 1; } ._1977:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } ._1977:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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); diff --git a/source/css/1977.min.css b/source/css/1977.min.css index ee9be67..b7582e1 100644 --- a/source/css/1977.min.css +++ b/source/css/1977.min.css @@ -1 +1 @@ -._1977:after,._1977:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977{position:relative;-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977 img{width:100%;z-index:1}._1977:before{z-index:2}._1977:after{z-index:3;background:rgba(243,106,188,.3);mix-blend-mode:screen} \ No newline at end of file +._1977{position:relative;-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after,._1977:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977 img{width:100%;z-index:1}._1977:before{z-index:2}._1977:after{z-index:3;background:rgba(243,106,188,.3);mix-blend-mode:screen} \ No newline at end of file diff --git a/source/css/aden.css b/source/css/aden.css index 796874e..2aac91b 100644 --- a/source/css/aden.css +++ b/source/css/aden.css @@ -4,35 +4,36 @@ * */ -.aden:before, -.aden:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .aden { - position: relative; } + position: relative; + -webkit-filter: hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2); + filter: hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2); } .aden img { width: 100%; z-index: 1; } .aden:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .aden:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.aden { - -webkit-filter: hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2); - filter: hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2); } .aden::after { background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent); diff --git a/source/css/aden.min.css b/source/css/aden.min.css index e3819b8..defb744 100644 --- a/source/css/aden.min.css +++ b/source/css/aden.min.css @@ -1 +1 @@ -.aden:after,.aden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.aden{position:relative;-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden img{width:100%;z-index:1}.aden:before{z-index:2}.aden:after{z-index:3}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken} \ No newline at end of file +.aden{position:relative;-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,.aden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.aden img{width:100%;z-index:1}.aden:before{z-index:2}.aden:after{z-index:3}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken} \ No newline at end of file diff --git a/source/css/brannan.css b/source/css/brannan.css index 6a65de2..b1b9c76 100644 --- a/source/css/brannan.css +++ b/source/css/brannan.css @@ -4,35 +4,36 @@ * */ -.brannan:before, -.brannan:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .brannan { - position: relative; } + position: relative; + -webkit-filter: sepia(0.5) contrast(1.4); + filter: sepia(0.5) contrast(1.4); } .brannan img { width: 100%; z-index: 1; } .brannan:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .brannan:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.brannan { - -webkit-filter: sepia(0.5) contrast(1.4); - filter: sepia(0.5) contrast(1.4); } .brannan::after { background-color: rgba(161, 44, 199, 0.31); diff --git a/source/css/brannan.min.css b/source/css/brannan.min.css index 3a25c89..3b75313 100644 --- a/source/css/brannan.min.css +++ b/source/css/brannan.min.css @@ -1 +1 @@ -.brannan:after,.brannan:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brannan{position:relative;-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan img{width:100%;z-index:1}.brannan:before{z-index:2}.brannan:after{z-index:3}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten} \ No newline at end of file +.brannan{position:relative;-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan:after,.brannan:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brannan img{width:100%;z-index:1}.brannan:before{z-index:2}.brannan:after{z-index:3}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten} \ No newline at end of file diff --git a/source/css/brooklyn.css b/source/css/brooklyn.css index 312c4cb..b98844e 100644 --- a/source/css/brooklyn.css +++ b/source/css/brooklyn.css @@ -4,35 +4,36 @@ * */ -.brooklyn:before, -.brooklyn:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .brooklyn { - position: relative; } + position: relative; + -webkit-filter: contrast(0.9) brightness(1.1); + filter: contrast(0.9) brightness(1.1); } .brooklyn img { width: 100%; z-index: 1; } .brooklyn:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .brooklyn:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.brooklyn { - -webkit-filter: contrast(0.9) brightness(1.1); - filter: contrast(0.9) brightness(1.1); } .brooklyn::after { background: -webkit-radial-gradient(circle, rgba(168, 223, 193, 0.4) 70%, #c4b7c8); diff --git a/source/css/brooklyn.min.css b/source/css/brooklyn.min.css index 71a7c3d..0a10bac 100644 --- a/source/css/brooklyn.min.css +++ b/source/css/brooklyn.min.css @@ -1 +1 @@ -.brooklyn:after,.brooklyn:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brooklyn{position:relative;-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn img{width:100%;z-index:1}.brooklyn:before{z-index:2}.brooklyn:after{z-index:3}.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} \ No newline at end of file +.brooklyn{position:relative;-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn:after,.brooklyn:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brooklyn img{width:100%;z-index:1}.brooklyn:before{z-index:2}.brooklyn:after{z-index:3}.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} \ No newline at end of file diff --git a/source/css/clarendon.css b/source/css/clarendon.css index 77cd77c..03bb684 100644 --- a/source/css/clarendon.css +++ b/source/css/clarendon.css @@ -3,35 +3,36 @@ * */ -.clarendon:before, -.clarendon:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .clarendon { - position: relative; } + position: relative; + -webkit-filter: contrast(1.2) saturate(1.35); + filter: contrast(1.2) saturate(1.35); } .clarendon img { width: 100%; z-index: 1; } .clarendon:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .clarendon:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.clarendon { - -webkit-filter: contrast(1.2) saturate(1.35); - filter: contrast(1.2) saturate(1.35); } .clarendon:before { background: rgba(127, 187, 227, 0.2); diff --git a/source/css/clarendon.min.css b/source/css/clarendon.min.css index cdef66b..fe4032f 100644 --- a/source/css/clarendon.min.css +++ b/source/css/clarendon.min.css @@ -1 +1 @@ -.clarendon:after,.clarendon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.clarendon{position:relative;-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon img{width:100%;z-index:1}.clarendon:before{z-index:2;background:rgba(127,187,227,.2);mix-blend-mode:overlay}.clarendon:after{z-index:3} \ No newline at end of file +.clarendon{position:relative;-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:after,.clarendon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.clarendon img{width:100%;z-index:1}.clarendon:before{z-index:2;background:rgba(127,187,227,.2);mix-blend-mode:overlay}.clarendon:after{z-index:3} \ No newline at end of file diff --git a/source/css/cssgram.css b/source/css/cssgram.css index 22729b0..0234468 100644 --- a/source/css/cssgram.css +++ b/source/css/cssgram.css @@ -3,12 +3,16 @@ * Aden * */ + .aden { position: relative; - filter: hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2); } + -webkit-filter: hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2); + filter: hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2); } + .aden img { width: 100%; z-index: 1; } + .aden:before { content: ''; display: block; @@ -19,6 +23,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .aden:after { content: ''; display: block; @@ -29,7 +34,9 @@ position: absolute; pointer-events: none; z-index: 3; } + .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; } @@ -38,12 +45,16 @@ * Inkwell * */ + .inkwell { position: relative; - filter: sepia(0.3) contrast(1.1) brightness(1.1) grayscale(1); } + -webkit-filter: sepia(0.3) contrast(1.1) brightness(1.1) grayscale(1); + filter: sepia(0.3) contrast(1.1) brightness(1.1) grayscale(1); } + .inkwell img { width: 100%; z-index: 1; } + .inkwell:before { content: ''; display: block; @@ -54,6 +65,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .inkwell:after { content: ''; display: block; @@ -70,11 +82,14 @@ * Perpetua * */ + .perpetua { position: relative; } + .perpetua img { width: 100%; z-index: 1; } + .perpetua:before { content: ''; display: block; @@ -85,6 +100,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .perpetua:after { content: ''; display: block; @@ -95,7 +111,9 @@ position: absolute; pointer-events: none; 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; } @@ -105,12 +123,16 @@ * Reyes * */ + .reyes { position: relative; - filter: sepia(0.22) brightness(1.1) contrast(0.85) saturate(0.75); } + -webkit-filter: sepia(0.22) brightness(1.1) contrast(0.85) saturate(0.75); + filter: sepia(0.22) brightness(1.1) contrast(0.85) saturate(0.75); } + .reyes img { width: 100%; z-index: 1; } + .reyes:before { content: ''; display: block; @@ -121,6 +143,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .reyes:after { content: ''; display: block; @@ -131,6 +154,7 @@ position: absolute; pointer-events: none; z-index: 3; } + .reyes::after { background: #efcdad; mix-blend-mode: soft-light; @@ -141,12 +165,16 @@ * Gingham * */ + .gingham { position: relative; - filter: brightness(1.05) hue-rotate(-10deg); } + -webkit-filter: brightness(1.05) hue-rotate(-10deg); + filter: brightness(1.05) hue-rotate(-10deg); } + .gingham img { width: 100%; z-index: 1; } + .gingham:before { content: ''; display: block; @@ -157,6 +185,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .gingham:after { content: ''; display: block; @@ -167,7 +196,9 @@ position: absolute; pointer-events: none; z-index: 3; } + .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; } @@ -176,12 +207,16 @@ * Toaster * */ + .toaster { position: relative; - filter: contrast(1.5) brightness(0.9); } + -webkit-filter: contrast(1.5) brightness(0.9); + filter: contrast(1.5) brightness(0.9); } + .toaster img { width: 100%; z-index: 1; } + .toaster:before { content: ''; display: block; @@ -192,6 +227,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .toaster:after { content: ''; display: block; @@ -202,7 +238,9 @@ position: absolute; pointer-events: none; z-index: 3; } + .toaster::after { + background: -webkit-radial-gradient(circle, #804e0f, #3b003b); background: radial-gradient(circle, #804e0f, #3b003b); mix-blend-mode: screen; } @@ -211,12 +249,16 @@ * Walden * */ + .walden { position: relative; - filter: brightness(1.1) hue-rotate(-10deg) sepia(0.3) saturate(1.6); } + -webkit-filter: brightness(1.1) hue-rotate(-10deg) sepia(0.3) saturate(1.6); + filter: brightness(1.1) hue-rotate(-10deg) sepia(0.3) saturate(1.6); } + .walden img { width: 100%; z-index: 1; } + .walden:before { content: ''; display: block; @@ -227,6 +269,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .walden:after { content: ''; display: block; @@ -237,6 +280,7 @@ position: absolute; pointer-events: none; z-index: 3; } + .walden::after { background: #0044cc; mix-blend-mode: screen; @@ -247,12 +291,16 @@ * Hudson * */ + .hudson { position: relative; - filter: brightness(1.2) contrast(0.9) saturate(1.1); } + -webkit-filter: brightness(1.2) contrast(0.9) saturate(1.1); + filter: brightness(1.2) contrast(0.9) saturate(1.1); } + .hudson img { width: 100%; z-index: 1; } + .hudson:before { content: ''; display: block; @@ -263,6 +311,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .hudson:after { content: ''; display: block; @@ -273,7 +322,9 @@ position: absolute; pointer-events: none; z-index: 3; } + .hudson::after { + background: -webkit-radial-gradient(circle, #a6b1ff 50%, #342134); background: radial-gradient(circle, #a6b1ff 50%, #342134); mix-blend-mode: multiply; opacity: .5; } @@ -283,12 +334,16 @@ * Earlybird * */ + .earlybird { position: relative; - filter: contrast(0.9) sepia(0.2); } + -webkit-filter: contrast(0.9) sepia(0.2); + filter: contrast(0.9) sepia(0.2); } + .earlybird img { width: 100%; z-index: 1; } + .earlybird:before { content: ''; display: block; @@ -299,6 +354,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .earlybird:after { content: ''; display: block; @@ -309,7 +365,9 @@ position: absolute; pointer-events: none; z-index: 3; } + .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; } @@ -318,12 +376,16 @@ * Mayfair * */ + .mayfair { position: relative; - filter: contrast(1.1) saturate(1.1); } + -webkit-filter: contrast(1.1) saturate(1.1); + filter: contrast(1.1) saturate(1.1); } + .mayfair img { width: 100%; z-index: 1; } + .mayfair:before { content: ''; display: block; @@ -334,6 +396,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .mayfair:after { content: ''; display: block; @@ -344,7 +407,9 @@ position: absolute; pointer-events: none; z-index: 3; } + .mayfair::after { + background: -webkit-radial-gradient(40% 40%, circle, rgba(255, 255, 255, 0.8), rgba(255, 200, 200, 0.6), #111111 60%); background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.8), rgba(255, 200, 200, 0.6), #111111 60%); mix-blend-mode: overlay; opacity: .4; } @@ -353,12 +418,16 @@ * Lo-fi * */ + .lofi { position: relative; - filter: saturate(1.1) contrast(1.5); } + -webkit-filter: saturate(1.1) contrast(1.5); + filter: saturate(1.1) contrast(1.5); } + .lofi img { width: 100%; z-index: 1; } + .lofi:before { content: ''; display: block; @@ -369,6 +438,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .lofi:after { content: ''; display: block; @@ -379,7 +449,9 @@ position: absolute; pointer-events: none; z-index: 3; } + .lofi::after { + background: -webkit-radial-gradient(circle, transparent 70%, #222222 150%); background: radial-gradient(circle, transparent 70%, #222222 150%); mix-blend-mode: multiply; } @@ -387,12 +459,16 @@ * 1977 * */ + ._1977 { position: relative; - filter: contrast(1.1) brightness(1.1) saturate(1.3); } + -webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3); + filter: contrast(1.1) brightness(1.1) saturate(1.3); } + ._1977 img { width: 100%; z-index: 1; } + ._1977:before { content: ''; display: block; @@ -403,6 +479,7 @@ position: absolute; pointer-events: none; z-index: 2; } + ._1977:after { content: ''; display: block; @@ -413,6 +490,7 @@ position: absolute; pointer-events: none; z-index: 3; } + ._1977:after { background: rgba(243, 106, 188, 0.3); mix-blend-mode: screen; } @@ -422,12 +500,16 @@ * Brooklyn * */ + .brooklyn { position: relative; - filter: contrast(0.9) brightness(1.1); } + -webkit-filter: contrast(0.9) brightness(1.1); + filter: contrast(0.9) brightness(1.1); } + .brooklyn img { width: 100%; z-index: 1; } + .brooklyn:before { content: ''; display: block; @@ -438,6 +520,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .brooklyn:after { content: ''; display: block; @@ -448,7 +531,9 @@ position: absolute; pointer-events: none; z-index: 3; } + .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; } @@ -457,12 +542,16 @@ * X-Pro II * */ + .xpro2 { position: relative; - filter: sepia(0.3); } + -webkit-filter: sepia(0.3); + filter: sepia(0.3); } + .xpro2 img { width: 100%; z-index: 1; } + .xpro2:before { content: ''; display: block; @@ -473,6 +562,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .xpro2:after { content: ''; display: block; @@ -483,7 +573,9 @@ position: absolute; pointer-events: none; z-index: 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; } @@ -492,12 +584,16 @@ * Nashville * */ + .nashville { position: relative; - filter: sepia(0.2) contrast(1.2) brightness(1.05) saturate(1.2); } + -webkit-filter: sepia(0.2) contrast(1.2) brightness(1.05) saturate(1.2); + filter: sepia(0.2) contrast(1.2) brightness(1.05) saturate(1.2); } + .nashville img { width: 100%; z-index: 1; } + .nashville:before { content: ''; display: block; @@ -508,6 +604,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .nashville:after { content: ''; display: block; @@ -518,9 +615,11 @@ position: absolute; pointer-events: none; z-index: 3; } + .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; } @@ -529,12 +628,16 @@ * Lark * */ + .lark { position: relative; - filter: contrast(0.9); } + -webkit-filter: contrast(0.9); + filter: contrast(0.9); } + .lark img { width: 100%; z-index: 1; } + .lark:before { content: ''; display: block; @@ -545,6 +648,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .lark:after { content: ''; display: block; @@ -555,9 +659,11 @@ position: absolute; pointer-events: none; z-index: 3; } + .lark::after { background: rgba(242, 242, 242, 0.8); mix-blend-mode: darken; } + .lark::before { background: #22253f; mix-blend-mode: color-dodge; } @@ -566,12 +672,16 @@ * Moon * */ + .moon { position: relative; - filter: grayscale(1) contrast(1.1) brightness(1.1); } + -webkit-filter: grayscale(1) contrast(1.1) brightness(1.1); + filter: grayscale(1) contrast(1.1) brightness(1.1); } + .moon img { width: 100%; z-index: 1; } + .moon:before { content: ''; display: block; @@ -582,6 +692,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .moon:after { content: ''; display: block; @@ -592,9 +703,11 @@ position: absolute; pointer-events: none; z-index: 3; } + .moon::before { background: #a0a0a0; mix-blend-mode: soft-light; } + .moon::after { background: #383838; mix-blend-mode: lighten; } @@ -603,12 +716,16 @@ * Clarendon * */ + .clarendon { position: relative; - filter: contrast(1.2) saturate(1.35); } + -webkit-filter: contrast(1.2) saturate(1.35); + filter: contrast(1.2) saturate(1.35); } + .clarendon img { width: 100%; z-index: 1; } + .clarendon:before { content: ''; display: block; @@ -619,6 +736,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .clarendon:after { content: ''; display: block; @@ -629,6 +747,7 @@ position: absolute; pointer-events: none; z-index: 3; } + .clarendon:before { background: rgba(127, 187, 227, 0.2); mix-blend-mode: overlay; } @@ -637,12 +756,16 @@ * Willow * */ + .willow { position: relative; - filter: grayscale(0.5) contrast(0.95) brightness(0.9); } + -webkit-filter: grayscale(0.5) contrast(0.95) brightness(0.9); + filter: grayscale(0.5) contrast(0.95) brightness(0.9); } + .willow img { width: 100%; z-index: 1; } + .willow:before { content: ''; display: block; @@ -653,6 +776,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .willow:after { content: ''; display: block; @@ -663,9 +787,11 @@ position: absolute; pointer-events: none; z-index: 3; } + .willow::before { background-color: radial-gradient(40%, circle, #d4a9af 55%, black 150%); mix-blend-mode: overlay; } + .willow::after { background-color: #d8cdcb; mix-blend-mode: color; } @@ -675,12 +801,16 @@ * Rise * */ + .rise { position: relative; - filter: brightness(1.05) sepia(0.2) contrast(0.9) saturate(0.9); } + -webkit-filter: brightness(1.05) sepia(0.2) contrast(0.9) saturate(0.9); + filter: brightness(1.05) sepia(0.2) contrast(0.9) saturate(0.9); } + .rise img { width: 100%; z-index: 1; } + .rise:before { content: ''; display: block; @@ -691,6 +821,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .rise:after { content: ''; display: block; @@ -701,11 +832,15 @@ position: absolute; pointer-events: none; z-index: 3; } + .rise::after { + background: -webkit-radial-gradient(circle, rgba(232, 197, 152, 0.8), transparent 90%); background: radial-gradient(circle, rgba(232, 197, 152, 0.8), transparent 90%); mix-blend-mode: overlay; opacity: .6; } + .rise::before { + background: -webkit-radial-gradient(circle, rgba(236, 205, 169, 0.15) 55%, rgba(50, 30, 7, 0.4)); background: radial-gradient(circle, rgba(236, 205, 169, 0.15) 55%, rgba(50, 30, 7, 0.4)); mix-blend-mode: multiply; } @@ -714,12 +849,16 @@ * Slumber * */ + .slumber { position: relative; - filter: saturate(0.66) brightness(1.05); } + -webkit-filter: saturate(0.66) brightness(1.05); + filter: saturate(0.66) brightness(1.05); } + .slumber img { width: 100%; z-index: 1; } + .slumber:before { content: ''; display: block; @@ -730,6 +869,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .slumber:after { content: ''; display: block; @@ -740,24 +880,71 @@ position: absolute; pointer-events: none; z-index: 3; } + .slumber::after { background: rgba(125, 105, 24, 0.5); mix-blend-mode: soft-light; } + .slumber::before { background: rgba(69, 41, 12, 0.4); mix-blend-mode: lighten; } +/* + * + * Stinson + * + */ + +.stinson { + position: relative; + -webkit-filter: brightness(1.24) contrast(0.94) hue-rotate(12deg); + filter: brightness(1.24) contrast(0.94) hue-rotate(12deg); } + + .stinson img { + width: 100%; + z-index: 1; } + + .stinson:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; + z-index: 2; } + + .stinson:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; + z-index: 3; } + + .stinson::after { + background: #ebe4de; + mix-blend-mode: multiply; } + /* * * Brannan * */ + .brannan { position: relative; - filter: sepia(0.5) contrast(1.4); } + -webkit-filter: sepia(0.5) contrast(1.4); + filter: sepia(0.5) contrast(1.4); } + .brannan img { width: 100%; z-index: 1; } + .brannan:before { content: ''; display: block; @@ -768,6 +955,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .brannan:after { content: ''; display: block; @@ -778,6 +966,7 @@ position: absolute; pointer-events: none; z-index: 3; } + .brannan::after { background-color: rgba(161, 44, 199, 0.31); mix-blend-mode: lighten; } @@ -787,12 +976,16 @@ * Valencia * */ + .valencia { position: relative; - filter: contrast(1.08) brightness(1.08) sepia(0.08); } + -webkit-filter: contrast(1.08) brightness(1.08) sepia(0.08); + filter: contrast(1.08) brightness(1.08) sepia(0.08); } + .valencia img { width: 100%; z-index: 1; } + .valencia:before { content: ''; display: block; @@ -803,6 +996,7 @@ position: absolute; pointer-events: none; z-index: 2; } + .valencia:after { content: ''; display: block; @@ -813,9 +1007,50 @@ position: absolute; pointer-events: none; z-index: 3; } + .valencia::after { background: #3a0339; mix-blend-mode: exclusion; opacity: .5; } -/*# sourceMappingURL=cssgram.css.map */ +/* + * Kelvin + * + */ + +.kelvin { + position: relative; } + + .kelvin img { + width: 100%; + z-index: 1; } + + .kelvin:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; + z-index: 2; } + + .kelvin:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; + z-index: 3; } + + .kelvin::after { + background: #b77d21; + mix-blend-mode: overlay; } + + .kelvin::before { + background: #382c34; + mix-blend-mode: color-dodge; } diff --git a/source/css/cssgram.min.css b/source/css/cssgram.min.css index 5c8b20c..47469ed 100644 --- a/source/css/cssgram.min.css +++ b/source/css/cssgram.min.css @@ -1 +1 @@ -.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}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.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::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.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}.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}.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{-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{-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{-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{-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}.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{-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}.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}.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}.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}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.valencia:after,.valencia:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.valencia,.walden,.willow,.xpro2{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.valencia img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.valencia:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.valencia:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.valencia{-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5} \ No newline at end of file +.aden{position:relative;-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,.aden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.aden img{width:100%;z-index:1}.aden:before{z-index:2}.aden:after{z-index:3}.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}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{position:relative;-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.inkwell:after,.inkwell:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.inkwell img{width:100%;z-index:1}.inkwell:before{z-index:2}.inkwell:after{z-index:3}.perpetua{position:relative}.perpetua:after,.perpetua:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.perpetua img{width:100%;z-index:1}.perpetua:before{z-index:2}.perpetua:after{z-index:3}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{position:relative;-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes:after,.reyes:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.reyes img{width:100%;z-index:1}.reyes:before{z-index:2}.reyes:after{z-index:3}.reyes::after{background:#efcdad}.gingham{position:relative;-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham:after,.gingham:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.gingham img{width:100%;z-index:1}.gingham:before{z-index:2}.gingham:after{z-index:3}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{position:relative;-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster:after,.toaster:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.toaster img{width:100%;z-index:1}.toaster:before{z-index:2}.toaster:after{z-index:3}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{position:relative;-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,.walden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.walden img{width:100%;z-index:1}.walden:before{z-index:2}.walden:after{z-index:3}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{position:relative;-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson:after,.hudson:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.hudson img{width:100%;z-index:1}.hudson:before{z-index:2}.hudson:after{z-index:3}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{position:relative;-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird:after,.earlybird:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.earlybird img{width:100%;z-index:1}.earlybird:before{z-index:2}.earlybird:after{z-index:3}.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{position:relative;-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair:after,.mayfair:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.mayfair img{width:100%;z-index:1}.mayfair:before{z-index:2}.mayfair:after{z-index:3}.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}.lofi{position:relative;-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi:after,.lofi:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lofi img{width:100%;z-index:1}.lofi:before{z-index:2}.lofi:after{z-index:3}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{position:relative;-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after,._1977:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977 img{width:100%;z-index:1}._1977:before{z-index:2}._1977:after{z-index:3;background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{position:relative;-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn:after,.brooklyn:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brooklyn img{width:100%;z-index:1}.brooklyn:before{z-index:2}.brooklyn:after{z-index:3}.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}.xpro2{position:relative;-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.xpro2 img{width:100%;z-index:1}.xpro2:before{z-index:2}.xpro2:after{z-index: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}.nashville{position:relative;-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,.nashville:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.nashville img{width:100%;z-index:1}.nashville:before{z-index:2}.nashville:after{z-index:3}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{position:relative;-webkit-filter:contrast(.9);filter:contrast(.9)}.lark:after,.lark:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lark img{width:100%;z-index:1}.lark:before{z-index:2}.lark:after{z-index:3}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{position:relative;-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon:after,.moon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.moon img{width:100%;z-index:1}.moon:before{z-index:2}.moon:after{z-index:3}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{position:relative;-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:after,.clarendon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.clarendon img{width:100%;z-index:1}.clarendon:before{z-index:2;background:rgba(127,187,227,.2);mix-blend-mode:overlay}.clarendon:after{z-index:3}.willow{position:relative;-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow:after,.willow:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.willow img{width:100%;z-index:1}.willow:before{z-index:2}.willow:after{z-index:3}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{position:relative;-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise:after,.rise:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.rise img{width:100%;z-index:1}.rise:before{z-index:2}.rise:after{z-index:3}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{position:relative;-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber:after,.slumber:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.slumber img{width:100%;z-index:1}.slumber:before{z-index:2}.slumber:after{z-index:3}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.stinson{position:relative;-webkit-filter:brightness(1.24) contrast(.94) hue-rotate(12deg);filter:brightness(1.24) contrast(.94) hue-rotate(12deg)}.stinson:after,.stinson:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.stinson img{width:100%;z-index:1}.stinson:before{z-index:2}.stinson:after{z-index:3}.stinson::after{background:#ebe4de;mix-blend-mode:multiply}.brannan{position:relative;-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan:after,.brannan:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brannan img{width:100%;z-index:1}.brannan:before{z-index:2}.brannan:after{z-index:3}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}.valencia{position:relative;-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia:after,.valencia:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.valencia img{width:100%;z-index:1}.valencia:before{z-index:2}.valencia:after{z-index:3}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5}.kelvin{position:relative}.kelvin:after,.kelvin:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.kelvin img{width:100%;z-index:1}.kelvin:before{z-index:2}.kelvin:after{z-index:3}.kelvin::after{background:#b77d21;mix-blend-mode:overlay}.kelvin::before{background:#382c34;mix-blend-mode:color-dodge} \ No newline at end of file diff --git a/source/css/earlybird.css b/source/css/earlybird.css index 2b84ef1..0280195 100644 --- a/source/css/earlybird.css +++ b/source/css/earlybird.css @@ -4,35 +4,36 @@ * */ -.earlybird:before, -.earlybird:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .earlybird { - position: relative; } + position: relative; + -webkit-filter: contrast(0.9) sepia(0.2); + filter: contrast(0.9) sepia(0.2); } .earlybird img { width: 100%; z-index: 1; } .earlybird:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .earlybird:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.earlybird { - -webkit-filter: contrast(0.9) sepia(0.2); - filter: contrast(0.9) sepia(0.2); } .earlybird::after { background: -webkit-radial-gradient(circle, #d0ba8e 20%, #360309 85%, #1d0210 100%); diff --git a/source/css/earlybird.min.css b/source/css/earlybird.min.css index dd72762..f1cabf9 100644 --- a/source/css/earlybird.min.css +++ b/source/css/earlybird.min.css @@ -1 +1 @@ -.earlybird:after,.earlybird:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.earlybird{position:relative;-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird img{width:100%;z-index:1}.earlybird:before{z-index:2}.earlybird:after{z-index:3}.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} \ No newline at end of file +.earlybird{position:relative;-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird:after,.earlybird:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.earlybird img{width:100%;z-index:1}.earlybird:before{z-index:2}.earlybird:after{z-index:3}.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} \ No newline at end of file diff --git a/source/css/gingham.css b/source/css/gingham.css index 0990124..2f28654 100644 --- a/source/css/gingham.css +++ b/source/css/gingham.css @@ -4,35 +4,36 @@ * */ -.gingham:before, -.gingham:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .gingham { - position: relative; } + position: relative; + -webkit-filter: brightness(1.05) hue-rotate(-10deg); + filter: brightness(1.05) hue-rotate(-10deg); } .gingham img { width: 100%; z-index: 1; } .gingham:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .gingham:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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); diff --git a/source/css/gingham.min.css b/source/css/gingham.min.css index f2dc80b..e69cb24 100644 --- a/source/css/gingham.min.css +++ b/source/css/gingham.min.css @@ -1 +1 @@ -.gingham:after,.gingham:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.gingham{position:relative;-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham img{width:100%;z-index:1}.gingham:before{z-index:2}.gingham:after{z-index:3}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken} \ No newline at end of file +.gingham{position:relative;-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham:after,.gingham:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.gingham img{width:100%;z-index:1}.gingham:before{z-index:2}.gingham:after{z-index:3}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken} \ No newline at end of file diff --git a/source/css/hudson.css b/source/css/hudson.css index 0a6da79..a4ce5bf 100644 --- a/source/css/hudson.css +++ b/source/css/hudson.css @@ -4,35 +4,36 @@ * */ -.hudson:before, -.hudson:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .hudson { - position: relative; } + position: relative; + -webkit-filter: brightness(1.2) contrast(0.9) saturate(1.1); + filter: brightness(1.2) contrast(0.9) saturate(1.1); } .hudson img { width: 100%; z-index: 1; } .hudson:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .hudson:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.hudson { - -webkit-filter: brightness(1.2) contrast(0.9) saturate(1.1); - filter: brightness(1.2) contrast(0.9) saturate(1.1); } .hudson::after { background: -webkit-radial-gradient(circle, #a6b1ff 50%, #342134); diff --git a/source/css/hudson.min.css b/source/css/hudson.min.css index 334a161..65c801b 100644 --- a/source/css/hudson.min.css +++ b/source/css/hudson.min.css @@ -1 +1 @@ -.hudson:after,.hudson:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.hudson{position:relative;-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson img{width:100%;z-index:1}.hudson:before{z-index:2}.hudson:after{z-index:3}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5} \ No newline at end of file +.hudson{position:relative;-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson:after,.hudson:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.hudson img{width:100%;z-index:1}.hudson:before{z-index:2}.hudson:after{z-index:3}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5} \ No newline at end of file diff --git a/source/css/inkwell.css b/source/css/inkwell.css index 4cc6494..76ad477 100644 --- a/source/css/inkwell.css +++ b/source/css/inkwell.css @@ -4,32 +4,33 @@ * */ -.inkwell:before, -.inkwell:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .inkwell { - position: relative; } + position: relative; + -webkit-filter: sepia(0.3) contrast(1.1) brightness(1.1) grayscale(1); + filter: sepia(0.3) contrast(1.1) brightness(1.1) grayscale(1); } .inkwell img { width: 100%; z-index: 1; } .inkwell:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .inkwell:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.inkwell { - -webkit-filter: sepia(0.3) contrast(1.1) brightness(1.1) grayscale(1); - filter: sepia(0.3) contrast(1.1) brightness(1.1) grayscale(1); } diff --git a/source/css/inkwell.min.css b/source/css/inkwell.min.css index 082c158..a0dc5e1 100644 --- a/source/css/inkwell.min.css +++ b/source/css/inkwell.min.css @@ -1 +1 @@ -.inkwell:after,.inkwell:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.inkwell{position:relative;-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.inkwell img{width:100%;z-index:1}.inkwell:before{z-index:2}.inkwell:after{z-index:3} \ No newline at end of file +.inkwell{position:relative;-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.inkwell:after,.inkwell:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.inkwell img{width:100%;z-index:1}.inkwell:before{z-index:2}.inkwell:after{z-index:3} \ No newline at end of file diff --git a/source/css/kelvin.css b/source/css/kelvin.css new file mode 100644 index 0000000..3c93973 --- /dev/null +++ b/source/css/kelvin.css @@ -0,0 +1,41 @@ +/* + * Kelvin + * + */ + +.kelvin { + position: relative; } + + .kelvin img { + width: 100%; + z-index: 1; } + + .kelvin:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; + z-index: 2; } + + .kelvin:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; + z-index: 3; } + + .kelvin::after { + background: #b77d21; + mix-blend-mode: overlay; } + + .kelvin::before { + background: #382c34; + mix-blend-mode: color-dodge; } diff --git a/source/css/kelvin.min.css b/source/css/kelvin.min.css new file mode 100644 index 0000000..7560361 --- /dev/null +++ b/source/css/kelvin.min.css @@ -0,0 +1 @@ +.kelvin{position:relative}.kelvin:after,.kelvin:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.kelvin img{width:100%;z-index:1}.kelvin:before{z-index:2}.kelvin:after{z-index:3}.kelvin::after{background:#b77d21;mix-blend-mode:overlay}.kelvin::before{background:#382c34;mix-blend-mode:color-dodge} \ No newline at end of file diff --git a/source/css/lark.css b/source/css/lark.css index bac6c2f..c49b41b 100644 --- a/source/css/lark.css +++ b/source/css/lark.css @@ -3,35 +3,36 @@ * */ -.lark:before, -.lark:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .lark { - position: relative; } + position: relative; + -webkit-filter: contrast(0.9); + filter: contrast(0.9); } .lark img { width: 100%; z-index: 1; } .lark:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .lark:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.lark { - -webkit-filter: contrast(0.9); - filter: contrast(0.9); } .lark::after { background: rgba(242, 242, 242, 0.8); diff --git a/source/css/lark.min.css b/source/css/lark.min.css index d412c8d..31255c1 100644 --- a/source/css/lark.min.css +++ b/source/css/lark.min.css @@ -1 +1 @@ -.lark:after,.lark:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lark{position:relative;-webkit-filter:contrast(.9);filter:contrast(.9)}.lark img{width:100%;z-index:1}.lark:before{z-index:2}.lark:after{z-index:3}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge} \ No newline at end of file +.lark{position:relative;-webkit-filter:contrast(.9);filter:contrast(.9)}.lark:after,.lark:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lark img{width:100%;z-index:1}.lark:before{z-index:2}.lark:after{z-index:3}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge} \ No newline at end of file diff --git a/source/css/lofi.css b/source/css/lofi.css index a7a1680..0224cca 100644 --- a/source/css/lofi.css +++ b/source/css/lofi.css @@ -3,35 +3,36 @@ * */ -.lofi:before, -.lofi:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .lofi { - position: relative; } + position: relative; + -webkit-filter: saturate(1.1) contrast(1.5); + filter: saturate(1.1) contrast(1.5); } .lofi img { width: 100%; z-index: 1; } .lofi:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .lofi:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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%, #222222 150%); diff --git a/source/css/lofi.min.css b/source/css/lofi.min.css index cdd0df0..b1a61cf 100644 --- a/source/css/lofi.min.css +++ b/source/css/lofi.min.css @@ -1 +1 @@ -.lofi:after,.lofi:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lofi{position:relative;-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi img{width:100%;z-index:1}.lofi:before{z-index:2}.lofi:after{z-index:3}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply} \ No newline at end of file +.lofi{position:relative;-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi:after,.lofi:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lofi img{width:100%;z-index:1}.lofi:before{z-index:2}.lofi:after{z-index:3}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply} \ No newline at end of file diff --git a/source/css/mayfair.css b/source/css/mayfair.css index cfb3049..badac37 100644 --- a/source/css/mayfair.css +++ b/source/css/mayfair.css @@ -4,35 +4,36 @@ * */ -.mayfair:before, -.mayfair:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .mayfair { - position: relative; } + position: relative; + -webkit-filter: contrast(1.1) saturate(1.1); + filter: contrast(1.1) saturate(1.1); } .mayfair img { width: 100%; z-index: 1; } .mayfair:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .mayfair:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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), #111111 60%); diff --git a/source/css/mayfair.min.css b/source/css/mayfair.min.css index 0b54183..004db56 100644 --- a/source/css/mayfair.min.css +++ b/source/css/mayfair.min.css @@ -1 +1 @@ -.mayfair:after,.mayfair:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.mayfair{position:relative;-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair img{width:100%;z-index:1}.mayfair:before{z-index:2}.mayfair:after{z-index:3}.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} \ No newline at end of file +.mayfair{position:relative;-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair:after,.mayfair:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.mayfair img{width:100%;z-index:1}.mayfair:before{z-index:2}.mayfair:after{z-index:3}.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} \ No newline at end of file diff --git a/source/css/moon.css b/source/css/moon.css index 405d4d0..6ffd986 100644 --- a/source/css/moon.css +++ b/source/css/moon.css @@ -3,35 +3,36 @@ * */ -.moon:before, -.moon:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .moon { - position: relative; } + position: relative; + -webkit-filter: grayscale(1) contrast(1.1) brightness(1.1); + filter: grayscale(1) contrast(1.1) brightness(1.1); } .moon img { width: 100%; z-index: 1; } .moon:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .moon:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.moon { - -webkit-filter: grayscale(1) contrast(1.1) brightness(1.1); - filter: grayscale(1) contrast(1.1) brightness(1.1); } .moon::before { background: #a0a0a0; diff --git a/source/css/moon.min.css b/source/css/moon.min.css index 2ed21ac..c7c43ff 100644 --- a/source/css/moon.min.css +++ b/source/css/moon.min.css @@ -1 +1 @@ -.moon:after,.moon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.moon{position:relative;-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon img{width:100%;z-index:1}.moon:before{z-index:2}.moon:after{z-index:3}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten} \ No newline at end of file +.moon{position:relative;-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon:after,.moon:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.moon img{width:100%;z-index:1}.moon:before{z-index:2}.moon:after{z-index:3}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten} \ No newline at end of file diff --git a/source/css/nashville.css b/source/css/nashville.css index c4a15f9..5a5cbff 100644 --- a/source/css/nashville.css +++ b/source/css/nashville.css @@ -4,35 +4,36 @@ * */ -.nashville:before, -.nashville:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .nashville { - position: relative; } + position: relative; + -webkit-filter: sepia(0.2) contrast(1.2) brightness(1.05) saturate(1.2); + filter: sepia(0.2) contrast(1.2) brightness(1.05) saturate(1.2); } .nashville img { width: 100%; z-index: 1; } .nashville:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.nashville { - -webkit-filter: sepia(0.2) contrast(1.2) brightness(1.05) saturate(1.2); - filter: sepia(0.2) contrast(1.2) brightness(1.05) saturate(1.2); } .nashville::after { background: rgba(0, 70, 150, 0.4); diff --git a/source/css/nashville.min.css b/source/css/nashville.min.css index 014ed23..81eb00a 100644 --- a/source/css/nashville.min.css +++ b/source/css/nashville.min.css @@ -1 +1 @@ -.nashville:after,.nashville:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.nashville{position:relative;-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 img{width:100%;z-index:1}.nashville:before{z-index:2}.nashville:after{z-index:3}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken} \ No newline at end of file +.nashville{position:relative;-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,.nashville:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.nashville img{width:100%;z-index:1}.nashville:before{z-index:2}.nashville:after{z-index:3}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken} \ No newline at end of file diff --git a/source/css/perpetua.css b/source/css/perpetua.css index 64990df..2b46884 100644 --- a/source/css/perpetua.css +++ b/source/css/perpetua.css @@ -4,18 +4,6 @@ * */ -.perpetua:before, -.perpetua:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .perpetua { position: relative; } @@ -24,14 +12,29 @@ z-index: 1; } .perpetua:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .perpetua:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; 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; } + + .perpetua::after { + background: -webkit-linear-gradient(top, #005b9a, #e6c13d); + background: linear-gradient(to bottom, #005b9a, #e6c13d); + mix-blend-mode: soft-light; + opacity: .5; } diff --git a/source/css/perpetua.min.css b/source/css/perpetua.min.css index 5c8fc45..ff9b159 100644 --- a/source/css/perpetua.min.css +++ b/source/css/perpetua.min.css @@ -1 +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}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d);mix-blend-mode:soft-light;opacity:.5} \ No newline at end of file +.perpetua{position:relative}.perpetua:after,.perpetua:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.perpetua img{width:100%;z-index:1}.perpetua:before{z-index:2}.perpetua: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} \ No newline at end of file diff --git a/source/css/reyes.css b/source/css/reyes.css index 82cb1ac..7b91114 100644 --- a/source/css/reyes.css +++ b/source/css/reyes.css @@ -4,35 +4,36 @@ * */ -.reyes:before, -.reyes:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .reyes { - position: relative; } + position: relative; + -webkit-filter: sepia(0.22) brightness(1.1) contrast(0.85) saturate(0.75); + filter: sepia(0.22) brightness(1.1) contrast(0.85) saturate(0.75); } .reyes img { width: 100%; z-index: 1; } .reyes:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .reyes:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.reyes { - -webkit-filter: sepia(0.22) brightness(1.1) contrast(0.85) saturate(0.75); - filter: sepia(0.22) brightness(1.1) contrast(0.85) saturate(0.75); } .reyes::after { background: #efcdad; diff --git a/source/css/reyes.min.css b/source/css/reyes.min.css index 7c2a10d..6024edc 100644 --- a/source/css/reyes.min.css +++ b/source/css/reyes.min.css @@ -1 +1 @@ -.reyes:after,.reyes:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.reyes{position:relative;-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes img{width:100%;z-index:1}.reyes:before{z-index:2}.reyes:after{z-index:3}.reyes::after{background:#efcdad;mix-blend-mode:soft-light;opacity:.5} \ No newline at end of file +.reyes{position:relative;-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes:after,.reyes:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.reyes img{width:100%;z-index:1}.reyes:before{z-index:2}.reyes:after{z-index:3}.reyes::after{background:#efcdad;mix-blend-mode:soft-light;opacity:.5} \ No newline at end of file diff --git a/source/css/rise.css b/source/css/rise.css index 1073485..5bd8512 100644 --- a/source/css/rise.css +++ b/source/css/rise.css @@ -4,35 +4,36 @@ * */ -.rise:before, -.rise:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .rise { - position: relative; } + position: relative; + -webkit-filter: brightness(1.05) sepia(0.2) contrast(0.9) saturate(0.9); + filter: brightness(1.05) sepia(0.2) contrast(0.9) saturate(0.9); } .rise img { width: 100%; z-index: 1; } .rise:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .rise:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.rise { - -webkit-filter: brightness(1.05) sepia(0.2) contrast(0.9) saturate(0.9); - filter: brightness(1.05) sepia(0.2) contrast(0.9) saturate(0.9); } .rise::after { background: -webkit-radial-gradient(circle, rgba(232, 197, 152, 0.8), transparent 90%); diff --git a/source/css/rise.min.css b/source/css/rise.min.css index 092540e..a70471e 100644 --- a/source/css/rise.min.css +++ b/source/css/rise.min.css @@ -1 +1 @@ -.rise:after,.rise:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.rise{position:relative;-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise img{width:100%;z-index:1}.rise:before{z-index:2}.rise:after{z-index:3}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply} \ No newline at end of file +.rise{position:relative;-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise:after,.rise:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.rise img{width:100%;z-index:1}.rise:before{z-index:2}.rise:after{z-index:3}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply} \ No newline at end of file diff --git a/source/css/slumber.css b/source/css/slumber.css index 84ee7b6..01ba446 100644 --- a/source/css/slumber.css +++ b/source/css/slumber.css @@ -4,35 +4,36 @@ * */ -.slumber:before, -.slumber:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .slumber { - position: relative; } + position: relative; + -webkit-filter: saturate(0.66) brightness(1.05); + filter: saturate(0.66) brightness(1.05); } .slumber img { width: 100%; z-index: 1; } .slumber:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .slumber:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.slumber { - -webkit-filter: saturate(0.66) brightness(1.05); - filter: saturate(0.66) brightness(1.05); } .slumber::after { background: rgba(125, 105, 24, 0.5); diff --git a/source/css/slumber.min.css b/source/css/slumber.min.css index 3aa0e75..7e7ae5c 100644 --- a/source/css/slumber.min.css +++ b/source/css/slumber.min.css @@ -1 +1 @@ -.slumber:after,.slumber:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.slumber{position:relative;-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber img{width:100%;z-index:1}.slumber:before{z-index:2}.slumber:after{z-index:3}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten} \ No newline at end of file +.slumber{position:relative;-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber:after,.slumber:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.slumber img{width:100%;z-index:1}.slumber:before{z-index:2}.slumber:after{z-index:3}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten} \ No newline at end of file diff --git a/source/css/stinson.css b/source/css/stinson.css new file mode 100644 index 0000000..b2e3520 --- /dev/null +++ b/source/css/stinson.css @@ -0,0 +1,40 @@ +/* + * + * Stinson + * + */ + +.stinson { + position: relative; + -webkit-filter: brightness(1.24) contrast(0.94) hue-rotate(12deg); + filter: brightness(1.24) contrast(0.94) hue-rotate(12deg); } + + .stinson img { + width: 100%; + z-index: 1; } + + .stinson:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; + z-index: 2; } + + .stinson:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; + z-index: 3; } + + .stinson::after { + background: #ebe4de; + mix-blend-mode: multiply; } diff --git a/source/css/stinson.min.css b/source/css/stinson.min.css new file mode 100644 index 0000000..5163c24 --- /dev/null +++ b/source/css/stinson.min.css @@ -0,0 +1 @@ +.stinson{position:relative;-webkit-filter:brightness(1.24) contrast(.94) hue-rotate(12deg);filter:brightness(1.24) contrast(.94) hue-rotate(12deg)}.stinson:after,.stinson:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.stinson img{width:100%;z-index:1}.stinson:before{z-index:2}.stinson:after{z-index:3}.stinson::after{background:#ebe4de;mix-blend-mode:multiply} \ No newline at end of file diff --git a/source/css/toaster.css b/source/css/toaster.css index 6d8f966..8b3258b 100644 --- a/source/css/toaster.css +++ b/source/css/toaster.css @@ -4,35 +4,36 @@ * */ -.toaster:before, -.toaster:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .toaster { - position: relative; } + position: relative; + -webkit-filter: contrast(1.5) brightness(0.9); + filter: contrast(1.5) brightness(0.9); } .toaster img { width: 100%; z-index: 1; } .toaster:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .toaster:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.toaster { - -webkit-filter: contrast(1.5) brightness(0.9); - filter: contrast(1.5) brightness(0.9); } .toaster::after { background: -webkit-radial-gradient(circle, #804e0f, #3b003b); diff --git a/source/css/toaster.min.css b/source/css/toaster.min.css index 8beefc4..f2c2098 100644 --- a/source/css/toaster.min.css +++ b/source/css/toaster.min.css @@ -1 +1 @@ -.toaster:after,.toaster:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.toaster{position:relative;-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster img{width:100%;z-index:1}.toaster:before{z-index:2}.toaster:after{z-index:3}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen} \ No newline at end of file +.toaster{position:relative;-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster:after,.toaster:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.toaster img{width:100%;z-index:1}.toaster:before{z-index:2}.toaster:after{z-index:3}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen} \ No newline at end of file diff --git a/source/css/valencia.css b/source/css/valencia.css index 636965c..c77f180 100644 --- a/source/css/valencia.css +++ b/source/css/valencia.css @@ -4,35 +4,36 @@ * */ -.valencia:before, -.valencia:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .valencia { - position: relative; } + position: relative; + -webkit-filter: contrast(1.08) brightness(1.08) sepia(0.08); + filter: contrast(1.08) brightness(1.08) sepia(0.08); } .valencia img { width: 100%; z-index: 1; } .valencia:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .valencia:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.valencia { - -webkit-filter: contrast(1.08) brightness(1.08) sepia(0.08); - filter: contrast(1.08) brightness(1.08) sepia(0.08); } .valencia::after { background: #3a0339; diff --git a/source/css/valencia.min.css b/source/css/valencia.min.css index 7839daf..2adbc34 100644 --- a/source/css/valencia.min.css +++ b/source/css/valencia.min.css @@ -1 +1 @@ -.valencia:after,.valencia:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.valencia{position:relative;-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia img{width:100%;z-index:1}.valencia:before{z-index:2}.valencia:after{z-index:3}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5} \ No newline at end of file +.valencia{position:relative;-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia:after,.valencia:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.valencia img{width:100%;z-index:1}.valencia:before{z-index:2}.valencia:after{z-index:3}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5} \ No newline at end of file diff --git a/source/css/walden.css b/source/css/walden.css index 2a80643..d98a572 100644 --- a/source/css/walden.css +++ b/source/css/walden.css @@ -4,35 +4,36 @@ * */ -.walden:before, -.walden:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .walden { - position: relative; } + position: relative; + -webkit-filter: brightness(1.1) hue-rotate(-10deg) sepia(0.3) saturate(1.6); + filter: brightness(1.1) hue-rotate(-10deg) sepia(0.3) saturate(1.6); } .walden img { width: 100%; z-index: 1; } .walden:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .walden:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.walden { - -webkit-filter: brightness(1.1) hue-rotate(-10deg) sepia(0.3) saturate(1.6); - filter: brightness(1.1) hue-rotate(-10deg) sepia(0.3) saturate(1.6); } .walden::after { background: #0044cc; diff --git a/source/css/walden.min.css b/source/css/walden.min.css index ea2e6eb..bd6e95f 100644 --- a/source/css/walden.min.css +++ b/source/css/walden.min.css @@ -1 +1 @@ -.walden:after,.walden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.walden{position:relative;-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 img{width:100%;z-index:1}.walden:before{z-index:2}.walden:after{z-index:3}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3} \ No newline at end of file +.walden{position:relative;-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,.walden:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.walden img{width:100%;z-index:1}.walden:before{z-index:2}.walden:after{z-index:3}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3} \ No newline at end of file diff --git a/source/css/willow.css b/source/css/willow.css index 3790a7a..42bfca5 100644 --- a/source/css/willow.css +++ b/source/css/willow.css @@ -3,35 +3,36 @@ * */ -.willow:before, -.willow:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .willow { - position: relative; } + position: relative; + -webkit-filter: grayscale(0.5) contrast(0.95) brightness(0.9); + filter: grayscale(0.5) contrast(0.95) brightness(0.9); } .willow img { width: 100%; z-index: 1; } .willow:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .willow:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.willow { - -webkit-filter: grayscale(0.5) contrast(0.95) brightness(0.9); - filter: grayscale(0.5) contrast(0.95) brightness(0.9); } .willow::before { background-color: radial-gradient(40%, circle, #d4a9af 55%, black 150%); diff --git a/source/css/willow.min.css b/source/css/willow.min.css index 4b00dca..32e76b0 100644 --- a/source/css/willow.min.css +++ b/source/css/willow.min.css @@ -1 +1 @@ -.willow:after,.willow:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.willow{position:relative;-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow img{width:100%;z-index:1}.willow:before{z-index:2}.willow:after{z-index:3}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color} \ No newline at end of file +.willow{position:relative;-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow:after,.willow:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.willow img{width:100%;z-index:1}.willow:before{z-index:2}.willow:after{z-index:3}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color} \ No newline at end of file diff --git a/source/css/xpro2.css b/source/css/xpro2.css index 27b5ddc..330b9a0 100644 --- a/source/css/xpro2.css +++ b/source/css/xpro2.css @@ -4,35 +4,36 @@ * */ -.xpro2:before, -.xpro2:after { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } - - .xpro2 { - position: relative; } + position: relative; + -webkit-filter: sepia(0.3); + filter: sepia(0.3); } .xpro2 img { width: 100%; z-index: 1; } .xpro2:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 2; } .xpro2:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; z-index: 3; } - - -.xpro2 { - -webkit-filter: sepia(0.3); - filter: sepia(0.3); } .xpro2::after { background: -webkit-radial-gradient(circle, #e6e7e0 40%, rgba(43, 42, 161, 0.6) 110%); diff --git a/source/css/xpro2.min.css b/source/css/xpro2.min.css index dfc5050..d7ac0a6 100644 --- a/source/css/xpro2.min.css +++ b/source/css/xpro2.min.css @@ -1 +1 @@ -.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.xpro2{position:relative;-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2 img{width:100%;z-index:1}.xpro2:before{z-index:2}.xpro2:after{z-index: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} \ No newline at end of file +.xpro2{position:relative;-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.xpro2 img{width:100%;z-index:1}.xpro2:before{z-index:2}.xpro2:after{z-index: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} \ No newline at end of file diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss index a328cb9..1e81cf9 100644 --- a/source/scss/cssgram.scss +++ b/source/scss/cssgram.scss @@ -19,6 +19,7 @@ @import 'willow'; @import 'rise'; @import 'slumber'; +@import 'stinson'; @import 'brannan'; @import 'valencia'; -@import 'kelvin'; \ No newline at end of file +@import 'kelvin'; diff --git a/source/scss/stinson.scss b/source/scss/stinson.scss new file mode 100644 index 0000000..57ee93b --- /dev/null +++ b/source/scss/stinson.scss @@ -0,0 +1,41 @@ +/* + * + * Stinson + * + */ +@import 'shared'; + +// mixin to extend stinson filter +// @mixin stinson +// @param $filters... {filter} - Zero to many css filters to be added +// @example +// img { +// @include stinson; +// } +// or +// img { +// @include stinson(blur(2px)); +// } +// or +// img { +// @include stinson(blur(2px)) { +// /*...*/ +// }; +// } +@mixin stinson($filters...) { + @include filter-base; + filter: brightness(1.24) contrast(0.94) hue-rotate(12deg) $filters; + + &::after { + background: rgb(235, 228, 222); + mix-blend-mode: multiply; + } + + @content; +} + +// stinson Instagram filter +%stinson, +.stinson { + @include stinson; +}