Make homepage A E S T H E T I C

type: documentation
casey · Apr 8, 2020 · 9ff627c · 9ff627c
1 parent 460cf9e
commit 9ff627c
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 1 deletion.
diff --git a/docs/index.css b/docs/index.css
@@ -0,0 +1,64 @@
+:root {
+  --width-target:      calc(100vw / 6);
+  --height-target:     calc(100vh / 3);
+  --size:              min(var(--width-target), var(--height-target));
+  --margin-vertical:   calc((100vh - var(--size) * 2) / 2);
+  --margin-horizontal: calc((100vw - var(--size) * 5) / 2);
+}
+
+* {
+  margin:  0;
+  padding: 0;
+}
+
+html {
+  background-color: black;
+  color:            white;
+  font-family:      sans-serif;
+  font-size:        var(--size);
+  line-height:      var(--size);
+  overflow:         hidden;
+  text-align:       center;
+}
+
+a {
+  color:           white;
+  text-decoration: none;
+}
+
+table {
+  border-collapse: collapse;
+  margin-bottom:   var(--margin-vertical);
+  margin-left:     var(--margin-horizontal);
+  margin-right:    var(--margin-horizontal);
+  margin-top:      var(--margin-vertical);
+}
+
+td {
+  border-style: dashed;
+  border-width: 1px;
+  height: var(--size);
+  width:  var(--size);
+}
+
+/* intermodal is an isogram */
+#i:after        { content:'I'; }
+#i:hover:after  { content:'私'; }
+#n:after        { content:'N'; }
+#n:hover:after  { content:'∅'; }
+#t:after        { content:'T'; }
+#t:hover:after  { content:'࿈'; }
+#e:after        { content:'E'; }
+#e:hover:after  { content:'Ə'; }
+#r:after        { content:'R'; }
+#r:hover:after  { content:'ℜ'; }
+#m:after        { content:'M'; }
+#m:hover:after  { content:'☾'; }
+#o:after        { content:'O'; }
+#o:hover:after  { content:'ꙮ'; }
+#d:after        { content:'D'; }
+#d:hover:after  { content:'↓'; }
+#a:after        { content:'A'; }
+#a:hover:after  { content:'א'; }
+#l:after        { content:'L'; }
+#l:hover:after  { content:'し'; }
diff --git a/docs/index.html b/docs/index.html
@@ -4,9 +4,27 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>I N T E R M O D A L</title>
+    <link href="index.css" rel="stylesheet" type="text/css">
   </head>
   <body>
-    <a href="https://github.com/casey/intermodal">github</a>
+    <a href="https://github.com/casey/intermodal">
+      <table>
+        <tr>
+          <td id="i"></td>
+          <td id="n"></td>
+          <td id="t"></td>
+          <td id="e"></td>
+          <td id="r"></td>
+        </tr>
+        <tr>
+          <td id="m"></td>
+          <td id="o"></td>
+          <td id="d"></td>
+          <td id="a"></td>
+          <td id="l"></td>
+        </tr>
+      </table>
+    </a>
   </body>
 </html>
 <!-- Love, Casey -->
diff --git a/justfile b/justfile
@@ -64,6 +64,10 @@ publish: publish-check
 	git tag -a {{version}} -m 'Release {{version}}'
 	git push github {{version}}
 
+# open github pages index
+open-pages:
+	open docs/index.html
+
 # retrieve large collection of torrents from the Internet Archive
 get-torrents:
 	aria2c \