site rework!!

1 files changed, 86 insertions, 0 deletions

diff --git a/assets/css/prismite.page.css b/assets/css/prismite.page.css
new file mode 100644
index 0000000..2eb7b9c
--- /dev/null
+++ b/assets/css/prismite.page.css
@@ -0,0 +1,86 @@
+main {
+    background-color: var(--bg);
+    color: var(--fg);
+}
+
+nav .tab {
+    --color: var(--bg-low);
+}
+
+nav .tab.active {
+    --color: var(--bg);
+    color: var(--fg);
+}
+
+#triangles {
+    opacity: 0.5;
+}
+
+#logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    line-height: 1.25;
+    font-family: "Aporetic Mono", monospace;
+    margin-bottom: var(--padding-big);
+}
+
+#logo > span {
+    white-space: pre;
+}
+
+#color_showcase {
+    color: var(--bg);
+    margin-top: var(--padding-big);
+    max-width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--padding-big);
+}
+
+#color_showcase > div {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: var(--padding-big);
+}
+
+#color_showcase > div:not(:first-child) {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(20vw, 1fr));
+}
+
+#color_showcase > div > ol {
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    padding-top: 0;
+    padding-inline-start: 0;
+    margin-block: 0;
+    flex-direction: row;
+    margin: 0;
+    display: flex;
+    gap: var(--padding);
+}
+
+#color_showcase > div > ol > li {
+    padding: var(--padding);
+    font-size: 0.75em;
+    transition: color 0.3s var(--easing);
+    font-family: "Aporetic Mono", monospace;
+    flex: 1;
+    margin: 0;
+    list-style-type: none;
+}
+
+#color_showcase > div:last-child > ol {
+    flex-direction: column;
+}
+
+.fg-light {
+    color: var(--fg);
+}
+
+main > div > h2 {
+    text-align: center;
+}