Initial Preview release

Signed-off-by: mctaylors <cantsendmails@mctaylors.ru>

assets/common.css

@@ -0,0 +1,55 @@
+@import url(fonts.css);
+
+:root {
+    --background-color: black;
+    --selection-color: #111;
+    --font-color: #eee;
+    color: var(--font-color);
+    background-color: var(--background-color);
+    font-family: "Inter Tight", sans-serif;
+}
+
+body {
+    justify-content: center;
+    margin-bottom: 48px;
+}
+
+.card {
+    background-color: var(--background-color);
+    margin: 4px;
+    border: 1px solid #444;
+    border-radius: 16px;
+    transition: 200ms;
+}
+
+.card:hover {
+    background-color: var(--selection-color);
+    cursor: pointer;
+}
+
+.content {
+    margin: 8px;
+}
+
+a {
+    color: var(--font-color);
+}
+
+a.card {
+    text-decoration: none;
+}
+
+.footer > a {
+    font-weight: bold;
+}
+
+.footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    padding: 14px 0;
+    text-align: center;
+    background-color: #000a;
+    backdrop-filter: blur(8px);
+}

assets/fonts.css

@@ -0,0 +1,11 @@
+@font-face {
+    font-family: 'Inter Tight';
+    font-style: normal;
+    src: url(fonts/InterTight-VariableFont_wght.woff2);
+}
+
+@font-face {
+    font-family: 'Inter Tight';
+    font-style: italic;
+    src: url(fonts/InterTight-Italic-VariableFont_wght.woff2);
+}

assets/index.css

@@ -0,0 +1,24 @@
+body {
+    display: grid;
+}
+
+.card {
+    display: flex;
+    width: 600px;
+    max-width: 95vw;
+}
+
+.card > img {
+    margin: 4px;
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+}
+
+.content > .title {
+    font-weight: bold;
+}
+
+.content > .duration {
+    color: #aaa;
+}

assets/root.css

@@ -0,0 +1,16 @@
+body {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.card > img {
+    margin: 8px 8px 0 8px;
+    width: 192px;
+    height: 192px;
+    border-radius: 8px;
+}
+
+.content {
+    text-align: center;
+    font-weight: bold;
+}