<input type="checkbox" id="in-1-1"/>
<input type="checkbox" id="in-1-2" checked />
<input type="checkbox" id="in-1-3"/>
<input type="checkbox" id="in-1-4"/>
<input type="checkbox" id="in-1-5" checked />
<input type="checkbox" id="in-1-6"/>
<input type="checkbox" id="in-1-7"/>
<input type="checkbox" id="in-1-8"/><br/>
<input type="checkbox" id="in-2-1"/>
<input type="checkbox" id="in-2-2" checked />
<input type="checkbox" id="in-2-3" checked />
<input type="checkbox" id="in-2-4"/>
<input type="checkbox" id="in-2-5"/>
<input type="checkbox" id="in-2-6" checked />
<input type="checkbox" id="in-2-7"/>
<input type="checkbox" id="in-2-8" checked /><br/>
<input type="checkbox" id="in-3-1"/>
<input type="checkbox" id="in-3-2" checked />
<input type="checkbox" id="in-3-3" checked />
<input type="checkbox" id="in-3-4"/>
<input type="checkbox" id="in-3-5" checked />
<input type="checkbox" id="in-3-6" checked />
<input type="checkbox" id="in-3-7"/>
<input type="checkbox" id="in-3-8"/><br/>
<input type="checkbox" id="in-4-1"/>
<input type="checkbox" id="in-4-2" checked />
<input type="checkbox" id="in-4-3" checked />
<input type="checkbox" id="in-4-4"/>
<input type="checkbox" id="in-4-5" checked />
<input type="checkbox" id="in-4-6" checked />
<input type="checkbox" id="in-4-7"/>
<input type="checkbox" id="in-4-8"/><br/>
<input type="checkbox" id="in-5-1"/>
<input type="checkbox" id="in-5-2" checked />
<input type="checkbox" id="in-5-3" checked />
<input type="checkbox" id="in-5-4"/>
<input type="checkbox" id="in-5-5" checked />
<input type="checkbox" id="in-5-6" checked />
<input type="checkbox" id="in-5-7" checked />
<input type="checkbox" id="in-5-8" checked /><br/>
<input type="checkbox" id="in-6-1"/>
<input type="checkbox" id="in-6-2"/>
<input type="checkbox" id="in-6-3" checked />
<input type="checkbox" id="in-6-4"/>
<input type="checkbox" id="in-6-5"/>
<input type="checkbox" id="in-6-6"/>
<input type="checkbox" id="in-6-7"/>
<input type="checkbox" id="in-6-8"/><br/>
<input type="checkbox" id="in-7-1"/>
<input type="checkbox" id="in-7-2" checked />
<input type="checkbox" id="in-7-3"/>
<input type="checkbox" id="in-7-4" checked />
<input type="checkbox" id="in-7-5"/>
<input type="checkbox" id="in-7-6" checked />
<input type="checkbox" id="in-7-7" checked />
<input type="checkbox" id="in-7-8" checked /><br/>
<input type="checkbox" id="in-8-1"/>
<input type="checkbox" id="in-8-2" checked />
<input type="checkbox" id="in-8-3" checked />
<input type="checkbox" id="in-8-4"/>
<input type="checkbox" id="in-8-5" checked />
<input type="checkbox" id="in-8-6" checked />
<input type="checkbox" id="in-8-7" checked />
<input type="checkbox" id="in-8-8" checked /><br/>
<input type="checkbox" id="in-9-1"/>
<input type="checkbox" id="in-9-2" checked />
<input type="checkbox" id="in-9-3" checked />
<input type="checkbox" id="in-9-4" checked />
<input type="checkbox" id="in-9-5"/>
<input type="checkbox" id="in-9-6"/>
<input type="checkbox" id="in-9-7" checked />
<input type="checkbox" id="in-9-8"/><br/>
<input type="checkbox" id="in-10-1"/>
<input type="checkbox" id="in-10-2" checked />
<input type="checkbox" id="in-10-3" checked />
<input type="checkbox" id="in-10-4"/>
<input type="checkbox" id="in-10-5" checked />
<input type="checkbox" id="in-10-6" checked />
<input type="checkbox" id="in-10-7"/>
<input type="checkbox" id="in-10-8"/><br/>
<input type="checkbox" id="in-11-1"/>
<input type="checkbox" id="in-11-2" checked />
<input type="checkbox" id="in-11-3" checked />
<input type="checkbox" id="in-11-4"/>
<input type="checkbox" id="in-11-5"/>
<input type="checkbox" id="in-11-6" checked />
<input type="checkbox" id="in-11-7"/>
<input type="checkbox" id="in-11-8"/><br/>
<!-- <input type="checkbox" id="in-12-1"/>
<input type="checkbox" id="in-12-2"/>
<input type="checkbox" id="in-12-3" checked />
<input type="checkbox" id="in-12-4"/>
<input type="checkbox" id="in-12-5"/>
<input type="checkbox" id="in-12-6"/>
<input type="checkbox" id="in-12-7"/>
<input type="checkbox" id="in-12-8" checked /><br/> -->
<section>
<h1><span class="output-1"></span><span class="output-2"></span><span class="output-3"></span><span class="output-4"></span><span class="output-5"></span><span class="output-6"></span><span class="output-7"></span><span class="output-8"></span><span class="output-9"></span><span class="output-10"></span><span class="output-11"></span><span class="output-12"></span>
</h1>
</section>
<nav>
<div>
<label for="in-1-1"></label>
<label for="in-1-2"></label>
<label for="in-1-3"></label>
<label for="in-1-4"></label>
<label for="in-1-5"></label>
<label for="in-1-6"></label>
<label for="in-1-7"></label>
<label for="in-1-8"></label>
</div>
<div>
<label for="in-2-1"></label>
<label for="in-2-2"></label>
<label for="in-2-3"></label>
<label for="in-2-4"></label>
<label for="in-2-5"></label>
<label for="in-2-6"></label>
<label for="in-2-7"></label>
<label for="in-2-8"></label>
</div>
<div>
<label for="in-3-1"></label>
<label for="in-3-2"></label>
<label for="in-3-3"></label>
<label for="in-3-4"></label>
<label for="in-3-5"></label>
<label for="in-3-6"></label>
<label for="in-3-7"></label>
<label for="in-3-8"></label>
</div>
<div>
<label for="in-4-1"></label>
<label for="in-4-2"></label>
<label for="in-4-3"></label>
<label for="in-4-4"></label>
<label for="in-4-5"></label>
<label for="in-4-6"></label>
<label for="in-4-7"></label>
<label for="in-4-8"></label>
</div>
<div>
<label for="in-5-1"></label>
<label for="in-5-2"></label>
<label for="in-5-3"></label>
<label for="in-5-4"></label>
<label for="in-5-5"></label>
<label for="in-5-6"></label>
<label for="in-5-7"></label>
<label for="in-5-8"></label>
</div>
<div>
<label for="in-6-1"></label>
<label for="in-6-2"></label>
<label for="in-6-3"></label>
<label for="in-6-4"></label>
<label for="in-6-5"></label>
<label for="in-6-6"></label>
<label for="in-6-7"></label>
<label for="in-6-8"></label>
</div>
<div>
<label for="in-7-1"></label>
<label for="in-7-2"></label>
<label for="in-7-3"></label>
<label for="in-7-4"></label>
<label for="in-7-5"></label>
<label for="in-7-6"></label>
<label for="in-7-7"></label>
<label for="in-7-8"></label>
</div>
<div>
<label for="in-8-1"></label>
<label for="in-8-2"></label>
<label for="in-8-3"></label>
<label for="in-8-4"></label>
<label for="in-8-5"></label>
<label for="in-8-6"></label>
<label for="in-8-7"></label>
<label for="in-8-8"></label>
</div>
<div>
<label for="in-9-1"></label>
<label for="in-9-2"></label>
<label for="in-9-3"></label>
<label for="in-9-4"></label>
<label for="in-9-5"></label>
<label for="in-9-6"></label>
<label for="in-9-7"></label>
<label for="in-9-8"></label>
</div>
<div>
<label for="in-10-1"></label>
<label for="in-10-2"></label>
<label for="in-10-3"></label>
<label for="in-10-4"></label>
<label for="in-10-5"></label>
<label for="in-10-6"></label>
<label for="in-10-7"></label>
<label for="in-10-8"></label>
</div>
<div>
<label for="in-11-1"></label>
<label for="in-11-2"></label>
<label for="in-11-3"></label>
<label for="in-11-4"></label>
<label for="in-11-5"></label>
<label for="in-11-6"></label>
<label for="in-11-7"></label>
<label for="in-11-8"></label>
</div>
<!-- <div>
<label for="in-12-1"></label>
<label for="in-12-2"></label>
<label for="in-12-3"></label>
<label for="in-12-4"></label>
<label for="in-12-5"></label>
<label for="in-12-6"></label>
<label for="in-12-7"></label>
<label for="in-12-8"></label>
</div> -->
</nav>
<div class="map">
<div><span>a</span><span>01100001</span></div>
<div><span>b</span><span>01100010</span></div>
<div><span>c</span><span>01100011</span></div>
<div><span>d</span><span>01100100</span></div>
<div><span>e</span><span>01100101</span></div>
<div><span>f</span><span>01100110</span></div>
<div><span>g</span><span>01100111</span></div>
<div><span>h</span><span>01101000</span></div>
<div><span>i</span><span>01101001</span></div>
<div><span>j</span><span>01101010</span></div>
<div><span>k</span><span>01101011</span></div>
<div><span>l</span><span>01101100</span></div>
<div><span>m</span><span>01101101</span></div>
<div><span>n</span><span>01101110</span></div>
<div><span>o</span><span>01101111</span></div>
<div><span>p</span><span>01110000</span></div>
<div><span>q</span><span>01110001</span></div>
<div><span>r</span><span>01110010</span></div>
<div><span>s</span><span>01110011</span></div>
<div><span>t</span><span>01110100</span></div>
<div><span>u</span><span>01110101</span></div>
<div><span>v</span><span>01110110</span></div>
<div><span>w</span><span>01110111</span></div>
<div><span>x</span><span>01111000</span></div>
<div><span>y</span><span>01111001</span></div>
<div><span>z</span><span>01111010</span></div>
<div><span>A</span><span>01000001</span></div>
<div><span>B</span><span>01000010</span></div>
<div><span>C</span><span>01000011</span></div>
<div><span>D</span><span>01000100</span></div>
<div><span>E</span><span>01000101</span></div>
<div><span>F</span><span>01000110</span></div>
<div><span>G</span><span>01000111</span></div>
<div><span>H</span><span>01001000</span></div>
<div><span>I</span><span>01001001</span></div>
<div><span>J</span><span>01001010</span></div>
<div><span>K</span><span>01001011</span></div>
<div><span>L</span><span>01001100</span></div>
<div><span>M</span><span>01001101</span></div>
<div><span>N</span><span>01001110</span></div>
<div><span>O</span><span>01001111</span></div>
<div><span>P</span><span>01010000</span></div>
<div><span>Q</span><span>01010001</span></div>
<div><span>R</span><span>01010010</span></div>
<div><span>S</span><span>01010011</span></div>
<div><span>T</span><span>01010100</span></div>
<div><span>U</span><span>01010101</span></div>
<div><span>V</span><span>01010110</span></div>
<div><span>W</span><span>01010111</span></div>
<div><span>X</span><span>01011000</span></div>
<div><span>Y</span><span>01011001</span></div>
<div><span>Z</span><span>01011010</span></div>
<div><span>0</span><span>00110000</span></div>
<div><span>1</span><span>00110001</span></div>
<div><span>2</span><span>00110010</span></div>
<div><span>3</span><span>00110011</span></div>
<div><span>4</span><span>00110100</span></div>
<div><span>5</span><span>00110101</span></div>
<div><span>6</span><span>00110110</span></div>
<div><span>7</span><span>00110111</span></div>
<div><span>8</span><span>00111000</span></div>
<div><span>9</span><span>00111001</span></div>
<div><span> </span><span>00100000</span></div>
<div><span>!</span><span>00100001</span></div>
<div><span>"</span><span>00100010</span></div>
<div><span>#</span><span>00100011</span></div>
<div><span>$</span><span>00100100</span></div>
<div><span>%</span><span>00100101</span></div>
<div><span>&</span><span>00100110</span></div>
<div><span>'</span><span>00100111</span></div>
<div><span>(</span><span>00101000</span></div>
<div><span>)</span><span>00101001</span></div>
<div><span>*</span><span>00101010</span></div>
<div><span>+</span><span>00101011</span></div>
<div><span>,</span><span>00101100</span></div>
<div><span>-</span><span>00101101</span></div>
<div><span>.</span><span>00101110</span></div>
<div><span>/</span><span>00101111</span></div>
<div><span>:</span><span>00111010</span></div>
<div><span>;</span><span>00111011</span></div>
<div><span><</span><span>00111100</span></div>
<div><span>=</span><span>00111101</span></div>
<div><span>></span><span>00111110</span></div>
<div><span>?</span><span>00111111</span></div>
<div><span>@</span><span>01000000</span></div>
<div><span>[</span><span>01011011</span></div>
<div><span>\</span><span>01011100</span></div>
<div><span>]</span><span>01011101</span></div>
<div><span>^</span><span>01011110</span></div>
<div><span>_</span><span>01011111</span></div>
<div><span>`</span><span>01100000</span></div>
<div><span>{</span><span>01111011</span></div>
<div><span>|</span><span>01111100</span></div>
<div><span>}</span><span>01111101</span></div>
<div><span>~</span><span>01111110</span></div>
</div>// how many binary groups
$seq-count: 11;
// binary sequence and corresponding letter
$map:
(seq: (0,0,1,0,0,0,0,1), char: "!"),
(seq: (0,0,1,0,0,0,1,0), char: "\""),
(seq: (0,0,1,0,0,0,1,1), char: "#"),
(seq: (0,0,1,0,0,1,0,0), char: "$"),
(seq: (0,0,1,0,0,1,0,1), char: "%"),
(seq: (0,0,1,0,0,1,1,0), char: "&"),
(seq: (0,0,1,0,0,1,1,1), char: "'"),
(seq: (0,0,1,0,1,0,0,0), char: "("),
(seq: (0,0,1,0,1,0,0,1), char: ")"),
(seq: (0,0,1,0,1,0,1,0), char: "*"),
(seq: (0,0,1,0,1,0,1,1), char: "+"),
(seq: (0,0,1,0,1,1,0,0), char: ","),
(seq: (0,0,1,0,1,1,0,1), char: "-"),
(seq: (0,0,1,0,1,1,1,0), char: "."),
(seq: (0,0,1,0,1,1,1,1), char: "/"),
(seq: (0,0,1,1,0,0,0,0), char: "0"),
(seq: (0,0,1,1,0,0,0,1), char: "1"),
(seq: (0,0,1,1,0,0,1,0), char: "2"),
(seq: (0,0,1,1,0,0,1,1), char: "3"),
(seq: (0,0,1,1,0,1,0,0), char: "4"),
(seq: (0,0,1,1,0,1,0,1), char: "5"),
(seq: (0,0,1,1,0,1,1,0), char: "6"),
(seq: (0,0,1,1,0,1,1,1), char: "7"),
(seq: (0,0,1,1,1,0,0,0), char: "8"),
(seq: (0,0,1,1,1,0,0,1), char: "9"),
(seq: (0,0,1,1,1,0,1,0), char: ":"),
(seq: (0,0,1,1,1,0,1,1), char: ";"),
(seq: (0,0,1,1,1,1,0,0), char: "<"),
(seq: (0,0,1,1,1,1,0,1), char: "="),
(seq: (0,0,1,1,1,1,1,0), char: ">"),
(seq: (0,0,1,1,1,1,1,1), char: "?"),
(seq: (0,1,0,0,0,0,0,0), char: "@"),
(seq: (0,1,0,1,1,0,1,1), char: "["),
(seq: (0,1,0,1,1,1,0,0), char: "\\"),
(seq: (0,1,0,1,1,1,0,1), char: "]"),
(seq: (0,1,0,1,1,1,1,0), char: "^"),
(seq: (0,1,0,1,1,1,1,1), char: "_"),
(seq: (0,1,1,0,0,0,0,0), char: "`"),
(seq: (0,1,1,1,1,0,1,1), char: "{"),
(seq: (0,1,1,1,1,1,0,0), char: "|"),
(seq: (0,1,1,1,1,1,0,1), char: "}"),
(seq: (0,1,1,1,1,1,1,0), char: "~"),
(seq: (0,0,1,0,0,0,0,0), char: "\00a0"),
(seq: (0,1,1,0,0,0,0,1), char: "a"),
(seq: (0,1,1,0,0,0,1,0), char: "b"),
(seq: (0,1,1,0,0,0,1,1), char: "c"),
(seq: (0,1,1,0,0,1,0,0), char: "d"),
(seq: (0,1,1,0,0,1,0,1), char: "e"),
(seq: (0,1,1,0,0,1,1,0), char: "f"),
(seq: (0,1,1,0,0,1,1,1), char: "g"),
(seq: (0,1,1,0,1,0,0,0), char: "h"),
(seq: (0,1,1,0,1,0,0,1), char: "i"),
(seq: (0,1,1,0,1,0,1,0), char: "j"),
(seq: (0,1,1,0,1,0,1,1), char: "k"),
(seq: (0,1,1,0,1,1,0,0), char: "l"),
(seq: (0,1,1,0,1,1,0,1), char: "m"),
(seq: (0,1,1,0,1,1,1,0), char: "n"),
(seq: (0,1,1,0,1,1,1,1), char: "o"),
(seq: (0,1,1,1,0,0,0,0), char: "p"),
(seq: (0,1,1,1,0,0,0,1), char: "q"),
(seq: (0,1,1,1,0,0,1,0), char: "r"),
(seq: (0,1,1,1,0,0,1,1), char: "s"),
(seq: (0,1,1,1,0,1,0,0), char: "t"),
(seq: (0,1,1,1,0,1,0,1), char: "u"),
(seq: (0,1,1,1,0,1,1,0), char: "v"),
(seq: (0,1,1,1,0,1,1,1), char: "w"),
(seq: (0,1,1,1,1,0,0,0), char: "x"),
(seq: (0,1,1,1,1,0,0,1), char: "y"),
(seq: (0,1,1,1,1,0,1,0), char: "z"),
(seq: (0,1,0,0,0,0,0,1), char: "A"),
(seq: (0,1,0,0,0,0,1,0), char: "B"),
(seq: (0,1,0,0,0,0,1,1), char: "C"),
(seq: (0,1,0,0,0,1,0,0), char: "D"),
(seq: (0,1,0,0,0,1,0,1), char: "E"),
(seq: (0,1,0,0,0,1,1,0), char: "F"),
(seq: (0,1,0,0,0,1,1,1), char: "G"),
(seq: (0,1,0,0,1,0,0,0), char: "H"),
(seq: (0,1,0,0,1,0,0,1), char: "I"),
(seq: (0,1,0,0,1,0,1,0), char: "J"),
(seq: (0,1,0,0,1,0,1,1), char: "K"),
(seq: (0,1,0,0,1,1,0,0), char: "L"),
(seq: (0,1,0,0,1,1,0,1), char: "M"),
(seq: (0,1,0,0,1,1,1,0), char: "N"),
(seq: (0,1,0,0,1,1,1,1), char: "O"),
(seq: (0,1,0,1,0,0,0,0), char: "P"),
(seq: (0,1,0,1,0,0,0,1), char: "Q"),
(seq: (0,1,0,1,0,0,1,0), char: "R"),
(seq: (0,1,0,1,0,0,1,1), char: "S"),
(seq: (0,1,0,1,0,1,0,0), char: "T"),
(seq: (0,1,0,1,0,1,0,1), char: "U"),
(seq: (0,1,0,1,0,1,1,0), char: "V"),
(seq: (0,1,0,1,0,1,1,1), char: "W"),
(seq: (0,1,0,1,1,0,0,0), char: "X"),
(seq: (0,1,0,1,1,0,0,1), char: "Y"),
(seq: (0,1,0,1,1,0,1,0), char: "Z");
// binary sequence length
$seq-length: 8;
// create a selector
@function selector($s, $i, $v) {
@if $v == 0 {
@return "#in-#{$s}-#{$i}:not(:checked)";
} @else {
@return "#in-#{$s}-#{$i}:checked";
}
}
// for each letter
@each $item in $map {
// binary sequence for the letter
$seq: map-get($item, seq);
// generate the main text selector
$sel-text: "";
// generate the nav text selector
$sel-nav: "";
// for each group
@for $g from 1 through $seq-count {
// for each binary value
@for $i from 1 through $seq-length {
// get the value
$val: nth($seq, $i);
// get the selector
$sel: selector($g, $i, $val);
$sel-text: $sel-text + $sel;
$sel-nav: $sel-nav + $sel;
// if last, sibling combinator
@if $i != $seq-length {
$sel-text: $sel-text + " ~ ";
$sel-nav: $sel-nav + " ~ ";
}
}
// add output to selector
$sel-text: $sel-text + " ~ section .output-#{$g}:after";
$sel-nav: $sel-nav + " ~ nav div:nth-child(#{$g}):after";
// if not the last group, add comma
@if $g != $seq-count {
$sel-text: $sel-text + ", ";
$sel-nav: $sel-nav + ", ";
}
}
// add output content
#{$sel-text} {
content: "#{map-get($item, char)}";
}
// add nav content
#{$sel-nav} {
content: "“#{map-get($item, char)}”";
// frustrating that this is req'd,
// but i need "nil" to look smaller than a binary value
font-size: 1em;
}
}
// binary sequence length
$sel-label: "";
// for each binary sequence
@for $s from 1 through $seq-count {
// for each binary value
@for $i from 1 through $seq-length {
// style label
$sel-label: $sel-label + "#in-#{$s}-#{$i}:checked ~ nav [for='in-#{$s}-#{$i}']";
// if not the last binary value, add comma
@if $i != $seq-length {
$sel-label: $sel-label + ", ";
}
}
// if not the last group, add comma
@if $s != $seq-count {
$sel-label: $sel-label + ", ";
}
}
$px: 16px;
$per-row: 3;
$label-h: 3 * $px;
$label-w: 1.5 * $px;
$label-gutter: 0.4 * $px;
$label-time: 100ms;
$label-ease: ease-in-out;
$c-on: #D0D102;
$c-on: #FFCC00;
$c-off: #555;
$c-label: #00A1CB;
$c-dark: #616161;
$c-dark: #313131;
$c-light: #FFFDF7;
// styling active label
#{$sel-label} {
background: lighten($c-on, 30%);
&::after {
top: $label-h / 2 + $label-gutter / 2;
background: $c-on;
box-shadow: inset 0px 0px 0px 2px darken($c-on, 5%);
}
}
// body style
body {
background-color: $c-dark;
color: $c-light;
text-align: center;
padding-top: 2rem;
overflow-x: hidden;
}
input {
opacity: 0.5;
transform: scale(0.9);
// margin every 8
&:nth-of-type(8n) { margin-right: 0.5rem; }
// but not at end of row
&:nth-of-type(24n) { margin-right: 0; }
}
// inline-block every 1,2 br
br {
display: none;
&:nth-of-type(3n) { display: block; }
}
@import url(https://fonts.googleapis.com/css?family=Roboto:900italic);
$shad: 1px;
// styling the output
section {
text-align: center;
h1 {
font-size: 4rem;
font-family: Roboto, sans-serif;
font-style: italic;
color: $c-on;
letter-spacing: 0.025em;
span {
text-shadow: -2px -1px 0px lighten($c-on, 30%),
4px 4px 0px lighten($c-dark, 10%);
}
}
}
// styling the labels
$div-w: $label-w * $seq-length + ($label-gutter * ($seq-length - 1));
$div-gutter: 1.2 * $px;
nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 auto;
width: $div-w * $per-row + ($div-gutter * $per-row - 1);
div {
width: $div-w;
position: relative;
display: flex;
margin-bottom: 2.5 * $px + $div-gutter;
margin-left: $div-gutter;
&:hover:after { color: lighten($c-dark, 50%) }
&:nth-child(#{$per-row}n+1) { margin-left: 0; }
&::after {
content: "nil";
font-size: 0.7em;
position: absolute;
top: 100%;
left: 0;
right: 0;
display: block;
line-height: 2 * $px;
box-sizing: border-box;
font-family: Menlo, Andale Mono, monspace;
padding: 0.5 * $px 0.5rem;
text-align: center;
transition: color $label-time $label-ease;
color: lighten($c-dark, 10%);
}
label {
background: lighten($c-dark, 10%);
display: block;
height: $label-h;
width: $label-w;
border-radius: 4px;
position: relative;
cursor: pointer;
box-shadow:
//inset 0px 0px 0px 1px lighten($c-dark, 20%),
0px 0px 0px 1px lighten($c-dark, 10%);
transition: background $label-time $label-ease;
+ label { margin-left: $label-gutter; }
&::after {
content: "";
display: block;
position: absolute;
height: $label-h / 2 - $label-gutter;
width: calc(100% - #{$label-gutter});
left: $label-gutter / 2;
top: $label-gutter / 2;
border-radius: 4px;
background: $c-off;
box-shadow: inset 0px 0px 0px 2px darken($c-off, 5%);
transition: top $label-time $label-ease,
box-shadow $label-time $label-ease,
background $label-time $label-ease;
}
}
}
}
// styling the map
.map {
position: fixed;
top: 0; right: -100px; bottom: 0;
overflow: auto;
width: 140px;
font-size: 0.8em;
background: $c-dark;
border: 2px solid lighten($c-dark, 5%);
font-family: Menlo, Andale Mono, monspace;
box-sizing: border-box;
transition: right 200ms ease-in-out;
&:hover { right: 0; }
div {
display: flex;
padding: 0.5rem 0.25rem;
&:nth-child(odd) {
background: lighten($c-dark, 5%);
}
span {
&:nth-child(odd) {
flex: 1;
color: $c-on;
}
&:nth-child(even) {
flex: 3;
color: lighten($c-on, 30%);
}
text-align: center;
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.