Initial Release

2026-05-24 19:52:45 -07:00
commit 8242fdbbb3
181 changed files with 10119 additions and 0 deletions
@@ -0,0 +1,173 @@
+:root {
+    --animation-duration: 200ms;
+    --color-accent: hsl(236, 100%, 80%);
+    --color-background: hsl(0, 0%, 0%);
+    --color-font-primary: hsl(0, 0%, 95%);
+    --color-font-secondary: hsl(0, 0%, 65%);
+}
+
+::-webkit-scrollbar {
+    width: 0;
+}
+
+html,
+body {
+    margin: 0;
+    background-color: var(--color-background);
+    padding: 0;
+}
+
+p,
+a,
+span,
+button {
+    display: block;
+    transition: var(--animation-duration) ease-in-out color;
+    margin: 0;
+    border: none;
+    background-color: transparent;
+    padding: 0;
+    color: var(--color-font-primary);
+    font-style: normal;
+    font-weight: normal;
+    font-size: 1em;
+    line-height: 1.5em;
+    font-family: 'Poppins', monospace;
+    text-decoration: none;
+}
+
+button:hover,
+button:focus-visible,
+a[href]:hover,
+a[href]:focus-visible {
+    cursor: pointer;
+    color: var(--color-accent);
+    text-decoration: underline;
+}
+
+div.layout-wrapper {
+    margin: auto;
+    width: 1024px;
+}
+
+.layout-section {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 1024px;
+    height: fit-content;
+}
+
+div.layout-navigation {
+    display: flex;
+    margin-top: 16px;
+    padding: 0 32px;
+}
+
+div.layout-navigation div.section {
+    display: flex;
+    align-items: center;
+    margin-top: 16px;
+}
+
+div.layout-navigation div.section a {
+    padding: 0 16px;
+    letter-spacing: 2px;
+    text-align: center;
+    text-decoration: none;
+}
+
+div.layout-navigation div.section span {
+    padding: 0 16px;
+    color: var(--color-font-secondary);
+    font-size: x-small;
+}
+
+div.layout-navigation div.divider {
+    flex-basis: 100%;
+}
+
+p.layout-message {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    width: 100%;
+    color: var(--color-font-secondary);
+    font-size: x-small;
+    line-height: 2em;
+    text-align: center;
+}
+
+div.layout-footer {
+    display: flex;
+    gap: 16px;
+    padding: 0 64px;
+}
+
+div.layout-footer img.barcode {
+    border-right: 1px solid var(--color-font-secondary);
+    padding: 8px 16px 8px 0;
+    image-rendering: pixelated;
+    width: 64px;
+    height: 64px;
+}
+
+div.layout-footer div.tooltip {
+    display: grid;
+    flex-basis: 100%;
+    min-width: 400px;
+    font-size: small;
+}
+
+div.layout-footer div.tooltip p.header {
+    font-weight: bold;
+}
+div.layout-footer div.tooltip p.description {
+    height: 3em;
+    overflow: hidden;
+    line-height: 1.5em;
+}
+
+div.layout-footer div.tooltip a.redirect {
+    opacity: 0;
+    padding-top: 8px;
+    pointer-events: none;
+    color: var(--color-font-secondary);
+}
+
+/* Mobile */
+@media only screen and (max-width: 600px) {
+    div.layout-wrapper {
+        width: 100%;
+    }
+
+    div.layout-navigation {
+        flex-wrap: wrap;
+        justify-content: center;
+        padding: 0 16px;
+    }
+
+    canvas.layout-display {
+        padding: 16px 0;
+    }
+
+    div.layout-footer {
+        display: grid;
+        justify-items: center;
+        padding: 0 16px;
+        width: 100%;
+    }
+
+    div.layout-footer div.tooltip {
+        min-width: 0;
+    }
+    div.layout-footer div.tooltip p.description {
+        height: fit-content;
+    }
+
+    div.layout-footer img.barcode {
+        display: none;
+    }
+}