From 6d6a19ed200b83d8c31b9453a24ddd721cf208e6 Mon Sep 17 00:00:00 2001 From: krystalcampioni Date: Fri, 30 Sep 2016 12:47:01 -0300 Subject: [PATCH] created vesper filter --- site/css/cssgram.min.css | 2 +- site/css/demo-site.css | 553 +++++++++++++++++++++++++++++-------- site/css/demo-site.min.css | 2 +- site/css/vesper.min.css | 1 + site/filters.json | 4 +- site/index.html | 17 +- site/test/index.html | 2 +- source/css/cssgram.css | 546 ++++++++++++++++++++++++++++-------- source/css/cssgram.min.css | 2 +- source/css/vesper.css | 45 +++ source/css/vesper.min.css | 1 + source/scss/cssgram.scss | 3 +- source/scss/vesper.scss | 48 ++++ 13 files changed, 980 insertions(+), 246 deletions(-) create mode 100644 site/css/vesper.min.css create mode 100644 source/css/vesper.css create mode 100644 source/css/vesper.min.css create mode 100644 source/scss/vesper.scss diff --git a/site/css/cssgram.min.css b/site/css/cssgram.min.css index 6a65871..abd3891 100644 --- a/site/css/cssgram.min.css +++ b/site/css/cssgram.min.css @@ -1 +1 @@ -.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.walden,.willow,.xpro2{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten} \ No newline at end of file +.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.vesper:after,.vesper:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.vesper,.walden,.willow,.xpro2{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.vesper img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.vesper:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.vesper:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.vesper{-webkit-filter:contrast(.9) sepia(.4) hue-rotate(-10deg) brightness(.9) saturate(170%);filter:contrast(.9) sepia(.4) hue-rotate(-10deg) brightness(.9) saturate(170%)}.vesper::after{background:rgba(52,87,158,.56);mix-blend-mode:overlay;opacity:.8}.vesper::before{background:rgba(37,107,136,.7);opacity:.8;mix-blend-mode:color-dodge} \ No newline at end of file diff --git a/site/css/demo-site.css b/site/css/demo-site.css index 38e1300..fef7968 100644 --- a/site/css/demo-site.css +++ b/site/css/demo-site.css @@ -22,6 +22,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -43,7 +44,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -75,7 +77,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -99,7 +102,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -124,7 +128,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -148,7 +153,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } /* @@ -179,6 +185,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -200,7 +207,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -232,7 +240,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -256,7 +265,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -281,7 +291,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -305,7 +316,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -346,6 +358,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -367,7 +380,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -399,7 +413,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -423,7 +438,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -448,7 +464,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -472,7 +489,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -508,6 +526,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -529,7 +548,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -561,7 +581,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -585,7 +606,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -610,7 +632,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -634,7 +657,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -672,6 +696,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -693,7 +718,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -725,7 +751,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -749,7 +776,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -774,7 +802,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -798,7 +827,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -839,6 +869,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -860,7 +891,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -892,7 +924,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -916,7 +949,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -941,7 +975,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -965,7 +1000,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -1006,6 +1042,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1027,7 +1064,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -1059,7 +1097,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -1083,7 +1122,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -1108,7 +1148,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -1132,7 +1173,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -1173,6 +1215,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1194,7 +1237,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -1226,7 +1270,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -1250,7 +1295,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -1275,7 +1321,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -1299,7 +1346,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -1340,6 +1388,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1361,7 +1410,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -1393,7 +1443,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -1417,7 +1468,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -1442,7 +1494,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -1466,7 +1519,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -1508,6 +1562,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1529,7 +1584,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -1561,7 +1617,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -1585,7 +1642,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -1610,7 +1668,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -1634,7 +1693,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -1675,6 +1735,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1696,7 +1757,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -1728,7 +1790,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -1752,7 +1815,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -1777,7 +1841,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -1801,7 +1866,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -1842,6 +1908,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1863,7 +1930,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -1895,7 +1963,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -1919,7 +1988,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -1944,7 +2014,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -1968,7 +2039,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -2008,6 +2080,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2029,7 +2102,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -2061,7 +2135,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -2085,7 +2160,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -2110,7 +2186,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -2134,7 +2211,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -2174,6 +2252,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2195,7 +2274,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -2227,7 +2307,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -2251,7 +2332,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -2276,7 +2358,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -2300,7 +2383,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -2341,6 +2425,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2362,7 +2447,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -2394,7 +2480,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -2418,7 +2505,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -2443,7 +2531,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -2467,7 +2556,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -2508,6 +2598,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2529,7 +2620,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -2561,7 +2653,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -2585,7 +2678,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -2610,7 +2704,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -2634,7 +2729,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -2677,6 +2773,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2698,7 +2795,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -2730,7 +2828,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -2754,7 +2853,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -2779,7 +2879,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -2803,7 +2904,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -2846,6 +2948,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2867,7 +2970,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -2899,7 +3003,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -2923,7 +3028,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -2948,7 +3054,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -2972,7 +3079,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -3015,6 +3123,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3036,7 +3145,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -3068,7 +3178,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -3092,7 +3203,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -3117,7 +3229,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -3141,7 +3254,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -3180,6 +3294,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3201,7 +3316,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -3233,7 +3349,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -3257,7 +3374,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -3282,7 +3400,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -3306,7 +3425,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -3350,6 +3470,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3371,7 +3492,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -3403,7 +3525,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -3427,7 +3550,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -3452,7 +3576,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -3476,7 +3601,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -3523,6 +3649,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3544,7 +3671,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -3576,7 +3704,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -3600,7 +3729,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -3625,7 +3755,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -3649,7 +3780,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -3693,6 +3825,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3714,7 +3847,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -3746,7 +3880,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -3770,7 +3905,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -3795,7 +3931,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -3819,7 +3956,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -3831,6 +3969,184 @@ background-color: rgba(161, 44, 199, 0.31); mix-blend-mode: lighten; } +/* + * + * Vesper + * + */ + +.aden:before, +.inkwell:before, +.perpetua:before, +.reyes:before, +.gingham:before, +.toaster:before, +.walden:before, +.hudson:before, +.earlybird:before, +.mayfair:before, +.lofi:before, +._1977:before, +.brooklyn:before, +.xpro2:before, +.nashville:before, +.lark:before, +.moon:before, +.clarendon:before, +.willow:before, +.rise:before, +.slumber:before, +.brannan:before, +.vesper:before, +.aden:after, +.inkwell:after, +.perpetua:after, +.reyes:after, +.gingham:after, +.toaster:after, +.walden:after, +.hudson:after, +.earlybird:after, +.mayfair:after, +.lofi:after, +._1977:after, +.brooklyn:after, +.xpro2:after, +.nashville:after, +.lark:after, +.moon:after, +.clarendon:after, +.willow:after, +.rise:after, +.slumber:after, +.brannan:after, +.vesper:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber, +.brannan, +.vesper { + position: relative; } + + .aden img, + .inkwell img, + .perpetua img, + .reyes img, + .gingham img, + .toaster img, + .walden img, + .hudson img, + .earlybird img, + .mayfair img, + .lofi img, + ._1977 img, + .brooklyn img, + .xpro2 img, + .nashville img, + .lark img, + .moon img, + .clarendon img, + .willow img, + .rise img, + .slumber img, + .brannan img, + .vesper img { + width: 100%; + z-index: 1; } + + .aden:before, + .inkwell:before, + .perpetua:before, + .reyes:before, + .gingham:before, + .toaster:before, + .walden:before, + .hudson:before, + .earlybird:before, + .mayfair:before, + .lofi:before, + ._1977:before, + .brooklyn:before, + .xpro2:before, + .nashville:before, + .lark:before, + .moon:before, + .clarendon:before, + .willow:before, + .rise:before, + .slumber:before, + .brannan:before, + .vesper:before { + z-index: 2; } + + .aden:after, + .inkwell:after, + .perpetua:after, + .reyes:after, + .gingham:after, + .toaster:after, + .walden:after, + .hudson:after, + .earlybird:after, + .mayfair:after, + .lofi:after, + ._1977:after, + .brooklyn:after, + .xpro2:after, + .nashville:after, + .lark:after, + .moon:after, + .clarendon:after, + .willow:after, + .rise:after, + .slumber:after, + .brannan:after, + .vesper:after { + z-index: 3; } + + +.vesper { + -webkit-filter: contrast(0.9) sepia(0.4) hue-rotate(-10deg) brightness(0.9) saturate(170%); + filter: contrast(0.9) sepia(0.4) hue-rotate(-10deg) brightness(0.9) saturate(170%); } + + .vesper::after { + background: rgba(52, 87, 158, 0.56); + mix-blend-mode: overlay; + opacity: .8; } + + .vesper::before { + background: rgba(37, 107, 136, 0.7); + opacity: .8; + mix-blend-mode: color-dodge; } + ::-moz-selection { background: #9b1c9b; color: white; } @@ -4024,16 +4340,13 @@ img { .demo__list { width: 100%; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; } + -ms-flex-wrap: wrap; + flex-wrap: wrap; } .demo__item { margin: .75em; diff --git a/site/css/demo-site.min.css b/site/css/demo-site.min.css index 69b4151..de72a9e 100644 --- a/site/css/demo-site.min.css +++ b/site/css/demo-site.min.css @@ -1 +1 @@ -@charset "UTF-8";body,section{overflow-x:hidden}a,figure{-webkit-transition-duration:.35s}figure,ul{margin:0;padding:0}.demo__input-area,.demo__note,hr,img{display:block}.attribution,.demo__input-area,.demo__note,.demo__subtitle,.title--top-sub,.title-section,.video-container{text-align:center}.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.walden,.willow,.xpro2,figure{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}::-moz-selection{background:#9b1c9b;color:#fff}::selection{background:#9b1c9b;color:#fff}body{font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;margin:0 auto;padding:0 2em;max-width:1200px;line-height:1.5;font-size:1.1em}h1,h2{color:#9b1c9b}.highlight,em,h3{color:#c63082}code,pre{background:#eff1f0}code code,pre code{border:none;background:0 0}code{font-family:monospace;padding:.25em .5em}.highlight{font-weight:800}.comment{color:#acb2ad}ul{width:100%}ol,ul{line-height:1.8}a{text-decoration:none;color:#9b1c9b;transition-duration:.35s;border-bottom:1px solid #c63082;padding-bottom:.05em}a:focus,a:hover{color:#e398c1;border-color:#e398c1}figure{max-width:350px;max-height:350px;overflow:hidden;transition-duration:.35s}@media (max-width:1240px){figure{max-width:300px;max-height:300px}}@media (max-width:992px){figure{max-width:250px;max-height:250px}}@media (max-width:768px){figure{max-width:300px;max-height:300px}}@media (max-width:500px){body{font-size:.9em}h1,h2{text-align:center}figure{max-width:400px;max-height:400px}}figure:focus,figure:hover{-webkit-filter:none!important;filter:none!important}figure:focus::after,figure:focus::before,figure:hover::after,figure:hover::before{opacity:0!important}figcaption{position:absolute;bottom:1em;right:0;padding:.25em 1em .25em .25em;background:#000;color:#fff;font-weight:200}hr{clear:both;float:none;border:1px solid #eff1f0;margin:2em auto}img{margin:auto;height:auto;max-height:100%;width:auto;max-width:100%}.demo__section{font-weight:300;font-size:1.2em}.demo__subtitle{font-size:2em}.demo__note{font-style:italic;margin:2em auto 0}.demo__input-area{font-size:1em;font-weight:300;margin:1em auto;padding:1em 0}@media (max-width:500px){.demo__input-area{margin:0;font-size:.8em}}.demo__input-label{text-align:center;color:#9b1c9b}.demo__input-img{max-width:16em;font-size:1em;padding:.5em;border:2px solid #9b1c9b;outline:0;margin:.5em;font-weight:200;-webkit-transition-duration:.35s;transition-duration:.35s}.demo__input-img:hover{background:#f5e8f5}.demo__input-img:focus{background:#e6c6e6}.demo__option-field{color:#9b1c9b;border:1px solid #cad1cc;min-width:200px}.demo__option-img{max-width:150px;height:150px;display:inline-block;cursor:pointer}@media (max-width:768px){.demo__option-img{height:100px}}.demo__list{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.demo__item{margin:.75em;list-style:none}@media (max-width:992px){.demo__item{margin:.5em}}@media (max-width:500px){.demo__option-img{height:60px}.demo__item{margin:.5em 0}.title--top-sub{font-size:1.2em}}.title-section{width:100%}.title--logo{max-width:400px}.title--top-sub{font-weight:200;margin:0 auto;max-width:26em}.explanation-section,.how-to-section{font-size:1.2em;font-weight:300;max-width:40em;margin:0 auto;display:block}.attribution{padding:1em 0 4em}.callout{max-width:14em;background:#eff1f0;padding:2em;margin:-.5em 2em 0;display:block;font-weight:200;float:right}@media (max-width:768px){.callout{max-width:28em;margin:1em auto;float:none;font-size:.8em}}#snapshot,.take-photo{font-size:1em;font-weight:300;cursor:pointer;border:1px dashed #9b1c9b;outline:0;vertical-align:top}.available-classes,.available-extends,.supported-browsers{-webkit-columns:15em 2;-moz-columns:15em 2;columns:15em 2}.supported:after{content:'✔';color:#62B859;margin-left:.5em}.not-supported:after{content:'✘';color:#c63082;margin-left:.5em}.take-photo{color:#9b1c9b;width:150px;height:150px;display:inline-block;background:0 0;-webkit-transition-duration:.25s;transition-duration:.25s}#snapshot:hover,.take-photo:hover{background:#c63082;color:#fff}.video-container{margin-top:2em;max-height:0;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.video-container video{margin:0 auto;display:block}#snapshot{margin:1em auto 0;color:#9b1c9b;display:inline-block;background:0 0;-webkit-transition-duration:.25s;transition-duration:.25s} \ No newline at end of file +@charset "UTF-8";body,section{overflow-x:hidden}a,figure{-webkit-transition-duration:.35s}figure,ul{margin:0;padding:0}.demo__input-area,.demo__note,hr,img{display:block}.attribution,.demo__input-area,.demo__note,.demo__subtitle,.title--top-sub,.title-section,.video-container{text-align:center}.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.vesper:after,.vesper:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.vesper,.walden,.willow,.xpro2,figure{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.vesper img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.vesper:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.vesper:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.vesper{-webkit-filter:contrast(.9) sepia(.4) hue-rotate(-10deg) brightness(.9) saturate(170%);filter:contrast(.9) sepia(.4) hue-rotate(-10deg) brightness(.9) saturate(170%)}.vesper::after{background:rgba(52,87,158,.56);mix-blend-mode:overlay;opacity:.8}.vesper::before{background:rgba(37,107,136,.7);opacity:.8;mix-blend-mode:color-dodge}::-moz-selection{background:#9b1c9b;color:#fff}::selection{background:#9b1c9b;color:#fff}body{font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;margin:0 auto;padding:0 2em;max-width:1200px;line-height:1.5;font-size:1.1em}h1,h2{color:#9b1c9b}.highlight,em,h3{color:#c63082}code,pre{background:#eff1f0}code code,pre code{border:none;background:0 0}code{font-family:monospace;padding:.25em .5em}.highlight{font-weight:800}.comment{color:#acb2ad}ul{width:100%}ol,ul{line-height:1.8}a{text-decoration:none;color:#9b1c9b;transition-duration:.35s;border-bottom:1px solid #c63082;padding-bottom:.05em}a:focus,a:hover{color:#e398c1;border-color:#e398c1}figure{max-width:350px;max-height:350px;overflow:hidden;transition-duration:.35s}@media (max-width:1240px){figure{max-width:300px;max-height:300px}}@media (max-width:992px){figure{max-width:250px;max-height:250px}}@media (max-width:768px){figure{max-width:300px;max-height:300px}}@media (max-width:500px){body{font-size:.9em}h1,h2{text-align:center}figure{max-width:400px;max-height:400px}}figure:focus,figure:hover{-webkit-filter:none!important;filter:none!important}figure:focus::after,figure:focus::before,figure:hover::after,figure:hover::before{opacity:0!important}figcaption{position:absolute;bottom:1em;right:0;padding:.25em 1em .25em .25em;background:#000;color:#fff;font-weight:200}hr{clear:both;float:none;border:1px solid #eff1f0;margin:2em auto}img{margin:auto;height:auto;max-height:100%;width:auto;max-width:100%}.demo__section{font-weight:300;font-size:1.2em}.demo__subtitle{font-size:2em}.demo__note{font-style:italic;margin:2em auto 0}.demo__input-area{font-size:1em;font-weight:300;margin:1em auto;padding:1em 0}@media (max-width:500px){.demo__input-area{margin:0;font-size:.8em}}.demo__input-label{text-align:center;color:#9b1c9b}.demo__input-img{max-width:16em;font-size:1em;padding:.5em;border:2px solid #9b1c9b;outline:0;margin:.5em;font-weight:200;-webkit-transition-duration:.35s;transition-duration:.35s}.demo__input-img:hover{background:#f5e8f5}.demo__input-img:focus{background:#e6c6e6}.demo__option-field{color:#9b1c9b;border:1px solid #cad1cc;min-width:200px}.demo__option-img{max-width:150px;height:150px;display:inline-block;cursor:pointer}@media (max-width:768px){.demo__option-img{height:100px}}.demo__list{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.demo__item{margin:.75em;list-style:none}@media (max-width:992px){.demo__item{margin:.5em}}@media (max-width:500px){.demo__option-img{height:60px}.demo__item{margin:.5em 0}.title--top-sub{font-size:1.2em}}.title-section{width:100%}.title--logo{max-width:400px}.title--top-sub{font-weight:200;margin:0 auto;max-width:26em}.explanation-section,.how-to-section{font-size:1.2em;font-weight:300;max-width:40em;margin:0 auto;display:block}.attribution{padding:1em 0 4em}.callout{max-width:14em;background:#eff1f0;padding:2em;margin:-.5em 2em 0;display:block;font-weight:200;float:right}@media (max-width:768px){.callout{max-width:28em;margin:1em auto;float:none;font-size:.8em}}#snapshot,.take-photo{font-size:1em;font-weight:300;cursor:pointer;border:1px dashed #9b1c9b;outline:0;vertical-align:top}.available-classes,.available-extends,.supported-browsers{-webkit-columns:15em 2;-moz-columns:15em 2;columns:15em 2}.supported:after{content:'✔';color:#62B859;margin-left:.5em}.not-supported:after{content:'✘';color:#c63082;margin-left:.5em}.take-photo{color:#9b1c9b;width:150px;height:150px;display:inline-block;background:0 0;-webkit-transition-duration:.25s;transition-duration:.25s}#snapshot:hover,.take-photo:hover{background:#c63082;color:#fff}.video-container{margin-top:2em;max-height:0;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.video-container video{margin:0 auto;display:block}#snapshot{margin:1em auto 0;color:#9b1c9b;display:inline-block;background:0 0;-webkit-transition-duration:.25s;transition-duration:.25s} \ No newline at end of file diff --git a/site/css/vesper.min.css b/site/css/vesper.min.css new file mode 100644 index 0000000..0d18b57 --- /dev/null +++ b/site/css/vesper.min.css @@ -0,0 +1 @@ +.vesper:after,.vesper:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.vesper{position:relative;-webkit-filter:contrast(.9) sepia(.4) hue-rotate(-10deg) brightness(.9) saturate(170%);filter:contrast(.9) sepia(.4) hue-rotate(-10deg) brightness(.9) saturate(170%)}.vesper img{width:100%;z-index:1}.vesper:before{z-index:2}.vesper:after{z-index:3}.vesper::after{background:rgba(52,87,158,.56);mix-blend-mode:overlay;opacity:.8}.vesper::before{background:rgba(37,107,136,.7);opacity:.8;mix-blend-mode:color-dodge} \ No newline at end of file diff --git a/site/filters.json b/site/filters.json index f9aab7e..066464d 100644 --- a/site/filters.json +++ b/site/filters.json @@ -182,7 +182,7 @@ }, { "name": "Vesper", - "is_done": false, + "is_done": true, "usage": "vesper" }, { @@ -203,4 +203,4 @@ ], "images": ["atx", "bike", "cacti", "lakegeneva", "tahoe"] -} \ No newline at end of file +} diff --git a/site/index.html b/site/index.html index 7661bde..d8145cd 100644 --- a/site/index.html +++ b/site/index.html @@ -171,7 +171,13 @@

A tiny (<1kb gzipped!) library for recreating Toaster -
  • +
  • +
    + +
    Vesper
    +
    +
    • +
  • Walden
    @@ -269,7 +275,8 @@

    Available Classes

  • Rise: class="rise"
  • Slumber: class="slumber"
  • Toaster: class="toaster"
    • -
  • Walden: class="walden"
    • +
  • Vesper: class="vesper"
    • +
  • Walden: class="walden"
  • Willow: class="willow"
  • X-pro II: class="xpro2"
    • @@ -326,7 +333,8 @@

    Available Extends

  • Rise: @extend %rise;
  • Slumber: @extend %slumber;
  • Toaster: @extend %toaster;
    • -
  • Walden: @extend %walden;
    • +
  • Vesper: @extend %vesper;
    • +
  • Walden: @extend %walden;
  • Willow: @extend %willow;
  • X-pro II: @extend %xpro2;
    • @@ -389,7 +397,8 @@

    Available Mixins

  • Rise: @include rise();
  • Slumber: @include slumber();
  • Toaster: @include toaster();
    • -
  • Walden: @include walden();
    • +
  • Vesper: @include vesper();
    • +
  • Walden: @include walden();
  • Willow: @include willow();
  • X-pro II: @include xpro2();
    • diff --git a/site/test/index.html b/site/test/index.html index 6331031..0a3decc 100644 --- a/site/test/index.html +++ b/site/test/index.html @@ -3447,7 +3447,7 @@

    CSSgram

    -

    Vesper ✗

    +

    Vesper ✓

    Instagram

    diff --git a/source/css/cssgram.css b/source/css/cssgram.css index 0a7c52f..27cda71 100644 --- a/source/css/cssgram.css +++ b/source/css/cssgram.css @@ -21,6 +21,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -42,7 +43,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -74,7 +76,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -98,7 +101,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -123,7 +127,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -147,7 +152,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } /* @@ -178,6 +184,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -199,7 +206,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -231,7 +239,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -255,7 +264,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -280,7 +290,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -304,7 +315,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -345,6 +357,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -366,7 +379,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -398,7 +412,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -422,7 +437,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -447,7 +463,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -471,7 +488,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -507,6 +525,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -528,7 +547,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -560,7 +580,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -584,7 +605,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -609,7 +631,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -633,7 +656,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -671,6 +695,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -692,7 +717,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -724,7 +750,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -748,7 +775,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -773,7 +801,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -797,7 +826,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -838,6 +868,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -859,7 +890,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -891,7 +923,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -915,7 +948,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -940,7 +974,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -964,7 +999,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -1005,6 +1041,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1026,7 +1063,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -1058,7 +1096,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -1082,7 +1121,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -1107,7 +1147,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -1131,7 +1172,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -1172,6 +1214,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1193,7 +1236,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -1225,7 +1269,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -1249,7 +1294,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -1274,7 +1320,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -1298,7 +1345,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -1339,6 +1387,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1360,7 +1409,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -1392,7 +1442,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -1416,7 +1467,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -1441,7 +1493,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -1465,7 +1518,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -1507,6 +1561,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1528,7 +1583,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -1560,7 +1616,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -1584,7 +1641,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -1609,7 +1667,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -1633,7 +1692,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -1674,6 +1734,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1695,7 +1756,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -1727,7 +1789,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -1751,7 +1814,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -1776,7 +1840,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -1800,7 +1865,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -1841,6 +1907,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1862,7 +1929,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -1894,7 +1962,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -1918,7 +1987,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -1943,7 +2013,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -1967,7 +2038,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -2007,6 +2079,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2028,7 +2101,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -2060,7 +2134,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -2084,7 +2159,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -2109,7 +2185,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -2133,7 +2210,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -2173,6 +2251,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2194,7 +2273,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -2226,7 +2306,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -2250,7 +2331,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -2275,7 +2357,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -2299,7 +2382,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -2340,6 +2424,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2361,7 +2446,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -2393,7 +2479,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -2417,7 +2504,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -2442,7 +2530,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -2466,7 +2555,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -2507,6 +2597,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2528,7 +2619,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -2560,7 +2652,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -2584,7 +2677,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -2609,7 +2703,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -2633,7 +2728,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -2676,6 +2772,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2697,7 +2794,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -2729,7 +2827,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -2753,7 +2852,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -2778,7 +2878,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -2802,7 +2903,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -2845,6 +2947,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2866,7 +2969,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -2898,7 +3002,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -2922,7 +3027,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -2947,7 +3053,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -2971,7 +3078,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -3014,6 +3122,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3035,7 +3144,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -3067,7 +3177,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -3091,7 +3202,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -3116,7 +3228,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -3140,7 +3253,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -3179,6 +3293,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3200,7 +3315,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -3232,7 +3348,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -3256,7 +3373,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -3281,7 +3399,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -3305,7 +3424,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -3349,6 +3469,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3370,7 +3491,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -3402,7 +3524,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -3426,7 +3549,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -3451,7 +3575,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -3475,7 +3600,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -3522,6 +3648,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3543,7 +3670,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -3575,7 +3703,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -3599,7 +3728,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -3624,7 +3754,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -3648,7 +3779,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -3692,6 +3824,7 @@ .rise:before, .slumber:before, .brannan:before, +.vesper:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3713,7 +3846,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.vesper:after { content: ''; display: block; height: 100%; @@ -3745,7 +3879,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.vesper { position: relative; } .aden img, @@ -3769,7 +3904,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .vesper img { width: 100%; z-index: 1; } @@ -3794,7 +3930,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .vesper:before { z-index: 2; } .aden:after, @@ -3818,7 +3955,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .vesper:after { z-index: 3; } @@ -3829,3 +3967,181 @@ .brannan::after { background-color: rgba(161, 44, 199, 0.31); mix-blend-mode: lighten; } + +/* + * + * Vesper + * + */ + +.aden:before, +.inkwell:before, +.perpetua:before, +.reyes:before, +.gingham:before, +.toaster:before, +.walden:before, +.hudson:before, +.earlybird:before, +.mayfair:before, +.lofi:before, +._1977:before, +.brooklyn:before, +.xpro2:before, +.nashville:before, +.lark:before, +.moon:before, +.clarendon:before, +.willow:before, +.rise:before, +.slumber:before, +.brannan:before, +.vesper:before, +.aden:after, +.inkwell:after, +.perpetua:after, +.reyes:after, +.gingham:after, +.toaster:after, +.walden:after, +.hudson:after, +.earlybird:after, +.mayfair:after, +.lofi:after, +._1977:after, +.brooklyn:after, +.xpro2:after, +.nashville:after, +.lark:after, +.moon:after, +.clarendon:after, +.willow:after, +.rise:after, +.slumber:after, +.brannan:after, +.vesper:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber, +.brannan, +.vesper { + position: relative; } + + .aden img, + .inkwell img, + .perpetua img, + .reyes img, + .gingham img, + .toaster img, + .walden img, + .hudson img, + .earlybird img, + .mayfair img, + .lofi img, + ._1977 img, + .brooklyn img, + .xpro2 img, + .nashville img, + .lark img, + .moon img, + .clarendon img, + .willow img, + .rise img, + .slumber img, + .brannan img, + .vesper img { + width: 100%; + z-index: 1; } + + .aden:before, + .inkwell:before, + .perpetua:before, + .reyes:before, + .gingham:before, + .toaster:before, + .walden:before, + .hudson:before, + .earlybird:before, + .mayfair:before, + .lofi:before, + ._1977:before, + .brooklyn:before, + .xpro2:before, + .nashville:before, + .lark:before, + .moon:before, + .clarendon:before, + .willow:before, + .rise:before, + .slumber:before, + .brannan:before, + .vesper:before { + z-index: 2; } + + .aden:after, + .inkwell:after, + .perpetua:after, + .reyes:after, + .gingham:after, + .toaster:after, + .walden:after, + .hudson:after, + .earlybird:after, + .mayfair:after, + .lofi:after, + ._1977:after, + .brooklyn:after, + .xpro2:after, + .nashville:after, + .lark:after, + .moon:after, + .clarendon:after, + .willow:after, + .rise:after, + .slumber:after, + .brannan:after, + .vesper:after { + z-index: 3; } + + +.vesper { + -webkit-filter: contrast(0.9) sepia(0.4) hue-rotate(-10deg) brightness(0.9) saturate(170%); + filter: contrast(0.9) sepia(0.4) hue-rotate(-10deg) brightness(0.9) saturate(170%); } + + .vesper::after { + background: rgba(52, 87, 158, 0.56); + mix-blend-mode: overlay; + opacity: .8; } + + .vesper::before { + background: rgba(37, 107, 136, 0.7); + opacity: .8; + mix-blend-mode: color-dodge; } diff --git a/source/css/cssgram.min.css b/source/css/cssgram.min.css index 6a65871..abd3891 100644 --- a/source/css/cssgram.min.css +++ b/source/css/cssgram.min.css @@ -1 +1 @@ -.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.walden,.willow,.xpro2{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten} \ No newline at end of file +.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.vesper:after,.vesper:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.vesper,.walden,.willow,.xpro2{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.vesper img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.vesper:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.vesper:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.vesper{-webkit-filter:contrast(.9) sepia(.4) hue-rotate(-10deg) brightness(.9) saturate(170%);filter:contrast(.9) sepia(.4) hue-rotate(-10deg) brightness(.9) saturate(170%)}.vesper::after{background:rgba(52,87,158,.56);mix-blend-mode:overlay;opacity:.8}.vesper::before{background:rgba(37,107,136,.7);opacity:.8;mix-blend-mode:color-dodge} \ No newline at end of file diff --git a/source/css/vesper.css b/source/css/vesper.css new file mode 100644 index 0000000..5585fad --- /dev/null +++ b/source/css/vesper.css @@ -0,0 +1,45 @@ +/* + * + * Vesper + * + */ + +.vesper:before, +.vesper:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + + +.vesper { + position: relative; } + + .vesper img { + width: 100%; + z-index: 1; } + + .vesper:before { + z-index: 2; } + + .vesper:after { + z-index: 3; } + + +.vesper { + -webkit-filter: contrast(0.9) sepia(0.4) hue-rotate(-10deg) brightness(0.9) saturate(170%); + filter: contrast(0.9) sepia(0.4) hue-rotate(-10deg) brightness(0.9) saturate(170%); } + + .vesper::after { + background: rgba(52, 87, 158, 0.56); + mix-blend-mode: overlay; + opacity: .8; } + + .vesper::before { + background: rgba(37, 107, 136, 0.7); + opacity: .8; + mix-blend-mode: color-dodge; } diff --git a/source/css/vesper.min.css b/source/css/vesper.min.css new file mode 100644 index 0000000..0d18b57 --- /dev/null +++ b/source/css/vesper.min.css @@ -0,0 +1 @@ +.vesper:after,.vesper:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.vesper{position:relative;-webkit-filter:contrast(.9) sepia(.4) hue-rotate(-10deg) brightness(.9) saturate(170%);filter:contrast(.9) sepia(.4) hue-rotate(-10deg) brightness(.9) saturate(170%)}.vesper img{width:100%;z-index:1}.vesper:before{z-index:2}.vesper:after{z-index:3}.vesper::after{background:rgba(52,87,158,.56);mix-blend-mode:overlay;opacity:.8}.vesper::before{background:rgba(37,107,136,.7);opacity:.8;mix-blend-mode:color-dodge} \ No newline at end of file diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss index d05975e..5ae16e6 100644 --- a/source/scss/cssgram.scss +++ b/source/scss/cssgram.scss @@ -20,4 +20,5 @@ @import 'willow'; @import 'rise'; @import 'slumber'; -@import 'brannan' \ No newline at end of file +@import 'brannan'; +@import 'vesper'; diff --git a/source/scss/vesper.scss b/source/scss/vesper.scss new file mode 100644 index 0000000..3cdfa8a --- /dev/null +++ b/source/scss/vesper.scss @@ -0,0 +1,48 @@ +/* + * + * Vesper + * + */ +@import 'shared'; + +// mixin to extend vesper filter +// @mixin vesper +// @param $filters... {filter} - Zero to many css filters to be added +// @example +// img { +// @include vesper; +// } +// or +// img { +// @include vesper(blur(2px)); +// } +// or +// img { +// @include vesper(blur(2px)) { +// /*...*/ +// }; +// } +@mixin vesper($filters...) { + @extend %filter-base; + filter: contrast(.9) sepia(.4) hue-rotate(-10deg) brightness(.9) saturate(170%) $filters; + + &::after { + background: rgba(52, 87, 158, 0.56); + mix-blend-mode: overlay; + opacity: .8; + } + + &::before { + background: rgba(37, 107, 136, 0.7); + opacity: .8; + mix-blend-mode: color-dodge; + } + + @content; +} + +// vesper Instagram filter +%vesper, +.vesper { + @include vesper; +}