From 59c68efb68b37e1bb85bdb4d727dca05fdafe5ed Mon Sep 17 00:00:00 2001 From: "UNA A. KRAVETS" Date: Thu, 10 Mar 2016 23:33:36 -0600 Subject: [PATCH] updated docs on site to include mixin options --- README.md | 4 +- site/css/1977.min.css | 2 +- site/css/aden.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 | 3142 ++++++++++++++++++++++++++++++++-- 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/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/reyes.min.css | 2 +- site/css/rise.min.css | 2 +- site/css/slumber.min.css | 2 +- site/css/toaster.min.css | 2 +- site/css/walden.min.css | 2 +- site/css/willow.min.css | 2 +- site/css/xpro2.min.css | 2 +- site/index.html | 835 +++------ site/index.twig | 53 +- source/css/1977.css | 10 +- source/css/1977.min.css | 2 +- source/css/aden.css | 14 +- source/css/aden.min.css | 2 +- source/css/brooklyn.css | 14 +- source/css/brooklyn.min.css | 2 +- source/css/clarendon.css | 10 +- source/css/clarendon.min.css | 2 +- source/css/cssgram.css | 3100 +++++++++++++++++++++++++++++++-- source/css/cssgram.min.css | 2 +- source/css/earlybird.css | 14 +- source/css/earlybird.min.css | 2 +- source/css/gingham.css | 10 +- source/css/gingham.min.css | 2 +- source/css/hudson.css | 14 +- source/css/hudson.min.css | 2 +- source/css/inkwell.css | 31 +- source/css/inkwell.min.css | 2 +- source/css/lark.css | 15 +- source/css/lark.min.css | 2 +- source/css/lofi.css | 10 +- source/css/lofi.min.css | 2 +- source/css/mayfair.css | 10 +- source/css/mayfair.min.css | 2 +- source/css/moon.css | 11 +- source/css/moon.min.css | 2 +- source/css/nashville.css | 15 +- source/css/nashville.min.css | 2 +- source/css/perpetua.css | 9 +- source/css/reyes.css | 14 +- source/css/reyes.min.css | 2 +- source/css/rise.css | 15 +- source/css/rise.min.css | 2 +- source/css/slumber.css | 11 +- source/css/slumber.min.css | 2 +- source/css/toaster.css | 14 +- source/css/toaster.min.css | 2 +- source/css/walden.css | 14 +- source/css/walden.min.css | 2 +- source/css/willow.css | 15 +- source/css/willow.min.css | 2 +- source/css/xpro2.css | 14 +- source/css/xpro2.min.css | 2 +- 69 files changed, 6534 insertions(+), 970 deletions(-) diff --git a/README.md b/README.md index d058a2f..bd157c0 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ This library uses [CSS Filters](https://developer.mozilla.org/en-US/docs/Web/CSS | Chrome logo | Firefox logo | Internet Explorer logo | Edge logo | Opera logo | Safari logo | |:---:|:---:|:---:|:---:|:---:|:---:| | 43+ ✔ | 38+ ✔ | Nope ✘ | 13 ✔ | 32+ ✔ | 8+ ✔ | - + For more information, check on [Can I Use](http://caniuse.com/#feat=css-filters). ## Usage @@ -68,7 +68,7 @@ _For use in HTML markup:_ * * * -### Use Sass `@extend` +### Use Sass `@extend` or `@mixin` If you use custom naming in your CSS architecture, you can add the `.scss` files for the provided styles within your project and then `@extend` the filter effects within your style definitions. If you think extends are stupid, I will fight you 😊. diff --git a/site/css/1977.min.css b/site/css/1977.min.css index ee34123..ee9be67 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}._1977 img{width:100%;z-index:1}._1977:before{z-index:2}._1977:after{z-index:3}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen} \ No newline at end of file +._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 diff --git a/site/css/aden.min.css b/site/css/aden.min.css index a6da160..e3819b8 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}.aden img{width:100%;z-index:1}.aden:before{z-index:2}.aden:after{z-index:3}.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken} \ No newline at end of file +.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 diff --git a/site/css/brooklyn.min.css b/site/css/brooklyn.min.css index 75c6e66..71a7c3d 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}.brooklyn img{width:100%;z-index:1}.brooklyn:before{z-index:2}.brooklyn:after{z-index:3}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay} \ No newline at end of file +.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 diff --git a/site/css/clarendon.min.css b/site/css/clarendon.min.css index 7f385be..cdef66b 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}.clarendon img{width:100%;z-index:1}.clarendon:before{z-index:2}.clarendon:after{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,.2);mix-blend-mode:overlay} \ No newline at end of file +.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 diff --git a/site/css/cssgram.min.css b/site/css/cssgram.min.css index 582e1bd..a0d0803 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}.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);mix-blend-mode:soft-light;opacity:.5}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad;mix-blend-mode:soft-light;opacity:.5}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);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}._1977:after,._1977:before,.aden:after,.aden: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,.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,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.walden,.willow,.xpro2{position:relative}._1977 img,.aden 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,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden: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,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden: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,.walden:after,.willow:after,.xpro2:after{z-index:3}.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} \ No newline at end of file +.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}._1977:after,._1977:before,.aden:after,.aden: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,.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,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.walden,.willow,.xpro2{position:relative}._1977 img,.aden 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,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden: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,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden: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,.walden:after,.willow:after,.xpro2:after{z-index:3}.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} \ No newline at end of file diff --git a/site/css/demo-site.css b/site/css/demo-site.css index 74f1a09..b994450 100644 --- a/site/css/demo-site.css +++ b/site/css/demo-site.css @@ -1,5 +1,47 @@ @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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -9,14 +51,98 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } /* @@ -24,7 +150,49 @@ * 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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -34,19 +202,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .aden { - -webkit-filter: hue-rotate(-20deg) contrast(.9) saturate(0.85) brightness(1.2); - filter: hue-rotate(-20deg) contrast(.9) saturate(0.85) brightness(1.2); } + -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); background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent); @@ -57,16 +311,205 @@ * Inkwell * */ + +.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, +.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 { + 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 { + 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 { + 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 { + 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 { + z-index: 3; } + + .inkwell { - -webkit-filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1); - filter: sepia(.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); } /* * * 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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -76,16 +519,101 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .perpetua::after { background: -webkit-linear-gradient(top, #005b9a, #e6c13d); background: linear-gradient(to bottom, #005b9a, #e6c13d); @@ -97,7 +625,49 @@ * Reyes * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -107,19 +677,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .reyes { - -webkit-filter: sepia(.22) brightness(1.1) contrast(.85) saturate(0.75); - filter: sepia(.22) brightness(1.1) contrast(.85) saturate(0.75); } + -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; mix-blend-mode: soft-light; @@ -130,7 +786,49 @@ * Gingham * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -140,19 +838,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .gingham { -webkit-filter: brightness(1.05) hue-rotate(-10deg); filter: brightness(1.05) hue-rotate(-10deg); } + .gingham::after { background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent); background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent); @@ -163,7 +947,49 @@ * Toaster * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -173,19 +999,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .toaster { - -webkit-filter: contrast(1.5) brightness(.9); - filter: contrast(1.5) brightness(.9); } + -webkit-filter: contrast(1.5) brightness(0.9); + filter: contrast(1.5) brightness(0.9); } + .toaster::after { background: -webkit-radial-gradient(circle, #804e0f, #3b003b); background: radial-gradient(circle, #804e0f, #3b003b); @@ -196,7 +1108,49 @@ * Walden * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -206,19 +1160,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .walden { - -webkit-filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6); - filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6); } + -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; mix-blend-mode: screen; @@ -229,7 +1269,49 @@ * Hudson * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -239,19 +1321,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .hudson { - -webkit-filter: brightness(1.2) contrast(.9) saturate(1.1); - filter: brightness(1.2) contrast(.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::after { background: -webkit-radial-gradient(circle, #a6b1ff 50%, #342134); background: radial-gradient(circle, #a6b1ff 50%, #342134); @@ -263,7 +1431,49 @@ * Earlybird * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -273,19 +1483,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .earlybird { - -webkit-filter: contrast(.9) sepia(.2); - filter: contrast(.9) sepia(.2); } + -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%); background: radial-gradient(circle, #d0ba8e 20%, #360309 85%, #1d0210 100%); @@ -296,7 +1592,49 @@ * Mayfair * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -306,19 +1644,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { 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%); background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.8), rgba(255, 200, 200, 0.6), #111111 60%); @@ -329,7 +1753,49 @@ * Lo-fi * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -339,19 +1805,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { 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%); background: radial-gradient(circle, transparent 70%, #222222 150%); @@ -361,7 +1913,49 @@ * 1977 * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -371,19 +1965,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + ._1977 { -webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3); filter: contrast(1.1) brightness(1.1) saturate(1.3); } + ._1977:after { background: rgba(243, 106, 188, 0.3); mix-blend-mode: screen; } @@ -393,7 +2073,49 @@ * Brooklyn * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -403,19 +2125,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .brooklyn { - -webkit-filter: contrast(.9) brightness(1.1); - filter: contrast(.9) brightness(1.1); } + -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); background: radial-gradient(circle, rgba(168, 223, 193, 0.4) 70%, #c4b7c8); @@ -426,7 +2234,49 @@ * X-Pro II * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -436,19 +2286,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .xpro2 { - -webkit-filter: sepia(.3); - filter: sepia(.3); } + -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%); background: radial-gradient(circle, #e6e7e0 40%, rgba(43, 42, 161, 0.6) 110%); @@ -459,7 +2395,49 @@ * Nashville * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -469,22 +2447,109 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .nashville { - -webkit-filter: sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2); - filter: sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2); } + -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); mix-blend-mode: lighten; } + .nashville::before { background: rgba(247, 176, 153, 0.56); mix-blend-mode: darken; } @@ -493,7 +2558,49 @@ * Lark * */ -.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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -503,22 +2610,109 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .lark { - -webkit-filter: contrast(.9); - filter: contrast(.9); } + -webkit-filter: contrast(0.9); + filter: contrast(0.9); } + .lark::after { background: rgba(242, 242, 242, 0.8); mix-blend-mode: darken; } + .lark::before { background: #22253f; mix-blend-mode: color-dodge; } @@ -527,7 +2721,49 @@ * Moon * */ -.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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -537,22 +2773,109 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { 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; mix-blend-mode: soft-light; } + .moon::after { background: #383838; mix-blend-mode: lighten; } @@ -561,7 +2884,49 @@ * Clarendon * */ -.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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -571,19 +2936,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { 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); mix-blend-mode: overlay; } @@ -592,7 +3043,49 @@ * Willow * */ -.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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -602,22 +3095,109 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .willow { - -webkit-filter: grayscale(0.5) contrast(.95) brightness(.9); - filter: grayscale(0.5) contrast(.95) brightness(.9); } + -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%); mix-blend-mode: overlay; } + .willow::after { background-color: #d8cdcb; mix-blend-mode: color; } @@ -627,7 +3207,49 @@ * Rise * */ -.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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -637,24 +3259,111 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .rise { - -webkit-filter: brightness(1.05) sepia(.2) contrast(.9) saturate(0.9); - filter: brightness(1.05) sepia(.2) contrast(.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::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)); @@ -665,7 +3374,49 @@ * Slumber * */ -.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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -675,22 +3426,109 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { 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); mix-blend-mode: soft-light; } + .slumber::before { background: rgba(69, 41, 12, 0.4); mix-blend-mode: lighten; } @@ -718,17 +3556,20 @@ body { section { overflow-x: hidden; } -h1, h2 { +h1, +h2 { color: #9b1c9b; } @media (max-width: 500px) { - h1, h2 { + h1, + h2 { text-align: center; } } -h3, em { +h3, +em { color: #c63082; } pre, code { - background: #eff1ef; } + background: #eff1f0; } pre code, code code { border: none; background: none; } @@ -743,14 +3584,15 @@ code { font-weight: 800; } .comment { - color: #abb1ad; } + color: #acb2ad; } ul { width: 100%; margin: 0; padding: 0; } -ul, ol { +ul, +ol { line-height: 1.8; } a { @@ -761,8 +3603,8 @@ a { border-bottom: 1px solid #c63082; padding-bottom: .05em; } a:hover, a:focus { - color: #e297c0; - border-color: #e297c0; } + color: #e398c1; + border-color: #e398c1; } figure { max-width: 350px; @@ -807,7 +3649,7 @@ figcaption { hr { clear: both; float: none; - border: 1px solid #eff1ef; + border: 1px solid #eff1f0; margin: 2em auto; display: block; } @@ -822,14 +3664,17 @@ img { .demo__section { font-weight: 300; font-size: 1.2em; } + .demo__subtitle { font-size: 2em; text-align: center; } + .demo__note { font-style: italic; text-align: center; display: block; margin: 2em auto 0; } + .demo__input-area { display: block; font-size: 1em; @@ -841,9 +3686,11 @@ img { .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; @@ -858,10 +3705,12 @@ img { 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; @@ -873,6 +3722,7 @@ img { @media (max-width: 500px) { .demo__option-img { height: 60px; } } + .demo__list { width: 100%; display: -webkit-box; @@ -886,6 +3736,7 @@ img { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } + .demo__item { margin: .75em; list-style: none; } @@ -899,8 +3750,10 @@ img { .title-section { width: 100%; text-align: center; } + .title--logo { max-width: 400px; } + .title--top-sub { font-weight: 200; margin: 0 auto; @@ -910,7 +3763,8 @@ img { .title--top-sub { font-size: 1.2em; } } -.how-to-section, .explanation-section { +.how-to-section, +.explanation-section { font-size: 1.2em; font-weight: 300; max-width: 40em; @@ -923,7 +3777,7 @@ img { .callout { max-width: 14em; - background: #eff1ef; + background: #eff1f0; padding: 2em; margin: -.5em 2em 0; display: block; @@ -936,7 +3790,9 @@ img { float: none; font-size: .8em; } } -.available-classes, .available-extends, .supported-browsers { +.available-classes, +.available-extends, +.supported-browsers { -webkit-columns: 15em 2; -moz-columns: 15em 2; columns: 15em 2; } diff --git a/site/css/demo-site.min.css b/site/css/demo-site.min.css index 6e2cab7..3fa305f 100644 --- a/site/css/demo-site.min.css +++ b/site/css/demo-site.min.css @@ -1 +1 @@ -@charset "UTF-8";.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.inkwell{-webkit-filter:sepia(.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);mix-blend-mode:soft-light;opacity:.5}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad;mix-blend-mode:soft-light;opacity:.5}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);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}._1977:after,._1977:before,.aden:after,.aden: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,.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,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.walden,.willow,.xpro2{position:relative}._1977 img,.aden 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,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden: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,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden: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,.walden:after,.willow:after,.xpro2:after{z-index:3}.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}::-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;overflow-x:hidden}@media (max-width:500px){body{font-size:.9em}}section{overflow-x:hidden}h1,h2{color:#9b1c9b}@media (max-width:500px){h1,h2{text-align:center}}em,h3{color:#c63082}code,pre{background:#eff1ef}code code,pre code{border:none;background:0 0}code{font-family:monospace;padding:.25em .5em}.highlight{color:#c63082;font-weight:800}.comment{color:#abb1ad}ul{width:100%;margin:0;padding:0}ol,ul{line-height:1.8}a{text-decoration:none;color:#9b1c9b;-webkit-transition-duration:.35s;transition-duration:.35s;border-bottom:1px solid #c63082;padding-bottom:.05em}a:focus,a:hover{color:#e297c0;border-color:#e297c0}figure{max-width:350px;max-height:350px;overflow:hidden;position:relative;margin:0;padding:0;-webkit-transition-duration:.35s;transition-duration:.35s}@media (max-width:1240px){figure{max-width:300px;max-height:300px}}@media (max-width:992px){figure{max-width:250px;max-height:250px}}@media (max-width:768px){figure{max-width:300px;max-height:300px}}@media (max-width:500px){figure{max-width:400px;max-height:400px}}figure: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 #eff1ef;margin:2em auto;display:block}img{display:block;margin:auto;height:auto;max-height:100%;width:auto;max-width:100%}.demo__section{font-weight:300;font-size:1.2em}.demo__subtitle{font-size:2em;text-align:center}.demo__note{font-style:italic;text-align:center;display:block;margin:2em auto 0}.demo__input-area{display:block;font-size:1em;text-align:center;font-weight:300;margin:1em auto;padding:1em 0}@media (max-width:500px){.demo__input-area{margin:0;font-size:.8em}}.demo__input-label{text-align:center;color:#9b1c9b}.demo__input-img{max-width:16em;font-size:1em;padding:.5em;border:2px solid #9b1c9b;outline: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}}@media (max-width:500px){.demo__option-img{height:60px}}.demo__list{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.demo__item{margin:.75em;list-style:none}@media (max-width:992px){.demo__item{margin:.5em}}@media (max-width:500px){.demo__item{margin:.5em 0}}.title-section{width:100%;text-align:center}.title--logo{max-width:400px}.title--top-sub{font-weight:200;margin:0 auto;text-align:center;max-width:26em}@media (max-width:500px){.title--top-sub{font-size:1.2em}}.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;text-align:center}.callout{max-width:14em;background:#eff1ef;padding:2em;margin:-.5em 2em 0;display:block;font-weight:200;float:right}@media (max-width:768px){.callout{max-width:28em;margin:1em auto;float:none;font-size:.8em}}.available-classes,.available-extends,.supported-browsers{-webkit-columns:15em 2;-moz-columns:15em 2;columns:15em 2}.supported:after{content:'✔';color:#62B859;margin-left:.5em}.not-supported:after{content:'✘';color:#c63082;margin-left:.5em} \ 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}.demo__input-area,.demo__note,hr,img{display:block}.attribution,.demo__input-area,.demo__note,.demo__subtitle,.title--top-sub,.title-section{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}._1977:after,._1977:before,.aden:after,.aden: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,.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,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.walden,.willow,.xpro2,figure{position:relative}._1977 img,.aden 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,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden: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,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden: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,.walden:after,.willow:after,.xpro2:after{z-index:3}.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}::-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}}.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} \ No newline at end of file diff --git a/site/css/earlybird.min.css b/site/css/earlybird.min.css index f45c634..dd72762 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}.earlybird img{width:100%;z-index:1}.earlybird:before{z-index:2}.earlybird:after{z-index:3}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay} \ No newline at end of file +.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 diff --git a/site/css/gingham.min.css b/site/css/gingham.min.css index 1bdd665..f2dc80b 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}.gingham img{width:100%;z-index:1}.gingham:before{z-index:2}.gingham:after{z-index:3}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken} \ No newline at end of file +.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 diff --git a/site/css/hudson.min.css b/site/css/hudson.min.css index 17a3394..334a161 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}.hudson img{width:100%;z-index:1}.hudson:before{z-index:2}.hudson:after{z-index:3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5} \ No newline at end of file +.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 diff --git a/site/css/inkwell.min.css b/site/css/inkwell.min.css index 97b3451..082c158 100644 --- a/site/css/inkwell.min.css +++ b/site/css/inkwell.min.css @@ -1 +1 @@ -.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)} \ No newline at end of file +.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 diff --git a/site/css/lark.min.css b/site/css/lark.min.css index 9959758..d412c8d 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}.lark img{width:100%;z-index:1}.lark:before{z-index:2}.lark:after{z-index:3}.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} \ No newline at end of file +.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 diff --git a/site/css/lofi.min.css b/site/css/lofi.min.css index 3ca3a8c..cdd0df0 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}.lofi img{width:100%;z-index:1}.lofi:before{z-index:2}.lofi:after{z-index:3}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply} \ No newline at end of file +.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 diff --git a/site/css/mayfair.min.css b/site/css/mayfair.min.css index 810044f..0b54183 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}.mayfair img{width:100%;z-index:1}.mayfair:before{z-index:2}.mayfair:after{z-index:3}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4} \ No newline at end of file +.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 diff --git a/site/css/moon.min.css b/site/css/moon.min.css index a462f0a..2ed21ac 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}.moon img{width:100%;z-index:1}.moon:before{z-index:2}.moon:after{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;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten} \ No newline at end of file +.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 diff --git a/site/css/nashville.min.css b/site/css/nashville.min.css index 8fae499..014ed23 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}.nashville img{width:100%;z-index:1}.nashville:before{z-index:2}.nashville:after{z-index:3}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken} \ No newline at end of file +.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 diff --git a/site/css/reyes.min.css b/site/css/reyes.min.css index 5c84ab9..7c2a10d 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}.reyes img{width:100%;z-index:1}.reyes:before{z-index:2}.reyes:after{z-index:3}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad;mix-blend-mode:soft-light;opacity:.5} \ No newline at end of file +.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 diff --git a/site/css/rise.min.css b/site/css/rise.min.css index 189c535..092540e 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}.rise img{width:100%;z-index:1}.rise:before{z-index:2}.rise:after{z-index:3}.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} \ No newline at end of file +.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 diff --git a/site/css/slumber.min.css b/site/css/slumber.min.css index b6242e7..3aa0e75 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}.slumber img{width:100%;z-index:1}.slumber:before{z-index:2}.slumber:after{z-index:3}.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} \ No newline at end of file +.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 diff --git a/site/css/toaster.min.css b/site/css/toaster.min.css index e9b3290..8beefc4 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}.toaster img{width:100%;z-index:1}.toaster:before{z-index:2}.toaster:after{z-index:3}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen} \ No newline at end of file +.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 diff --git a/site/css/walden.min.css b/site/css/walden.min.css index b5f34cb..ea2e6eb 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}.walden img{width:100%;z-index:1}.walden:before{z-index:2}.walden:after{z-index:3}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3} \ No newline at end of file +.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 diff --git a/site/css/willow.min.css b/site/css/willow.min.css index bcc56de..4b00dca 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}.willow img{width:100%;z-index:1}.willow:before{z-index:2}.willow:after{z-index:3}.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} \ No newline at end of file +.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 diff --git a/site/css/xpro2.min.css b/site/css/xpro2.min.css index d69b479..dfc5050 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}.xpro2 img{width:100%;z-index:1}.xpro2:before{z-index:2}.xpro2:after{z-index:3}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn} \ No newline at end of file +.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 diff --git a/site/index.html b/site/index.html index 49f8cb6..b865837 100644 --- a/site/index.html +++ b/site/index.html @@ -1,33 +1,26 @@ + - - CSSGram + CSSgram test sheet - + - - -
+ +

A tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes.

@@ -36,12 +29,12 @@

A tiny (<1kb gzipped!) library for recreating
Choose a sample image: - atx image - bike image - cacti image - lakegeneva image - tahoe image -
+ atx image + bike image + cacti image + lakegeneva image + tahoe image +

A tiny (<1kb gzipped!) library for recreating #nofilter -
  • -
    - -
    1977
    -
    -
    • -
  • -
    - -
    Aden
    -
    -
    • -
  • -
    - -
    Brooklyn
    -
    -
    • -
  • -
    - -
    Clarendon
    -
    -
    • -
  • -
    - -
    Earlybird
    -
    -
    • -
  • -
    - -
    Gingham
    -
    -
    • -
  • -
    - -
    Hudson
    -
    -
    • -
  • -
    - -
    Inkwell
    -
    -
    • -
  • -
    - -
    Lark
    -
    -
    • -
  • -
    - -
    Lo-Fi
    -
    -
    • -
  • -
    - -
    Mayfair
    -
    -
    • -
  • -
    - -
    Moon
    -
    -
    • -
  • -
    - -
    Nashville
    -
    -
    • -
  • -
    - -
    Perpetua
    -
    -
    • -
  • -
    - -
    Reyes
    -
    -
    • -
  • -
    - -
    Rise
    -
    -
    • -
  • -
    - -
    Slumber
    -
    -
    • -
  • -
    - -
    Toaster
    -
    -
    • -
  • -
    - -
    Walden
    -
    -
    • -
  • -
    - -
    Willow
    -
    -
    • -
  • -
    - -
    X-pro II
    -
    -
    • - +
  • +
    + +
    1977
    +
    +
    • +
  • +
    + +
    Aden
    +
    +
    • +
  • +
    + +
    Brooklyn
    +
    +
    • +
  • +
    + +
    Clarendon
    +
    +
    • +
  • +
    + +
    Earlybird
    +
    +
    • +
  • +
    + +
    Gingham
    +
    +
    • +
  • +
    + +
    Hudson
    +
    +
    • +
  • +
    + +
    Inkwell
    +
    +
    • +
  • +
    + +
    Lark
    +
    +
    • +
  • +
    + +
    Lo-Fi
    +
    +
    • +
  • +
    + +
    Mayfair
    +
    +
    • +
  • +
    + +
    Moon
    +
    +
    • +
  • +
    + +
    Nashville
    +
    +
    • +
  • +
    + +
    Perpetua
    +
    +
    • +
  • +
    + +
    Reyes
    +
    +
    • +
  • +
    + +
    Rise
    +
    +
    • +
  • +
    + +
    Slumber
    +
    +
    • +
  • +
    + +
    Toaster
    +
    +
    • +
  • +
    + +
    Walden
    +
    +
    • +
  • +
    + +
    Willow
    +
    +
    • +
  • +
    + +
    X-pro II
    +
    +
    • +

    @@ -191,11 +184,9 @@

    What is This?

    For more background on CSS Image Effects, you can check out my blog series here, or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters.

    -

    Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we're doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic - these effects. This means less manual image processing and more fun filter effects on the web!

    +

    Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we're doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. This means less manual image processing and more fun filter effects on the web!

    -

    We are using pseudo-elements (i.e. :before and :after) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <img>. The recommendation is to - wrap your images in a <figure> tag. More about the tag here.

    +

    We are using pseudo-elements (i.e. :before and :after) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <img>. The recommendation is to wrap your images in a <figure> tag. More about the tag here.

    Browser Support

    @@ -210,27 +201,25 @@

    Browser Support

    For more information, check on Can I Use.

    -
    +

    Usage

    -

    There are currently 2 ways to consume this library:

    +

    There are currently 3 ways to consume this library:

    -

    Use CSS classes

    +

    1. Use CSS classes

    When using CSS classes, you can simply add the class with the filter name to the element containing your image.

    -

    The quickest way to do this is to link to our CDN in your <head> tag: <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">. Then, add a class to your figure element - with the name of the filter you would like to use (shown below)

    +

    The quickest way to do this is to link to our CDN in your <head> tag: <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">. Then, add a class to your figure element with the name of the filter you would like to use (shown below)

    If you want to work locally, do the following:

    1. Download the CSSgram Library
      2. -
    2. Link to the CSSgram library within your project: -
      <link rel="stylesheet" href="css/vendor/cssgram.min.css">
      3. +
    3. Link to the CSSgram library within your project:
      <link rel="stylesheet" href="css/vendor/cssgram.min.css">
    4. Add a class to your figure element with the name of the filter you would like to use
    @@ -248,40 +237,39 @@

    Use CSS classes

    Available Classes

    For use in HTML markup: +
  • 1977: class="_1977"
    • +
  • Aden: class="aden"
    • +
  • Brooklyn: class="brooklyn"
    • +
  • Clarendon: class="clarendon"
    • +
  • Earlybird: class="earlybird"
    • +
  • Gingham: class="gingham"
    • +
  • Hudson: class="hudson"
    • +
  • Inkwell: class="inkwell"
    • +
  • Lark: class="lark"
    • +
  • Lo-Fi: class="lofi"
    • +
  • Mayfair: class="mayfair"
    • +
  • Moon: class="moon"
    • +
  • Nashville: class="nashville"
    • +
  • Perpetua: class="perpetua"
    • +
  • Reyes: class="reyes"
    • +
  • Rise: class="rise"
    • +
  • Slumber: class="slumber"
    • +
  • Toaster: class="toaster"
    • +
  • Walden: class="walden"
    • +
  • Willow: class="willow"
    • +
  • X-pro II: class="xpro2"
    • +
    -

    Use Sass @extends

    +

    2. Use Sass @extends

    -

    If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then @extend the filter effects within your style definitions. If you think extends are stupid, I will fight - you 😊.

    +

    If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then @extend the filter effects within your style definitions. If you think extends are stupid, I will fight you 😊.

    1. Download the /scss folder contents
    2. Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
      3. -
    3. Extend the silent placeholder selector @extend %aden; (or using mixins @include aden();) in your element.
      4. +
    4. Extend the silent placeholder selector @extend %aden; in your element.

    For example:

    @@ -300,345 +288,43 @@

    Use Sass @extends

    } - or using mixins (more flexible) - - 
    
-      // Sass (without adding new CSS3 filters)
-      .viz--beautiful {
-        @include aden();
-      }
-      // Sass (adding new CSS3 filters)
-      .viz--beautiful {
-        @include aden(blur(2px) /*...*/);
-      }
-
    - Alternatively, you can just download and link any individual .scss file in your Sass manifest:
    (i.e. scss/aden.scss), if you're just using one of the styles.

    Available Extends

    For use in Sass elements: -
    -
    - - - - - - -
    - -

    A tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes.

    -
    - -
    -
    -
    - Choose a sample image: - atx image - bike image - cacti image - lakegeneva image - tahoe image -
    - -
    - - Hovering over any of these images (or clicking on mobile) will remove the filter effect to visualize the changes. -
    - -
    - -
    -

    What is This?

    - -

    For more background on CSS Image Effects, you can check out my blog series here, or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters.

    - -

    Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we're doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic - these effects. This means less manual image processing and more fun filter effects on the web!

    - -

    We are using pseudo-elements (i.e. :before and :after) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <img>. The recommendation is to - wrap your images in a <figure> tag. More about the tag here.

    - -

    Browser Support

    - -

    This library uses CSS Filters and CSS Blend Modes. This features are supported in the following browsers:

    - - - -

    For more information, check on Can I Use.

    -
    -
    - -
    -

    Usage

    - -

    There are currently 2 ways to consume this library:

    - -

    Use CSS classes

    - -

    When using CSS classes, you can simply add the class with the filter name to the element containing your image.

    - -

    The quickest way to do this is to link to our CDN in your <head> tag: <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">. Then, add a class to your figure element - with the name of the filter you would like to use (shown below)

    - -

    If you want to work locally, do the following:

    - -
      -
    1. Download the CSSgram Library
      2. -
    2. Link to the CSSgram library within your project: -
      <link rel="stylesheet" href="css/vendor/cssgram.min.css">
      3. -
    3. Add a class to your figure element with the name of the filter you would like to use
      4. -
    - -

    For example:

    - - 
    
-      <!-- HTML -->
-      <figure class="aden">
-        <img src="../img.png">
-      </figure>
-
    - - Alternatively, you can just download and link to any individual css file:
    <link rel="stylesheet" href="css/vendor/aden.min.css">, if you're just using one of the styles.     - -

    Available Classes

    - For use in HTML markup: - - -
    - -

    Use Sass @extends

    - -

    If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then @extend the filter effects within your style definitions. If you think extends are stupid, I will fight - you 😊.

    +
  • 1977: @extend %_1977;
    • +
  • Aden: @extend %aden;
    • +
  • Brooklyn: @extend %brooklyn;
    • +
  • Clarendon: @extend %clarendon;
    • +
  • Earlybird: @extend %earlybird;
    • +
  • Gingham: @extend %gingham;
    • +
  • Hudson: @extend %hudson;
    • +
  • Inkwell: @extend %inkwell;
    • +
  • Lark: @extend %lark;
    • +
  • Lo-Fi: @extend %lofi;
    • +
  • Mayfair: @extend %mayfair;
    • +
  • Moon: @extend %moon;
    • +
  • Nashville: @extend %nashville;
    • +
  • Perpetua: @extend %perpetua;
    • +
  • Reyes: @extend %reyes;
    • +
  • Rise: @extend %rise;
    • +
  • Slumber: @extend %slumber;
    • +
  • Toaster: @extend %toaster;
    • +
  • Walden: @extend %walden;
    • +
  • Willow: @extend %willow;
    • +
  • X-pro II: @extend %xpro2;
    • + +
    + +

    3. Use Sass @mixins

    + +

    Mixins allow for multiple filter arguments to be passed into your classes. This is useful for if you want to add filters in addition to the ones provided (i.e. add a blur).

    1. Download the /scss folder contents
    2. Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
      3. -
    3. Extend the silent placeholder selector @extend %aden; (or using mixins @include aden();) in your element.
      4. +
    4. Include the mixin @include aden() in your element.

    For example:

    @@ -653,95 +339,55 @@

    Use Sass @extends

    
       // Sass
       .viz--beautiful {
-        @extend %aden;
+        @include aden()
       }
    - or using mixins (more flexible) +

    As mentioned above, you can also add additional filters as arguments when using the library with mixins:

    
-      // Sass (without adding new CSS3 filters)
-      .viz--beautiful {
-        @include aden();
-      }
-      // Sass (adding new CSS3 filters)
+      // Sass
       .viz--beautiful {
-        @include aden(blur(2px) /*...*/);
+        @include @include aden(blur(2px) /*...*/);
       }
    - Alternatively, you can just download and link any individual .scss file in your Sass manifest:
    (i.e. scss/aden.scss), if you're just using one of the styles.     - -

    Available Extends

    +

    Available Mixins

    For use in Sass elements: - -

    Available Mixins

    +
  • 1977: @include _1977();
    • +
  • Aden: @include aden();
    • +
  • Brooklyn: @include brooklyn();
    • +
  • Clarendon: @include clarendon();
    • +
  • Earlybird: @include earlybird();
    • +
  • Gingham: @include gingham();
    • +
  • Hudson: @include hudson();
    • +
  • Inkwell: @include inkwell();
    • +
  • Lark: @include lark();
    • +
  • Lo-Fi: @include lofi();
    • +
  • Mayfair: @include mayfair();
    • +
  • Moon: @include moon();
    • +
  • Nashville: @include nashville();
    • +
  • Perpetua: @include perpetua();
    • +
  • Reyes: @include reyes();
    • +
  • Rise: @include rise();
    • +
  • Slumber: @include slumber();
    • +
  • Toaster: @include toaster();
    • +
  • Walden: @include walden();
    • +
  • Willow: @include willow();
    • +
  • X-pro II: @include xpro2();
    • + +
    - - For use in Sass elements: -
    - (You can add more CSS3 filters as arguments) -     - - -
    - - - - } - document.addEventListener("click", function(event) { - if (/demo__option-img/.test(event.target.className)) pickSample(event.target) - }, false) - inputField.addEventListener("input", function() { - updateImages(this.value) - }, false) - inputField.addEventListener("focus", function() { - this.select() - }, false) - pickSample(document.querySelector(".demo__option-img")) - - - - + \ No newline at end of file diff --git a/site/index.twig b/site/index.twig index d28e555..097f795 100644 --- a/site/index.twig +++ b/site/index.twig @@ -74,9 +74,9 @@

    Usage

    -

    There are currently 2 ways to consume this library:

    +

    There are currently 3 ways to consume this library:

    -

    Use CSS classes

    +

    1. Use CSS classes

    When using CSS classes, you can simply add the class with the filter name to the element containing your image.

    @@ -113,7 +113,7 @@
    -

    Use Sass @extends

    +

    2. Use Sass @extends

    If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then @extend the filter effects within your style definitions. If you think extends are stupid, I will fight you 😊.

    @@ -151,6 +151,53 @@ {% endfor %}
    + +

    3. Use Sass @mixins

    + +

    Mixins allow for multiple filter arguments to be passed into your classes. This is useful for if you want to add filters in addition to the ones provided (i.e. add a blur).

    + +
      +
    1. Download the /scss folder contents
      2. +
    2. Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
      3. +
    3. Include the mixin @include aden() in your element.
      4. +
    + +

    For example:

    + + 
    
+      <!-- HTML -->
+      <figure class="viz--beautiful">
+        <img src="../img.png">
+      </figure>
+
    + + 
    
+      // Sass
+      .viz--beautiful {
+        @include aden()
+      }
+
    + +

    As mentioned above, you can also add additional filters as arguments when using the library with mixins:

    + + 
    
+      // Sass
+      .viz--beautiful {
+        @include @include aden(blur(2px) /*...*/);
+      }
+
    + +

    Available Mixins

    + For use in Sass elements: + +
    +
    {% endblock %} diff --git a/source/css/1977.css b/source/css/1977.css index 813123b..d78ef21 100644 --- a/source/css/1977.css +++ b/source/css/1977.css @@ -2,7 +2,9 @@ * 1977 * */ -._1977:before, ._1977:after { + +._1977:before, +._1977:after { content: ''; display: block; height: 100%; @@ -12,19 +14,25 @@ position: absolute; pointer-events: none; } + ._1977 { position: relative; } + ._1977 img { width: 100%; z-index: 1; } + ._1977:before { z-index: 2; } + ._1977:after { z-index: 3; } + ._1977 { -webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3); filter: contrast(1.1) brightness(1.1) saturate(1.3); } + ._1977:after { background: rgba(243, 106, 188, 0.3); mix-blend-mode: screen; } diff --git a/source/css/1977.min.css b/source/css/1977.min.css index ee34123..ee9be67 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}._1977 img{width:100%;z-index:1}._1977:before{z-index:2}._1977:after{z-index:3}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen} \ No newline at end of file +._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 diff --git a/source/css/aden.css b/source/css/aden.css index c12f856..796874e 100644 --- a/source/css/aden.css +++ b/source/css/aden.css @@ -3,7 +3,9 @@ * Aden * */ -.aden:before, .aden:after { + +.aden:before, +.aden:after { content: ''; display: block; height: 100%; @@ -13,19 +15,25 @@ position: absolute; pointer-events: none; } + .aden { position: relative; } + .aden img { width: 100%; z-index: 1; } + .aden:before { z-index: 2; } + .aden:after { z-index: 3; } + .aden { - -webkit-filter: hue-rotate(-20deg) contrast(.9) saturate(0.85) brightness(1.2); - filter: hue-rotate(-20deg) contrast(.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::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); diff --git a/source/css/aden.min.css b/source/css/aden.min.css index a6da160..e3819b8 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}.aden img{width:100%;z-index:1}.aden:before{z-index:2}.aden:after{z-index:3}.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken} \ No newline at end of file +.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 diff --git a/source/css/brooklyn.css b/source/css/brooklyn.css index 49f660f..312c4cb 100644 --- a/source/css/brooklyn.css +++ b/source/css/brooklyn.css @@ -3,7 +3,9 @@ * Brooklyn * */ -.brooklyn:before, .brooklyn:after { + +.brooklyn:before, +.brooklyn:after { content: ''; display: block; height: 100%; @@ -13,19 +15,25 @@ position: absolute; pointer-events: none; } + .brooklyn { position: relative; } + .brooklyn img { width: 100%; z-index: 1; } + .brooklyn:before { z-index: 2; } + .brooklyn:after { z-index: 3; } + .brooklyn { - -webkit-filter: contrast(.9) brightness(1.1); - filter: contrast(.9) brightness(1.1); } + -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); background: 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 75c6e66..71a7c3d 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}.brooklyn img{width:100%;z-index:1}.brooklyn:before{z-index:2}.brooklyn:after{z-index:3}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay} \ No newline at end of file +.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 diff --git a/source/css/clarendon.css b/source/css/clarendon.css index e189c41..77cd77c 100644 --- a/source/css/clarendon.css +++ b/source/css/clarendon.css @@ -2,7 +2,9 @@ * Clarendon * */ -.clarendon:before, .clarendon:after { + +.clarendon:before, +.clarendon:after { content: ''; display: block; height: 100%; @@ -12,19 +14,25 @@ position: absolute; pointer-events: none; } + .clarendon { position: relative; } + .clarendon img { width: 100%; z-index: 1; } + .clarendon:before { z-index: 2; } + .clarendon:after { 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); mix-blend-mode: overlay; } diff --git a/source/css/clarendon.min.css b/source/css/clarendon.min.css index 7f385be..cdef66b 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}.clarendon img{width:100%;z-index:1}.clarendon:before{z-index:2}.clarendon:after{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,.2);mix-blend-mode:overlay} \ No newline at end of file +.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 diff --git a/source/css/cssgram.css b/source/css/cssgram.css index b7ba353..c005430 100644 --- a/source/css/cssgram.css +++ b/source/css/cssgram.css @@ -1,4 +1,46 @@ -.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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -8,14 +50,98 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } /* @@ -23,7 +149,49 @@ * 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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -33,19 +201,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .aden { - -webkit-filter: hue-rotate(-20deg) contrast(.9) saturate(0.85) brightness(1.2); - filter: hue-rotate(-20deg) contrast(.9) saturate(0.85) brightness(1.2); } + -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); background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent); @@ -56,16 +310,205 @@ * Inkwell * */ + +.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, +.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 { + 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 { + 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 { + 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 { + 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 { + z-index: 3; } + + .inkwell { - -webkit-filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1); - filter: sepia(.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); } /* * * 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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -75,16 +518,101 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .perpetua::after { background: -webkit-linear-gradient(top, #005b9a, #e6c13d); background: linear-gradient(to bottom, #005b9a, #e6c13d); @@ -96,7 +624,49 @@ * Reyes * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -106,19 +676,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .reyes { - -webkit-filter: sepia(.22) brightness(1.1) contrast(.85) saturate(0.75); - filter: sepia(.22) brightness(1.1) contrast(.85) saturate(0.75); } + -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; mix-blend-mode: soft-light; @@ -129,7 +785,49 @@ * Gingham * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -139,19 +837,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .gingham { -webkit-filter: brightness(1.05) hue-rotate(-10deg); filter: brightness(1.05) hue-rotate(-10deg); } + .gingham::after { background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent); background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent); @@ -162,7 +946,49 @@ * Toaster * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -172,19 +998,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .toaster { - -webkit-filter: contrast(1.5) brightness(.9); - filter: contrast(1.5) brightness(.9); } + -webkit-filter: contrast(1.5) brightness(0.9); + filter: contrast(1.5) brightness(0.9); } + .toaster::after { background: -webkit-radial-gradient(circle, #804e0f, #3b003b); background: radial-gradient(circle, #804e0f, #3b003b); @@ -195,7 +1107,49 @@ * Walden * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -205,19 +1159,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .walden { - -webkit-filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6); - filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6); } + -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; mix-blend-mode: screen; @@ -228,7 +1268,49 @@ * Hudson * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -238,19 +1320,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .hudson { - -webkit-filter: brightness(1.2) contrast(.9) saturate(1.1); - filter: brightness(1.2) contrast(.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::after { background: -webkit-radial-gradient(circle, #a6b1ff 50%, #342134); background: radial-gradient(circle, #a6b1ff 50%, #342134); @@ -262,7 +1430,49 @@ * Earlybird * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -272,19 +1482,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .earlybird { - -webkit-filter: contrast(.9) sepia(.2); - filter: contrast(.9) sepia(.2); } + -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%); background: radial-gradient(circle, #d0ba8e 20%, #360309 85%, #1d0210 100%); @@ -295,7 +1591,49 @@ * Mayfair * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -305,19 +1643,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { 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%); background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.8), rgba(255, 200, 200, 0.6), #111111 60%); @@ -328,7 +1752,49 @@ * Lo-fi * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -338,19 +1804,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { 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%); background: radial-gradient(circle, transparent 70%, #222222 150%); @@ -360,7 +1912,49 @@ * 1977 * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -370,19 +1964,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + ._1977 { -webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3); filter: contrast(1.1) brightness(1.1) saturate(1.3); } + ._1977:after { background: rgba(243, 106, 188, 0.3); mix-blend-mode: screen; } @@ -392,7 +2072,49 @@ * Brooklyn * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -402,19 +2124,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .brooklyn { - -webkit-filter: contrast(.9) brightness(1.1); - filter: contrast(.9) brightness(1.1); } + -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); background: radial-gradient(circle, rgba(168, 223, 193, 0.4) 70%, #c4b7c8); @@ -425,7 +2233,49 @@ * X-Pro II * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -435,19 +2285,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .xpro2 { - -webkit-filter: sepia(.3); - filter: sepia(.3); } + -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%); background: radial-gradient(circle, #e6e7e0 40%, rgba(43, 42, 161, 0.6) 110%); @@ -458,7 +2394,49 @@ * Nashville * */ -.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .lark:before, .moon:before, .clarendon:before, .willow:before, .rise:before, .slumber: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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -468,22 +2446,109 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .nashville { - -webkit-filter: sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2); - filter: sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2); } + -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); mix-blend-mode: lighten; } + .nashville::before { background: rgba(247, 176, 153, 0.56); mix-blend-mode: darken; } @@ -492,7 +2557,49 @@ * Lark * */ -.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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -502,22 +2609,109 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .lark { - -webkit-filter: contrast(.9); - filter: contrast(.9); } + -webkit-filter: contrast(0.9); + filter: contrast(0.9); } + .lark::after { background: rgba(242, 242, 242, 0.8); mix-blend-mode: darken; } + .lark::before { background: #22253f; mix-blend-mode: color-dodge; } @@ -526,7 +2720,49 @@ * Moon * */ -.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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -536,22 +2772,109 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { 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; mix-blend-mode: soft-light; } + .moon::after { background: #383838; mix-blend-mode: lighten; } @@ -560,7 +2883,49 @@ * Clarendon * */ -.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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -570,19 +2935,105 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { 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); mix-blend-mode: overlay; } @@ -591,7 +3042,49 @@ * Willow * */ -.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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -601,22 +3094,109 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .willow { - -webkit-filter: grayscale(0.5) contrast(.95) brightness(.9); - filter: grayscale(0.5) contrast(.95) brightness(.9); } + -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%); mix-blend-mode: overlay; } + .willow::after { background-color: #d8cdcb; mix-blend-mode: color; } @@ -626,7 +3206,49 @@ * Rise * */ -.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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -636,24 +3258,111 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { z-index: 3; } + .rise { - -webkit-filter: brightness(1.05) sepia(.2) contrast(.9) saturate(0.9); - filter: brightness(1.05) sepia(.2) contrast(.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::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)); @@ -664,7 +3373,49 @@ * Slumber * */ -.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, .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 { + +.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, +.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 { content: ''; display: block; height: 100%; @@ -674,22 +3425,109 @@ 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 { + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber { 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 { + + .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 { 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 { + + .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 { 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 { + + .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 { 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); mix-blend-mode: soft-light; } + .slumber::before { background: rgba(69, 41, 12, 0.4); mix-blend-mode: lighten; } diff --git a/source/css/cssgram.min.css b/source/css/cssgram.min.css index 582e1bd..a0d0803 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}.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);mix-blend-mode:soft-light;opacity:.5}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad;mix-blend-mode:soft-light;opacity:.5}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);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}._1977:after,._1977:before,.aden:after,.aden: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,.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,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.walden,.willow,.xpro2{position:relative}._1977 img,.aden 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,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden: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,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden: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,.walden:after,.willow:after,.xpro2:after{z-index:3}.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} \ No newline at end of file +.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}._1977:after,._1977:before,.aden:after,.aden: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,.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,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.walden,.willow,.xpro2{position:relative}._1977 img,.aden 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,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden: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,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden: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,.walden:after,.willow:after,.xpro2:after{z-index:3}.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} \ No newline at end of file diff --git a/source/css/earlybird.css b/source/css/earlybird.css index 3834fbd..2b84ef1 100644 --- a/source/css/earlybird.css +++ b/source/css/earlybird.css @@ -3,7 +3,9 @@ * Earlybird * */ -.earlybird:before, .earlybird:after { + +.earlybird:before, +.earlybird:after { content: ''; display: block; height: 100%; @@ -13,19 +15,25 @@ position: absolute; pointer-events: none; } + .earlybird { position: relative; } + .earlybird img { width: 100%; z-index: 1; } + .earlybird:before { z-index: 2; } + .earlybird:after { z-index: 3; } + .earlybird { - -webkit-filter: contrast(.9) sepia(.2); - filter: contrast(.9) sepia(.2); } + -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%); background: radial-gradient(circle, #d0ba8e 20%, #360309 85%, #1d0210 100%); diff --git a/source/css/earlybird.min.css b/source/css/earlybird.min.css index f45c634..dd72762 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}.earlybird img{width:100%;z-index:1}.earlybird:before{z-index:2}.earlybird:after{z-index:3}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay} \ No newline at end of file +.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 diff --git a/source/css/gingham.css b/source/css/gingham.css index 89311f8..0990124 100644 --- a/source/css/gingham.css +++ b/source/css/gingham.css @@ -3,7 +3,9 @@ * Gingham * */ -.gingham:before, .gingham:after { + +.gingham:before, +.gingham:after { content: ''; display: block; height: 100%; @@ -13,19 +15,25 @@ position: absolute; pointer-events: none; } + .gingham { position: relative; } + .gingham img { width: 100%; z-index: 1; } + .gingham:before { z-index: 2; } + .gingham:after { z-index: 3; } + .gingham { -webkit-filter: brightness(1.05) hue-rotate(-10deg); filter: brightness(1.05) hue-rotate(-10deg); } + .gingham::after { background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent); background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent); diff --git a/source/css/gingham.min.css b/source/css/gingham.min.css index 1bdd665..f2dc80b 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}.gingham img{width:100%;z-index:1}.gingham:before{z-index:2}.gingham:after{z-index:3}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken} \ No newline at end of file +.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 diff --git a/source/css/hudson.css b/source/css/hudson.css index 8123037..0a6da79 100644 --- a/source/css/hudson.css +++ b/source/css/hudson.css @@ -3,7 +3,9 @@ * Hudson * */ -.hudson:before, .hudson:after { + +.hudson:before, +.hudson:after { content: ''; display: block; height: 100%; @@ -13,19 +15,25 @@ position: absolute; pointer-events: none; } + .hudson { position: relative; } + .hudson img { width: 100%; z-index: 1; } + .hudson:before { z-index: 2; } + .hudson:after { z-index: 3; } + .hudson { - -webkit-filter: brightness(1.2) contrast(.9) saturate(1.1); - filter: brightness(1.2) contrast(.9) saturate(1.1); } + -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); background: radial-gradient(circle, #a6b1ff 50%, #342134); diff --git a/source/css/hudson.min.css b/source/css/hudson.min.css index 17a3394..334a161 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}.hudson img{width:100%;z-index:1}.hudson:before{z-index:2}.hudson:after{z-index:3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5} \ No newline at end of file +.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 diff --git a/source/css/inkwell.css b/source/css/inkwell.css index 6d147c1..4cc6494 100644 --- a/source/css/inkwell.css +++ b/source/css/inkwell.css @@ -3,6 +3,33 @@ * Inkwell * */ + +.inkwell:before, +.inkwell:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + + .inkwell { - -webkit-filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1); - filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1); } + position: relative; } + + .inkwell img { + width: 100%; + z-index: 1; } + + .inkwell:before { + z-index: 2; } + + .inkwell:after { + 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 97b3451..082c158 100644 --- a/source/css/inkwell.min.css +++ b/source/css/inkwell.min.css @@ -1 +1 @@ -.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)} \ No newline at end of file +.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 diff --git a/source/css/lark.css b/source/css/lark.css index 90e11b1..bac6c2f 100644 --- a/source/css/lark.css +++ b/source/css/lark.css @@ -2,7 +2,9 @@ * Lark * */ -.lark:before, .lark:after { + +.lark:before, +.lark:after { content: ''; display: block; height: 100%; @@ -12,22 +14,29 @@ position: absolute; pointer-events: none; } + .lark { position: relative; } + .lark img { width: 100%; z-index: 1; } + .lark:before { z-index: 2; } + .lark:after { z-index: 3; } + .lark { - -webkit-filter: contrast(.9); - filter: contrast(.9); } + -webkit-filter: contrast(0.9); + filter: contrast(0.9); } + .lark::after { background: rgba(242, 242, 242, 0.8); mix-blend-mode: darken; } + .lark::before { background: #22253f; mix-blend-mode: color-dodge; } diff --git a/source/css/lark.min.css b/source/css/lark.min.css index 9959758..d412c8d 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}.lark img{width:100%;z-index:1}.lark:before{z-index:2}.lark:after{z-index:3}.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} \ No newline at end of file +.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 diff --git a/source/css/lofi.css b/source/css/lofi.css index 790befa..a7a1680 100644 --- a/source/css/lofi.css +++ b/source/css/lofi.css @@ -2,7 +2,9 @@ * Lo-fi * */ -.lofi:before, .lofi:after { + +.lofi:before, +.lofi:after { content: ''; display: block; height: 100%; @@ -12,19 +14,25 @@ position: absolute; pointer-events: none; } + .lofi { position: relative; } + .lofi img { width: 100%; z-index: 1; } + .lofi:before { z-index: 2; } + .lofi:after { z-index: 3; } + .lofi { -webkit-filter: saturate(1.1) contrast(1.5); filter: saturate(1.1) contrast(1.5); } + .lofi::after { background: -webkit-radial-gradient(circle, transparent 70%, #222222 150%); background: radial-gradient(circle, transparent 70%, #222222 150%); diff --git a/source/css/lofi.min.css b/source/css/lofi.min.css index 3ca3a8c..cdd0df0 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}.lofi img{width:100%;z-index:1}.lofi:before{z-index:2}.lofi:after{z-index:3}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply} \ No newline at end of file +.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 diff --git a/source/css/mayfair.css b/source/css/mayfair.css index 5f343d6..cfb3049 100644 --- a/source/css/mayfair.css +++ b/source/css/mayfair.css @@ -3,7 +3,9 @@ * Mayfair * */ -.mayfair:before, .mayfair:after { + +.mayfair:before, +.mayfair:after { content: ''; display: block; height: 100%; @@ -13,19 +15,25 @@ position: absolute; pointer-events: none; } + .mayfair { position: relative; } + .mayfair img { width: 100%; z-index: 1; } + .mayfair:before { z-index: 2; } + .mayfair:after { z-index: 3; } + .mayfair { -webkit-filter: contrast(1.1) saturate(1.1); filter: contrast(1.1) saturate(1.1); } + .mayfair::after { background: -webkit-radial-gradient(40% 40%, circle, rgba(255, 255, 255, 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%); diff --git a/source/css/mayfair.min.css b/source/css/mayfair.min.css index 810044f..0b54183 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}.mayfair img{width:100%;z-index:1}.mayfair:before{z-index:2}.mayfair:after{z-index:3}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4} \ No newline at end of file +.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 diff --git a/source/css/moon.css b/source/css/moon.css index a6bdfa2..405d4d0 100644 --- a/source/css/moon.css +++ b/source/css/moon.css @@ -2,7 +2,9 @@ * Moon * */ -.moon:before, .moon:after { + +.moon:before, +.moon:after { content: ''; display: block; height: 100%; @@ -12,22 +14,29 @@ position: absolute; pointer-events: none; } + .moon { position: relative; } + .moon img { width: 100%; z-index: 1; } + .moon:before { z-index: 2; } + .moon:after { 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; mix-blend-mode: soft-light; } + .moon::after { background: #383838; mix-blend-mode: lighten; } diff --git a/source/css/moon.min.css b/source/css/moon.min.css index a462f0a..2ed21ac 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}.moon img{width:100%;z-index:1}.moon:before{z-index:2}.moon:after{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;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten} \ No newline at end of file +.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 diff --git a/source/css/nashville.css b/source/css/nashville.css index fc9ef64..c4a15f9 100644 --- a/source/css/nashville.css +++ b/source/css/nashville.css @@ -3,7 +3,9 @@ * Nashville * */ -.nashville:before, .nashville:after { + +.nashville:before, +.nashville:after { content: ''; display: block; height: 100%; @@ -13,22 +15,29 @@ position: absolute; pointer-events: none; } + .nashville { position: relative; } + .nashville img { width: 100%; z-index: 1; } + .nashville:before { z-index: 2; } + .nashville:after { z-index: 3; } + .nashville { - -webkit-filter: sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2); - filter: sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2); } + -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); mix-blend-mode: lighten; } + .nashville::before { background: rgba(247, 176, 153, 0.56); mix-blend-mode: darken; } diff --git a/source/css/nashville.min.css b/source/css/nashville.min.css index 8fae499..014ed23 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}.nashville img{width:100%;z-index:1}.nashville:before{z-index:2}.nashville:after{z-index:3}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken} \ No newline at end of file +.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 diff --git a/source/css/perpetua.css b/source/css/perpetua.css index 3f7b439..64990df 100644 --- a/source/css/perpetua.css +++ b/source/css/perpetua.css @@ -3,7 +3,9 @@ * Perpetua * */ -.perpetua:before, .perpetua:after { + +.perpetua:before, +.perpetua:after { content: ''; display: block; height: 100%; @@ -13,16 +15,21 @@ 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); diff --git a/source/css/reyes.css b/source/css/reyes.css index 7bc0c0a..82cb1ac 100644 --- a/source/css/reyes.css +++ b/source/css/reyes.css @@ -3,7 +3,9 @@ * Reyes * */ -.reyes:before, .reyes:after { + +.reyes:before, +.reyes:after { content: ''; display: block; height: 100%; @@ -13,19 +15,25 @@ position: absolute; pointer-events: none; } + .reyes { position: relative; } + .reyes img { width: 100%; z-index: 1; } + .reyes:before { z-index: 2; } + .reyes:after { z-index: 3; } + .reyes { - -webkit-filter: sepia(.22) brightness(1.1) contrast(.85) saturate(0.75); - filter: sepia(.22) brightness(1.1) contrast(.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::after { background: #efcdad; mix-blend-mode: soft-light; diff --git a/source/css/reyes.min.css b/source/css/reyes.min.css index 5c84ab9..7c2a10d 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}.reyes img{width:100%;z-index:1}.reyes:before{z-index:2}.reyes:after{z-index:3}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad;mix-blend-mode:soft-light;opacity:.5} \ No newline at end of file +.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 diff --git a/source/css/rise.css b/source/css/rise.css index c9625de..1073485 100644 --- a/source/css/rise.css +++ b/source/css/rise.css @@ -3,7 +3,9 @@ * Rise * */ -.rise:before, .rise:after { + +.rise:before, +.rise:after { content: ''; display: block; height: 100%; @@ -13,24 +15,31 @@ position: absolute; pointer-events: none; } + .rise { position: relative; } + .rise img { width: 100%; z-index: 1; } + .rise:before { z-index: 2; } + .rise:after { z-index: 3; } + .rise { - -webkit-filter: brightness(1.05) sepia(.2) contrast(.9) saturate(0.9); - filter: brightness(1.05) sepia(.2) contrast(.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::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)); diff --git a/source/css/rise.min.css b/source/css/rise.min.css index 189c535..092540e 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}.rise img{width:100%;z-index:1}.rise:before{z-index:2}.rise:after{z-index:3}.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} \ No newline at end of file +.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 diff --git a/source/css/slumber.css b/source/css/slumber.css index 4842fa4..84ee7b6 100644 --- a/source/css/slumber.css +++ b/source/css/slumber.css @@ -3,7 +3,9 @@ * Slumber * */ -.slumber:before, .slumber:after { + +.slumber:before, +.slumber:after { content: ''; display: block; height: 100%; @@ -13,22 +15,29 @@ position: absolute; pointer-events: none; } + .slumber { position: relative; } + .slumber img { width: 100%; z-index: 1; } + .slumber:before { z-index: 2; } + .slumber:after { 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); mix-blend-mode: soft-light; } + .slumber::before { background: rgba(69, 41, 12, 0.4); mix-blend-mode: lighten; } diff --git a/source/css/slumber.min.css b/source/css/slumber.min.css index b6242e7..3aa0e75 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}.slumber img{width:100%;z-index:1}.slumber:before{z-index:2}.slumber:after{z-index:3}.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} \ No newline at end of file +.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 diff --git a/source/css/toaster.css b/source/css/toaster.css index 16307d9..6d8f966 100644 --- a/source/css/toaster.css +++ b/source/css/toaster.css @@ -3,7 +3,9 @@ * Toaster * */ -.toaster:before, .toaster:after { + +.toaster:before, +.toaster:after { content: ''; display: block; height: 100%; @@ -13,19 +15,25 @@ position: absolute; pointer-events: none; } + .toaster { position: relative; } + .toaster img { width: 100%; z-index: 1; } + .toaster:before { z-index: 2; } + .toaster:after { z-index: 3; } + .toaster { - -webkit-filter: contrast(1.5) brightness(.9); - filter: contrast(1.5) brightness(.9); } + -webkit-filter: contrast(1.5) brightness(0.9); + filter: contrast(1.5) brightness(0.9); } + .toaster::after { background: -webkit-radial-gradient(circle, #804e0f, #3b003b); background: radial-gradient(circle, #804e0f, #3b003b); diff --git a/source/css/toaster.min.css b/source/css/toaster.min.css index e9b3290..8beefc4 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}.toaster img{width:100%;z-index:1}.toaster:before{z-index:2}.toaster:after{z-index:3}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen} \ No newline at end of file +.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 diff --git a/source/css/walden.css b/source/css/walden.css index 4349187..2a80643 100644 --- a/source/css/walden.css +++ b/source/css/walden.css @@ -3,7 +3,9 @@ * Walden * */ -.walden:before, .walden:after { + +.walden:before, +.walden:after { content: ''; display: block; height: 100%; @@ -13,19 +15,25 @@ position: absolute; pointer-events: none; } + .walden { position: relative; } + .walden img { width: 100%; z-index: 1; } + .walden:before { z-index: 2; } + .walden:after { z-index: 3; } + .walden { - -webkit-filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6); - filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6); } + -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; mix-blend-mode: screen; diff --git a/source/css/walden.min.css b/source/css/walden.min.css index b5f34cb..ea2e6eb 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}.walden img{width:100%;z-index:1}.walden:before{z-index:2}.walden:after{z-index:3}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3} \ No newline at end of file +.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 diff --git a/source/css/willow.css b/source/css/willow.css index 23344a5..3790a7a 100644 --- a/source/css/willow.css +++ b/source/css/willow.css @@ -2,7 +2,9 @@ * Willow * */ -.willow:before, .willow:after { + +.willow:before, +.willow:after { content: ''; display: block; height: 100%; @@ -12,22 +14,29 @@ position: absolute; pointer-events: none; } + .willow { position: relative; } + .willow img { width: 100%; z-index: 1; } + .willow:before { z-index: 2; } + .willow:after { z-index: 3; } + .willow { - -webkit-filter: grayscale(0.5) contrast(.95) brightness(.9); - filter: grayscale(0.5) contrast(.95) brightness(.9); } + -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%); mix-blend-mode: overlay; } + .willow::after { background-color: #d8cdcb; mix-blend-mode: color; } diff --git a/source/css/willow.min.css b/source/css/willow.min.css index bcc56de..4b00dca 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}.willow img{width:100%;z-index:1}.willow:before{z-index:2}.willow:after{z-index:3}.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} \ No newline at end of file +.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 diff --git a/source/css/xpro2.css b/source/css/xpro2.css index c8fe142..27b5ddc 100644 --- a/source/css/xpro2.css +++ b/source/css/xpro2.css @@ -3,7 +3,9 @@ * X-Pro II * */ -.xpro2:before, .xpro2:after { + +.xpro2:before, +.xpro2:after { content: ''; display: block; height: 100%; @@ -13,19 +15,25 @@ position: absolute; pointer-events: none; } + .xpro2 { position: relative; } + .xpro2 img { width: 100%; z-index: 1; } + .xpro2:before { z-index: 2; } + .xpro2:after { z-index: 3; } + .xpro2 { - -webkit-filter: sepia(.3); - filter: sepia(.3); } + -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%); background: 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 d69b479..dfc5050 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}.xpro2 img{width:100%;z-index:1}.xpro2:before{z-index:2}.xpro2:after{z-index:3}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn} \ No newline at end of file +.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