diff --git a/site/css/charmes.min.css b/site/css/charmes.min.css new file mode 100644 index 0000000..dfedf05 --- /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(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 5c8b20c..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} \ 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}.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 d5d0458..269a54c 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, .valencia:before, .aden:after, .inkwell:after, @@ -45,6 +46,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -78,6 +80,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -103,6 +106,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -129,6 +133,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -154,6 +159,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -185,6 +191,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -208,6 +215,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -241,6 +249,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -266,6 +275,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -292,6 +302,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -317,6 +328,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -358,6 +370,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -381,6 +394,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -414,6 +428,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -439,6 +454,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -465,6 +481,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -490,6 +507,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -526,6 +544,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -549,6 +568,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -582,6 +602,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -607,6 +628,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -633,6 +655,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -658,6 +681,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -696,6 +720,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -719,6 +744,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -752,6 +778,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -777,6 +804,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -803,6 +831,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -828,6 +857,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -869,6 +899,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -892,6 +923,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -925,6 +957,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -950,6 +983,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -976,6 +1010,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -1001,6 +1036,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -1042,6 +1078,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -1065,6 +1102,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -1098,6 +1136,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -1123,6 +1162,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -1149,6 +1189,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -1174,6 +1215,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -1215,6 +1257,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -1238,6 +1281,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -1271,6 +1315,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -1296,6 +1341,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -1322,6 +1368,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -1347,6 +1394,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -1388,6 +1436,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -1411,6 +1460,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -1444,6 +1494,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -1469,6 +1520,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -1495,6 +1547,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -1520,6 +1573,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -1562,6 +1616,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -1585,6 +1640,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -1618,6 +1674,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -1643,6 +1700,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -1669,6 +1727,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -1694,6 +1753,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -1735,6 +1795,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -1758,6 +1819,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -1791,6 +1853,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -1816,6 +1879,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -1842,6 +1906,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -1867,6 +1932,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -1908,6 +1974,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -1931,6 +1998,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -1964,6 +2032,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -1989,6 +2058,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -2015,6 +2085,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -2040,6 +2111,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -2080,6 +2152,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -2103,6 +2176,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -2136,6 +2210,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -2161,6 +2236,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -2187,6 +2263,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -2212,6 +2289,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -2252,6 +2330,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -2275,6 +2354,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -2308,6 +2388,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -2333,6 +2414,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -2359,6 +2441,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -2384,6 +2467,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -2425,6 +2509,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -2448,6 +2533,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -2481,6 +2567,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -2506,6 +2593,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -2532,6 +2620,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -2557,6 +2646,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -2598,6 +2688,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -2621,6 +2712,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -2654,6 +2746,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -2679,6 +2772,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -2705,6 +2799,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -2730,6 +2825,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -2773,6 +2869,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -2796,6 +2893,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -2829,6 +2927,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -2854,6 +2953,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -2880,6 +2980,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -2905,6 +3006,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -2948,6 +3050,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -2971,6 +3074,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -3004,6 +3108,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -3029,6 +3134,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -3055,6 +3161,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -3080,6 +3187,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -3123,6 +3231,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -3146,6 +3255,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -3179,6 +3289,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -3204,6 +3315,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -3230,6 +3342,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -3255,6 +3368,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -3294,6 +3408,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -3317,6 +3432,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -3350,6 +3466,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -3375,6 +3492,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -3401,6 +3519,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -3426,6 +3545,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -3470,6 +3590,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -3493,6 +3614,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -3526,6 +3648,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -3551,6 +3674,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -3577,6 +3701,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -3602,6 +3727,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -3649,6 +3775,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -3672,6 +3799,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -3705,6 +3833,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -3730,6 +3859,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -3756,6 +3886,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -3781,6 +3912,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -3825,6 +3957,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -3848,6 +3981,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -3881,6 +4015,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -3906,6 +4041,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -3932,6 +4068,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -3957,6 +4094,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -3969,6 +4107,184 @@ 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, +.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; } + + +.charmes { + -webkit-filter: contrast(1.07) brightness(1.1); + filter: contrast(1.07) brightness(1.1); } + + .charmes::after { + background-color: rgba(185, 55, 55, 0.22); + mix-blend-mode: lighten; } + /* * * Valencia @@ -3997,6 +4313,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -4020,6 +4337,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -4053,6 +4371,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -4078,6 +4397,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -4104,6 +4424,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -4129,6 +4450,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -4335,16 +4657,13 @@ img { .demo__list { width: 100%; display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; } + -ms-flex-wrap: wrap; + flex-wrap: wrap; } .demo__item { margin: .75em; diff --git a/site/css/demo-site.min.css b/site/css/demo-site.min.css index 857ca58..049fbba 100644 --- a/site/css/demo-site.min.css +++ b/site/css/demo-site.min.css @@ -1 +1 @@ -@charset "UTF-8";body,section{overflow-x:hidden}a,figure{-webkit-transition-duration:.35s}figure,ul{margin:0;padding:0}.demo__input-area,.demo__note,hr,img{display:block}.attribution,.demo__input-area,.demo__note,.demo__subtitle,.title--top-sub,.title-section,.video-container{text-align:center}.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.valencia:after,.valencia:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.valencia,.walden,.willow,.xpro2,figure{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.valencia img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.valencia:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.valencia:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.valencia{-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5}::-moz-selection{background:#9b1c9b;color:#fff}::selection{background:#9b1c9b;color:#fff}body{font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;margin:0 auto;padding:0 2em;max-width:1200px;line-height:1.5;font-size:1.1em}h1,h2{color:#9b1c9b}.highlight,em,h3{color:#c63082}code,pre{background:#eff1f0}code code,pre code{border:none;background:0 0}code{font-family:monospace;padding:.25em .5em}.highlight{font-weight:800}.comment{color:#acb2ad}ul{width:100%}ol,ul{line-height:1.8}a{text-decoration:none;color:#9b1c9b;transition-duration:.35s;border-bottom:1px solid #c63082;padding-bottom:.05em}a:focus,a:hover{color:#e398c1;border-color:#e398c1}figure{max-width:350px;max-height:350px;overflow:hidden;transition-duration:.35s}@media (max-width:1240px){figure{max-width:300px;max-height:300px}}@media (max-width:992px){figure{max-width:250px;max-height:250px}}@media (max-width:768px){figure{max-width:300px;max-height:300px}}@media (max-width:500px){body{font-size:.9em}h1,h2{text-align:center}figure{max-width:400px;max-height:400px}}figure:focus,figure:hover{-webkit-filter:none!important;filter:none!important}figure:focus::after,figure:focus::before,figure:hover::after,figure:hover::before{opacity:0!important}figcaption{position:absolute;bottom:1em;right:0;padding:.25em 1em .25em .25em;background:#000;color:#fff;font-weight:200}hr{clear:both;float:none;border:1px solid #eff1f0;margin:2em auto}img{margin:auto;height:auto;max-height:100%;width:auto;max-width:100%}.demo__section{font-weight:300;font-size:1.2em}.demo__subtitle{font-size:2em}.demo__note{font-style:italic;margin:2em auto 0}.demo__input-area{font-size:1em;font-weight:300;margin:1em auto;padding:1em 0}@media (max-width:500px){.demo__input-area{margin:0;font-size:.8em}}.demo__input-label{text-align:center;color:#9b1c9b}.demo__input-img{max-width:16em;font-size:1em;padding:.5em;border:2px solid #9b1c9b;outline:0;margin:.5em;font-weight:200;-webkit-transition-duration:.35s;transition-duration:.35s}.demo__input-img:hover{background:#f5e8f5}.demo__input-img:focus{background:#e6c6e6}.demo__option-field{color:#9b1c9b;border:1px solid #cad1cc;min-width:200px}.demo__option-img{max-width:150px;height:150px;display:inline-block;cursor:pointer}@media (max-width:768px){.demo__option-img{height:100px}}.demo__list{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.demo__item{margin:.75em;list-style:none}@media (max-width:992px){.demo__item{margin:.5em}}@media (max-width:500px){.demo__option-img{height:60px}.demo__item{margin:.5em 0}.title--top-sub{font-size:1.2em}}.title-section{width:100%}.title--logo{max-width:400px}.title--top-sub{font-weight:200;margin:0 auto;max-width:26em}.explanation-section,.how-to-section{font-size:1.2em;font-weight:300;max-width:40em;margin:0 auto;display:block}.attribution{padding:1em 0 4em}.callout{max-width:14em;background:#eff1f0;padding:2em;margin:-.5em 2em 0;display:block;font-weight:200;float:right}@media (max-width:768px){.callout{max-width:28em;margin:1em auto;float:none;font-size:.8em}}#snapshot,.take-photo{font-size:1em;font-weight:300;cursor:pointer;border:1px dashed #9b1c9b;outline:0;vertical-align:top}.available-classes,.available-extends,.supported-browsers{-webkit-columns:15em 2;-moz-columns:15em 2;columns:15em 2}.supported:after{content:'✔';color:#62B859;margin-left:.5em}.not-supported:after{content:'✘';color:#c63082;margin-left:.5em}.take-photo{color:#9b1c9b;width:150px;height:150px;display:inline-block;background:0 0;-webkit-transition-duration:.25s;transition-duration:.25s}#snapshot:hover,.take-photo:hover{background:#c63082;color:#fff}.video-container{margin-top:2em;max-height:0;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.video-container video{margin:0 auto;display:block}#snapshot{margin:1em auto 0;color:#9b1c9b;display:inline-block;background:0 0;-webkit-transition-duration:.25s;transition-duration:.25s} \ No newline at end of file +@charset "UTF-8";body,section{overflow-x:hidden}a,figure{-webkit-transition-duration:.35s}figure,ul{margin:0;padding:0}.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/site/css/helena.min.css b/site/css/helena.min.css new file mode 100644 index 0000000..3f0e50a --- /dev/null +++ b/site/css/helena.min.css @@ -0,0 +1 @@ +.helena:after,.helena:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.helena{position:relative;-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.helena img{width:100%;z-index:1}.helena:before{z-index:2}.helena:after{z-index:3}.helena::after{background-color:rgba(184,251,255,.42);mix-blend-mode:darken} \ No newline at end of file diff --git a/site/filters.json b/site/filters.json index de5138e..9553546 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 c237d6f..45de36e 100644 --- a/site/index.html +++ b/site/index.html @@ -81,7 +81,13 @@

A tiny (<1kb gzipped!) library for recreating Brooklyn -
  • +
  • +
    + +
    Charmes
    +
    +
    • +
  • Clarendon
    @@ -260,7 +266,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"
    • @@ -318,7 +325,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;
    • @@ -382,7 +390,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 cbce576..9bd3a8b 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..f61b935 --- /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(1.07) brightness(1.1); + filter: contrast(1.07) brightness(1.1); } + + .charmes::after { + 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 new file mode 100644 index 0000000..dfedf05 --- /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(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 453587c..b9490c3 100644 --- a/source/css/cssgram.css +++ b/source/css/cssgram.css @@ -21,6 +21,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -44,6 +45,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -77,6 +79,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -102,6 +105,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -128,6 +132,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -153,6 +158,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -184,6 +190,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -207,6 +214,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -240,6 +248,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -265,6 +274,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -291,6 +301,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -316,6 +327,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -357,6 +369,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -380,6 +393,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -413,6 +427,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -438,6 +453,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -464,6 +480,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -489,6 +506,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -525,6 +543,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -548,6 +567,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -581,6 +601,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -606,6 +627,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -632,6 +654,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -657,6 +680,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -695,6 +719,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -718,6 +743,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -751,6 +777,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -776,6 +803,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -802,6 +830,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -827,6 +856,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -868,6 +898,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -891,6 +922,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -924,6 +956,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -949,6 +982,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -975,6 +1009,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -1000,6 +1035,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -1041,6 +1077,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -1064,6 +1101,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -1097,6 +1135,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -1122,6 +1161,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -1148,6 +1188,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -1173,6 +1214,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -1214,6 +1256,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -1237,6 +1280,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -1270,6 +1314,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -1295,6 +1340,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -1321,6 +1367,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -1346,6 +1393,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -1387,6 +1435,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -1410,6 +1459,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -1443,6 +1493,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -1468,6 +1519,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -1494,6 +1546,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -1519,6 +1572,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -1561,6 +1615,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -1584,6 +1639,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -1617,6 +1673,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -1642,6 +1699,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -1668,6 +1726,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -1693,6 +1752,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -1734,6 +1794,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -1757,6 +1818,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -1790,6 +1852,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -1815,6 +1878,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -1841,6 +1905,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -1866,6 +1931,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -1907,6 +1973,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -1930,6 +1997,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -1963,6 +2031,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -1988,6 +2057,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -2014,6 +2084,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -2039,6 +2110,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -2079,6 +2151,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -2102,6 +2175,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -2135,6 +2209,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -2160,6 +2235,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -2186,6 +2262,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -2211,6 +2288,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -2251,6 +2329,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -2274,6 +2353,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -2307,6 +2387,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -2332,6 +2413,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -2358,6 +2440,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -2383,6 +2466,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -2424,6 +2508,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -2447,6 +2532,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -2480,6 +2566,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -2505,6 +2592,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -2531,6 +2619,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -2556,6 +2645,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -2597,6 +2687,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -2620,6 +2711,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -2653,6 +2745,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -2678,6 +2771,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -2704,6 +2798,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -2729,6 +2824,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -2772,6 +2868,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -2795,6 +2892,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -2828,6 +2926,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -2853,6 +2952,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -2879,6 +2979,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -2904,6 +3005,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -2947,6 +3049,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -2970,6 +3073,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -3003,6 +3107,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -3028,6 +3133,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -3054,6 +3160,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -3079,6 +3186,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -3122,6 +3230,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -3145,6 +3254,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -3178,6 +3288,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -3203,6 +3314,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -3229,6 +3341,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -3254,6 +3367,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -3293,6 +3407,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -3316,6 +3431,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -3349,6 +3465,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -3374,6 +3491,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -3400,6 +3518,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -3425,6 +3544,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -3469,6 +3589,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -3492,6 +3613,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -3525,6 +3647,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -3550,6 +3673,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -3576,6 +3700,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -3601,6 +3726,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -3648,6 +3774,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -3671,6 +3798,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -3704,6 +3832,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -3729,6 +3858,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -3755,6 +3885,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -3780,6 +3911,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -3824,6 +3956,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -3847,6 +3980,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -3880,6 +4014,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -3905,6 +4040,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -3931,6 +4067,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -3956,6 +4093,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } @@ -3968,6 +4106,184 @@ 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, +.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; } + + +.charmes { + -webkit-filter: contrast(1.07) brightness(1.1); + filter: contrast(1.07) brightness(1.1); } + + .charmes::after { + background-color: rgba(185, 55, 55, 0.22); + mix-blend-mode: lighten; } + /* * * Valencia @@ -3996,6 +4312,7 @@ .rise:before, .slumber:before, .brannan:before, +.charmes:before, .valencia:before, .aden:after, .inkwell:after, @@ -4019,6 +4336,7 @@ .rise:after, .slumber:after, .brannan:after, +.charmes:after, .valencia:after { content: ''; display: block; @@ -4052,6 +4370,7 @@ .rise, .slumber, .brannan, +.charmes, .valencia { position: relative; } @@ -4077,6 +4396,7 @@ .rise img, .slumber img, .brannan img, + .charmes img, .valencia img { width: 100%; z-index: 1; } @@ -4103,6 +4423,7 @@ .rise:before, .slumber:before, .brannan:before, + .charmes:before, .valencia:before { z-index: 2; } @@ -4128,6 +4449,7 @@ .rise:after, .slumber:after, .brannan:after, + .charmes:after, .valencia:after { z-index: 3; } diff --git a/source/css/cssgram.min.css b/source/css/cssgram.min.css index 5c8b20c..2ebed37 100644 --- a/source/css/cssgram.min.css +++ b/source/css/cssgram.min.css @@ -1 +1 @@ -.aden{-webkit-filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}.aden::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.perpetua::after,.reyes::after{mix-blend-mode:soft-light;opacity:.5}.inkwell{-webkit-filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);filter:sepia(.3) contrast(1.1) brightness(1.1) grayscale(1)}.perpetua::after{background:-webkit-linear-gradient(top,#005b9a,#e6c13d);background:linear-gradient(to bottom,#005b9a,#e6c13d)}.reyes{-webkit-filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75);filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}.reyes::after{background:#efcdad}.gingham{-webkit-filter:brightness(1.05) hue-rotate(-10deg);filter:brightness(1.05) hue-rotate(-10deg)}.gingham::after{background:-webkit-linear-gradient(left,rgba(66,10,14,.2),transparent);background:linear-gradient(to right,rgba(66,10,14,.2),transparent);mix-blend-mode:darken}.toaster{-webkit-filter:contrast(1.5) brightness(.9);filter:contrast(1.5) brightness(.9)}.toaster::after{background:-webkit-radial-gradient(circle,#804e0f,#3b003b);background:radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.walden{-webkit-filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);filter:brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)}.walden::after{background:#04c;mix-blend-mode:screen;opacity:.3}.hudson{-webkit-filter:brightness(1.2) contrast(.9) saturate(1.1);filter:brightness(1.2) contrast(.9) saturate(1.1)}.hudson::after{background:-webkit-radial-gradient(circle,#a6b1ff 50%,#342134);background:radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.earlybird{-webkit-filter:contrast(.9) sepia(.2);filter:contrast(.9) sepia(.2)}.earlybird::after{background:-webkit-radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);background:radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.mayfair{-webkit-filter:contrast(1.1) saturate(1.1);filter:contrast(1.1) saturate(1.1)}.mayfair::after{background:-webkit-radial-gradient(40% 40%,circle,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.lofi{-webkit-filter:saturate(1.1) contrast(1.5);filter:saturate(1.1) contrast(1.5)}.lofi::after{background:-webkit-radial-gradient(circle,transparent 70%,#222 150%);background:radial-gradient(circle,transparent 70%,#222 150%);mix-blend-mode:multiply}._1977{-webkit-filter:contrast(1.1) brightness(1.1) saturate(1.3);filter:contrast(1.1) brightness(1.1) saturate(1.3)}._1977:after{background:rgba(243,106,188,.3);mix-blend-mode:screen}.brooklyn{-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.brooklyn::after{background:-webkit-radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);background:radial-gradient(circle,rgba(168,223,193,.4) 70%,#c4b7c8);mix-blend-mode:overlay}.xpro2{-webkit-filter:sepia(.3);filter:sepia(.3)}.xpro2::after{background:-webkit-radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);background:radial-gradient(circle,#e6e7e0 40%,rgba(43,42,161,.6) 110%);mix-blend-mode:color-burn}.nashville{-webkit-filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);filter:sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)}.nashville::after{background:rgba(0,70,150,.4);mix-blend-mode:lighten}.nashville::before{background:rgba(247,176,153,.56);mix-blend-mode:darken}.lark{-webkit-filter:contrast(.9);filter:contrast(.9)}.lark::after{background:rgba(242,242,242,.8);mix-blend-mode:darken}.lark::before{background:#22253f;mix-blend-mode:color-dodge}.moon{-webkit-filter:grayscale(1) contrast(1.1) brightness(1.1);filter:grayscale(1) contrast(1.1) brightness(1.1)}.moon::before{background:#a0a0a0;mix-blend-mode:soft-light}.moon::after{background:#383838;mix-blend-mode:lighten}.clarendon{-webkit-filter:contrast(1.2) saturate(1.35);filter:contrast(1.2) saturate(1.35)}.clarendon:before{background:rgba(127,187,227,.2);mix-blend-mode:overlay}.willow{-webkit-filter:grayscale(.5) contrast(.95) brightness(.9);filter:grayscale(.5) contrast(.95) brightness(.9)}.willow::before{background-color:radial-gradient(40%,circle,#d4a9af 55%,#000 150%);mix-blend-mode:overlay}.willow::after{background-color:#d8cdcb;mix-blend-mode:color}.rise{-webkit-filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9);filter:brightness(1.05) sepia(.2) contrast(.9) saturate(.9)}.rise::after{background:-webkit-radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);background:radial-gradient(circle,rgba(232,197,152,.8),transparent 90%);mix-blend-mode:overlay;opacity:.6}.rise::before{background:-webkit-radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));background:radial-gradient(circle,rgba(236,205,169,.15) 55%,rgba(50,30,7,.4));mix-blend-mode:multiply}.slumber{-webkit-filter:saturate(.66) brightness(1.05);filter:saturate(.66) brightness(1.05)}.slumber::after{background:rgba(125,105,24,.5);mix-blend-mode:soft-light}.slumber::before{background:rgba(69,41,12,.4);mix-blend-mode:lighten}.brannan{-webkit-filter:sepia(.5) contrast(1.4);filter:sepia(.5) contrast(1.4)}.brannan::after{background-color:rgba(161,44,199,.31);mix-blend-mode:lighten}._1977:after,._1977:before,.aden:after,.aden:before,.brannan:after,.brannan:before,.brooklyn:after,.brooklyn:before,.clarendon:after,.clarendon:before,.earlybird:after,.earlybird:before,.gingham:after,.gingham:before,.hudson:after,.hudson:before,.inkwell:after,.inkwell:before,.lark:after,.lark:before,.lofi:after,.lofi:before,.mayfair:after,.mayfair:before,.moon:after,.moon:before,.nashville:after,.nashville:before,.perpetua:after,.perpetua:before,.reyes:after,.reyes:before,.rise:after,.rise:before,.slumber:after,.slumber:before,.toaster:after,.toaster:before,.valencia:after,.valencia:before,.walden:after,.walden:before,.willow:after,.willow:before,.xpro2:after,.xpro2:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}._1977,.aden,.brannan,.brooklyn,.clarendon,.earlybird,.gingham,.hudson,.inkwell,.lark,.lofi,.mayfair,.moon,.nashville,.perpetua,.reyes,.rise,.slumber,.toaster,.valencia,.walden,.willow,.xpro2{position:relative}._1977 img,.aden img,.brannan img,.brooklyn img,.clarendon img,.earlybird img,.gingham img,.hudson img,.inkwell img,.lark img,.lofi img,.mayfair img,.moon img,.nashville img,.perpetua img,.reyes img,.rise img,.slumber img,.toaster img,.valencia img,.walden img,.willow img,.xpro2 img{width:100%;z-index:1}._1977:before,.aden:before,.brannan:before,.brooklyn:before,.clarendon:before,.earlybird:before,.gingham:before,.hudson:before,.inkwell:before,.lark:before,.lofi:before,.mayfair:before,.moon:before,.nashville:before,.perpetua:before,.reyes:before,.rise:before,.slumber:before,.toaster:before,.valencia:before,.walden:before,.willow:before,.xpro2:before{z-index:2}._1977:after,.aden:after,.brannan:after,.brooklyn:after,.clarendon:after,.earlybird:after,.gingham:after,.hudson:after,.inkwell:after,.lark:after,.lofi:after,.mayfair:after,.moon:after,.nashville:after,.perpetua:after,.reyes:after,.rise:after,.slumber:after,.toaster:after,.valencia:after,.walden:after,.willow:after,.xpro2:after{z-index:3}.valencia{-webkit-filter:contrast(1.08) brightness(1.08) sepia(.08);filter:contrast(1.08) brightness(1.08) sepia(.08)}.valencia::after{background:#3a0339;mix-blend-mode:exclusion;opacity:.5} \ No newline at end of file +.aden{-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/charmes.scss b/source/scss/charmes.scss new file mode 100644 index 0000000..77bf838 --- /dev/null +++ b/source/scss/charmes.scss @@ -0,0 +1,47 @@ +/* + * + * 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(1.15) brightness(1.25); + + &::after { + background-color: rgba(140, 46, 171, .2); + mix-blend-mode: lighten; + } + + &::before { + background-color: rgba(154, 147, 108, .58); + mix-blend-mode: darken; + } + + @content; +} + +// charmes Instagram filter +%charmes, +.charmes { + @include charmes; +} diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss index aee0b81..149a6e2 100644 --- a/source/scss/cssgram.scss +++ b/source/scss/cssgram.scss @@ -21,4 +21,5 @@ @import 'rise'; @import 'slumber'; @import 'brannan'; -@import 'valencia'; \ No newline at end of file +@import 'charmes'; +@import 'valencia'