//- twelve binary letters
- var groups = 12, g = 0;
//- hello world default checks
- var checks = [[0,1,0,0,1,0,0,0],[0,1,1,0,0,1,0,1],[0,1,1,0,1,1,0,0],[0,1,1,0,1,1,0,0],[0,1,1,0,1,1,1,1],[0,0,1,0,0,0,0,0],[0,1,0,1,0,1,1,1],[0,1,1,0,1,1,1,1],[0,1,1,1,0,0,1,0],[0,1,1,0,1,1,0,0],[0,1,1,0,0,1,0,0],[0,0,1,0,0,0,0,1]]
while g < groups
- var x = 0
while x < 8
if g < checks.length && checks[g][x] == 1
input(type="checkbox" id="in-#{g + 1}-#{x + 1}" checked)
else
input(type="checkbox" id="in-#{g + 1}-#{x + 1}")
- x++
br
- g++
section
- g = 0
h1
while g < groups
span(class="output-#{g + 1}")
- g++
nav
- g = 0
while g < groups
- var x = 0
div
while x < 8
label(for="in-#{g + 1}-#{x + 1}")
- x++
- g++
.map
div
span="a"
span="01100001"
div
span="b"
span="01100010"
div
span="c"
span="01100011"
div
span="d"
span="01100100"
div
span="e"
span="01100101"
div
span="f"
span="01100110"
div
span="g"
span="01100111"
div
span="h"
span="01101000"
div
span="i"
span="01101001"
div
span="j"
span="01101010"
div
span="k"
span="01101011"
div
span="l"
span="01101100"
div
span="m"
span="01101101"
div
span="n"
span="01101110"
div
span="o"
span="01101111"
div
span="p"
span="01110000"
div
span="q"
span="01110001"
div
span="r"
span="01110010"
div
span="s"
span="01110011"
div
span="t"
span="01110100"
div
span="u"
span="01110101"
div
span="v"
span="01110110"
div
span="w"
span="01110111"
div
span="x"
span="01111000"
div
span="y"
span="01111001"
div
span="z"
span="01111010"
div
span="A"
span="01000001"
div
span="B"
span="01000010"
div
span="C"
span="01000011"
div
span="D"
span="01000100"
div
span="E"
span="01000101"
div
span="F"
span="01000110"
div
span="G"
span="01000111"
div
span="H"
span="01001000"
div
span="I"
span="01001001"
div
span="J"
span="01001010"
div
span="K"
span="01001011"
div
span="L"
span="01001100"
div
span="M"
span="01001101"
div
span="N"
span="01001110"
div
span="O"
span="01001111"
div
span="P"
span="01010000"
div
span="Q"
span="01010001"
div
span="R"
span="01010010"
div
span="S"
span="01010011"
div
span="T"
span="01010100"
div
span="U"
span="01010101"
div
span="V"
span="01010110"
div
span="W"
span="01010111"
div
span="X"
span="01011000"
div
span="Y"
span="01011001"
div
span="Z"
span="01011010"
div
span="0"
span="00110000"
div
span="1"
span="00110001"
div
span="2"
span="00110010"
div
span="3"
span="00110011"
div
span="4"
span="00110100"
div
span="5"
span="00110101"
div
span="6"
span="00110110"
div
span="7"
span="00110111"
div
span="8"
span="00111000"
div
span="9"
span="00111001"
div
span=" "
span="00100000"
div
span="!"
span="00100001"
div
span="\""
span="00100010"
div
span="#"
span="00100011"
div
span="$"
span="00100100"
div
span="%"
span="00100101"
div
span="&"
span="00100110"
div
span="'"
span="00100111"
div
span="("
span="00101000"
div
span=")"
span="00101001"
div
span="*"
span="00101010"
div
span="+"
span="00101011"
div
span=","
span="00101100"
div
span="-"
span="00101101"
div
span="."
span="00101110"
div
span="/"
span="00101111"
div
span=":"
span="00111010"
div
span=";"
span="00111011"
div
span="<"
span="00111100"
div
span="="
span="00111101"
div
span=">"
span="00111110"
div
span="?"
span="00111111"
div
span="@"
span="01000000"
div
span="["
span="01011011"
div
span="\\"
span="01011100"
div
span="]"
span="01011101"
div
span="^"
span="01011110"
div
span="_"
span="01011111"
div
span="`"
span="01100000"
div
span="{"
span="01111011"
div
span="|"
span="01111100"
div
span="}"
span="01111101"
div
span="~"
span="01111110"// how many binary groups
$seq-count: 12;
// 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.