Color Stuff (CSS only)

color-stuff-css-only.markdown

Color Stuff (CSS only)

##Playing with stylus functions.

A Pen by Kyle Shanks on CodePen.

License.

index.slim

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <!-- Montserrat -->

<!-- STUFF -->
<div class="abs-center container">
- for i in (1..7)
    <div class="palette palette#{i}">
    - for j in (1..5)
        <div class="color-square color#{j}"></div>
    </div>
</div>

style.stylus

$color = #DD1114; // Seed Color - Appears in the left-most palette in the center

// --- GENERAL SETUP STUFF ---
* { box-sizing: border-box; transition: 0.3s ease; }
body { background-color: #222A36; transition: 0s; font-family: "Montserrat"; color: white; }
.abs-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

// --- ELEMENT STYLING ---
.container { display: flex; width: 350px; overflow: hidden; }
.color-square { position: relative; height: 20%; width: 100%; }
.color-square::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; transition: 0.1s ease; }
.color-square:hover::before { opacity: 1; transition: 0.3s ease; }
.palette { flex: 1 1 0; height: 250px; }
.palette:hover { flex-grow: 4; }

// --- THE MAGIC ---
for x in (1..7)
    for y in (1..5)
        if light(lighten(spin($color,((x - 1)*44deg)),((y - 3)*28%))) { .palette{x} .color{y}::before {color: black;} } // Makes ::before text black if the background is light
        .palette{x} .color{y} { background-color: lighten(spin($color,((x - 1)*44deg)),((y - 3)*28%)); }
        .palette{x} .color{y}::before { content: ''+lighten(spin($color,((x - 1)*44deg)),((y - 3)*28%)); }