cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="wrapper bg-dark"><header class="header"><h1><a href="http://base2t.one" class="logo"><span class="visuallyhidden">Base2Tone - <span class="small">Pool Dark</span></span>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 208 40">
<g id="glyphs-base-shadow">
	<path d="M4.5,7.2h10.208c1.789,0,3.292,0.235,4.51,0.704c1.217,0.47,2.185,1.078,2.904,1.826 c0.718,0.748,1.232,1.606,1.54,2.574c0.308,0.968,0.462,1.951,0.462,2.948c0,1.584-0.44,2.926-1.32,4.026 c-0.88,1.1-2.053,1.93-3.52,2.486c1.672,0.412,3.08,1.254,4.224,2.53s1.716,2.97,1.716,5.082c0,1.056-0.154,2.098-0.462,3.124 c-0.308,1.027-0.843,1.943-1.606,2.75c-0.763,0.807-1.775,1.467-3.036,1.98C18.858,37.743,17.289,38,15.412,38H4.5V7.2z"/>
	<path d="M43.544,38v-2.2c-0.91,0.821-1.929,1.481-3.058,1.98c-1.129,0.498-2.31,0.748-3.542,0.748 c-2.259,0-4.1-0.639-5.522-1.914c-1.423-1.276-2.134-3.175-2.134-5.698c0-1.29,0.227-2.405,0.682-3.344 c0.455-0.938,1.056-1.709,1.804-2.311c0.748-0.601,1.621-1.049,2.618-1.342c0.997-0.293,2.024-0.439,3.08-0.439 c0.938,0,1.906,0.117,2.904,0.352c0.997,0.234,2.053,0.646,3.168,1.232v-1.893c0-1.145-0.14-2.067-0.418-2.773 c-0.279-0.703-0.646-1.26-1.1-1.671c-0.455-0.411-0.983-0.689-1.584-0.836c-0.602-0.146-1.21-0.22-1.826-0.22 c-0.557,0-1.144,0.074-1.76,0.22c-0.616,0.147-1.218,0.337-1.804,0.572c-0.587,0.235-1.151,0.492-1.694,0.77 c-0.543,0.279-1.02,0.566-1.43,0.858l-0.88-2.64c0.909-0.586,2.061-1.144,3.454-1.672c1.393-0.528,2.867-0.792,4.422-0.792 c0.792,0,1.628,0.11,2.508,0.33c0.88,0.22,1.686,0.616,2.42,1.188c0.733,0.572,1.342,1.364,1.826,2.376 c0.484,1.012,0.726,2.311,0.726,3.894V38H43.544z"/>
	<path d="M62.929,20.135c-0.587-0.586-1.32-1.136-2.2-1.65c-0.88-0.513-1.936-0.77-3.168-0.77 c-1.32,0-2.362,0.264-3.124,0.792c-0.763,0.528-1.144,1.247-1.144,2.156c0,0.587,0.146,1.086,0.44,1.497 c0.293,0.411,0.674,0.785,1.144,1.122c0.469,0.337,1.012,0.638,1.628,0.901c0.616,0.265,1.261,0.528,1.936,0.793 c0.821,0.322,1.665,0.682,2.53,1.078c0.865,0.396,1.635,0.873,2.31,1.43c0.674,0.558,1.232,1.225,1.672,2.002 s0.66,1.737,0.66,2.882c0,1.877-0.675,3.373-2.024,4.488c-1.35,1.114-3.197,1.672-5.544,1.672c-1.525,0-2.963-0.374-4.312-1.122 c-1.35-0.748-2.494-1.679-3.432-2.794l2.156-1.893c0.674,0.822,1.525,1.54,2.552,2.156s2.126,0.924,3.3,0.924 c1.232,0,2.273-0.278,3.124-0.836c0.851-0.557,1.276-1.364,1.276-2.42c0-0.675-0.162-1.269-0.484-1.782 c-0.323-0.513-0.748-0.96-1.276-1.342c-0.528-0.381-1.13-0.726-1.804-1.034c-0.675-0.308-1.35-0.594-2.024-0.858 c-0.88-0.352-1.731-0.732-2.552-1.144c-0.821-0.41-1.54-0.88-2.156-1.407c-0.616-0.528-1.107-1.137-1.474-1.826 c-0.367-0.689-0.55-1.504-0.55-2.443c0-0.851,0.183-1.628,0.55-2.332c0.367-0.704,0.865-1.305,1.496-1.804 c0.63-0.498,1.393-0.887,2.288-1.166c0.895-0.278,1.87-0.418,2.926-0.418c1.525,0,2.896,0.301,4.114,0.902 c1.217,0.602,2.28,1.445,3.19,2.53L62.929,20.135z"/>
	<path d="M71.992,28.012c0.264,2.288,0.953,4.137,2.068,5.544c1.114,1.408,2.64,2.112,4.576,2.112 c0.821,0,1.657-0.132,2.508-0.396c0.85-0.265,1.701-0.719,2.552-1.364l1.672,2.067c-0.88,0.734-1.914,1.343-3.102,1.826 c-1.188,0.484-2.442,0.727-3.762,0.727c-1.525,0-2.89-0.315-4.092-0.946c-1.203-0.631-2.222-1.488-3.058-2.574 c-0.836-1.085-1.481-2.339-1.936-3.762c-0.455-1.423-0.682-2.926-0.682-4.51c0-1.877,0.242-3.543,0.726-4.994 c0.484-1.453,1.151-2.677,2.002-3.675c0.851-0.997,1.877-1.76,3.08-2.288c1.203-0.528,2.522-0.792,3.96-0.792 c1.203,0,2.339,0.213,3.41,0.638c1.07,0.426,2.016,1.078,2.838,1.958c0.821,0.88,1.466,2.01,1.936,3.388 c0.469,1.38,0.704,3.007,0.704,4.884c0,0.236,0,0.528,0,0.881c0,0.352-0.03,0.777-0.088,1.275H71.992z"/>
</g>
<g id="logo-glyphs-base">
	<path d="M2,7.2h10.208c1.789,0,3.292,0.235,4.51,0.704c1.217,0.47,2.185,1.078,2.904,1.826c0.718,0.748,1.232,1.606,1.54,2.574 c0.308,0.968,0.462,1.951,0.462,2.948c0,1.584-0.44,2.926-1.32,4.026c-0.88,1.1-2.053,1.93-3.52,2.486 c1.672,0.412,3.08,1.254,4.224,2.53s1.716,2.97,1.716,5.082c0,1.056-0.154,2.098-0.462,3.124c-0.308,1.027-0.843,1.943-1.606,2.75 c-0.763,0.807-1.775,1.467-3.036,1.98C16.358,37.743,14.789,38,12.912,38H2V7.2z"/>
	<path d="M41.044,38v-2.2c-0.91,0.821-1.929,1.481-3.058,1.98c-1.129,0.498-2.31,0.748-3.542,0.748c-2.259,0-4.1-0.639-5.522-1.914 c-1.423-1.276-2.134-3.175-2.134-5.698c0-1.29,0.227-2.405,0.682-3.344c0.455-0.938,1.056-1.709,1.804-2.311 c0.748-0.601,1.621-1.049,2.618-1.342c0.997-0.293,2.024-0.439,3.08-0.439c0.938,0,1.906,0.117,2.904,0.352 c0.997,0.234,2.053,0.646,3.168,1.232v-1.893c0-1.145-0.14-2.067-0.418-2.773c-0.279-0.703-0.646-1.26-1.1-1.671 c-0.455-0.411-0.983-0.689-1.584-0.836c-0.602-0.146-1.21-0.22-1.826-0.22c-0.557,0-1.144,0.074-1.76,0.22 c-0.616,0.147-1.218,0.337-1.804,0.572c-0.587,0.235-1.151,0.492-1.694,0.77c-0.543,0.279-1.02,0.566-1.43,0.858l-0.88-2.64 c0.909-0.586,2.061-1.144,3.454-1.672c1.393-0.528,2.867-0.792,4.422-0.792c0.792,0,1.628,0.11,2.508,0.33 c0.88,0.22,1.686,0.616,2.42,1.188c0.733,0.572,1.342,1.364,1.826,2.376c0.484,1.012,0.726,2.311,0.726,3.894V38H41.044z"/>
	<path d="M60.429,20.135c-0.587-0.586-1.32-1.136-2.2-1.65c-0.88-0.513-1.936-0.77-3.168-0.77c-1.32,0-2.362,0.264-3.124,0.792 c-0.763,0.528-1.144,1.247-1.144,2.156c0,0.587,0.146,1.086,0.44,1.497c0.293,0.411,0.674,0.785,1.144,1.122 c0.469,0.337,1.012,0.638,1.628,0.901c0.616,0.265,1.261,0.528,1.936,0.793c0.821,0.322,1.665,0.682,2.53,1.078 c0.865,0.396,1.635,0.873,2.31,1.43c0.674,0.558,1.232,1.225,1.672,2.002s0.66,1.737,0.66,2.882c0,1.877-0.675,3.373-2.024,4.488 c-1.35,1.114-3.197,1.672-5.544,1.672c-1.525,0-2.963-0.374-4.312-1.122c-1.35-0.748-2.494-1.679-3.432-2.794l2.156-1.893 c0.674,0.822,1.525,1.54,2.552,2.156s2.126,0.924,3.3,0.924c1.232,0,2.273-0.278,3.124-0.836c0.851-0.557,1.276-1.364,1.276-2.42 c0-0.675-0.162-1.269-0.484-1.782c-0.323-0.513-0.748-0.96-1.276-1.342c-0.528-0.381-1.13-0.726-1.804-1.034 c-0.675-0.308-1.35-0.594-2.024-0.858c-0.88-0.352-1.731-0.732-2.552-1.144c-0.821-0.41-1.54-0.88-2.156-1.407 c-0.616-0.528-1.107-1.137-1.474-1.826c-0.367-0.689-0.55-1.504-0.55-2.443c0-0.851,0.183-1.628,0.55-2.332 c0.367-0.704,0.865-1.305,1.496-1.804c0.63-0.498,1.393-0.887,2.288-1.166c0.895-0.278,1.87-0.418,2.926-0.418 c1.525,0,2.896,0.301,4.114,0.902c1.217,0.602,2.28,1.445,3.19,2.53L60.429,20.135z"/>
	<path d="M69.492,28.012c0.264,2.288,0.953,4.137,2.068,5.544c1.114,1.408,2.64,2.112,4.576,2.112c0.821,0,1.657-0.132,2.508-0.396 c0.85-0.265,1.701-0.719,2.552-1.364l1.672,2.067c-0.88,0.734-1.914,1.343-3.102,1.826c-1.188,0.484-2.442,0.727-3.762,0.727 c-1.525,0-2.89-0.315-4.092-0.946c-1.203-0.631-2.222-1.488-3.058-2.574c-0.836-1.085-1.481-2.339-1.936-3.762 c-0.455-1.423-0.682-2.926-0.682-4.51c0-1.877,0.242-3.543,0.726-4.994c0.484-1.453,1.151-2.677,2.002-3.675 c0.851-0.997,1.877-1.76,3.08-2.288c1.203-0.528,2.522-0.792,3.96-0.792c1.203,0,2.339,0.213,3.41,0.638 c1.07,0.426,2.016,1.078,2.838,1.958c0.821,0.88,1.466,2.01,1.936,3.388c0.469,1.38,0.704,3.007,0.704,4.884 c0,0.236,0,0.528,0,0.881c0,0.352-0.03,0.777-0.088,1.275H69.492z"/>
</g>
<g id="logo-glyphs-base-inner">
	<path opacity="0" d="M11.46,20.664c2.435,0,4.26-0.499,5.478-1.496c1.217-0.997,1.826-2.332,1.826-4.004 c0-0.616-0.088-1.239-0.264-1.87c-0.176-0.63-0.492-1.188-0.946-1.672c-0.455-0.484-1.093-0.88-1.914-1.188 s-1.877-0.462-3.168-0.462H5.08v10.692H11.46z"/>
	<path opacity="0" d="M13.44,35.228c1.261,0,2.31-0.16,3.146-0.483c0.836-0.322,1.496-0.74,1.98-1.254 c0.484-0.513,0.821-1.107,1.012-1.782c0.19-0.675,0.286-1.364,0.286-2.068c0-0.82-0.118-1.605-0.352-2.354 c-0.235-0.748-0.646-1.415-1.232-2.002c-0.587-0.587-1.386-1.056-2.398-1.408c-1.012-0.353-2.31-0.528-3.894-0.528H5.08v11.88 H13.44z"/>
	<path opacity="0" d="M34.752,35.844c0.674,0,1.32-0.103,1.936-0.308c0.616-0.205,1.188-0.469,1.716-0.792
		c0.528-0.322,1.012-0.696,1.452-1.122c0.44-0.425,0.836-0.843,1.188-1.254v-4.356c-0.733-0.498-1.636-0.931-2.706-1.298 c-1.071-0.366-2.09-0.55-3.058-0.55c-0.763,0-1.481,0.096-2.156,0.286c-0.675,0.19-1.269,0.483-1.782,0.88 s-0.924,0.888-1.232,1.474c-0.308,0.588-0.462,1.291-0.462,2.112c0,1.496,0.44,2.691,1.32,3.586 C31.848,35.397,33.109,35.844,34.752,35.844z"/>
	<path opacity="0" d="M76.004,17.759c-1.819,0-3.337,0.602-4.555,1.804c-1.217,1.203-1.898,3.096-2.045,5.677h12.363 c0-1.525-0.191-2.772-0.572-3.74c-0.381-0.968-0.857-1.731-1.43-2.289c-0.572-0.557-1.195-0.938-1.869-1.144 C77.221,17.863,76.59,17.759,76.004,17.759z"/>
</g>
  <g id="glyphs-tone-shadow">
	<path d="M122.025,6.35V38h-3.5V6.35h-9.6V3h22.75v3.35H122.025z"/>
	<path d="M141.456,11.85c1.633,0,3.125,0.3,4.475,0.9c1.351,0.6,2.5,1.467,3.45,2.6 c0.95,1.133,1.691,2.525,2.225,4.175c0.533,1.651,0.801,3.543,0.801,5.676c0,2.1-0.268,3.982-0.801,5.648 c-0.533,1.668-1.274,3.076-2.225,4.227c-0.95,1.148-2.1,2.023-3.45,2.625c-1.35,0.6-2.842,0.898-4.475,0.898 c-1.634,0-3.125-0.299-4.476-0.898c-1.35-0.602-2.5-1.467-3.449-2.602c-0.95-1.133-1.692-2.523-2.226-4.174s-0.8-3.541-0.8-5.676 c0-2.1,0.267-3.975,0.8-5.625c0.533-1.65,1.275-3.05,2.226-4.2c0.949-1.15,2.1-2.033,3.449-2.65 C138.331,12.159,139.822,11.85,141.456,11.85z"/>
	<path d="M161.12,15.25c0.8-1.167,1.758-2.025,2.875-2.575c1.116-0.55,2.358-0.825,3.726-0.825 c3.133,0,5.441,0.942,6.924,2.825c1.483,1.884,2.226,4.942,2.226,9.175V38h-3.5V22.4c0-2.7-0.567-4.608-1.7-5.726 c-1.133-1.116-2.55-1.675-4.25-1.675c-0.9,0-1.733,0.117-2.5,0.35c-0.768,0.233-1.434,0.633-2,1.2 c-0.566,0.567-1.008,1.317-1.324,2.25c-0.318,0.934-0.476,2.1-0.476,3.501V38h-3.5V12.45h3.5V15.25z"/>
	<path d="M185.5,26.65c0.301,2.6,1.083,4.699,2.35,6.301c1.268,1.6,3,2.398,5.201,2.398 c0.932,0,1.883-0.148,2.85-0.449s1.933-0.816,2.9-1.551l1.899,2.352c-1,0.832-2.175,1.523-3.524,2.074 c-1.351,0.551-2.775,0.824-4.275,0.824c-1.734,0-3.283-0.357-4.65-1.074s-2.525-1.691-3.475-2.926 c-0.95-1.232-1.684-2.656-2.2-4.273s-0.774-3.326-0.774-5.125c0-2.133,0.274-4.025,0.824-5.676c0.551-1.65,1.309-3.042,2.275-4.175 c0.967-1.133,2.133-2,3.5-2.6c1.366-0.6,2.866-0.9,4.5-0.9c1.366,0,2.658,0.242,3.875,0.725c1.217,0.483,2.291,1.225,3.225,2.225 s1.666,2.284,2.2,3.85c0.532,1.567,0.8,3.418,0.8,5.551c0,0.266,0,0.6,0,1c0,0.398-0.033,0.883-0.1,1.449H185.5z"/>
</g>
<g id="logo-glyphs-t">
	<path d="M124.1,6.35V38h-3.5V6.35H111V3h22.75v3.35H124.1z"/>
</g>
<g id="logo-glyphs-one">
	<path d="M144.53,11.85c1.633,0,3.125,0.3,4.475,0.9c1.351,0.6,2.5,1.467,3.45,2.6c0.95,1.133,1.691,2.525,2.225,4.175 c0.533,1.65,0.801,3.543,0.801,5.676c0,2.1-0.268,3.983-0.801,5.649c-0.533,1.668-1.274,3.075-2.225,4.226 c-0.95,1.149-2.1,2.024-3.45,2.625c-1.35,0.6-2.842,0.899-4.475,0.899c-1.634,0-3.125-0.3-4.476-0.899 c-1.35-0.601-2.5-1.467-3.449-2.601c-0.95-1.133-1.692-2.524-2.226-4.175c-0.533-1.649-0.8-3.541-0.8-5.675 c0-2.1,0.267-3.975,0.8-5.625c0.533-1.65,1.275-3.05,2.226-4.2c0.949-1.15,2.1-2.033,3.449-2.65 C141.405,12.158,142.896,11.85,144.53,11.85z"/>
	<path d="M164.194,15.25c0.8-1.167,1.758-2.025,2.875-2.575c1.116-0.55,2.358-0.825,3.726-0.825c3.133,0,5.441,0.942,6.924,2.825 c1.483,1.884,2.226,4.942,2.226,9.175V38h-3.5V22.4c0-2.701-0.567-4.609-1.7-5.726c-1.133-1.116-2.55-1.675-4.25-1.675 c-0.9,0-1.733,0.117-2.5,0.35c-0.768,0.233-1.434,0.633-2,1.2c-0.566,0.567-1.008,1.317-1.324,2.25 c-0.318,0.934-0.476,2.1-0.476,3.5V38h-3.5V12.45h3.5V15.25z"/>
	<path d="M188.574,26.65c0.301,2.6,1.083,4.699,2.35,6.3c1.268,1.6,3,2.399,5.201,2.399c0.932,0,1.883-0.149,2.85-0.449 c0.967-0.301,1.933-0.816,2.9-1.551l1.899,2.351c-1,0.833-2.175,1.524-3.524,2.075c-1.351,0.55-2.775,0.824-4.275,0.824 c-1.734,0-3.283-0.358-4.65-1.074c-1.367-0.717-2.525-1.691-3.475-2.926c-0.95-1.232-1.684-2.657-2.2-4.274 c-0.517-1.616-0.774-3.325-0.774-5.125c0-2.133,0.274-4.025,0.824-5.676c0.551-1.65,1.309-3.042,2.275-4.175 c0.967-1.133,2.133-2,3.5-2.6c1.366-0.6,2.866-0.9,4.5-0.9c1.366,0,2.658,0.242,3.875,0.725c1.217,0.483,2.291,1.225,3.225,2.225 s1.666,2.284,2.2,3.85c0.532,1.567,0.8,3.418,0.8,5.551c0,0.267,0,0.6,0,1c0,0.399-0.033,0.884-0.1,1.45H188.574z"/>
</g>
<g id="logo-glyphs-tone-inner">
	<path opacity="0" d="M144.53,35.45c2.333,0,4.133-0.9,5.399-2.7s1.9-4.316,1.9-7.55c0-3.2-0.617-5.7-1.85-7.501 c-1.234-1.8-3.051-2.699-5.45-2.699c-2.4,0-4.218,0.875-5.45,2.625c-1.233,1.75-1.85,4.292-1.85,7.625c0,3.2,0.616,5.7,1.85,7.5 C140.312,34.55,142.13,35.45,144.53,35.45z"/>
	<path opacity="0" d="M195.975,15c-2.067,0-3.793,0.684-5.176,2.049c-1.383,1.367-2.158,3.518-2.324,6.451h14.05 c0-1.732-0.218-3.15-0.649-4.25c-0.434-1.101-0.976-1.967-1.625-2.601c-0.65-0.633-1.359-1.066-2.125-1.3 C197.357,15.117,196.641,15,195.975,15z"/>
</g> 
<g id="logo-glyphs-gt-2">
  <path d="M95.811,34c0.312-1,1.004-2.44,2.078-3.49c1.074-1.049,2.457-1.958,4.148-2.847c0.972-0.503,1.87-0.987,2.691-1.509 s1.526-1.09,2.114-1.731s1.047-1.363,1.377-2.18c0.33-0.814,0.495-1.765,0.495-2.857c0-1.104-0.195-2.121-0.586-3.056 c-0.39-0.936-0.947-1.742-1.673-2.42c-0.718-0.67-1.529-1.192-2.556-1.57L109,10.293V7.036L91,0v3.869l12.428,4.805 c0,0-6.082,3.199-8.168,4.259c-1.117,0.568-2.079,1.485-2.866,2.594c-0.366,0.515-0.819,1.506-0.894,1.75l0.024,0.004l3.528,1.624 c0.408-1.056,1.017-1.908,1.845-2.52c0.829-0.612,1.94-0.927,3.344-0.927c0.659,0,1.263,0.094,1.814,0.292 c0.552,0.198,1.025,0.469,1.422,0.816c0.395,0.348,0.703,0.752,0.926,1.214c0.222,0.461,0.332,0.962,0.332,1.502 c0,0.624-0.119,1.185-0.359,1.682c-0.24,0.498-0.561,0.948-0.963,1.351c-0.402,0.401-0.865,0.764-1.385,1.088 c-0.523,0.324-1.06,0.63-1.611,0.918c-1.2,0.612-2.357,1.338-3.473,2.177c-1.117,0.84-2.106,1.818-2.97,2.934 c-0.864,1.115-1.553,2.384-2.069,3.799c-0.516,1.415-0.774,3.107-0.774,4.77H109v-4H95.811z"/>
</g>
<g id="logo-glyphs-gt-1">
		<path d="M114.416,25.649l-23.5,9.45v-3.3l19.65-7.851l-19.65-7.75v-3.35l23.5,9.5V25.649z"/>
</g>
</svg></a></h1><p>2 base hues &#8211; 32 color values &gt; 1 theme </p></header>
<nav class="nav-variation container" id="navVariation"><ul class="nav_list nav-variation_list"><li class="current"><a href="#!">Pool Dark</a></li><li><a href='https://atelierbram.github.io/Base2Tone-prism/demo/pool/light/'>pool Light</a></li></ul></nav><div class="container-flex" id="main"><nav class="nav-themes" id="navThemes"><ul class="nav_list nav-themes_list"><li class='li-evening'><a href="https://atelierbram.github.io/Base2Tone-prism/demo/evening/dark/">Evening</a></li><li class='li-morning'><a href="https://atelierbram.github.io/Base2Tone-prism/demo/morning/light/">Morning</a></li><li class='li-sea'><a href="https://atelierbram.github.io/Base2Tone-prism/demo/sea/dark/">Sea</a></li><li class='li-space'><a href="https://atelierbram.github.io/Base2Tone-prism/demo/space/dark/">Space</a></li><li class='li-earth'><a href="https://atelierbram.github.io/Base2Tone-prism/demo/earth/dark/">Earth</a></li><li class='li-forest'><a href="https://atelierbram.github.io/Base2Tone-prism/demo/forest/dark/">Forest</a></li><li class='li-desert'><a href="https://atelierbram.github.io/Base2Tone-prism/demo/desert/dark/">Desert</a></li><li class='li-lake'><a href="https://atelierbram.github.io/Base2Tone-prism/demo/lake/dark/">Lake</a></li><li class='li-meadow'><a href="https://atelierbram.github.io/Base2Tone-prism/demo/meadow/dark/">Meadow</a></li><li class='li-drawbridge'><a href="https://atelierbram.github.io/Base2Tone-prism/demo/drawbridge/dark/">Drawbridge</a></li><li class='current li-pool'><a href="https://atelierbram.github.io/Base2Tone-prism/demo/pool/dark/">Pool</a></li><li class='li-heath'><a href="https://atelierbram.github.io/Base2Tone-prism/demo/heath/dark/">Heath</a></li><li class='li-cave'><a href="https://atelierbram.github.io/Base2Tone-prism/demo/cave/dark/">Cave</a></li></ul></nav> 
  <div class="content has-themes-hidden" id="content"><h3 class="demo-tiles-header" id="demo-tilesHeader"><span class="demo-tiles-header-text" id="demo-tilesHeaderText" data-text-swap="show colornames"><b id="demo-tiles-id" data-text-swap='Pool' data-text-original="Base2Tone">Base2Tone</b> <b class="number-shades" id="numberShades" data-text-swap="32 colornames" data-text-original='Pool'>Pool</b></span></h3>
<div id="demoTiles" class="demo-tiles collapsed"><div class="unit bg-baseA0 shade-original w-1v4"><span>A0</span></div><div class="unit bg-baseA1 shade-added hidden"><span>A1</span></div><div class="unit bg-baseA2 shade-added hidden"><span>A2</span></div><div class="unit bg-baseA3 shade-original w-1v4"><span>A3</span></div><div class="unit bg-baseA4 shade-added hidden"><span>A4</span></div><div class="unit bg-baseA5 shade-original w-1v4"><span>A5</span></div><div class="unit bg-baseA6 shade-added hidden"><span>A6</span></div><div class="unit bg-baseA7 shade-original w-1v4"><span>A7</span></div><div class="unit bg-baseB0 shade-original w-1v4"><span>B0</span></div><div class="unit bg-baseB1 shade-added hidden"><span>B1</span></div><div class="unit bg-baseB2 shade-added hidden"><span>B2</span></div><div class="unit bg-baseB3 shade-original w-1v4"><span>B3</span></div><div class="unit bg-baseB4 shade-added hidden"><span>B4</span></div><div class="unit bg-baseB5 shade-original w-1v4"><span>B5</span></div><div class="unit bg-baseB6 shade-added hidden"><span>B6</span></div><div class="unit bg-baseB7 shade-original w-1v4"><span>B7</span></div><div class="unit bg-baseC0 shade-original w-1v4"><span>C0</span></div><div class="unit bg-baseC1 shade-added hidden"><span>C1</span></div><div class="unit bg-baseC2 shade-added hidden"><span>C2</span></div><div class="unit bg-baseC3 shade-original w-1v4"><span>C3</span></div><div class="unit bg-baseC4 shade-added hidden"><span>C4</span></div><div class="unit bg-baseC5 shade-original w-1v4"><span>C5</span></div><div class="unit bg-baseC6 shade-added hidden"><span>C6</span></div><div class="unit bg-baseC7 shade-original w-1v4"><span>C7</span></div><div class="unit bg-baseD0 shade-original w-1v4"><span>D0</span></div><div class="unit bg-baseD1 shade-added hidden"><span>D1</span></div><div class="unit bg-baseD2 shade-added hidden"><span>D2</span></div><div class="unit bg-baseD3 shade-original w-1v4"><span>D3</span></div><div class="unit bg-baseD4 shade-added hidden"><span>D4</span></div><div class="unit bg-baseD5 shade-original w-1v4"><span>D5</span></div><div class="unit bg-baseD6 shade-added hidden"><span>D6</span></div><div class="unit bg-baseD7 shade-original w-1v4"><span>D7</span></div></div>        <div class="col">
          <h3>HTML</h3>
          <pre class="language-markup"><code>&lt;!doctype html&gt;
&lt;html class=&quot;no-js&quot; lang=&quot;en&quot;&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;meta http-equiv=&quot;x-ua-compatible&quot; content=&quot;ie=edge&quot;&gt;
        &lt;title&gt;Demo&lt;/title&gt;
        &lt;meta name=&quot;description&quot; content=&quot;Demo&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

        &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;apple-touch-icon.png&quot;&gt;
        &lt;!-- Place favicon.ico in the root directory --&gt;

        &lt;link rel=&quot;stylesheet&quot; href=&quot;/normalize.css"&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;/main.css"&gt;</code></pre>
        </div>
        <div class="col">
          <h3>CSS</h3>
          <pre class="language-css"><code>h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80% !important;
}</code></pre>
        </div>

        <div class="col">
          <h3>Sass <small>scss</small></h3>
          <pre class="language-scss"><code>.visuallyhidden {
// Hide only visually, but have it available for screen readers:
// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.inner-wrap {
  max-width: 50em;
  margin: 0 auto;
  padding-left: emCalc(24);
  padding-right: emCalc(24);
}

@media only screen and (min-width: 550px) {
  article {
    ul {
      list-style: circle;
    }
    ol {
      list-style: decimal;
    }
  }
  .inner-wrap {
    padding-left: emCalc(48);
    padding-right: emCalc(48);
  }
}</code></pre>
        </div>

        <div class="col">
          <h3>Javascript</h3>
          <pre class="language-javascript"><code>/*! loadJS: load a JS file asynchronously. [c]2014 @scottjehl, Filament Group, Inc. (Based on https://goo.gl/REQGQ by Paul Irish). Licensed MIT */
(function( w ){
  var loadJS = function( src, cb ){
    "use strict";
    var ref = w.document.getElementsByTagName( "script" )[ 0 ];
    var script = w.document.createElement( "script" );
    script.src = src;
    script.async = true;
    ref.parentNode.insertBefore( script, ref );
    if (cb &amp;&amp; typeof(cb) === "function") {
      script.onload = cb;
    }
    return script;
  };
  // commonjs
  if( typeof module !== "undefined" ){
    module.exports = loadJS;
  }
  else {
    w.loadJS = loadJS;
  }
}( typeof global !== "undefined" ? global : this )); }</code></pre></div>

          <div class="col">
            <h3>&nbsp;</h3>
            <pre class="language-javascript screenshot">
<code>
function foo(bar) {
    var a = 42,
        b = &#39;Prism&#39;;
    return a + bar(b);
}</code></pre></div>

            <div class="col">
              <h3>PHP</h3>
              <pre class="language-php">
<code>&lt;?php namespace App\Services;

use App\User;
use Validator;
use Illuminate\Contracts\Auth\Registrar as RegistrarContract;

class Registrar implements RegistrarContract {

  /**
   * Get a validator for an incoming registration request.
   *
   * @param  array  $data
   * @return \Illuminate\Contracts\Validation\Validator
   */
public function validator(array $data)</code></pre></div>

              <div class="col">
                <h3>Ruby</h3>
                <pre class="language-ruby">
<code>##
# Array ISO Test

assert(&#39;Array&#39;, &#39;15.2.12&#39;) do
  assert_equal(Class, Array.class)
end

assert(&#39;Array inclueded modules&#39;, &#39;15.2.12.3&#39;) do
  assert_true(Array.include?(Enumerable))
end

assert(&#39;Array.[]&#39;, &#39;15.2.12.4.1&#39;) do
  assert_equal([1, 2, 3], Array.[](1,2,3))
end</code></pre></div>

                <div class="col">
                  <h3>Python</h3>
                  <pre class="language-python">
<code>class _BaseHTMLProcessor(sgmllib.SGMLParser):
    elements_no_end_tag = [&#39;area&#39;, &#39;base&#39;, &#39;basefont&#39;, &#39;br&#39;, &#39;col&#39;, &#39;frame&#39;, &#39;hr&#39;,
      &#39;img&#39;, &#39;input&#39;, &#39;isindex&#39;, &#39;link&#39;, &#39;meta&#39;, &#39;param&#39;]

    _r_barebang = re.compile(r&#39;&lt;!((?!DOCTYPE|--|\[))&#39;, re.IGNORECASE)
    _r_bareamp = re.compile(&quot;&amp;(?!#\d ;|#x[0-9a-fA-F] ;|\w ;)&quot;)
    _r_shorttag = re.compile(r&#39;&lt;([^&lt;\s] ?)\s*/&gt;&#39;)

    def __init__(self, encoding):
        self.encoding = encoding
        if _debug: sys.stderr.write(&#39;entering BaseHTMLProcessor, encoding=%s\n&#39; % self.encoding)
        sgmllib.SGMLParser.__init__(self)</code></pre></div>
  </div> <!-- /.content #content -->
</div><!-- /.container-flex #main -->
<footer class="footer"><small><a href="https://github.com/atelierbram/Base2Tone-prism">Base2Tone - Colorschemes</a> By <a href="http://atelierbramdehaan.nl">Bram de Haan</a> - based on <a href="http://simurai.com/projects/2016/01/01/duotone-themes">Duotone Themes</a> by <a href="http://simurai.com">Simurai</a> for Atom.</small></footer><a href="https://github.com/atelierbram/Base2Tone-prism" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#2a2734;color:#fff;position:absolute;top:0;border:0;right:0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a></div>
            
          
!
            
              $baseA0: hsl(265, 18%, 17%);
$baseA1: hsl(265, 17%, 22%);
$baseA2: hsl(265, 16%, 35%);
$baseA3: hsl(265, 15%, 40%);
$baseA4: hsl(265, 14%, 45%);
$baseA5: hsl(265, 13%, 53%);
$baseA6: hsl(265, 12%, 61%);
$baseA7: hsl(265, 11%, 69%);

$baseB0: hsl(265,  75%, 61%);
$baseB1: hsl(265,  80%, 66%);
$baseB2: hsl(265,  87%, 71%);
$baseB3: hsl(265,  97%, 76%);
$baseB4: hsl(265,  97%, 81%);
$baseB5: hsl(265,  97%, 86%);
$baseB6: hsl(265,  97%, 91%);
$baseB7: hsl(265,  100%, 96%);

$baseC0: hsl(3, 4%, 46%);
$baseC1: hsl(3, 5%, 53%);
$baseC2: hsl(3, 6%, 60%);
$baseC3: hsl(3, 6%, 67%);
$baseC4: hsl(3, 8%, 74%);
$baseC5: hsl(3, 13%, 82%);
$baseC6: hsl(3, 18%, 90%);
$baseC7: hsl(3, 23%, 98%);

$baseD0: hsl(3, 58%, 55%);
$baseD1: hsl(3, 63%, 60%);
$baseD2: hsl(3, 80%, 65%);
$baseD3: hsl(3, 85%, 68%);
$baseD4: hsl(3, 90%, 71%);
$baseD5: hsl(3, 95%, 75%);
$baseD6: hsl(3, 100%, 80%);
$baseD7: hsl(3, 100%, 85%); 

/*

Name:       Base2Tone-Pool Dark
Author:     adapted from DuoTone themes by Simurai (http://simurai.com/projects/2016/01/01/duotone-themes)

Prism template for Base2Tone by Bram de Haan (https://atelierbram.github.io/syntax-highlighting/prism/)
Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)

*/
 
code[class*="language-"],
pre[class*="language-"] {
  font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
  font-size: 14px;
  line-height: 1.375;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  background: $baseA0;
  color: $baseB3;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: $baseB0;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
  text-shadow: none;
  background: $baseB0;
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: .5em 0;
  overflow: auto;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: $baseA3;
}

.token.punctuation {
  color: $baseA3;
}

.token.namespace {
  opacity: .7;
}

.token.tag,
.token.operator,
.token.number {
  color: $baseD2;
}

.token.property,
.token.function {
  color: $baseB3;
}

.token.tag-id,
.token.selector,
.token.atrule-id {
  color: $baseB7;
}

code.language-javascript,
.token.attr-name {
  color: $baseB5;
}

code.language-css,
code.language-scss,
.token.boolean,
.token.string,
.token.entity,
.token.url,
.language-css .token.string,
.language-scss .token.string,
.style .token.string,
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit,
.token.statement,
.token.regex,
.token.atrule {
  color: $baseD7;
}

.token.placeholder,
.token.variable {
  color: $baseD7;
}

.token.deleted {
  text-decoration: line-through;
}

.token.inserted {
  border-bottom: 1px dotted $baseB7;
  text-decoration: none;
}

.token.italic {
  font-style: italic;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.important {
  color: $baseB2;
}

.token.entity {
  cursor: help;
}

pre > code.highlight {
  outline: .4em solid $baseB2;
  outline-offset: .4em;
} 
// end Prism 

// Tonal Scale demo-tiles
.bg-baseA0 { background-color: $baseA0; color: $baseA7; }
.bg-baseA1 { background-color: $baseA1;  color: adjust-color($baseA7, $lightness: 2.5%); }
.bg-baseA2 { background-color: $baseA2; color: adjust-color($baseA7, $lightness: 5%);}
.bg-baseA3 { background-color: $baseA3; color: adjust-color($baseA7, $lightness: 7.5%); }
.bg-baseA4 { background-color: $baseA4; color: adjust-color($baseA7, $lightness: 10%); }
.bg-baseA5 { background-color: $baseA5; color: $baseA1; }
.bg-baseA6 { background-color: $baseA6; color: adjust-color($baseA2, $lightness: -2.5%);}
.bg-baseA7 { background-color: $baseA7; color: $baseA2; }

.bg-baseB0 { background-color: $baseB0; color: $baseB6; }
.bg-baseB1 { background-color: $baseB1; color: $baseB6; }
.bg-baseB2 { background-color: $baseB2; color: adjust-color($baseB6, $lightness: 5%); }
.bg-baseB3 { background-color: $baseB3; color: adjust-color($baseB6, $lightness: 2%); }
.bg-baseB4 { background-color: $baseB4; color: $baseA1; }
.bg-baseB5 { background-color: $baseB5; color: $baseA2; }
.bg-baseB6 { background-color: $baseB6; color: $baseA3; }
.bg-baseB7 { background-color: $baseB7; color: $baseA4; }

.bg-baseC0 { background-color: $baseC0; color: $baseC5; }
.bg-baseC1 { background-color: $baseC1; color: $baseC6; }
.bg-baseC2 { background-color: $baseC2; color: $baseC7; }
.bg-baseC3 { background-color: $baseC3; color: adjust-color($baseC0, $lightness: -12.5%); }
.bg-baseC4 { background-color: $baseC4; color: adjust-color($baseC0, $lightness: -10%); }
.bg-baseC5 { background-color: $baseC5; color: adjust-color($baseC0, $lightness: -7.5%); }
.bg-baseC6 { background-color: $baseC6; color: adjust-color($baseC0, $lightness: -5%); }
.bg-baseC7 { background-color: $baseC7; color: adjust-color($baseC0, $lightness: -2.5%); }

.bg-baseD0 { background-color: $baseD0; color: adjust-color($baseD7, $lightness: 5%); }
.bg-baseD1 { background-color: $baseD1; color: adjust-color($baseD7, $lightness: 7.5%); }
.bg-baseD2 { background-color: $baseD2; color: adjust-color($baseD7, $lightness: 10%); }
.bg-baseD3 { background-color: $baseD3; color: adjust-color($baseD0, $lightness: -10%); }
.bg-baseD4 { background-color: $baseD4; color: adjust-color($baseD0, $lightness: -7.5%); }
.bg-baseD5 { background-color: $baseD5; color: adjust-color($baseD0, $lightness: -5%); }
.bg-baseD6 { background-color: $baseD6; color: adjust-color($baseD0, $lightness: -2.5%); }
.bg-baseD7 { background-color: $baseD7; color: $baseD0; }

// Tonal Scale demo-tiles
.bg-baseA0 { background-color: $baseA0; color: $baseA7; }
.bg-baseA1 { background-color: $baseA1;  color: adjust-color($baseA7, $lightness: 2.5%); }
.bg-baseA2 { background-color: $baseA2; color: adjust-color($baseA7, $lightness: 5%);}
.bg-baseA3 { background-color: $baseA3; color: adjust-color($baseA7, $lightness: 7.5%); }
.bg-baseA4 { background-color: $baseA4; color: adjust-color($baseA7, $lightness: 10%); }
.bg-baseA5 { background-color: $baseA5; color: $baseA1; }
.bg-baseA6 { background-color: $baseA6; color: adjust-color($baseA2, $lightness: -2.5%);}
.bg-baseA7 { background-color: $baseA7; color: $baseA2; }

.bg-baseB0 { background-color: $baseB0; color: $baseB6; }
.bg-baseB1 { background-color: $baseB1; color: $baseB6; }
.bg-baseB2 { background-color: $baseB2; color: adjust-color($baseB6, $lightness: 5%); }
.bg-baseB3 { background-color: $baseB3; color: adjust-color($baseB6, $lightness: 2%); }
.bg-baseB4 { background-color: $baseB4; color: $baseA1; }
.bg-baseB5 { background-color: $baseB5; color: $baseA2; }
.bg-baseB6 { background-color: $baseB6; color: $baseA3; }
.bg-baseB7 { background-color: $baseB7; color: $baseA4; }

.bg-baseC0 { background-color: $baseC0; color: $baseC5; }
.bg-baseC1 { background-color: $baseC1; color: $baseC6; }
.bg-baseC2 { background-color: $baseC2; color: $baseC7; }
.bg-baseC3 { background-color: $baseC3; color: adjust-color($baseC0, $lightness: -12.5%); }
.bg-baseC4 { background-color: $baseC4; color: adjust-color($baseC0, $lightness: -10%); }
.bg-baseC5 { background-color: $baseC5; color: adjust-color($baseC0, $lightness: -7.5%); }
.bg-baseC6 { background-color: $baseC6; color: adjust-color($baseC0, $lightness: -5%); }
.bg-baseC7 { background-color: $baseC7; color: adjust-color($baseC0, $lightness: -2.5%); }

.bg-baseD0 { background-color: $baseD0; color: adjust-color($baseD7, $lightness: 5%); }
.bg-baseD1 { background-color: $baseD1; color: adjust-color($baseD7, $lightness: 7.5%); }
.bg-baseD2 { background-color: $baseD2; color: adjust-color($baseD7, $lightness: 10%); }
.bg-baseD3 { background-color: $baseD3; color: adjust-color($baseD0, $lightness: -10%); }
.bg-baseD4 { background-color: $baseD4; color: adjust-color($baseD0, $lightness: -7.5%); }
.bg-baseD5 { background-color: $baseD5; color: adjust-color($baseD0, $lightness: -5%); }
.bg-baseD6 { background-color: $baseD6; color: adjust-color($baseD0, $lightness: -2.5%); }
.bg-baseD7 { background-color: $baseD7; color: $baseD0; }
 
// generic demo styles
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-family: sans-serif;
  font-size: 16px;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

.bg-dark,
.bg-dark body {
  background-color: adjust-color($baseA3, $lightness: 2.5%);
}

.bg-light,
.bg-light body {
  background-color: adjust-color($baseA7, $lightness: 5%);
}

body {
  margin: 0;
  font: 100%/1.5 AvenirNext-Regular, "Lucida Grande", "Segoe Ui", "Trebuchet Ms", sans-serif;
  background: inherit;
  color: #111;
  min-height: 100%;
  box-sizing: border-box;
}

.wf-active body,
.wf-active button {
  font-family: Overpass, AvenirNext-Regular, "Lucida Grande", "Segoe Ui", "Trebuchet Ms", sans-serif;
}

h1, h2, h3 {
  display: inline-block;
  margin: 0;
  font-family: AvenirNextCondensed-DemiBold, "Lucida Grande", "Segoe Ui", "Trebuchet Ms", sans-serif;
  font-weight: normal;
}

h2, h3 {
  padding: 1rem 0 0;
}

.wf-active h1,
.wf-active h2,
.wf-active h3 {
  font-family: Overpass, AvenirNextCondensed-DemiBold, "Lucida Grande", "Segoe Ui", "Trebuchet Ms", sans-serif;
}

.bg-dark .col h3 {
  color: $baseA1;
}

.bg-light .col h3 {
  color: $baseA5;
}

a {
  text-decoration: none;
}

.container {
  max-width: 100%;
  overflow: auto;
}

.header,
.footer {
  width: 100%;
  text-align: center;
  color: $baseB7;
}

.github-corner svg[style] {
  fill: $baseA0 !important;
}

.bg-dark .github-corner svg[style] {
  color: $baseA2 !important;
}

.bg-dark .github-corner:hover svg[style] {
  color: $baseD3 !important;
}

.bg-light .github-corner svg[style] {
  color: $baseC2 !important;
}

.bg-light .github-corner:hover svg[style] {
  color: $baseD7 !important;
}

.bg-dark .header {
  background: $baseA2;
}

.bg-dark .footer {
  background: $baseA1;
}

.bg-light .header {
  background: $baseC2;
}

.bg-light .footer {
  background: $baseC1;
}

.header {
  padding: .5em 1em 2em;

  @media(max-width: 640px) {
    padding-top: 3em;
  }
}

.header p {
  font-size: 1em;
}

.header p,
.btn-text,
.footer small {
  letter-spacing: 1px;
  word-spacing: -1px;
}

.footer {
  padding: 1.5em 0 2em;
  letter-spacing: 1px;
  word-spacing: -1px;
}

.bg-dark .header a,
.bg-dark .footer a {
  color: $baseD3;
  transition: all .3s;
  &:hover {
    color: $baseD6;
  }
}

.bg-light .header a {
  // color: $baseD7;
    color: adjust-color($baseD7, $lightness: 5%);
  &:hover {
    color: adjust-color($baseD7, $lightness: 10%);
  }
}

.bg-light .footer a {
  color: adjust-color($baseD7, $lightness: 20%);
  &:hover {
    color: adjust-color($baseD7, $lightness: 10%);
  }
}

// logo
.logo {
  position: relative;
  display: inline-block;
  vertical-align: middle;

  @media(min-width: 320px) {
    width: 288px;
    height: 0;
    padding-bottom: 20%;
  }
  @media(min-width: 690px) {
    width: 555px;
  }
}

svg {
  max-width: 100%;
}

.logo svg {
  @media(max-width: 319px) {
    display: none;
  }
  @media(min-width: 320px) {
    position: absolute;
    top:0;right:0;bottom:0;left:0;
  }
} 

.bg-dark [id*="logo-glyphs"] {
  fill: $baseB6;
}

.bg-light [id*="logo-glyphs"] {
  fill: $baseB7;
}

.bg-dark [id="logo-glyphs-2"] {
  fill: $baseB6;
}

.bg-light [id="logo-glyphs-2"] {
  fill: adjust-color($baseD7, $lightness: 5%);
}

[class*="bg-"] [id*="-shadow"] path,
[class*="bg-"] [id*="-inner"],
[class*="bg-"] [id*="-gt-"] path {
  fill: currentColor;
}

[class*="bg-"] [id*="-shadow"] path,
[class*="bg-"] [id="logo-glyphs-gt-1"] path,
[class*="bg-"] [id*="-inner"] path {
  opacity: 0;
}

.domready [id*="-shadow"] path,
.domready [id*="-inner"] path,
.domready [id*="-gt-"] path {
  animation: glyph-opacity 3s infinite linear;
}
.domready [id="glyphs-base-shadow"] path,
.domready [id="logo-glyphs-tone-inner"] path,
.domready [id="logo-glyphs-gt-1"] path {
  animation-delay: 1.5s;
}  

// css-animations
@keyframes glyph-opacity {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
}


// nav
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-variation,
.nav-variation_list {
  min-height: 2.9em;
}

.nav-variation {
  overflow: auto;
  clear: both;
  transition: all .3s;
  position: relative;
  // padding-right: 3em;

  @media(min-width: 640px) {
    padding-top: 0;
  }
}

.js .nav-variation {
  @media(max-width: 639px) {
    padding-top: 3.5em;
  }
}

.js .nav-closed {
  @media(max-width: 639px) {
    max-height: 0;
    overflow: hidden;
  }
}

.nav-open {
  max-height: 40em;
}

.nav-variation_list {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  flex-direction: column;
  @media(min-width: 640px) {
    flex-direction: row;
    padding-right: 3em;
  }
}

.no-flexbox .nav-variation_list {
  @media(min-width: 640px) {
    float: right;
  }
}

.nav-variation_list li {
  margin-left: 2px;
  align-self: stretch;
  flex-basis: 50px;
  @media(min-width: 640px) {
    flex-basis: initial;
  }
}

.no-flexbox .nav-variation_list li {
  @media(min-width: 640px) {
    display: inline-block;
  }
}

.nav_list a {
  border: 1px solid transparent;
  letter-spacing: 1px;
}

.nav_toggle-themes .btn-text,
.nav-variation_list a,
.demo-tiles-header-text b {
  text-transform: capitalize;
} 

.nav-variation_list a {
  padding: .75em 1em;
  display: flex;
  white-space: nowrap;

  @media(min-width: 640px) {
    border: none;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }
}

.bg-dark .nav-variation_list a {
  background-color: $baseA2;
  color: $baseD6;
  border-top-color: adjust-color($baseA2, $lightness: -2.5%);
  border-top-color: adjust-color($baseA2, $lightness: -2.5%);

  &:hover {
    background-color: adjust-color($baseA2, $lightness: -2.5%);
  }
}

.bg-dark .nav-themes_list a {
  color: $baseD5;
  border-top-color: adjust-color($baseA1, $lightness: 2.5%);
  border-bottom-color: $baseA0;

  &:hover {
    background: adjust-color($baseA1, $lightness: -2.5%);
  }
  
  @media(min-width: 640px) {
    background-color: $baseA1;
  }
}

.bg-light .nav-variation_list a {
  background-color: $baseC2;
  color: $baseB7;
  border-top-color: $baseC1;
  border-bottom-color: $baseC1;

  &:hover {
    background-color: adjust-color($baseC2, $lightness: -2.5%);
  }

}
.bg-light .nav-themes_list a {
  background-color: $baseC1;
  border-top-color: adjust-color($baseC1, $lightness: 2.5%);
  border-bottom-color: $baseC0;
  color: $baseB7;

  &:hover {
    background-color: adjust-color($baseC1, $lightness: -2.5%);
  }

}

[class*="bg-"] .nav-variation_list a {
  @media(min-width: 640px) {
    border: none;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }
}

.nav_list .current a {
  pointer-events: none;
  cursor: default;
}

.bg-dark .nav_list .current a {
  border-top-color: $baseA2;
  border-bottom-color: $baseA0;
}

.bg-dark .nav-variation_list .current a {
  background-color: $baseA1;
  color: $baseA6;
  border-top-color: adjust-color($baseA1, $lightness: -2.5%);
  border-bottom-color: adjust-color($baseA1, $lightness: 2.5%);

}

.bg-dark .nav-themes_list .current a {
  color: $baseA5;
  background: $baseA0;
  border-top-color: adjust-color($baseA0, $lightness: -2.5%);
  border-bottom-color: adjust-color($baseA0, $lightness: 2.5%);
}

.bg-light .nav-variation_list .current a {
  background-color: $baseC7;
  color: $baseB3;
  border-top-color: adjust-color($baseC7, $lightness: -2.5%);
  border-bottom-color: adjust-color($baseC7, $lightness: 2.5%);

}

.bg-light .nav-themes_list .current a {
  background-color: $baseC7;
  color: $baseB3;
  border-top-color: adjust-color($baseA7, $lightness: -2.5%);
  border-bottom-color: adjust-color($baseA7, $lightness: 2.5%);
}

.bg-light .nav_toggle-variation {
  background-color: $baseC1;
}

.bg-dark .nav_toggle-variation {
  @media(max-width: 639px) {
    background-color: $baseA1;
  }
  background-color: $baseA2;
}

.nav_toggle {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='rgb(255,255,255)'%3E%3Crect x='12' y='14' width='16' height='2'/%3E%3Crect x='12' y='20' width='16' height='2'/%3E%3Crect x='12' y='26' width='16' height='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; 
  top:0;left:0;
  padding: 1em;
  color: #fff;
}

.nav_toggle-variation {
  position: absolute;
  right: 0;
  text-align: right;
  background-position: right center;
}

.nav-open .nav_toggle {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='36' viewBox='0 0 48 36' fill='rgb(255,255,255)'%3E%3Cpath d='M25.261,17.018l4.571,4.572l-1.367,1.297l-4.501-4.573L19.5,22.887l-1.332-1.297l4.5-4.572l-4.5-4.572l1.332-1.332 l4.464,4.608l4.501-4.608l1.367,1.332L25.261,17.018z'/%3E%3C/svg%3E");
}

.nav-closed .nav_toggle {
  @media(max-width: 640px) {
    height: 56px;
  }
}

.nav_toggle .btn-text {
  display: inline-block;
  padding-left: 1.5em;
}

.nav_toggle-themes .btn-text {
  padding-right: .25em;
}

.nav_toggle-variation .btn-text {
  padding-right: 1.5em;
}
.nav_toggle-variation,
.nav_toggle-variation .btn-text {
  @media(min-width: 640px) {
    display: none;
  }
}

// themes toggle
.nav_toggle-themes {
  background-position: .25em center;
  border-bottom-right-radius: 3px;

  @media(max-width: 640px) {
    position: fixed;
  }

  @media(min-width: 640px) {
    position: absolute;
    margin-top: -2em;
    margin-left: 3em;
    border-radius: 3px;
  }
}

.bg-dark .nav_toggle-themes {
  @media(min-width: 640px) {
    background-color: $baseA1;
  }
}

.bg-light .nav_toggle-themes {
  @media(min-width: 640px) {
    background-color: $baseC0;
  }
}

// end menu

// begin flex layout
.container-flex {
  position: relative;

  @media(min-width: 640px) {
    display: flex;
  }
}

.content {
  padding: 2em 3em 5em;
  transition: all .3s;

  @media(min-width: 640px) {
    width: 80%;
    flex-grow: 4;
  }
}

.js .has-themes-hidden {
  width: 100%;
}

.nav-themes {
  flex-grow: 1;
  transition: all .3s;
}

.bg-light .nav-themes {
  background-color: $baseC1;
}

.bg-dark .nav-themes {
  background-color: $baseA1;
}

.js .nav-themes {
  @media(min-width:640px) {
    margin-top: 3em;
  }
}

.nav-themes-open {

  @media(max-width: 639px) {
    width: 100%;
  }
  @media(min-width: 640px) {
    width: 20%;
    min-width: 7em;
  }
}

.nav-themes-hidden {
  width: 0;
  overflow: hidden;
}

.js .nav-themes-hidden {

  @media(max-width:639px) {
    height: 0;
  }
}

.nav-themes_list {
  display: flex;
  flex-direction: column;
}

.nav-themes_list a {
  display: flex;
  padding: .5em 1em;
}
// end flex layout

.demo-tiles {
  overflow: hidden;
  margin-bottom: 3em;
}

.demo-tiles.collapsed span {
  color: transparent;
}

.unit {
  float: left;
  width: 12.5%;
  padding: .5em 0;
  text-align: center;
  transition: .3s all;
}

.hidden {
  width: 0;
  height: 0;
  padding: 0;
  float: none;
  opacity: 0;
}

.w-1v4 {
  width: 25%;
}

.w-1v8 {
  width: 12.5%;
}

.demo-tiles-header {
  padding: 0 0 1em;
  display: block;
  overflow: auto;
}

.demo-tiles-header-text {
  display: block;

}

.bg-dark .demo-tiles-header-text {
  color: $baseA1;
}

.bg-light .demo-tiles-header-text {
  color: $baseA2;
}

.demo-tiles-header-text b {
  font-weight: normal;
}

.demo-tiles-header-text .number-shades {
  @media(max-width:650px) {
    display: block;
    clear: both;
  }
}

.bg-dark .demo-tiles-header-text .number-shades {
  color: $baseB7;
  letter-spacing: .5px;
  word-spacing: -.5px;
}

.bg-light .demo-tiles-header-text .number-shades {
  color: $baseC0;
}

.demo-tiles-header .button {
  float: right;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2.25rem;
}

h3 {
  font-size: 2rem;
  margin: 1em 0 0 .35em;
  letter-spacing: -1px;
  word-spacing: 1px;
}

.block-list {
  margin-bottom: 1em;
}

.block-list li {
  list-style: none;
  padding: .5em 1em;
}

[class*="language-"] a {
  background: transparent;
  color: inherit;
  pointer-events: none;
}

.col pre[class*="language-"] {
  max-height: 300px;
  border-radius: 5px;
  line-height: 1.4;
}

// webkit custom scrollbars for dark background (... mostly for horizontal on smaller screens)
// https://css-tricks.com/custom-scrollbars-in-webkit/
.bg-dark ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba($baseA1,0.3);
  border-radius: 2px;
  background-color: adjust-color($baseA1, $lightness: 2.5%);
}

.bg-dark ::-webkit-scrollbar {
  width: .75em;
  height: .75em;
  background-color: adjust-color($baseA1, $lightness: -5%);
}

.bg-dark ::-webkit-scrollbar-thumb {
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgba($baseA0,.3);
  background-color: adjust-color($baseA1, $lightness: -2.5%);
}

.bg-dark ::-webkit-scrollbar-thumb:window-inactive {
  background-color: adjust-color($baseA1, $lightness: -5%);
}

.bg-dark ::-webkit-scrollbar-corner {
  background-color: $baseA1;
}

// light bg
.bg-light ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba($baseA7,0.3);
  border-radius: 2px;
  background-color: adjust-color($baseA7, $lightness: 2.5%);
  // background-color: $baseB7;
}

.bg-light ::-webkit-scrollbar {
  width: .75em;
  height: .75em;
  background-color: adjust-color($baseA7, $lightness: -5%);
}

.bg-light ::-webkit-scrollbar-thumb {
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgba($baseA3,.3);
  background-color: adjust-color($baseA7, $lightness: -2.5%);
}

.bg-light ::-webkit-scrollbar-thumb:window-inactive {
  background-color: $baseA4;
}

.bg-light ::-webkit-scrollbar-corner {
  background-color: transparent;
}

button {
  -webkit-appearance: none;
  overflow: visible;
  border-radius: 4px;
  background-clip: padding-box;
  background-color: $baseD2;
  border: 1px solid;
  border-color: $baseD4 $baseD2 $baseD1;
  cursor: pointer;
  color: $baseB7;
  display: inline-block;
  outline: 0;
  margin: 0 0 .5em .75em;
  padding: 1em 2em;
  // text-shadow: $baseA0 0 1px 1px;
  text-decoration: none;
  vertical-align: top;
  width: auto;
  font: normal 1rem/1.3 AvenirNext-Regular, "Lucida Grande", "Segoe Ui", "Trebuchet Ms", sans-serif;
  letter-spacing: 1px;
  word-spacing: -1px;
}

button:focus {
  box-shadow: $baseD0 0 0 5px 0;
  z-index: 1;
}

button:hover {
  background-color: adjust-color($baseD2, $lightness: 5%);
  text-decoration: none;
}

button:active {
  box-shadow: inset rgba($baseB3, 0.25) 0 1px 2px 0;
  border-color: adjust-color($baseB3,$lightness:-5%) adjust-color($baseD0,$lightness:-10%) adjust-color($baseD0,$lightness:-15%);
}

button::-moz-focus-inner, input::-moz-focus-inner, button::-webkit-focus-inner, input::-webkit-focus-inner {
  border: 0;
  padding: 0;
}

.outer {
  text-align: center;
  background-color: $baseA0;
  padding: 3em;
}
.inner {
  background-color: transparentize($baseD3,.25);
  min-height: 300px;
}

.header .visuallyhidden {
  @media(min-width: 320px) {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}

@media (min-width:750px) {

  .col pre[class*="language-"] {
    padding: 2em 3em;
    font-size: 16px;
  }

  h1 {
    font-size: 2.75rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  h3 {
    font-size: 2.25rem;
  }

  p {
    font-size: 1.25em;
  }

  button {
    font-size: 1.25rem;
  }

} 
            
          
!
            
              /*!
  * domready (c) Dustin Diaz 2014 - License MIT
  * https://github.com/ded/domready
  */
!function(name,definition){if(typeof module!="undefined")module.exports=definition();else if(typeof define=="function"&&typeof define.amd=="object")define(definition);else this[name]=definition()}("domready",function(){var fns=[],listener,doc=document,hack=doc.documentElement.doScroll,domContentLoaded="DOMContentLoaded",loaded=(hack?/^loaded|^c/:/^loaded|^i|^c/).test(doc.readyState);if(!loaded)doc.addEventListener(domContentLoaded,listener=function(){doc.removeEventListener(domContentLoaded,listener); loaded=1;while(listener=fns.shift())listener()});return function(fn){loaded?setTimeout(fn,0):fns.push(fn)}});domready(function(){document.documentElement.className+=" domready"});
domready(function() {
    var navVariation = document.getElementById("navVariation");
    var navBtn = document.createElement("a");
    navBtn.setAttribute("href", "#");
    navBtn.setAttribute("class", "nav_toggle nav_toggle-variation");
    navBtn.insertAdjacentHTML("beforeend", '<span class="btn-text">light-dark variation</span>');
    navVariation.insertBefore(navBtn, navVariation.firstChild);
    navVariation.classList.add("nav-closed");

    function hasClass(e, t) {
        return (new RegExp(" " + t + " ")).test(" " + e.className + " ")
    }

    function toggleClass(e, t) {
        var n = " " + e.className.replace(/[\t\r\n]/g, " ") + " ";
        if (hasClass(e, t)) {
            while (n.indexOf(" " + t + " ") >= 0) n = n.replace(" " + t + " ", " ");
            e.className = n.replace(/^\s+|\s+$/g, "")
        } else e.className += " " + t
    }
    navBtn.onclick = function() {
        toggleClass(this.parentNode, "nav-open");
        toggleClass(this.parentNode, "nav-closed")
    };

    var main = document.getElementById("main");
    var toggleBtn1 = document.createElement("button");
    var navThemes = document.getElementById("navThemes");
    var navBtnThemes = document.createElement("a");
    var content = document.getElementById("content");

    navBtnThemes.setAttribute("href", "#");
    navBtnThemes.setAttribute("class", "nav_toggle nav_toggle-themes");
    navBtnThemes.insertAdjacentHTML("beforeend", '<span class="btn-text">themes</span>');
    navThemes.insertBefore(navBtnThemes, navThemes.firstChild);
    navThemes.classList.add("nav-themes-hidden");

    navBtnThemes.onclick = function() {
        toggleClass(this.parentNode, "nav-themes-open");
        toggleClass(this.parentNode, "nav-themes-hidden");
        toggleClass(content, "has-themes-hidden")
    };

    var dtHeader = document.getElementById("demo-tilesHeader");
    var toggleBtn1 = document.createElement("button");
    var numberShades = document.getElementById("numberShades");
    var demoTilesId = document.getElementById("demo-tiles-id");
    toggleBtn1.innerHTML = "show colornames";
    toggleBtn1.setAttribute("class", "button button-16");
    toggleBtn1.setAttribute("data-text-swap", "hide colornames");
    toggleBtn1.setAttribute("data-text-original", "show colornames");
    dtHeader.insertBefore(toggleBtn1, dtHeader.firstChild);
    toggleBtn1.addEventListener("click", function() {
        [].map.call(document.querySelectorAll(".shade-added"), function(el) {
            el.classList.toggle("hidden")
        });
        [].map.call(document.querySelectorAll(".shade-original"), function(el) {
            el.classList.toggle("w-1v4")
        });
        [].map.call(document.querySelectorAll(".demo-tiles"), function(el) {
            el.classList.toggle("collapsed")
        });
        if (toggleBtn1.getAttribute("data-text-swap") == toggleBtn1.innerHTML) toggleBtn1.innerHTML = toggleBtn1.getAttribute("data-text-original");
        else {
            toggleBtn1.setAttribute("data-text-original", toggleBtn1.innerHTML);
            toggleBtn1.innerHTML = toggleBtn1.getAttribute("data-text-swap")
        }
        if (demoTilesId.getAttribute("data-text-swap") == demoTilesId.innerHTML) demoTilesId.innerHTML = demoTilesId.getAttribute("data-text-original");
        else {
            demoTilesId.setAttribute("data-text-original", demoTilesId.innerHTML);
            demoTilesId.innerHTML = demoTilesId.getAttribute("data-text-swap")
        }
        if (numberShades.getAttribute("data-text-swap") == numberShades.innerHTML) numberShades.innerHTML = numberShades.getAttribute("data-text-original");
        else {
            numberShades.setAttribute("data-text-original", numberShades.innerHTML);
            numberShades.innerHTML = numberShades.getAttribute("data-text-swap")
        }
    }, false)

  document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
});
            
          
!
999px
Loading ..................

Console