From c298fa4d4cc4277c1f7c2a54d9fb98b395b9bc12 Mon Sep 17 00:00:00 2001
From: winter
Date: Mon, 13 Jan 2025 21:12:22 +0000
Subject: tidy stylesheets and improve replies styling

---
 static/skeleton.css | 110 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 static/skeleton.css

(limited to 'static/skeleton.css')

diff --git a/static/skeleton.css b/static/skeleton.css
new file mode 100644
index 0000000..a7b7009
--- /dev/null
+++ b/static/skeleton.css
@@ -0,0 +1,110 @@
+html,
+body {
+  background: #fdf5ff;
+  color: #0f070f;
+  margin: 0;
+  padding: 0;
+  font-family: "DM Sans", sans-serif;
+  font-size: 12pt;
+  display: grid;
+  grid-template-rows: max-content 1fr;
+  justify-items: center;
+  min-height: 100vh;
+  width: 100%;
+}
+
+header {
+  background: #3b005e;
+  color: white;
+  position: sticky;
+  top: 0;
+  padding: 8px;
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+#siteTitle {
+  font-weight: bold;
+}
+
+nav {
+  width: min(800px, 100%);
+  height: 32px;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 1fr max-content 1fr;
+  align-items: center;
+
+  > * {
+    margin: 0 8px;
+  }
+
+  > :last-child {
+    display: grid;
+    grid-template-columns: 1fr max-content;
+    align-items: center;
+    justify-self: end;
+    gap: 8px;
+  }
+
+  ul {
+    list-style: none;
+    display: inline;
+    padding: 0;
+    > li {
+      display: inline;
+      > .navlink {
+        border-radius: 4px;
+        background: #fff3;
+        padding: 4px 8px;
+        color: white;
+        text-decoration: none;
+        &.disabled {
+          opacity: 0.6;
+        }
+      }
+    }
+  }
+  img.avatar {
+    width: 32px;
+    aspect-ratio: 1;
+  }
+}
+
+main {
+  width: min(1300px, 100%);
+  display: grid;
+  grid-template-columns: 1fr min(700px, 100%) 1fr;
+  height: 100%;
+  #leftPane,
+  #rightPane {
+    position: sticky;
+    top: 56px;
+    height: max-content;
+  }
+  @media (width < 1300px) {
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+  }
+}
+
+h1 {
+  margin: 32px 16px;
+  padding: 0;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #5554;
+  margin: 0px 16px;
+}
+
+.placeholder {
+  font-style: italic;
+  color: #555;
+  text-align: center;
+}
-- 
cgit v1.3