diff --git a/package.json b/package.json index f2e33ff..fb9bbb4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cssgram", - "version": "0.1.6", + "version": "0.1.10", "style": "source/css/cssgram.css", "dependencies": {}, "author": { diff --git a/site/css/cssgram.min.css b/site/css/cssgram.min.css index 5c8b20c..99ee420 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}.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}._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,.kelvin:after,.kelvin: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,.kelvin,.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,.kelvin 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,.kelvin: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,.kelvin: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}.kelvin::after{background:#b77d21;mix-blend-mode:overlay}.kelvin::before{background:#382c34;mix-blend-mode:color-dodge} \ No newline at end of file diff --git a/site/css/demo-site.css b/site/css/demo-site.css index d5d0458..558377e 100644 --- a/site/css/demo-site.css +++ b/site/css/demo-site.css @@ -23,6 +23,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -45,7 +46,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -78,7 +80,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -103,7 +106,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -129,7 +133,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -154,7 +159,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } /* @@ -186,6 +192,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -208,7 +215,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -241,7 +249,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -266,7 +275,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -292,7 +302,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -317,7 +328,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -359,6 +371,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -381,7 +394,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -414,7 +428,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -439,7 +454,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -465,7 +481,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -490,7 +507,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -527,6 +545,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -549,7 +568,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -582,7 +602,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -607,7 +628,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -633,7 +655,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -658,7 +681,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -697,6 +721,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -719,7 +744,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -752,7 +778,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -777,7 +804,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -803,7 +831,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -828,7 +857,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -870,6 +900,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -892,7 +923,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -925,7 +957,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -950,7 +983,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -976,7 +1010,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -1001,7 +1036,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -1043,6 +1079,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1065,7 +1102,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -1098,7 +1136,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -1123,7 +1162,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -1149,7 +1189,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -1174,7 +1215,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -1216,6 +1258,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1238,7 +1281,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -1271,7 +1315,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -1296,7 +1341,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -1322,7 +1368,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -1347,7 +1394,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -1389,6 +1437,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1411,7 +1460,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -1444,7 +1494,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -1469,7 +1520,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -1495,7 +1547,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -1520,7 +1573,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -1563,6 +1617,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1585,7 +1640,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -1618,7 +1674,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -1643,7 +1700,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -1669,7 +1727,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -1694,7 +1753,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -1736,6 +1796,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1758,7 +1819,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -1791,7 +1853,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -1816,7 +1879,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -1842,7 +1906,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -1867,7 +1932,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -1909,6 +1975,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1931,7 +1998,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -1964,7 +2032,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -1989,7 +2058,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -2015,7 +2085,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -2040,7 +2111,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -2081,6 +2153,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2103,7 +2176,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -2136,7 +2210,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -2161,7 +2236,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -2187,7 +2263,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -2212,7 +2289,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -2253,6 +2331,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2275,7 +2354,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -2308,7 +2388,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -2333,7 +2414,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -2359,7 +2441,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -2384,7 +2467,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -2426,6 +2510,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2448,7 +2533,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -2481,7 +2567,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -2506,7 +2593,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -2532,7 +2620,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -2557,7 +2646,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -2599,6 +2689,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2621,7 +2712,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -2654,7 +2746,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -2679,7 +2772,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -2705,7 +2799,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -2730,7 +2825,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -2774,6 +2870,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2796,7 +2893,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -2829,7 +2927,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -2854,7 +2953,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -2880,7 +2980,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -2905,7 +3006,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -2949,6 +3051,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2971,7 +3074,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -3004,7 +3108,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -3029,7 +3134,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -3055,7 +3161,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -3080,7 +3187,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -3124,6 +3232,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3146,7 +3255,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -3179,7 +3289,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -3204,7 +3315,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -3230,7 +3342,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -3255,7 +3368,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -3295,6 +3409,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3317,7 +3432,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -3350,7 +3466,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -3375,7 +3492,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -3401,7 +3519,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -3426,7 +3545,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -3471,6 +3591,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3493,7 +3614,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -3526,7 +3648,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -3551,7 +3674,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -3577,7 +3701,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -3602,7 +3727,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -3650,6 +3776,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3672,7 +3799,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -3705,7 +3833,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -3730,7 +3859,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -3756,7 +3886,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -3781,7 +3912,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -3826,6 +3958,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3848,7 +3981,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -3881,7 +4015,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -3906,7 +4041,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -3932,7 +4068,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -3957,7 +4094,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -3998,6 +4136,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -4020,7 +4159,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -4053,7 +4193,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -4078,7 +4219,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -4104,7 +4246,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -4129,7 +4272,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -4142,6 +4286,184 @@ mix-blend-mode: exclusion; opacity: .5; } +/* + * Kelvin + * + */ + +.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, +.valencia:before, +.kelvin: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, +.valencia:after, +.kelvin: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, +.valencia, +.kelvin { + 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, + .valencia img, + .kelvin 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, + .valencia:before, + .kelvin: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, + .valencia:after, + .kelvin:after { + z-index: 3; } + + +.kelvin::after { + background: #b77d21; + mix-blend-mode: overlay; } + + +.kelvin::before { + background: #382c34; + mix-blend-mode: color-dodge; } + ::-moz-selection { background: #9b1c9b; color: white; } diff --git a/site/css/demo-site.min.css b/site/css/demo-site.min.css index 857ca58..d299f3d 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}.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}._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,.kelvin:after,.kelvin: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,.kelvin,.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,.kelvin 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,.kelvin: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,.kelvin: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}.kelvin::after{background:#b77d21;mix-blend-mode:overlay}.kelvin::before{background:#382c34;mix-blend-mode:color-dodge}::-moz-selection{background:#9b1c9b;color:#fff}::selection{background:#9b1c9b;color:#fff}body{font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;margin:0 auto;padding:0 2em;max-width:1200px;line-height:1.5;font-size:1.1em}h1,h2{color:#9b1c9b}.highlight,em,h3{color:#c63082}code,pre{background:#eff1f0}code code,pre code{border:none;background:0 0}code{font-family:monospace;padding:.25em .5em}.highlight{font-weight:800}.comment{color:#acb2ad}ul{width:100%}ol,ul{line-height:1.8}a{text-decoration:none;color:#9b1c9b;transition-duration:.35s;border-bottom:1px solid #c63082;padding-bottom:.05em}a:focus,a:hover{color:#e398c1;border-color:#e398c1}figure{max-width:350px;max-height:350px;overflow:hidden;transition-duration:.35s}@media (max-width:1240px){figure{max-width:300px;max-height:300px}}@media (max-width:992px){figure{max-width:250px;max-height:250px}}@media (max-width:768px){figure{max-width:300px;max-height:300px}}@media (max-width:500px){body{font-size:.9em}h1,h2{text-align:center}figure{max-width:400px;max-height:400px}}figure:focus,figure:hover{-webkit-filter:none!important;filter:none!important}figure:focus::after,figure:focus::before,figure:hover::after,figure:hover::before{opacity:0!important}figcaption{position:absolute;bottom:1em;right:0;padding:.25em 1em .25em .25em;background:#000;color:#fff;font-weight:200}hr{clear:both;float:none;border:1px solid #eff1f0;margin:2em auto}img{margin:auto;height:auto;max-height:100%;width:auto;max-width:100%}.demo__section{font-weight:300;font-size:1.2em}.demo__subtitle{font-size:2em}.demo__note{font-style:italic;margin:2em auto 0}.demo__input-area{font-size:1em;font-weight:300;margin:1em auto;padding:1em 0}@media (max-width:500px){.demo__input-area{margin:0;font-size:.8em}}.demo__input-label{text-align:center;color:#9b1c9b}.demo__input-img{max-width:16em;font-size:1em;padding:.5em;border:2px solid #9b1c9b;outline:0;margin:.5em;font-weight:200;-webkit-transition-duration:.35s;transition-duration:.35s}.demo__input-img:hover{background:#f5e8f5}.demo__input-img:focus{background:#e6c6e6}.demo__option-field{color:#9b1c9b;border:1px solid #cad1cc;min-width:200px}.demo__option-img{max-width:150px;height:150px;display:inline-block;cursor:pointer}@media (max-width:768px){.demo__option-img{height:100px}}.demo__list{width:100%;display:-webkit-box;display:-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 diff --git a/site/css/kelvin.min.css b/site/css/kelvin.min.css new file mode 100644 index 0000000..ae7d184 --- /dev/null +++ b/site/css/kelvin.min.css @@ -0,0 +1 @@ +.kelvin:after,.kelvin:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.kelvin{position:relative}.kelvin img{width:100%;z-index:1}.kelvin:before{z-index:2}.kelvin:after{z-index:3}.kelvin::after{background:#b77d21;mix-blend-mode:overlay}.kelvin::before{background:#382c34;mix-blend-mode:color-dodge} \ No newline at end of file diff --git a/site/index.html b/site/index.html index c237d6f..642eda4 100644 --- a/site/index.html +++ b/site/index.html @@ -111,7 +111,13 @@

A tiny (<1kb gzipped!) library for recreating Inkwell -
  • +
  • +
    + +
    Kelvin
    +
    +
    • +
  • Lark
    @@ -265,7 +271,8 @@

    Available Classes

  • Gingham: class="gingham"
  • Hudson: class="hudson"
  • Inkwell: class="inkwell"
    • -
  • Lark: class="lark"
    • +
  • Kelvin: class="kelvin"
    • +
  • Lark: class="lark"
  • Lo-Fi: class="lofi"
  • Mayfair: class="mayfair"
  • Moon: class="moon"
    • @@ -323,7 +330,8 @@

    Available Extends

  • Gingham: @extend %gingham;
  • Hudson: @extend %hudson;
  • Inkwell: @extend %inkwell;
    • -
  • Lark: @extend %lark;
    • +
  • Kelvin: @extend %kelvin;
    • +
  • Lark: @extend %lark;
  • Lo-Fi: @extend %lofi;
  • Mayfair: @extend %mayfair;
  • Moon: @extend %moon;
    • @@ -387,7 +395,8 @@

    Available Mixins

  • Gingham: @include gingham();
  • Hudson: @include hudson();
  • Inkwell: @include inkwell();
    • -
  • Lark: @include lark();
    • +
  • Kelvin: @include kelvin();
    • +
  • Lark: @include lark();
  • Lo-Fi: @include lofi();
  • Mayfair: @include mayfair();
  • Moon: @include moon();
    • diff --git a/site/test/index.html b/site/test/index.html index cbce576..f2b98fa 100644 --- a/site/test/index.html +++ b/site/test/index.html @@ -1737,7 +1737,7 @@

    CSSgram

    -

    Kelvin ✗

    +

    Kelvin ✓

    Instagram

    diff --git a/source/css/cssgram.css b/source/css/cssgram.css index 453587c..7b5dd97 100644 --- a/source/css/cssgram.css +++ b/source/css/cssgram.css @@ -22,6 +22,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -44,7 +45,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -77,7 +79,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -102,7 +105,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -128,7 +132,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -153,7 +158,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } /* @@ -185,6 +191,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -207,7 +214,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -240,7 +248,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -265,7 +274,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -291,7 +301,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -316,7 +327,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -358,6 +370,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -380,7 +393,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -413,7 +427,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -438,7 +453,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -464,7 +480,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -489,7 +506,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -526,6 +544,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -548,7 +567,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -581,7 +601,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -606,7 +627,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -632,7 +654,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -657,7 +680,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -696,6 +720,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -718,7 +743,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -751,7 +777,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -776,7 +803,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -802,7 +830,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -827,7 +856,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -869,6 +899,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -891,7 +922,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -924,7 +956,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -949,7 +982,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -975,7 +1009,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -1000,7 +1035,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -1042,6 +1078,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1064,7 +1101,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -1097,7 +1135,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -1122,7 +1161,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -1148,7 +1188,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -1173,7 +1214,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -1215,6 +1257,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1237,7 +1280,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -1270,7 +1314,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -1295,7 +1340,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -1321,7 +1367,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -1346,7 +1393,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -1388,6 +1436,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1410,7 +1459,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -1443,7 +1493,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -1468,7 +1519,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -1494,7 +1546,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -1519,7 +1572,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -1562,6 +1616,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1584,7 +1639,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -1617,7 +1673,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -1642,7 +1699,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -1668,7 +1726,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -1693,7 +1752,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -1735,6 +1795,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1757,7 +1818,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -1790,7 +1852,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -1815,7 +1878,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -1841,7 +1905,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -1866,7 +1931,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -1908,6 +1974,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -1930,7 +1997,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -1963,7 +2031,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -1988,7 +2057,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -2014,7 +2084,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -2039,7 +2110,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -2080,6 +2152,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2102,7 +2175,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -2135,7 +2209,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -2160,7 +2235,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -2186,7 +2262,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -2211,7 +2288,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -2252,6 +2330,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2274,7 +2353,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -2307,7 +2387,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -2332,7 +2413,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -2358,7 +2440,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -2383,7 +2466,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -2425,6 +2509,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2447,7 +2532,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -2480,7 +2566,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -2505,7 +2592,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -2531,7 +2619,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -2556,7 +2645,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -2598,6 +2688,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2620,7 +2711,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -2653,7 +2745,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -2678,7 +2771,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -2704,7 +2798,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -2729,7 +2824,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -2773,6 +2869,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2795,7 +2892,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -2828,7 +2926,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -2853,7 +2952,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -2879,7 +2979,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -2904,7 +3005,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -2948,6 +3050,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -2970,7 +3073,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -3003,7 +3107,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -3028,7 +3133,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -3054,7 +3160,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -3079,7 +3186,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -3123,6 +3231,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3145,7 +3254,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -3178,7 +3288,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -3203,7 +3314,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -3229,7 +3341,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -3254,7 +3367,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -3294,6 +3408,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3316,7 +3431,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -3349,7 +3465,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -3374,7 +3491,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -3400,7 +3518,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -3425,7 +3544,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -3470,6 +3590,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3492,7 +3613,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -3525,7 +3647,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -3550,7 +3673,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -3576,7 +3700,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -3601,7 +3726,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -3649,6 +3775,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3671,7 +3798,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -3704,7 +3832,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -3729,7 +3858,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -3755,7 +3885,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -3780,7 +3911,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -3825,6 +3957,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -3847,7 +3980,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -3880,7 +4014,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -3905,7 +4040,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -3931,7 +4067,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -3956,7 +4093,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -3997,6 +4135,7 @@ .slumber:before, .brannan:before, .valencia:before, +.kelvin:before, .aden:after, .inkwell:after, .perpetua:after, @@ -4019,7 +4158,8 @@ .rise:after, .slumber:after, .brannan:after, -.valencia:after { +.valencia:after, +.kelvin:after { content: ''; display: block; height: 100%; @@ -4052,7 +4192,8 @@ .rise, .slumber, .brannan, -.valencia { +.valencia, +.kelvin { position: relative; } .aden img, @@ -4077,7 +4218,8 @@ .rise img, .slumber img, .brannan img, - .valencia img { + .valencia img, + .kelvin img { width: 100%; z-index: 1; } @@ -4103,7 +4245,8 @@ .rise:before, .slumber:before, .brannan:before, - .valencia:before { + .valencia:before, + .kelvin:before { z-index: 2; } .aden:after, @@ -4128,7 +4271,8 @@ .rise:after, .slumber:after, .brannan:after, - .valencia:after { + .valencia:after, + .kelvin:after { z-index: 3; } @@ -4140,3 +4284,181 @@ background: #3a0339; mix-blend-mode: exclusion; opacity: .5; } + +/* + * Kelvin + * + */ + +.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, +.valencia:before, +.kelvin: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, +.valencia:after, +.kelvin: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, +.valencia, +.kelvin { + 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, + .valencia img, + .kelvin 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, + .valencia:before, + .kelvin: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, + .valencia:after, + .kelvin:after { + z-index: 3; } + + +.kelvin::after { + background: #b77d21; + mix-blend-mode: overlay; } + + +.kelvin::before { + background: #382c34; + mix-blend-mode: color-dodge; } diff --git a/source/css/cssgram.min.css b/source/css/cssgram.min.css index 5c8b20c..99ee420 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}.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}._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,.kelvin:after,.kelvin: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,.kelvin,.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,.kelvin 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,.kelvin: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,.kelvin: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}.kelvin::after{background:#b77d21;mix-blend-mode:overlay}.kelvin::before{background:#382c34;mix-blend-mode:color-dodge} \ No newline at end of file diff --git a/source/css/kelvin.css b/source/css/kelvin.css new file mode 100644 index 0000000..d2cd20f --- /dev/null +++ b/source/css/kelvin.css @@ -0,0 +1,39 @@ +/* + * Kelvin + * + */ + +.kelvin:before, +.kelvin:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; } + + +.kelvin { + position: relative; } + + .kelvin img { + width: 100%; + z-index: 1; } + + .kelvin:before { + z-index: 2; } + + .kelvin:after { + z-index: 3; } + + +.kelvin::after { + background: #b77d21; + mix-blend-mode: overlay; } + + +.kelvin::before { + background: #382c34; + mix-blend-mode: color-dodge; } diff --git a/source/css/kelvin.min.css b/source/css/kelvin.min.css new file mode 100644 index 0000000..ae7d184 --- /dev/null +++ b/source/css/kelvin.min.css @@ -0,0 +1 @@ +.kelvin:after,.kelvin:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.kelvin{position:relative}.kelvin img{width:100%;z-index:1}.kelvin:before{z-index:2}.kelvin:after{z-index:3}.kelvin::after{background:#b77d21;mix-blend-mode:overlay}.kelvin::before{background:#382c34;mix-blend-mode:color-dodge} \ No newline at end of file