first commit

assets/style.css

@@ -0,0 +1,140 @@
+* {
+    --touch-size: 5em;
+    --touch-gap: 0.25em;
+
+    --border-style: 2px solid var(--text-color);
+    --text-color: brown;
+    --bright-color: deeppink;
+    --line-height: 1.2em;
+    --indent: 0.9rem;
+}
+
+body {
+    font-family: ft88;
+    color: var(--text-color);
+}
+
+main {
+}
+
+details {
+    position: relative;
+}
+
+details > :not(summary) {
+    margin-left: var(--indent);
+    color: var(--bright-color);
+}
+
+details > summary {
+    color: var(--text-color);
+}
+
+details[open]::before {
+    content: "";
+    position: absolute;
+    top: var(--line-height);
+    bottom: 0;
+    left: 0.2em;
+    border-left: var(--border-style);
+}
+
+summary {
+}
+
+.box {
+    max-width: 40rem;
+    border: var(--border-style);
+    padding: 1em;
+    margin-bottom: var(--line-height);
+}
+
+#test1 {
+    font-family: ft88;
+}
+
+#test2 {
+    font-family: Univers LT Std 55;
+}
+
+#test3 {
+    font-family: Arcade classic;
+}
+
+#test4 {
+    font-family: Bitcount Single;
+}
+
+#test5 {
+    font-family: FedraNine;
+    font-weight: bold;
+}
+
+#test6 {
+    font-family: FedraEleven Normal;
+}
+
+h1 {
+    margin: 0;
+    padding: 0;
+}
+
+p {
+    margin: 0;
+}
+
+a {
+    color: dodgerblue;
+}
+
+address {
+    font-style: normal;
+}
+
+#keyboard {
+    text-align: center;
+    display: none;
+}
+
+#keyboard span {
+    font-family: sans-serif;
+    display: inline-flex;
+    margin: var(--touch-gap);
+    width: var(--touch-size);
+    height: var(--touch-size);
+    background-color: bisque;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+}
+
+#fingers {
+    display: none;
+}
+
+#fingers img {
+    width: 30px;
+}
+
+#keyboard span.space-bar {
+    width: calc(8 * var(--touch-size));
+}
+
+.cover {
+    font-size: 9em;
+    height: fit-content;
+    position: relative;
+    padding-bottom: 1.5em;
+}
+
+.code {
+    /* transform: rotate(30deg); */
+    position: relative;
+    /* top: 1em; */
+}
+
+.interface {
+    /* transform: rotate(-30deg); */
+    position: relative;
+    /* top: 1em; */
+}

references/Interfaces Conference – Rectangle.webloc

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>URL</key>
+	<string>https://rectangle.design/interfaces-conference/</string>
+</dict>
+</plist>

references/WHAP! Fall 2016 poster - Fonts In Use.webloc

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>URL</key>
+	<string>https://fontsinuse.com/uses/23648/whap-fall-2016-poster</string>
+</dict>
+</plist>