1 files changed, 184 insertions, 0 deletions
diff --git a/assets/css/main.css b/assets/css/main.css
index e69de29..017f084 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -0,0 +1,184 @@
+/*
+    Variable declarations
+ */
+:root {
+    --green: #296431;
+    --light-grey: #6a6a6a;
+    --grey: #3d3d3d;
+}
+
+/*
+    Set global configuration
+ */
+* {
+    transition: background-color .5s;
+}
+
+html, body {
+    font-family: sans-serif;
+    min-height: 100vh;
+    max-width: 100vw;
+    overflow-x: hidden;
+    padding: 0;
+    margin: 0;
+}
+
+pre {
+    float: right;
+}
+
+/*
+    Navigation bar
+ */
+.navbar {
+    width: 100vw;
+    background: var(--grey);
+    overflow: hidden;
+}
+
+.navbar a {
+    display: block;
+    color: white;
+    float: left;
+    text-align: center;
+    padding: 15px;
+    text-decoration: none;
+}
+
+.navbar a[data-current] {
+    background: var(--green)
+}
+
+.navbar a:hover {
+    background: var(--light-grey)
+}
+
+.navbar a:first-child:hover {
+    background: var(--grey)
+}
+
+.navbar a[data-current]:hover {
+    background: var(--green)
+}
+
+/*
+    Content
+ */
+.content {
+    padding: 20px;
+}
+
+.content .heading {
+    font: normal small-caps normal 24px/1.4 sans-serif;
+}
+
+button {
+    border: none;
+    padding: 10px;
+    color: white;
+    background: var(--green);
+}
+
+a {
+    color: var(--green);
+    text-decoration: none;
+}
+
+p {
+    margin-bottom: 10px;
+}
+
+li[data-contrast] {
+    font-size: 24px;
+    text-shadow: -.5px 0 black, 0 .5px black, 1px 0 black, 0 -.5px black;
+}
+
+.content figure {
+    text-align: center;
+    margin: 10px auto;
+}
+
+.content figcaption {
+    font-size: 12px;
+}
+
+.content .not {
+    border-top: 1px solid black;
+}
+
+footer {
+    margin: 10px;
+}
+
+/*
+    KV-Diagram layout
+ */
+.true {
+    color: green;
+}
+
+.false {
+    color: red;
+}
+
+table * {
+    text-align: center;
+}
+
+td, th {
+    border: 1px solid black;
+    padding: 5px;
+}
+
+td.output {
+    background-color: lightgrey;
+}
+
+.kv-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    justify-items: center;
+    align-items: center;
+    width: calc(50px * 6);
+    height: calc(50px * 6);
+}
+
+.kv-grid div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    border-left: 1px solid black;
+    border-bottom: 1px solid black;
+}
+
+.grid-child:nth-child(1), .grid-child:nth-child(6), .grid-child:nth-child(31), .grid-child:nth-child(36),
+.grid-child:nth-child(2), .grid-child:nth-child(5), .grid-child:nth-child(7), .grid-child:nth-child(25) {
+    border: 0;
+}
+
+.grid-child:nth-child(4), .grid-child:nth-child(12), .grid-child:nth-child(24) {
+    border-top: 0;
+    border-right: 0;
+}
+
+.grid-child:nth-child(18), .grid-child:nth-child(30), .grid-child:nth-child(33), .grid-child:nth-child(35) {
+    border-bottom: 0;
+    border-right: 0;
+}
+
+.grid-child:nth-child(3), .grid-child:nth-child(13) {
+    border-top: 0;
+    border-left: 0;
+}
+
+.grid-child:nth-child(19), .grid-child:nth-child(34), .grid-child:nth-child(32) {
+    border-bottom: 0;
+    border-left: 0;
+}
+
+.grid-child:nth-child(2), .grid-child:nth-child(5) {
+    border-bottom: 1px solid black;
+}