From b1f21c87502495b206b92c76282c10844b626d55 Mon Sep 17 00:00:00 2001 From: spencerking Date: Mon, 3 Oct 2016 20:21:09 -0500 Subject: [PATCH 1/5] Adding Charmes I used the test image from: http://www.makeuseof.com/tag/instagram-filters-work-can-tell-difference/ --- site/css/charmes.min.css | 1 + site/css/cssgram.min.css | 2 +- site/css/demo-site.css | 547 +++++++++++++++++++++++++++++-------- site/css/demo-site.min.css | 2 +- site/filters.json | 2 +- site/index.html | 17 +- site/test/index.html | 2 +- source/css/charmes.css | 39 +++ source/css/charmes.min.css | 1 + source/css/cssgram.css | 540 ++++++++++++++++++++++++++++-------- source/css/cssgram.min.css | 2 +- source/scss/charmes.scss | 42 +++ source/scss/cssgram.scss | 3 +- 13 files changed, 955 insertions(+), 245 deletions(-) create mode 100644 site/css/charmes.min.css create mode 100644 source/css/charmes.css create mode 100644 source/css/charmes.min.css create mode 100644 source/scss/charmes.scss diff --git a/site/css/charmes.min.css b/site/css/charmes.min.css new file mode 100644 index 0000000..5313521 --- /dev/null +++ b/site/css/charmes.min.css @@ -0,0 +1 @@ +.charmes:after,.charmes:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.charmes{position:relative;-webkit-filter:contrast(.8) brightness(1.1);filter:contrast(.8) brightness(1.1)}.charmes img{width:100%;z-index:1}.charmes:before{z-index:2}.charmes:after{z-index:3}.charmes::after{background-color:rgba(162,78,78,.17);mix-blend-mode:lighten} \ No newline at end of file diff --git a/site/css/cssgram.min.css b/site/css/cssgram.min.css index 6a65871..e5c44e4 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,.charmes:after,.charmes: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,.charmes,.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,.charmes 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,.charmes: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,.charmes: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}.charmes{-webkit-filter:contrast(.8) brightness(1.1);filter:contrast(.8) brightness(1.1)}.charmes::after{background-color:rgba(162,78,78,.17);mix-blend-mode:lighten} \ No newline at end of file diff --git a/site/css/demo-site.css b/site/css/demo-site.css index 38e1300..efe659a 100644 --- a/site/css/demo-site.css +++ b/site/css/demo-site.css @@ -22,6 +22,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -43,7 +44,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -75,7 +77,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -99,7 +102,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -124,7 +128,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -148,7 +153,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } /* @@ -179,6 +185,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -200,7 +207,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -232,7 +240,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -256,7 +265,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -281,7 +291,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -305,7 +316,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -346,6 +358,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -367,7 +380,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -399,7 +413,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -423,7 +438,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -448,7 +464,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -472,7 +489,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -508,6 +526,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -529,7 +548,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -561,7 +581,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -585,7 +606,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -610,7 +632,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -634,7 +657,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -672,6 +696,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -693,7 +718,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -725,7 +751,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -749,7 +776,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -774,7 +802,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -798,7 +827,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -839,6 +869,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -860,7 +891,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -892,7 +924,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -916,7 +949,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -941,7 +975,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -965,7 +1000,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -1006,6 +1042,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1027,7 +1064,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -1059,7 +1097,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -1083,7 +1122,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -1108,7 +1148,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -1132,7 +1173,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -1173,6 +1215,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1194,7 +1237,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -1226,7 +1270,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -1250,7 +1295,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -1275,7 +1321,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -1299,7 +1346,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -1340,6 +1388,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1361,7 +1410,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -1393,7 +1443,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -1417,7 +1468,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -1442,7 +1494,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -1466,7 +1519,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -1508,6 +1562,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1529,7 +1584,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -1561,7 +1617,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -1585,7 +1642,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -1610,7 +1668,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -1634,7 +1693,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -1675,6 +1735,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1696,7 +1757,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -1728,7 +1790,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -1752,7 +1815,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -1777,7 +1841,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -1801,7 +1866,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -1842,6 +1908,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1863,7 +1930,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -1895,7 +1963,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -1919,7 +1988,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -1944,7 +2014,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -1968,7 +2039,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -2008,6 +2080,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2029,7 +2102,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -2061,7 +2135,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -2085,7 +2160,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -2110,7 +2186,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -2134,7 +2211,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -2174,6 +2252,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2195,7 +2274,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -2227,7 +2307,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -2251,7 +2332,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -2276,7 +2358,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -2300,7 +2383,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -2341,6 +2425,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2362,7 +2447,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -2394,7 +2480,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -2418,7 +2505,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -2443,7 +2531,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -2467,7 +2556,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -2508,6 +2598,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2529,7 +2620,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -2561,7 +2653,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -2585,7 +2678,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -2610,7 +2704,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -2634,7 +2729,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -2677,6 +2773,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2698,7 +2795,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -2730,7 +2828,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -2754,7 +2853,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -2779,7 +2879,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -2803,7 +2904,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -2846,6 +2948,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2867,7 +2970,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -2899,7 +3003,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -2923,7 +3028,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -2948,7 +3054,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -2972,7 +3079,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -3015,6 +3123,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3036,7 +3145,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -3068,7 +3178,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -3092,7 +3203,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -3117,7 +3229,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -3141,7 +3254,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -3180,6 +3294,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3201,7 +3316,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -3233,7 +3349,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -3257,7 +3374,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -3282,7 +3400,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -3306,7 +3425,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -3350,6 +3470,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3371,7 +3492,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -3403,7 +3525,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -3427,7 +3550,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -3452,7 +3576,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -3476,7 +3601,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -3523,6 +3649,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3544,7 +3671,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -3576,7 +3704,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -3600,7 +3729,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -3625,7 +3755,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -3649,7 +3780,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -3693,6 +3825,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3714,7 +3847,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -3746,7 +3880,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -3770,7 +3905,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -3795,7 +3931,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -3819,7 +3956,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -3831,6 +3969,178 @@ background-color: rgba(161, 44, 199, 0.31); mix-blend-mode: lighten; } +/* + * + * Charmes + * + */ + +.aden:before, +.inkwell:before, +.perpetua:before, +.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, +.charmes: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, +.charmes: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, +.charmes { + 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, + .charmes 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, + .charmes: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, + .charmes:after { + z-index: 3; } + + +.charmes { + -webkit-filter: contrast(0.8) brightness(1.1); + filter: contrast(0.8) brightness(1.1); } + + .charmes::after { + background-color: rgba(162, 78, 78, 0.17); + mix-blend-mode: lighten; } + ::-moz-selection { background: #9b1c9b; color: white; } @@ -4024,16 +4334,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..9fe1f35 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,.charmes:after,.charmes: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,.charmes,.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,.charmes 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,.charmes: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,.charmes: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}.charmes{-webkit-filter:contrast(.8) brightness(1.1);filter:contrast(.8) brightness(1.1)}.charmes::after{background-color:rgba(162,78,78,.17);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:-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/filters.json b/site/filters.json index f9aab7e..8988b57 100644 --- a/site/filters.json +++ b/site/filters.json @@ -32,7 +32,7 @@ }, { "name": "Charmes", - "is_done": false, + "is_done": true, "usage": "charmes" }, { diff --git a/site/index.html b/site/index.html index 7661bde..97b4c6f 100644 --- a/site/index.html +++ b/site/index.html @@ -81,7 +81,13 @@

A tiny (<1kb gzipped!) library for recreating Brooklyn -
  • +
  • +
    + +
    Charmes
    +
    +
    • +
  • Clarendon
    @@ -254,7 +260,8 @@

    Available Classes

  • Aden: class="aden"
  • Brannan: class="brannan"
  • Brooklyn: class="brooklyn"
    • -
  • Clarendon: class="clarendon"
    • +
  • Charmes: class="charmes"
    • +
  • Clarendon: class="clarendon"
  • Earlybird: class="earlybird"
  • Gingham: class="gingham"
  • Hudson: class="hudson"
    • @@ -311,7 +318,8 @@

    Available Extends

  • Aden: @extend %aden;
  • Brannan: @extend %brannan;
  • Brooklyn: @extend %brooklyn;
    • -
  • Clarendon: @extend %clarendon;
    • +
  • Charmes: @extend %charmes;
    • +
  • Clarendon: @extend %clarendon;
  • Earlybird: @extend %earlybird;
  • Gingham: @extend %gingham;
  • Hudson: @extend %hudson;
    • @@ -374,7 +382,8 @@

    Available Mixins

  • Aden: @include aden();
  • Brannan: @include brannan();
  • Brooklyn: @include brooklyn();
    • -
  • Clarendon: @include clarendon();
    • +
  • Charmes: @include charmes();
    • +
  • Clarendon: @include clarendon();
  • Earlybird: @include earlybird();
  • Gingham: @include gingham();
  • Hudson: @include hudson();
    • diff --git a/site/test/index.html b/site/test/index.html index 6331031..eb6172c 100644 --- a/site/test/index.html +++ b/site/test/index.html @@ -597,7 +597,7 @@

    CSSgram

    -

    Charmes ✗

    +

    Charmes ✓

    Instagram

    diff --git a/source/css/charmes.css b/source/css/charmes.css new file mode 100644 index 0000000..e19953a --- /dev/null +++ b/source/css/charmes.css @@ -0,0 +1,39 @@ +/* + * + * Charmes + * + */ + +.charmes:before, +.charmes:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + + +.charmes { + position: relative; } + + .charmes img { + width: 100%; + z-index: 1; } + + .charmes:before { + z-index: 2; } + + .charmes:after { + z-index: 3; } + + +.charmes { + -webkit-filter: contrast(0.8) brightness(1.1); + filter: contrast(0.8) brightness(1.1); } + + .charmes::after { + background-color: rgba(162, 78, 78, 0.17); + mix-blend-mode: lighten; } diff --git a/source/css/charmes.min.css b/source/css/charmes.min.css new file mode 100644 index 0000000..5313521 --- /dev/null +++ b/source/css/charmes.min.css @@ -0,0 +1 @@ +.charmes:after,.charmes:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.charmes{position:relative;-webkit-filter:contrast(.8) brightness(1.1);filter:contrast(.8) brightness(1.1)}.charmes img{width:100%;z-index:1}.charmes:before{z-index:2}.charmes:after{z-index:3}.charmes::after{background-color:rgba(162,78,78,.17);mix-blend-mode:lighten} \ No newline at end of file diff --git a/source/css/cssgram.css b/source/css/cssgram.css index 0a7c52f..4cfa51d 100644 --- a/source/css/cssgram.css +++ b/source/css/cssgram.css @@ -21,6 +21,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -42,7 +43,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -74,7 +76,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -98,7 +101,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -123,7 +127,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -147,7 +152,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } /* @@ -178,6 +184,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -199,7 +206,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -231,7 +239,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -255,7 +264,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -280,7 +290,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -304,7 +315,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -345,6 +357,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -366,7 +379,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -398,7 +412,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -422,7 +437,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -447,7 +463,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -471,7 +488,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -507,6 +525,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -528,7 +547,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -560,7 +580,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -584,7 +605,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -609,7 +631,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -633,7 +656,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -671,6 +695,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -692,7 +717,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -724,7 +750,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -748,7 +775,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -773,7 +801,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -797,7 +826,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -838,6 +868,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -859,7 +890,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -891,7 +923,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -915,7 +948,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -940,7 +974,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -964,7 +999,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -1005,6 +1041,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1026,7 +1063,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -1058,7 +1096,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -1082,7 +1121,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -1107,7 +1147,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -1131,7 +1172,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -1172,6 +1214,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1193,7 +1236,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -1225,7 +1269,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -1249,7 +1294,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -1274,7 +1320,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -1298,7 +1345,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -1339,6 +1387,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1360,7 +1409,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -1392,7 +1442,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -1416,7 +1467,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -1441,7 +1493,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -1465,7 +1518,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -1507,6 +1561,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1528,7 +1583,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -1560,7 +1616,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -1584,7 +1641,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -1609,7 +1667,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -1633,7 +1692,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -1674,6 +1734,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1695,7 +1756,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -1727,7 +1789,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -1751,7 +1814,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -1776,7 +1840,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -1800,7 +1865,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -1841,6 +1907,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1862,7 +1929,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -1894,7 +1962,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -1918,7 +1987,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -1943,7 +2013,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -1967,7 +2038,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -2007,6 +2079,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2028,7 +2101,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -2060,7 +2134,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -2084,7 +2159,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -2109,7 +2185,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -2133,7 +2210,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -2173,6 +2251,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2194,7 +2273,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -2226,7 +2306,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -2250,7 +2331,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -2275,7 +2357,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -2299,7 +2382,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -2340,6 +2424,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2361,7 +2446,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -2393,7 +2479,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -2417,7 +2504,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -2442,7 +2530,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -2466,7 +2555,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -2507,6 +2597,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2528,7 +2619,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -2560,7 +2652,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -2584,7 +2677,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -2609,7 +2703,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -2633,7 +2728,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -2676,6 +2772,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2697,7 +2794,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -2729,7 +2827,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -2753,7 +2852,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -2778,7 +2878,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -2802,7 +2903,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -2845,6 +2947,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2866,7 +2969,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -2898,7 +3002,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -2922,7 +3027,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -2947,7 +3053,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -2971,7 +3078,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -3014,6 +3122,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3035,7 +3144,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -3067,7 +3177,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -3091,7 +3202,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -3116,7 +3228,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -3140,7 +3253,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -3179,6 +3293,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3200,7 +3315,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -3232,7 +3348,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -3256,7 +3373,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -3281,7 +3399,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -3305,7 +3424,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -3349,6 +3469,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3370,7 +3491,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -3402,7 +3524,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -3426,7 +3549,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -3451,7 +3575,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -3475,7 +3600,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -3522,6 +3648,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3543,7 +3670,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -3575,7 +3703,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -3599,7 +3728,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -3624,7 +3754,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -3648,7 +3779,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -3692,6 +3824,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3713,7 +3846,8 @@ .willow:after, .rise:after, .slumber:after, -.brannan:after { +.brannan:after, +.charmes:after { content: ''; display: block; height: 100%; @@ -3745,7 +3879,8 @@ .willow, .rise, .slumber, -.brannan { +.brannan, +.charmes { position: relative; } .aden img, @@ -3769,7 +3904,8 @@ .willow img, .rise img, .slumber img, - .brannan img { + .brannan img, + .charmes img { width: 100%; z-index: 1; } @@ -3794,7 +3930,8 @@ .willow:before, .rise:before, .slumber:before, - .brannan:before { + .brannan:before, + .charmes:before { z-index: 2; } .aden:after, @@ -3818,7 +3955,8 @@ .willow:after, .rise:after, .slumber:after, - .brannan:after { + .brannan:after, + .charmes:after { z-index: 3; } @@ -3829,3 +3967,175 @@ .brannan::after { background-color: rgba(161, 44, 199, 0.31); mix-blend-mode: lighten; } + +/* + * + * Charmes + * + */ + +.aden:before, +.inkwell:before, +.perpetua:before, +.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, +.charmes: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, +.charmes: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, +.charmes { + 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, + .charmes 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, + .charmes: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, + .charmes:after { + z-index: 3; } + + +.charmes { + -webkit-filter: contrast(0.8) brightness(1.1); + filter: contrast(0.8) brightness(1.1); } + + .charmes::after { + background-color: rgba(162, 78, 78, 0.17); + mix-blend-mode: lighten; } diff --git a/source/css/cssgram.min.css b/source/css/cssgram.min.css index 6a65871..e5c44e4 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,.charmes:after,.charmes: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,.charmes,.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,.charmes 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,.charmes: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,.charmes: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}.charmes{-webkit-filter:contrast(.8) brightness(1.1);filter:contrast(.8) brightness(1.1)}.charmes::after{background-color:rgba(162,78,78,.17);mix-blend-mode:lighten} \ No newline at end of file diff --git a/source/scss/charmes.scss b/source/scss/charmes.scss new file mode 100644 index 0000000..3c92d14 --- /dev/null +++ b/source/scss/charmes.scss @@ -0,0 +1,42 @@ +/* + * + * Charmes + * + */ +@import 'shared'; + +// mixin to extend charmes filter +// @mixin charmes +// @param $filters... {filter} - Zero to many css filters to be added +// @example +// img { +// @include charmes; +// } +// or +// img { +// @include charmes(blur(2px)); +// } +// or +// img { +// @include charmes(blur(2px)) { +// /*...*/ +// }; +// } + +@mixin charmes($filters...) { + @extend %filter-base; + filter: contrast(.8) brightness(1.1); + + &::after { + background-color: rgba(162, 78, 78, 0.17); + mix-blend-mode: lighten; + } + + @content; +} + +// charmes Instagram filter +%charmes, +.charmes { + @include charmes; +} diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss index d05975e..255a391 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 'charmes' \ No newline at end of file From 7e10032162f63fdfb585af4fdbe37103fb9929bb Mon Sep 17 00:00:00 2001 From: spencerking Date: Mon, 3 Oct 2016 20:29:54 -0500 Subject: [PATCH 2/5] Improving Charmes I was looking at the wrong comparison image initially --- site/css/charmes.min.css | 2 +- site/css/cssgram.min.css | 2 +- site/css/demo-site.css | 6 +++--- site/css/demo-site.min.css | 2 +- source/css/charmes.css | 6 +++--- source/css/charmes.min.css | 2 +- source/css/cssgram.css | 6 +++--- source/css/cssgram.min.css | 2 +- source/scss/charmes.scss | 4 ++-- 9 files changed, 16 insertions(+), 16 deletions(-) diff --git a/site/css/charmes.min.css b/site/css/charmes.min.css index 5313521..dfedf05 100644 --- a/site/css/charmes.min.css +++ b/site/css/charmes.min.css @@ -1 +1 @@ -.charmes:after,.charmes:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.charmes{position:relative;-webkit-filter:contrast(.8) brightness(1.1);filter:contrast(.8) brightness(1.1)}.charmes img{width:100%;z-index:1}.charmes:before{z-index:2}.charmes:after{z-index:3}.charmes::after{background-color:rgba(162,78,78,.17);mix-blend-mode:lighten} \ No newline at end of file +.charmes:after,.charmes:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.charmes{position:relative;-webkit-filter:contrast(1.07) brightness(1.1);filter:contrast(1.07) brightness(1.1)}.charmes img{width:100%;z-index:1}.charmes:before{z-index:2}.charmes:after{z-index:3}.charmes::after{background-color:rgba(185,55,55,.22);mix-blend-mode:lighten} \ No newline at end of file diff --git a/site/css/cssgram.min.css b/site/css/cssgram.min.css index e5c44e4..24e873b 100644 --- a/site/css/cssgram.min.css +++ b/site/css/cssgram.min.css @@ -1 +1 @@ -.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.charmes:after,.charmes: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,.charmes,.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,.charmes 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,.charmes: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,.charmes: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}.charmes{-webkit-filter:contrast(.8) brightness(1.1);filter:contrast(.8) brightness(1.1)}.charmes::after{background-color:rgba(162,78,78,.17);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,.charmes:after,.charmes: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,.charmes,.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,.charmes 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,.charmes: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,.charmes: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}.charmes{-webkit-filter:contrast(1.07) brightness(1.1);filter:contrast(1.07) brightness(1.1)}.charmes::after{background-color:rgba(185,55,55,.22);mix-blend-mode:lighten} \ No newline at end of file diff --git a/site/css/demo-site.css b/site/css/demo-site.css index efe659a..e2cd794 100644 --- a/site/css/demo-site.css +++ b/site/css/demo-site.css @@ -4134,11 +4134,11 @@ .charmes { - -webkit-filter: contrast(0.8) brightness(1.1); - filter: contrast(0.8) brightness(1.1); } + -webkit-filter: contrast(1.07) brightness(1.1); + filter: contrast(1.07) brightness(1.1); } .charmes::after { - background-color: rgba(162, 78, 78, 0.17); + background-color: rgba(185, 55, 55, 0.22); mix-blend-mode: lighten; } ::-moz-selection { diff --git a/site/css/demo-site.min.css b/site/css/demo-site.min.css index 9fe1f35..87c870a 100644 --- a/site/css/demo-site.min.css +++ b/site/css/demo-site.min.css @@ -1 +1 @@ -@charset "UTF-8";body,section{overflow-x:hidden}a,figure{-webkit-transition-duration:.35s}figure,ul{margin:0;padding:0}.demo__input-area,.demo__note,hr,img{display:block}.attribution,.demo__input-area,.demo__note,.demo__subtitle,.title--top-sub,.title-section,.video-container{text-align:center}.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.charmes:after,.charmes: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,.charmes,.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,.charmes 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,.charmes: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,.charmes: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}.charmes{-webkit-filter:contrast(.8) brightness(1.1);filter:contrast(.8) brightness(1.1)}.charmes::after{background-color:rgba(162,78,78,.17);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:-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 +@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,.charmes:after,.charmes: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,.charmes,.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,.charmes 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,.charmes: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,.charmes: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}.charmes{-webkit-filter:contrast(1.07) brightness(1.1);filter:contrast(1.07) brightness(1.1)}.charmes::after{background-color:rgba(185,55,55,.22);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:-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/source/css/charmes.css b/source/css/charmes.css index e19953a..f61b935 100644 --- a/source/css/charmes.css +++ b/source/css/charmes.css @@ -31,9 +31,9 @@ .charmes { - -webkit-filter: contrast(0.8) brightness(1.1); - filter: contrast(0.8) brightness(1.1); } + -webkit-filter: contrast(1.07) brightness(1.1); + filter: contrast(1.07) brightness(1.1); } .charmes::after { - background-color: rgba(162, 78, 78, 0.17); + background-color: rgba(185, 55, 55, 0.22); mix-blend-mode: lighten; } diff --git a/source/css/charmes.min.css b/source/css/charmes.min.css index 5313521..dfedf05 100644 --- a/source/css/charmes.min.css +++ b/source/css/charmes.min.css @@ -1 +1 @@ -.charmes:after,.charmes:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.charmes{position:relative;-webkit-filter:contrast(.8) brightness(1.1);filter:contrast(.8) brightness(1.1)}.charmes img{width:100%;z-index:1}.charmes:before{z-index:2}.charmes:after{z-index:3}.charmes::after{background-color:rgba(162,78,78,.17);mix-blend-mode:lighten} \ No newline at end of file +.charmes:after,.charmes:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.charmes{position:relative;-webkit-filter:contrast(1.07) brightness(1.1);filter:contrast(1.07) brightness(1.1)}.charmes img{width:100%;z-index:1}.charmes:before{z-index:2}.charmes:after{z-index:3}.charmes::after{background-color:rgba(185,55,55,.22);mix-blend-mode:lighten} \ No newline at end of file diff --git a/source/css/cssgram.css b/source/css/cssgram.css index 4cfa51d..38a8c61 100644 --- a/source/css/cssgram.css +++ b/source/css/cssgram.css @@ -4133,9 +4133,9 @@ .charmes { - -webkit-filter: contrast(0.8) brightness(1.1); - filter: contrast(0.8) brightness(1.1); } + -webkit-filter: contrast(1.07) brightness(1.1); + filter: contrast(1.07) brightness(1.1); } .charmes::after { - background-color: rgba(162, 78, 78, 0.17); + background-color: rgba(185, 55, 55, 0.22); mix-blend-mode: lighten; } diff --git a/source/css/cssgram.min.css b/source/css/cssgram.min.css index e5c44e4..24e873b 100644 --- a/source/css/cssgram.min.css +++ b/source/css/cssgram.min.css @@ -1 +1 @@ -.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.charmes:after,.charmes: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,.charmes,.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,.charmes 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,.charmes: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,.charmes: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}.charmes{-webkit-filter:contrast(.8) brightness(1.1);filter:contrast(.8) brightness(1.1)}.charmes::after{background-color:rgba(162,78,78,.17);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,.charmes:after,.charmes: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,.charmes,.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,.charmes 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,.charmes: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,.charmes: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}.charmes{-webkit-filter:contrast(1.07) brightness(1.1);filter:contrast(1.07) brightness(1.1)}.charmes::after{background-color:rgba(185,55,55,.22);mix-blend-mode:lighten} \ No newline at end of file diff --git a/source/scss/charmes.scss b/source/scss/charmes.scss index 3c92d14..178957d 100644 --- a/source/scss/charmes.scss +++ b/source/scss/charmes.scss @@ -25,10 +25,10 @@ @mixin charmes($filters...) { @extend %filter-base; - filter: contrast(.8) brightness(1.1); + filter: contrast(1.07) brightness(1.1); &::after { - background-color: rgba(162, 78, 78, 0.17); + background-color: rgba(185, 55, 55, 0.22); mix-blend-mode: lighten; } From 9f6d7e0b26fddd55dc3965e8fb807d0f99ea5083 Mon Sep 17 00:00:00 2001 From: spencerking Date: Mon, 3 Oct 2016 22:16:28 -0500 Subject: [PATCH 3/5] Merging --- site/css/cssgram.min.css | 2 +- site/css/demo-site.css | 844 +++++++++++++------------------------ site/css/demo-site.min.css | 6 +- source/css/cssgram.css | 844 +++++++++++++------------------------ source/css/cssgram.min.css | 6 +- source/scss/cssgram.scss | 7 +- 6 files changed, 581 insertions(+), 1128 deletions(-) diff --git a/site/css/cssgram.min.css b/site/css/cssgram.min.css index 9ada148..2ebed37 100644 --- a/site/css/cssgram.min.css +++ b/site/css/cssgram.min.css @@ -1 +1 @@ -.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.valencia:after,.valencia:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.valencia,.walden,.willow,.xpro2{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.valencia img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.valencia:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.valencia:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.valencia{-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5} +.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}.charmes{-webkit-filter:contrast(1.07) brightness(1.1);filter:contrast(1.07) brightness(1.1)}.charmes::after{background-color:rgba(185,55,55,.22);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.charmes:after,.charmes:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.valencia:after,.valencia:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.charmes,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.valencia,.walden,.willow,.xpro2{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.charmes img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.valencia img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.charmes:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.valencia:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.charmes:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.valencia:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.valencia{-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5} \ No newline at end of file diff --git a/site/css/demo-site.css b/site/css/demo-site.css index be07206..269a54c 100644 --- a/site/css/demo-site.css +++ b/site/css/demo-site.css @@ -22,11 +22,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -49,11 +46,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -86,11 +80,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -115,11 +106,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -145,11 +133,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -174,11 +159,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } /* @@ -209,11 +191,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -236,11 +215,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -273,11 +249,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -302,11 +275,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -332,11 +302,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -361,11 +328,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -406,11 +370,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -433,11 +394,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -470,11 +428,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -499,11 +454,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -529,11 +481,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -558,11 +507,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -598,11 +544,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -625,11 +568,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -662,11 +602,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -691,11 +628,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -721,11 +655,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -750,11 +681,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -792,11 +720,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -819,11 +744,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -856,11 +778,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -885,11 +804,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -915,11 +831,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -944,11 +857,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -989,11 +899,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -1016,11 +923,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -1053,11 +957,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -1082,11 +983,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -1112,11 +1010,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -1141,11 +1036,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -1186,11 +1078,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -1213,11 +1102,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -1250,11 +1136,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -1279,11 +1162,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -1309,11 +1189,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -1338,11 +1215,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -1383,11 +1257,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -1410,11 +1281,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -1447,11 +1315,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -1476,11 +1341,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -1506,11 +1368,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -1535,11 +1394,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -1580,11 +1436,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -1607,11 +1460,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -1644,11 +1494,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -1673,11 +1520,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -1703,11 +1547,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -1732,11 +1573,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -1778,11 +1616,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -1805,11 +1640,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -1842,11 +1674,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -1871,11 +1700,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -1901,11 +1727,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -1930,11 +1753,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -1975,11 +1795,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -2002,11 +1819,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -2039,11 +1853,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -2068,11 +1879,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -2098,11 +1906,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -2127,11 +1932,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -2172,11 +1974,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -2199,11 +1998,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -2236,11 +2032,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -2265,11 +2058,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -2295,11 +2085,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -2324,11 +2111,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -2368,11 +2152,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -2395,11 +2176,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -2432,11 +2210,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -2461,11 +2236,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -2491,11 +2263,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -2520,11 +2289,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -2564,11 +2330,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -2591,11 +2354,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -2628,11 +2388,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -2657,11 +2414,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -2687,11 +2441,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -2716,11 +2467,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -2761,11 +2509,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -2788,11 +2533,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -2825,11 +2567,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -2854,11 +2593,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -2884,11 +2620,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -2913,11 +2646,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -2958,11 +2688,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -2985,11 +2712,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -3022,11 +2746,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -3051,11 +2772,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -3081,11 +2799,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -3110,11 +2825,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -3157,11 +2869,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -3184,11 +2893,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -3221,11 +2927,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -3250,11 +2953,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -3280,11 +2980,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -3309,11 +3006,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -3356,11 +3050,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -3383,11 +3074,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -3420,11 +3108,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -3449,11 +3134,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -3479,11 +3161,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -3508,11 +3187,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -3555,11 +3231,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -3582,11 +3255,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -3619,11 +3289,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -3648,11 +3315,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -3678,11 +3342,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -3707,11 +3368,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -3750,11 +3408,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -3777,11 +3432,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -3814,11 +3466,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -3843,11 +3492,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -3873,11 +3519,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -3902,11 +3545,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -3950,11 +3590,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -3977,11 +3614,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -4014,11 +3648,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -4043,11 +3674,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -4073,11 +3701,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -4102,11 +3727,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -4153,11 +3775,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -4180,11 +3799,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -4217,11 +3833,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -4246,11 +3859,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -4276,11 +3886,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -4305,11 +3912,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -4353,11 +3957,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -4380,11 +3981,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -4417,11 +4015,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -4446,11 +4041,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -4476,11 +4068,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -4505,11 +4094,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -4523,11 +4109,7 @@ /* * -<<<<<<< HEAD * Charmes -======= - * Valencia ->>>>>>> una/master * */ @@ -4553,11 +4135,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -4580,11 +4159,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -4617,11 +4193,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -4646,11 +4219,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -4676,11 +4246,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -4705,8 +4272,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { + .charmes:after, + .valencia:after { z-index: 3; } @@ -4717,7 +4284,173 @@ .charmes::after { background-color: rgba(185, 55, 55, 0.22); mix-blend-mode: lighten; } -======= + +/* + * + * Valencia + * + */ + +.aden:before, +.inkwell:before, +.perpetua:before, +.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, +.charmes:before, +.valencia:before, +.aden:after, +.inkwell:after, +.perpetua:after, +.reyes:after, +.gingham:after, +.toaster:after, +.walden:after, +.hudson:after, +.earlybird:after, +.mayfair:after, +.lofi:after, +._1977:after, +.brooklyn:after, +.xpro2:after, +.nashville:after, +.lark:after, +.moon:after, +.clarendon:after, +.willow:after, +.rise:after, +.slumber:after, +.brannan:after, +.charmes:after, +.valencia:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber, +.brannan, +.charmes, +.valencia { + position: relative; } + + .aden img, + .inkwell img, + .perpetua img, + .reyes img, + .gingham img, + .toaster img, + .walden img, + .hudson img, + .earlybird img, + .mayfair img, + .lofi img, + ._1977 img, + .brooklyn img, + .xpro2 img, + .nashville img, + .lark img, + .moon img, + .clarendon img, + .willow img, + .rise img, + .slumber img, + .brannan img, + .charmes img, + .valencia img { + width: 100%; + z-index: 1; } + + .aden:before, + .inkwell:before, + .perpetua:before, + .reyes:before, + .gingham:before, + .toaster:before, + .walden:before, + .hudson:before, + .earlybird:before, + .mayfair:before, + .lofi:before, + ._1977:before, + .brooklyn:before, + .xpro2:before, + .nashville:before, + .lark:before, + .moon:before, + .clarendon:before, + .willow:before, + .rise:before, + .slumber:before, + .brannan:before, + .charmes:before, + .valencia:before { + z-index: 2; } + + .aden:after, + .inkwell:after, + .perpetua:after, + .reyes:after, + .gingham:after, + .toaster:after, + .walden:after, + .hudson:after, + .earlybird:after, + .mayfair:after, + .lofi:after, + ._1977:after, + .brooklyn:after, + .xpro2:after, + .nashville:after, + .lark:after, + .moon:after, + .clarendon:after, + .willow:after, + .rise:after, + .slumber:after, + .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -4730,7 +4463,6 @@ background: #3a0339; mix-blend-mode: exclusion; opacity: .5; } ->>>>>>> una/master ::-moz-selection { background: #9b1c9b; diff --git a/site/css/demo-site.min.css b/site/css/demo-site.min.css index 38bfc1d..049fbba 100644 --- a/site/css/demo-site.min.css +++ b/site/css/demo-site.min.css @@ -1,5 +1 @@ -<<<<<<< HEAD -@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,.charmes:after,.charmes: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,.charmes,.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,.charmes 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,.charmes: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,.charmes: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}.charmes{-webkit-filter:contrast(1.07) brightness(1.1);filter:contrast(1.07) brightness(1.1)}.charmes::after{background-color:rgba(185,55,55,.22);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:-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} -======= -@charset "UTF-8";body,section{overflow-x:hidden}a,figure{-webkit-transition-duration:.35s}figure,ul{margin:0;padding:0}.demo__input-area,.demo__note,hr,img{display:block}.attribution,.demo__input-area,.demo__note,.demo__subtitle,.title--top-sub,.title-section,.video-container{text-align:center}.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.valencia:after,.valencia:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.valencia,.walden,.willow,.xpro2,figure{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.valencia img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.valencia:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.valencia:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.valencia{-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5}::-moz-selection{background:#9b1c9b;color:#fff}::selection{background:#9b1c9b;color:#fff}body{font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;margin:0 auto;padding:0 2em;max-width:1200px;line-height:1.5;font-size:1.1em}h1,h2{color:#9b1c9b}.highlight,em,h3{color:#c63082}code,pre{background:#eff1f0}code code,pre code{border:none;background:0 0}code{font-family:monospace;padding:.25em .5em}.highlight{font-weight:800}.comment{color:#acb2ad}ul{width:100%}ol,ul{line-height:1.8}a{text-decoration:none;color:#9b1c9b;transition-duration:.35s;border-bottom:1px solid #c63082;padding-bottom:.05em}a:focus,a:hover{color:#e398c1;border-color:#e398c1}figure{max-width:350px;max-height:350px;overflow:hidden;transition-duration:.35s}@media (max-width:1240px){figure{max-width:300px;max-height:300px}}@media (max-width:992px){figure{max-width:250px;max-height:250px}}@media (max-width:768px){figure{max-width:300px;max-height:300px}}@media (max-width:500px){body{font-size:.9em}h1,h2{text-align:center}figure{max-width:400px;max-height:400px}}figure:focus,figure:hover{-webkit-filter:none!important;filter:none!important}figure:focus::after,figure:focus::before,figure:hover::after,figure:hover::before{opacity:0!important}figcaption{position:absolute;bottom:1em;right:0;padding:.25em 1em .25em .25em;background:#000;color:#fff;font-weight:200}hr{clear:both;float:none;border:1px solid #eff1f0;margin:2em auto}img{margin:auto;height:auto;max-height:100%;width:auto;max-width:100%}.demo__section{font-weight:300;font-size:1.2em}.demo__subtitle{font-size:2em}.demo__note{font-style:italic;margin:2em auto 0}.demo__input-area{font-size:1em;font-weight:300;margin:1em auto;padding:1em 0}@media (max-width:500px){.demo__input-area{margin:0;font-size:.8em}}.demo__input-label{text-align:center;color:#9b1c9b}.demo__input-img{max-width:16em;font-size:1em;padding:.5em;border:2px solid #9b1c9b;outline:0;margin:.5em;font-weight:200;-webkit-transition-duration:.35s;transition-duration:.35s}.demo__input-img:hover{background:#f5e8f5}.demo__input-img:focus{background:#e6c6e6}.demo__option-field{color:#9b1c9b;border:1px solid #cad1cc;min-width:200px}.demo__option-img{max-width:150px;height:150px;display:inline-block;cursor:pointer}@media (max-width:768px){.demo__option-img{height:100px}}.demo__list{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.demo__item{margin:.75em;list-style:none}@media (max-width:992px){.demo__item{margin:.5em}}@media (max-width:500px){.demo__option-img{height:60px}.demo__item{margin:.5em 0}.title--top-sub{font-size:1.2em}}.title-section{width:100%}.title--logo{max-width:400px}.title--top-sub{font-weight:200;margin:0 auto;max-width:26em}.explanation-section,.how-to-section{font-size:1.2em;font-weight:300;max-width:40em;margin:0 auto;display:block}.attribution{padding:1em 0 4em}.callout{max-width:14em;background:#eff1f0;padding:2em;margin:-.5em 2em 0;display:block;font-weight:200;float:right}@media (max-width:768px){.callout{max-width:28em;margin:1em auto;float:none;font-size:.8em}}#snapshot,.take-photo{font-size:1em;font-weight:300;cursor:pointer;border:1px dashed #9b1c9b;outline:0;vertical-align:top}.available-classes,.available-extends,.supported-browsers{-webkit-columns:15em 2;-moz-columns:15em 2;columns:15em 2}.supported:after{content:'✔';color:#62B859;margin-left:.5em}.not-supported:after{content:'✘';color:#c63082;margin-left:.5em}.take-photo{color:#9b1c9b;width:150px;height:150px;display:inline-block;background:0 0;-webkit-transition-duration:.25s;transition-duration:.25s}#snapshot:hover,.take-photo:hover{background:#c63082;color:#fff}.video-container{margin-top:2em;max-height:0;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.video-container video{margin:0 auto;display:block}#snapshot{margin:1em auto 0;color:#9b1c9b;display:inline-block;background:0 0;-webkit-transition-duration:.25s;transition-duration:.25s} ->>>>>>> una/master +@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}.charmes{-webkit-filter:contrast(1.07) brightness(1.1);filter:contrast(1.07) brightness(1.1)}.charmes::after{background-color:rgba(185,55,55,.22);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.charmes:after,.charmes:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.valencia:after,.valencia:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.charmes,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.valencia,.walden,.willow,.xpro2,figure{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.charmes img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.valencia img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.charmes:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.valencia:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.charmes:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.valencia:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.valencia{-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5}::-moz-selection{background:#9b1c9b;color:#fff}::selection{background:#9b1c9b;color:#fff}body{font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;margin:0 auto;padding:0 2em;max-width:1200px;line-height:1.5;font-size:1.1em}h1,h2{color:#9b1c9b}.highlight,em,h3{color:#c63082}code,pre{background:#eff1f0}code code,pre code{border:none;background:0 0}code{font-family:monospace;padding:.25em .5em}.highlight{font-weight:800}.comment{color:#acb2ad}ul{width:100%}ol,ul{line-height:1.8}a{text-decoration:none;color:#9b1c9b;transition-duration:.35s;border-bottom:1px solid #c63082;padding-bottom:.05em}a:focus,a:hover{color:#e398c1;border-color:#e398c1}figure{max-width:350px;max-height:350px;overflow:hidden;transition-duration:.35s}@media (max-width:1240px){figure{max-width:300px;max-height:300px}}@media (max-width:992px){figure{max-width:250px;max-height:250px}}@media (max-width:768px){figure{max-width:300px;max-height:300px}}@media (max-width:500px){body{font-size:.9em}h1,h2{text-align:center}figure{max-width:400px;max-height:400px}}figure:focus,figure:hover{-webkit-filter:none!important;filter:none!important}figure:focus::after,figure:focus::before,figure:hover::after,figure:hover::before{opacity:0!important}figcaption{position:absolute;bottom:1em;right:0;padding:.25em 1em .25em .25em;background:#000;color:#fff;font-weight:200}hr{clear:both;float:none;border:1px solid #eff1f0;margin:2em auto}img{margin:auto;height:auto;max-height:100%;width:auto;max-width:100%}.demo__section{font-weight:300;font-size:1.2em}.demo__subtitle{font-size:2em}.demo__note{font-style:italic;margin:2em auto 0}.demo__input-area{font-size:1em;font-weight:300;margin:1em auto;padding:1em 0}@media (max-width:500px){.demo__input-area{margin:0;font-size:.8em}}.demo__input-label{text-align:center;color:#9b1c9b}.demo__input-img{max-width:16em;font-size:1em;padding:.5em;border:2px solid #9b1c9b;outline:0;margin:.5em;font-weight:200;-webkit-transition-duration:.35s;transition-duration:.35s}.demo__input-img:hover{background:#f5e8f5}.demo__input-img:focus{background:#e6c6e6}.demo__option-field{color:#9b1c9b;border:1px solid #cad1cc;min-width:200px}.demo__option-img{max-width:150px;height:150px;display:inline-block;cursor:pointer}@media (max-width:768px){.demo__option-img{height:100px}}.demo__list{width:100%;display:-webkit-box;display:-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/source/css/cssgram.css b/source/css/cssgram.css index 4a7e407..b9490c3 100644 --- a/source/css/cssgram.css +++ b/source/css/cssgram.css @@ -21,11 +21,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -48,11 +45,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -85,11 +79,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -114,11 +105,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -144,11 +132,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -173,11 +158,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } /* @@ -208,11 +190,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -235,11 +214,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -272,11 +248,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -301,11 +274,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -331,11 +301,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -360,11 +327,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -405,11 +369,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -432,11 +393,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -469,11 +427,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -498,11 +453,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -528,11 +480,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -557,11 +506,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -597,11 +543,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -624,11 +567,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -661,11 +601,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -690,11 +627,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -720,11 +654,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -749,11 +680,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -791,11 +719,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -818,11 +743,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -855,11 +777,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -884,11 +803,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -914,11 +830,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -943,11 +856,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -988,11 +898,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -1015,11 +922,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -1052,11 +956,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -1081,11 +982,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -1111,11 +1009,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -1140,11 +1035,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -1185,11 +1077,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -1212,11 +1101,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -1249,11 +1135,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -1278,11 +1161,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -1308,11 +1188,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -1337,11 +1214,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -1382,11 +1256,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -1409,11 +1280,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -1446,11 +1314,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -1475,11 +1340,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -1505,11 +1367,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -1534,11 +1393,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -1579,11 +1435,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -1606,11 +1459,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -1643,11 +1493,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -1672,11 +1519,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -1702,11 +1546,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -1731,11 +1572,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -1777,11 +1615,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -1804,11 +1639,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -1841,11 +1673,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -1870,11 +1699,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -1900,11 +1726,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -1929,11 +1752,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -1974,11 +1794,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -2001,11 +1818,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -2038,11 +1852,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -2067,11 +1878,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -2097,11 +1905,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -2126,11 +1931,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -2171,11 +1973,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -2198,11 +1997,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -2235,11 +2031,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -2264,11 +2057,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -2294,11 +2084,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -2323,11 +2110,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -2367,11 +2151,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -2394,11 +2175,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -2431,11 +2209,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -2460,11 +2235,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -2490,11 +2262,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -2519,11 +2288,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -2563,11 +2329,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -2590,11 +2353,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -2627,11 +2387,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -2656,11 +2413,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -2686,11 +2440,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -2715,11 +2466,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -2760,11 +2508,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -2787,11 +2532,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -2824,11 +2566,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -2853,11 +2592,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -2883,11 +2619,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -2912,11 +2645,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -2957,11 +2687,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -2984,11 +2711,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -3021,11 +2745,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -3050,11 +2771,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -3080,11 +2798,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -3109,11 +2824,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -3156,11 +2868,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -3183,11 +2892,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -3220,11 +2926,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -3249,11 +2952,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -3279,11 +2979,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -3308,11 +3005,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -3355,11 +3049,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -3382,11 +3073,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -3419,11 +3107,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -3448,11 +3133,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -3478,11 +3160,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -3507,11 +3186,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -3554,11 +3230,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -3581,11 +3254,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -3618,11 +3288,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -3647,11 +3314,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -3677,11 +3341,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -3706,11 +3367,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -3749,11 +3407,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -3776,11 +3431,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -3813,11 +3465,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -3842,11 +3491,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -3872,11 +3518,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -3901,11 +3544,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -3949,11 +3589,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -3976,11 +3613,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -4013,11 +3647,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -4042,11 +3673,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -4072,11 +3700,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -4101,11 +3726,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -4152,11 +3774,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -4179,11 +3798,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -4216,11 +3832,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -4245,11 +3858,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -4275,11 +3885,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -4304,11 +3911,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -4352,11 +3956,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -4379,11 +3980,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -4416,11 +4014,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -4445,11 +4040,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -4475,11 +4067,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -4504,11 +4093,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { -======= + .charmes:after, .valencia:after { ->>>>>>> una/master z-index: 3; } @@ -4522,11 +4108,7 @@ /* * -<<<<<<< HEAD * Charmes -======= - * Valencia ->>>>>>> una/master * */ @@ -4552,11 +4134,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD .charmes:before, -======= .valencia:before, ->>>>>>> una/master .aden:after, .inkwell:after, .perpetua:after, @@ -4579,11 +4158,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD -.charmes:after { -======= +.charmes:after, .valencia:after { ->>>>>>> una/master content: ''; display: block; height: 100%; @@ -4616,11 +4192,8 @@ .rise, .slumber, .brannan, -<<<<<<< HEAD -.charmes { -======= +.charmes, .valencia { ->>>>>>> una/master position: relative; } .aden img, @@ -4645,11 +4218,8 @@ .rise img, .slumber img, .brannan img, -<<<<<<< HEAD - .charmes img { -======= + .charmes img, .valencia img { ->>>>>>> una/master width: 100%; z-index: 1; } @@ -4675,11 +4245,8 @@ .rise:before, .slumber:before, .brannan:before, -<<<<<<< HEAD - .charmes:before { -======= + .charmes:before, .valencia:before { ->>>>>>> una/master z-index: 2; } .aden:after, @@ -4704,8 +4271,8 @@ .rise:after, .slumber:after, .brannan:after, -<<<<<<< HEAD - .charmes:after { + .charmes:after, + .valencia:after { z-index: 3; } @@ -4716,7 +4283,173 @@ .charmes::after { background-color: rgba(185, 55, 55, 0.22); mix-blend-mode: lighten; } -======= + +/* + * + * Valencia + * + */ + +.aden:before, +.inkwell:before, +.perpetua:before, +.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, +.charmes:before, +.valencia:before, +.aden:after, +.inkwell:after, +.perpetua:after, +.reyes:after, +.gingham:after, +.toaster:after, +.walden:after, +.hudson:after, +.earlybird:after, +.mayfair:after, +.lofi:after, +._1977:after, +.brooklyn:after, +.xpro2:after, +.nashville:after, +.lark:after, +.moon:after, +.clarendon:after, +.willow:after, +.rise:after, +.slumber:after, +.brannan:after, +.charmes:after, +.valencia:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + + +.aden, +.inkwell, +.perpetua, +.reyes, +.gingham, +.toaster, +.walden, +.hudson, +.earlybird, +.mayfair, +.lofi, +._1977, +.brooklyn, +.xpro2, +.nashville, +.lark, +.moon, +.clarendon, +.willow, +.rise, +.slumber, +.brannan, +.charmes, +.valencia { + position: relative; } + + .aden img, + .inkwell img, + .perpetua img, + .reyes img, + .gingham img, + .toaster img, + .walden img, + .hudson img, + .earlybird img, + .mayfair img, + .lofi img, + ._1977 img, + .brooklyn img, + .xpro2 img, + .nashville img, + .lark img, + .moon img, + .clarendon img, + .willow img, + .rise img, + .slumber img, + .brannan img, + .charmes img, + .valencia img { + width: 100%; + z-index: 1; } + + .aden:before, + .inkwell:before, + .perpetua:before, + .reyes:before, + .gingham:before, + .toaster:before, + .walden:before, + .hudson:before, + .earlybird:before, + .mayfair:before, + .lofi:before, + ._1977:before, + .brooklyn:before, + .xpro2:before, + .nashville:before, + .lark:before, + .moon:before, + .clarendon:before, + .willow:before, + .rise:before, + .slumber:before, + .brannan:before, + .charmes:before, + .valencia:before { + z-index: 2; } + + .aden:after, + .inkwell:after, + .perpetua:after, + .reyes:after, + .gingham:after, + .toaster:after, + .walden:after, + .hudson:after, + .earlybird:after, + .mayfair:after, + .lofi:after, + ._1977:after, + .brooklyn:after, + .xpro2:after, + .nashville:after, + .lark:after, + .moon:after, + .clarendon:after, + .willow:after, + .rise:after, + .slumber:after, + .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -4729,4 +4462,3 @@ background: #3a0339; mix-blend-mode: exclusion; opacity: .5; } ->>>>>>> una/master diff --git a/source/css/cssgram.min.css b/source/css/cssgram.min.css index a365574..2ebed37 100644 --- a/source/css/cssgram.min.css +++ b/source/css/cssgram.min.css @@ -1,5 +1 @@ -<<<<<<< HEAD -.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,.charmes:after,.charmes: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,.charmes,.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,.charmes 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,.charmes: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,.charmes: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}.charmes{-webkit-filter:contrast(1.07) brightness(1.1);filter:contrast(1.07) brightness(1.1)}.charmes::after{background-color:rgba(185,55,55,.22);mix-blend-mode:lighten} -======= -.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.valencia:after,.valencia:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.valencia,.walden,.willow,.xpro2{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.valencia img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.valencia:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.valencia:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.valencia{-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5} ->>>>>>> una/master +.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}.charmes{-webkit-filter:contrast(1.07) brightness(1.1);filter:contrast(1.07) brightness(1.1)}.charmes::after{background-color:rgba(185,55,55,.22);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.charmes:after,.charmes:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.valencia:after,.valencia:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.charmes,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.valencia,.walden,.willow,.xpro2{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.charmes img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.valencia img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.charmes:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.valencia:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.charmes:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.valencia:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.valencia{-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5} \ No newline at end of file diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss index b6eb504..149a6e2 100644 --- a/source/scss/cssgram.scss +++ b/source/scss/cssgram.scss @@ -21,8 +21,5 @@ @import 'rise'; @import 'slumber'; @import 'brannan'; -<<<<<<< HEAD -@import 'charmes' -======= -@import 'valencia'; ->>>>>>> una/master +@import 'charmes'; +@import 'valencia' From 07d34179dd6e2f3a8a98a94cc943ffbc0c0c3ee5 Mon Sep 17 00:00:00 2001 From: spencerking Date: Tue, 4 Oct 2016 18:21:02 -0500 Subject: [PATCH 4/5] Tweaking charmes --- source/scss/charmes.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/scss/charmes.scss b/source/scss/charmes.scss index 178957d..dfdb7aa 100644 --- a/source/scss/charmes.scss +++ b/source/scss/charmes.scss @@ -25,10 +25,10 @@ @mixin charmes($filters...) { @extend %filter-base; - filter: contrast(1.07) brightness(1.1); + filter: contrast(1.15) brightness(1.25); &::after { - background-color: rgba(185, 55, 55, 0.22); + background-color: rgba(185, 55, 172, 0.2); mix-blend-mode: lighten; } From 48beb66ad08a3f0c42a210552ad982075a4a5396 Mon Sep 17 00:00:00 2001 From: spencerking Date: Fri, 7 Oct 2016 18:27:04 -0500 Subject: [PATCH 5/5] Updating charmes Tweaks --- source/scss/charmes.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/source/scss/charmes.scss b/source/scss/charmes.scss index dfdb7aa..77bf838 100644 --- a/source/scss/charmes.scss +++ b/source/scss/charmes.scss @@ -28,10 +28,15 @@ filter: contrast(1.15) brightness(1.25); &::after { - background-color: rgba(185, 55, 172, 0.2); + background-color: rgba(140, 46, 171, .2); mix-blend-mode: lighten; } + &::before { + background-color: rgba(154, 147, 108, .58); + mix-blend-mode: darken; + } + @content; }