diff --git a/README.md b/README.md index 9d0b6f8..7106851 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Instagram filter library in Sass and CSS. 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. `:after`) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like ``). The recommendation is to wrap your images in a `
` tag. More about the tag [here.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) +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 ``). The recommendation is to wrap your images in a `
` tag. More about the tag [here.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) ## Browser Support diff --git a/site/css/1977.min.css b/site/css/1977.min.css index 048eda4..ee34123 100644 --- a/site/css/1977.min.css +++ b/site/css/1977.min.css @@ -1 +1 @@ -._1977{position:relative}._1977 img{width:100%;z-index:1}._1977:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._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}._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 diff --git a/site/css/aden.min.css b/site/css/aden.min.css index 201acb4..9cb969e 100644 --- a/site/css/aden.min.css +++ b/site/css/aden.min.css @@ -1 +1 @@ -.aden{position:relative}.aden img{width:100%;z-index:1}.aden:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.aden:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/site/css/brooklyn.min.css b/site/css/brooklyn.min.css index 11248d8..d7adc6b 100644 --- a/site/css/brooklyn.min.css +++ b/site/css/brooklyn.min.css @@ -1 +1 @@ -.brooklyn{position:relative}.brooklyn img{width:100%;z-index:1}.brooklyn:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brooklyn:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/site/css/cssgram.min.css b/site/css/cssgram.min.css index 8a11a81..90f673d 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}._1977,.aden,.brooklyn,.earlybird,.gingham,.hudson,.inkwell,.lofi,.mayfair,.nashville,.perpetua,.reyes,.toaster,.walden,.xpro2{position:relative}._1977 img,.aden img,.brooklyn img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lofi img,.mayfair img,.nashville img,.perpetua img,.reyes img,.toaster img,.walden img,.xpro2 img{width:100%;z-index:1}._1977:after,.aden:after,.brooklyn:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lofi:after,.mayfair:after,.nashville:after,.perpetua:after,.reyes:after,.toaster:after,.walden:after,.xpro2:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977:before,.aden:before,.brooklyn:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lofi:before,.mayfair:before,.nashville:before,.perpetua:before,.reyes:before,.toaster:before,.walden:before,.xpro2:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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 +.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}._1977:after,._1977:before,.aden:after,.aden:before,.brooklyn:after,.brooklyn:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.toaster:after,.toaster:before,.walden:after,.walden:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brooklyn,.earlybird,.gingham,.hudson,.inkwell,.lofi,.mayfair,.nashville,.perpetua,.reyes,.toaster,.walden,.xpro2{position:relative}._1977 img,.aden img,.brooklyn img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lofi img,.mayfair img,.nashville img,.perpetua img,.reyes img,.toaster img,.walden img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brooklyn:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lofi:before,.mayfair:before,.nashville:before,.perpetua:before,.reyes:before,.toaster:before,.walden:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brooklyn:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lofi:after,.mayfair:after,.nashville:after,.perpetua:after,.reyes:after,.toaster:after,.walden:after,.xpro2: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 diff --git a/site/css/demo-site.css b/site/css/demo-site.css index 445c4bd..50963a2 100644 --- a/site/css/demo-site.css +++ b/site/css/demo-site.css @@ -1,60 +1,48 @@ @charset "UTF-8"; +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } /* * * Aden * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .aden { -webkit-filter: hue-rotate(-20deg) contrast(.9) saturate(0.85) brightness(1.2); @@ -78,31 +66,25 @@ * Perpetua * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .perpetua:after { background: -webkit-linear-gradient(top, #005b9a, #e6c13d); @@ -115,31 +97,25 @@ * Reyes * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .reyes { -webkit-filter: sepia(.22) brightness(1.1) contrast(.85) saturate(0.75); @@ -154,31 +130,25 @@ * Gingham * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .gingham { -webkit-filter: brightness(1.05) hue-rotate(-10deg); @@ -193,31 +163,25 @@ * Toaster * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .toaster { -webkit-filter: contrast(1.5) brightness(.9); @@ -232,31 +196,25 @@ * Walden * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .walden { -webkit-filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6); @@ -271,31 +229,25 @@ * Hudson * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .hudson { -webkit-filter: brightness(1.2) contrast(.9) saturate(1.1); @@ -311,31 +263,25 @@ * Earlybird * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .earlybird { -webkit-filter: contrast(.9) sepia(.2); @@ -350,31 +296,25 @@ * Mayfair * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .mayfair { -webkit-filter: contrast(1.1) saturate(1.1); @@ -389,31 +329,25 @@ * Lo-fi * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .lofi { -webkit-filter: saturate(1.1) contrast(1.5); @@ -427,31 +361,25 @@ * 1977 * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } ._1977 { -webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3); @@ -465,31 +393,25 @@ * Brooklyn * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .brooklyn { -webkit-filter: contrast(.9) brightness(1.1); @@ -504,31 +426,25 @@ * X-Pro II * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .xpro2 { -webkit-filter: sepia(.3); @@ -543,31 +459,25 @@ * Nashville * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .nashville { -webkit-filter: sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2); diff --git a/site/css/demo-site.min.css b/site/css/demo-site.min.css index 1f393d7..4a4b50c 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}._1977,.aden,.brooklyn,.earlybird,.gingham,.hudson,.inkwell,.lofi,.mayfair,.nashville,.perpetua,.reyes,.toaster,.walden,.xpro2{position:relative}._1977 img,.aden img,.brooklyn img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lofi img,.mayfair img,.nashville img,.perpetua img,.reyes img,.toaster img,.walden img,.xpro2 img{width:100%;z-index:1}._1977:after,.aden:after,.brooklyn:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lofi:after,.mayfair:after,.nashville:after,.perpetua:after,.reyes:after,.toaster:after,.walden:after,.xpro2:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977:before,.aden:before,.brooklyn:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lofi:before,.mayfair:before,.nashville:before,.perpetua:before,.reyes:before,.toaster:before,.walden:before,.xpro2:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}::-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:after{-webkit-transition-duration:.35s;transition-duration:.35s}figure:focus:after,figure:hover:after{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";.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}._1977:after,._1977:before,.aden:after,.aden:before,.brooklyn:after,.brooklyn:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.toaster:after,.toaster:before,.walden:after,.walden:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brooklyn,.earlybird,.gingham,.hudson,.inkwell,.lofi,.mayfair,.nashville,.perpetua,.reyes,.toaster,.walden,.xpro2{position:relative}._1977 img,.aden img,.brooklyn img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lofi img,.mayfair img,.nashville img,.perpetua img,.reyes img,.toaster img,.walden img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brooklyn:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lofi:before,.mayfair:before,.nashville:before,.perpetua:before,.reyes:before,.toaster:before,.walden:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brooklyn:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lofi:after,.mayfair:after,.nashville:after,.perpetua:after,.reyes:after,.toaster:after,.walden:after,.xpro2: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}::-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:after{-webkit-transition-duration:.35s;transition-duration:.35s}figure:focus:after,figure:hover:after{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 diff --git a/site/css/earlybird.min.css b/site/css/earlybird.min.css index b630c10..3abe93a 100644 --- a/site/css/earlybird.min.css +++ b/site/css/earlybird.min.css @@ -1 +1 @@ -.earlybird{position:relative}.earlybird img{width:100%;z-index:1}.earlybird:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.earlybird:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/site/css/gingham.min.css b/site/css/gingham.min.css index 3febe94..4a1572a 100644 --- a/site/css/gingham.min.css +++ b/site/css/gingham.min.css @@ -1 +1 @@ -.gingham{position:relative}.gingham img{width:100%;z-index:1}.gingham:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.gingham:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/site/css/hudson.min.css b/site/css/hudson.min.css index 930aeb4..99dbd08 100644 --- a/site/css/hudson.min.css +++ b/site/css/hudson.min.css @@ -1 +1 @@ -.hudson{position:relative}.hudson img{width:100%;z-index:1}.hudson:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.hudson:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/site/css/lofi.min.css b/site/css/lofi.min.css index b0d212d..c5a3534 100644 --- a/site/css/lofi.min.css +++ b/site/css/lofi.min.css @@ -1 +1 @@ -.lofi{position:relative}.lofi img{width:100%;z-index:1}.lofi:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lofi:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/site/css/mayfair.min.css b/site/css/mayfair.min.css index 3c28c24..9d19697 100644 --- a/site/css/mayfair.min.css +++ b/site/css/mayfair.min.css @@ -1 +1 @@ -.mayfair{position:relative}.mayfair img{width:100%;z-index:1}.mayfair:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.mayfair:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/site/css/nashville.min.css b/site/css/nashville.min.css index 2cda8be..8fae499 100644 --- a/site/css/nashville.min.css +++ b/site/css/nashville.min.css @@ -1 +1 @@ -.nashville{position:relative}.nashville img{width:100%;z-index:1}.nashville:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.nashville:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/site/css/perpetua.min.css b/site/css/perpetua.min.css index 2b78364..8c4341b 100644 --- a/site/css/perpetua.min.css +++ b/site/css/perpetua.min.css @@ -1 +1 @@ -.perpetua{position:relative}.perpetua img{width:100%;z-index:1}.perpetua:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.perpetua:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.perpetua:after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d);mix-blend-mode:soft-light;opacity:.5} \ No newline at end of file +.perpetua:after,.perpetua:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.perpetua{position:relative}.perpetua img{width:100%;z-index:1}.perpetua:before{z-index:2}.perpetua:after{z-index:3;background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d);mix-blend-mode:soft-light;opacity:.5} \ No newline at end of file diff --git a/site/css/reyes.min.css b/site/css/reyes.min.css index b489cb6..8a7ad26 100644 --- a/site/css/reyes.min.css +++ b/site/css/reyes.min.css @@ -1 +1 @@ -.reyes{position:relative}.reyes img{width:100%;z-index:1}.reyes:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.reyes:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/site/css/toaster.min.css b/site/css/toaster.min.css index 98361f0..9c35195 100644 --- a/site/css/toaster.min.css +++ b/site/css/toaster.min.css @@ -1 +1 @@ -.toaster{position:relative}.toaster img{width:100%;z-index:1}.toaster:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.toaster:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/site/css/walden.min.css b/site/css/walden.min.css index 3cba946..0c7e769 100644 --- a/site/css/walden.min.css +++ b/site/css/walden.min.css @@ -1 +1 @@ -.walden{position:relative}.walden img{width:100%;z-index:1}.walden:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.walden:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/site/css/xpro2.min.css b/site/css/xpro2.min.css index 676dcc5..ac56684 100644 --- a/site/css/xpro2.min.css +++ b/site/css/xpro2.min.css @@ -1 +1 @@ -.xpro2{position:relative}.xpro2 img{width:100%;z-index:1}.xpro2:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.xpro2:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/site/index.html b/site/index.html index 54142f6..f405cde 100644 --- a/site/index.html +++ b/site/index.html @@ -143,7 +143,7 @@

What is This?

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

-

We are using pseudo-elements (i.e. :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

diff --git a/site/index.twig b/site/index.twig index 05b239a..ce3b473 100644 --- a/site/index.twig +++ b/site/index.twig @@ -142,7 +142,7 @@

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. :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

diff --git a/source/css/1977.css b/source/css/1977.css index a24c5ba..813123b 100644 --- a/source/css/1977.css +++ b/source/css/1977.css @@ -2,31 +2,25 @@ * 1977 * */ +._1977:before, ._1977:after { + 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:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } ._1977:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + ._1977:after { + z-index: 3; } ._1977 { -webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3); diff --git a/source/css/1977.min.css b/source/css/1977.min.css index 048eda4..ee34123 100644 --- a/source/css/1977.min.css +++ b/source/css/1977.min.css @@ -1 +1 @@ -._1977{position:relative}._1977 img{width:100%;z-index:1}._1977:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._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}._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 diff --git a/source/css/aden.css b/source/css/aden.css index 294838c..87091bb 100644 --- a/source/css/aden.css +++ b/source/css/aden.css @@ -3,31 +3,25 @@ * Aden * */ +.aden:before, .aden:after { + 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:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after { + z-index: 3; } .aden { -webkit-filter: hue-rotate(-20deg) contrast(.9) saturate(0.85) brightness(1.2); diff --git a/source/css/aden.min.css b/source/css/aden.min.css index 201acb4..9cb969e 100644 --- a/source/css/aden.min.css +++ b/source/css/aden.min.css @@ -1 +1 @@ -.aden{position:relative}.aden img{width:100%;z-index:1}.aden:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.aden:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/source/css/brooklyn.css b/source/css/brooklyn.css index c68b5ef..3e39352 100644 --- a/source/css/brooklyn.css +++ b/source/css/brooklyn.css @@ -3,31 +3,25 @@ * Brooklyn * */ +.brooklyn:before, .brooklyn:after { + 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:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .brooklyn:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .brooklyn:after { + z-index: 3; } .brooklyn { -webkit-filter: contrast(.9) brightness(1.1); diff --git a/source/css/brooklyn.min.css b/source/css/brooklyn.min.css index 11248d8..d7adc6b 100644 --- a/source/css/brooklyn.min.css +++ b/source/css/brooklyn.min.css @@ -1 +1 @@ -.brooklyn{position:relative}.brooklyn img{width:100%;z-index:1}.brooklyn:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.brooklyn:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/source/css/cssgram.css b/source/css/cssgram.css index 411d2e5..ab6347a 100644 --- a/source/css/cssgram.css +++ b/source/css/cssgram.css @@ -1,59 +1,47 @@ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } /* * * Aden * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .aden { -webkit-filter: hue-rotate(-20deg) contrast(.9) saturate(0.85) brightness(1.2); @@ -77,31 +65,25 @@ * Perpetua * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .perpetua:after { background: -webkit-linear-gradient(top, #005b9a, #e6c13d); @@ -114,31 +96,25 @@ * Reyes * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .reyes { -webkit-filter: sepia(.22) brightness(1.1) contrast(.85) saturate(0.75); @@ -153,31 +129,25 @@ * Gingham * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .gingham { -webkit-filter: brightness(1.05) hue-rotate(-10deg); @@ -192,31 +162,25 @@ * Toaster * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .toaster { -webkit-filter: contrast(1.5) brightness(.9); @@ -231,31 +195,25 @@ * Walden * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .walden { -webkit-filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6); @@ -270,31 +228,25 @@ * Hudson * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .hudson { -webkit-filter: brightness(1.2) contrast(.9) saturate(1.1); @@ -310,31 +262,25 @@ * Earlybird * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .earlybird { -webkit-filter: contrast(.9) sepia(.2); @@ -349,31 +295,25 @@ * Mayfair * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .mayfair { -webkit-filter: contrast(1.1) saturate(1.1); @@ -388,31 +328,25 @@ * Lo-fi * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .lofi { -webkit-filter: saturate(1.1) contrast(1.5); @@ -426,31 +360,25 @@ * 1977 * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } ._1977 { -webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3); @@ -464,31 +392,25 @@ * Brooklyn * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .brooklyn { -webkit-filter: contrast(.9) brightness(1.1); @@ -503,31 +425,25 @@ * X-Pro II * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .xpro2 { -webkit-filter: sepia(.3); @@ -542,31 +458,25 @@ * Nashville * */ +.aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before, .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .aden, .inkwell, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2, .nashville { position: relative; } .aden img, .inkwell img, .perpetua img, .reyes img, .gingham img, .toaster img, .walden img, .hudson img, .earlybird img, .mayfair img, .lofi img, ._1977 img, .brooklyn img, .xpro2 img, .nashville img { width: 100%; z-index: 1; } - .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .aden:before, .inkwell:before, .perpetua:before, .reyes:before, .gingham:before, .toaster:before, .walden:before, .hudson:before, .earlybird:before, .mayfair:before, .lofi:before, ._1977:before, .brooklyn:before, .xpro2:before, .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .aden:after, .inkwell:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after, .nashville:after { + z-index: 3; } .nashville { -webkit-filter: sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2); diff --git a/source/css/cssgram.min.css b/source/css/cssgram.min.css index 8a11a81..90f673d 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}._1977,.aden,.brooklyn,.earlybird,.gingham,.hudson,.inkwell,.lofi,.mayfair,.nashville,.perpetua,.reyes,.toaster,.walden,.xpro2{position:relative}._1977 img,.aden img,.brooklyn img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lofi img,.mayfair img,.nashville img,.perpetua img,.reyes img,.toaster img,.walden img,.xpro2 img{width:100%;z-index:1}._1977:after,.aden:after,.brooklyn:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lofi:after,.mayfair:after,.nashville:after,.perpetua:after,.reyes:after,.toaster:after,.walden:after,.xpro2:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977:before,.aden:before,.brooklyn:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lofi:before,.mayfair:before,.nashville:before,.perpetua:before,.reyes:before,.toaster:before,.walden:before,.xpro2:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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 +.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}._1977:after,._1977:before,.aden:after,.aden:before,.brooklyn:after,.brooklyn:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.toaster:after,.toaster:before,.walden:after,.walden:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brooklyn,.earlybird,.gingham,.hudson,.inkwell,.lofi,.mayfair,.nashville,.perpetua,.reyes,.toaster,.walden,.xpro2{position:relative}._1977 img,.aden img,.brooklyn img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lofi img,.mayfair img,.nashville img,.perpetua img,.reyes img,.toaster img,.walden img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brooklyn:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lofi:before,.mayfair:before,.nashville:before,.perpetua:before,.reyes:before,.toaster:before,.walden:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brooklyn:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lofi:after,.mayfair:after,.nashville:after,.perpetua:after,.reyes:after,.toaster:after,.walden:after,.xpro2: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 diff --git a/source/css/earlybird.css b/source/css/earlybird.css index c1d16b9..b7c5560 100644 --- a/source/css/earlybird.css +++ b/source/css/earlybird.css @@ -3,31 +3,25 @@ * Earlybird * */ +.earlybird:before, .earlybird:after { + 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:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .earlybird:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .earlybird:after { + z-index: 3; } .earlybird { -webkit-filter: contrast(.9) sepia(.2); diff --git a/source/css/earlybird.min.css b/source/css/earlybird.min.css index b630c10..3abe93a 100644 --- a/source/css/earlybird.min.css +++ b/source/css/earlybird.min.css @@ -1 +1 @@ -.earlybird{position:relative}.earlybird img{width:100%;z-index:1}.earlybird:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.earlybird:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/source/css/gingham.css b/source/css/gingham.css index 756f43f..b5cc327 100644 --- a/source/css/gingham.css +++ b/source/css/gingham.css @@ -3,31 +3,25 @@ * Gingham * */ +.gingham:before, .gingham:after { + 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:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .gingham:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .gingham:after { + z-index: 3; } .gingham { -webkit-filter: brightness(1.05) hue-rotate(-10deg); diff --git a/source/css/gingham.min.css b/source/css/gingham.min.css index 3febe94..4a1572a 100644 --- a/source/css/gingham.min.css +++ b/source/css/gingham.min.css @@ -1 +1 @@ -.gingham{position:relative}.gingham img{width:100%;z-index:1}.gingham:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.gingham:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/source/css/hudson.css b/source/css/hudson.css index 8008f64..46ff030 100644 --- a/source/css/hudson.css +++ b/source/css/hudson.css @@ -3,31 +3,25 @@ * Hudson * */ +.hudson:before, .hudson:after { + 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:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .hudson:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .hudson:after { + z-index: 3; } .hudson { -webkit-filter: brightness(1.2) contrast(.9) saturate(1.1); diff --git a/source/css/hudson.min.css b/source/css/hudson.min.css index 930aeb4..99dbd08 100644 --- a/source/css/hudson.min.css +++ b/source/css/hudson.min.css @@ -1 +1 @@ -.hudson{position:relative}.hudson img{width:100%;z-index:1}.hudson:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.hudson:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/source/css/lofi.css b/source/css/lofi.css index 799cded..4e9b2f2 100644 --- a/source/css/lofi.css +++ b/source/css/lofi.css @@ -2,31 +2,25 @@ * Lo-fi * */ +.lofi:before, .lofi:after { + 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:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .lofi:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .lofi:after { + z-index: 3; } .lofi { -webkit-filter: saturate(1.1) contrast(1.5); diff --git a/source/css/lofi.min.css b/source/css/lofi.min.css index b0d212d..c5a3534 100644 --- a/source/css/lofi.min.css +++ b/source/css/lofi.min.css @@ -1 +1 @@ -.lofi{position:relative}.lofi img{width:100%;z-index:1}.lofi:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.lofi:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/source/css/mayfair.css b/source/css/mayfair.css index fb7b54a..1dec639 100644 --- a/source/css/mayfair.css +++ b/source/css/mayfair.css @@ -3,31 +3,25 @@ * Mayfair * */ +.mayfair:before, .mayfair:after { + 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:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .mayfair:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .mayfair:after { + z-index: 3; } .mayfair { -webkit-filter: contrast(1.1) saturate(1.1); diff --git a/source/css/mayfair.min.css b/source/css/mayfair.min.css index 3c28c24..9d19697 100644 --- a/source/css/mayfair.min.css +++ b/source/css/mayfair.min.css @@ -1 +1 @@ -.mayfair{position:relative}.mayfair img{width:100%;z-index:1}.mayfair:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.mayfair:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/source/css/nashville.css b/source/css/nashville.css index 7053153..fc9ef64 100644 --- a/source/css/nashville.css +++ b/source/css/nashville.css @@ -3,31 +3,25 @@ * Nashville * */ +.nashville:before, .nashville:after { + 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:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .nashville:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .nashville:after { + z-index: 3; } .nashville { -webkit-filter: sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2); diff --git a/source/css/nashville.min.css b/source/css/nashville.min.css index 2cda8be..8fae499 100644 --- a/source/css/nashville.min.css +++ b/source/css/nashville.min.css @@ -1 +1 @@ -.nashville{position:relative}.nashville img{width:100%;z-index:1}.nashville:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.nashville:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/source/css/perpetua.css b/source/css/perpetua.css index bdd82a0..8d28441 100644 --- a/source/css/perpetua.css +++ b/source/css/perpetua.css @@ -3,31 +3,25 @@ * Perpetua * */ +.perpetua:before, .perpetua:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + .perpetua { position: relative; } .perpetua img { width: 100%; z-index: 1; } - .perpetua:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .perpetua:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .perpetua:after { + z-index: 3; } .perpetua:after { background: -webkit-linear-gradient(top, #005b9a, #e6c13d); diff --git a/source/css/perpetua.min.css b/source/css/perpetua.min.css index 2b78364..8c4341b 100644 --- a/source/css/perpetua.min.css +++ b/source/css/perpetua.min.css @@ -1 +1 @@ -.perpetua{position:relative}.perpetua img{width:100%;z-index:1}.perpetua:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.perpetua:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.perpetua:after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d);mix-blend-mode:soft-light;opacity:.5} \ No newline at end of file +.perpetua:after,.perpetua:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.perpetua{position:relative}.perpetua img{width:100%;z-index:1}.perpetua:before{z-index:2}.perpetua:after{z-index:3;background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d);mix-blend-mode:soft-light;opacity:.5} \ No newline at end of file diff --git a/source/css/reyes.css b/source/css/reyes.css index bf84aaa..a2361ed 100644 --- a/source/css/reyes.css +++ b/source/css/reyes.css @@ -3,31 +3,25 @@ * Reyes * */ +.reyes:before, .reyes:after { + 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:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .reyes:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .reyes:after { + z-index: 3; } .reyes { -webkit-filter: sepia(.22) brightness(1.1) contrast(.85) saturate(0.75); diff --git a/source/css/reyes.min.css b/source/css/reyes.min.css index b489cb6..8a7ad26 100644 --- a/source/css/reyes.min.css +++ b/source/css/reyes.min.css @@ -1 +1 @@ -.reyes{position:relative}.reyes img{width:100%;z-index:1}.reyes:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.reyes:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/source/css/toaster.css b/source/css/toaster.css index 299f918..46b77c2 100644 --- a/source/css/toaster.css +++ b/source/css/toaster.css @@ -3,31 +3,25 @@ * Toaster * */ +.toaster:before, .toaster:after { + 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:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .toaster:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .toaster:after { + z-index: 3; } .toaster { -webkit-filter: contrast(1.5) brightness(.9); diff --git a/source/css/toaster.min.css b/source/css/toaster.min.css index 98361f0..9c35195 100644 --- a/source/css/toaster.min.css +++ b/source/css/toaster.min.css @@ -1 +1 @@ -.toaster{position:relative}.toaster img{width:100%;z-index:1}.toaster:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.toaster:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/source/css/walden.css b/source/css/walden.css index 49ded6d..bfd4c34 100644 --- a/source/css/walden.css +++ b/source/css/walden.css @@ -3,31 +3,25 @@ * Walden * */ +.walden:before, .walden:after { + 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:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .walden:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .walden:after { + z-index: 3; } .walden { -webkit-filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6); diff --git a/source/css/walden.min.css b/source/css/walden.min.css index 3cba946..0c7e769 100644 --- a/source/css/walden.min.css +++ b/source/css/walden.min.css @@ -1 +1 @@ -.walden{position:relative}.walden img{width:100%;z-index:1}.walden:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.walden:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/source/css/xpro2.css b/source/css/xpro2.css index fa03d23..4a58af4 100644 --- a/source/css/xpro2.css +++ b/source/css/xpro2.css @@ -3,31 +3,25 @@ * X-Pro II * */ +.xpro2:before, .xpro2:after { + 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:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } .xpro2:before { - content: ''; - z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; } + z-index: 2; } + .xpro2:after { + z-index: 3; } .xpro2 { -webkit-filter: sepia(.3); diff --git a/source/css/xpro2.min.css b/source/css/xpro2.min.css index 676dcc5..ac56684 100644 --- a/source/css/xpro2.min.css +++ b/source/css/xpro2.min.css @@ -1 +1 @@ -.xpro2{position:relative}.xpro2 img{width:100%;z-index:1}.xpro2:after{content:'';z-index:3;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.xpro2:before{content:'';z-index:2;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.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}.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 diff --git a/source/scss/_shared.scss b/source/scss/_shared.scss index 32571a8..af97dfd 100644 --- a/source/scss/_shared.scss +++ b/source/scss/_shared.scss @@ -1,3 +1,14 @@ +%pseudo-elem { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; +} + %filter-base { position: relative; @@ -6,25 +17,13 @@ z-index: 1; } - &:after { - content: ''; - z-index: 3; - display: block; - height: 100%; - width: 100%; - top: 0; left: 0; - position: absolute; - pointer-events: none; - } - &:before { - content: ''; + @extend %pseudo-elem; z-index: 2; - display: block; - height: 100%; - width: 100%; - top: 0; left: 0; - position: absolute; - pointer-events: none; + } + + &:after { + @extend %pseudo-elem; + z-index: 3; } }