combobulate the stylesheets (and some other minor changes)

7 files changed, 193 insertions, 115 deletions

diff --git a/static/form.css b/static/form.css
index 0e0f978..a109c7f 100644
--- a/static/form.css
+++ b/static/form.css
@@ -1,31 +1,31 @@
 form {
-  border: 1px solid #3334;
-  background: #9892;
-  border-radius: 8px;
-  margin: 16px;
-  padding: 16px;
+  border: var(--border);
+  background: var(--clr-panel-background);
+  border-radius: var(--border-radius);
+  margin: var(--spacing-double);
+  padding: var(--spacing-double);
   display: grid;
   grid-auto-flow: row;
-  gap: 8px;
+  gap: var(--spacing-single);
   max-width: max-content;
 
   label:has(+ input, + textarea, + select) {
     display: block;
-    font-size: 10pt;
-    color: #555;
+    font-size: var(--font-small-size);
+    color: var(--clr-lesser-foreground);
   }
   input:not([type="checkbox"]),
   textarea,
   select {
     display: block;
-    border: 1px solid #3334;
-    border-radius: 8px;
-    margin: 8px 0;
-    padding: 8px;
+    border: var(--border);
+    border-radius: var(--border-radius);
+    margin: var(--spacing-single) 0;
+    padding: var(--spacing-single);
     font-family: inherit;
     font-size: inherit;
     color: inherit;
-    background: #fff;
+    background: var(--clr-field-background);
     width: min(60vw, 24em, 100%);
     box-sizing: border-box;
   }
@@ -36,10 +36,10 @@ form {
     width: 100%;
   }
   .error {
-    background: #f004;
-    border: 1px solid #f007;
-    border-radius: 8px;
-    padding: 16px;
+    background: var(--clr-error-background);
+    border: var(--border);
+    border-radius: var(--border-radius);
+    padding: var(--spacing-double);
     margin: 0;
   }
 
@@ -48,7 +48,7 @@ form {
     border: none;
     padding: 0;
     margin: 0;
-    margin-top: 8px;
+    margin-top: var(--spacing-single);
     max-width: 100%;
     input:not([type="checkbox"]),
     textarea,
diff --git a/static/misc.css b/static/misc.css
index 9a5c198..6b88e63 100644
--- a/static/misc.css
+++ b/static/misc.css
@@ -1,11 +1,11 @@
 .alertbox {
-  border: 1px solid;
-  border-radius: 8px;
-  margin: 16px;
-  padding: 16px;
+  border: var(--border);
+  border-radius: var(--border-radius);
+  margin: var(--spacing-double);
+  padding: var(--spacing-double);
   &.info {
-    border-color: #23f4;
-    background: #5673ff44;
+    /*border-color: #23f4;*/
+    background: var(--clr-info-background);
   }
   p {
     margin: 0;
@@ -15,24 +15,25 @@
 
 button.primary,
 button.secondary {
-  font-family: inherit;
-  font-size: inherit;
-  border-radius: 8px;
+  border-radius: var(--border-radius);
   border: none;
-  padding: 8px 16px;
+  padding: var(--spacing-single) var(--spacing-double);
   box-sizing: border-box;
   cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: bold;
   &:disabled {
     opacity: 80%;
     cursor: default;
   }
   &.primary {
-    background: #3b005e;
-    color: #fff;
+    background: var(--clr-primary);
+    color: var(--clr-foreground-on-primary);
   }
   &.secondary {
-    background: #dfd4e7;
-    color: #202;
+    background: var(--clr-secondary);
+    color: var(--clr-foreground-on-secondary);
   }
 }
 
@@ -47,10 +48,11 @@ button.icon {
   }
 }
 
-a.icon {
+.icon {
   color: inherit;
   text-decoration: none;
-  font-size: 24px;
+  font-size: var(--icon-size);
+  user-select: none;
 }
 
 span.inlineIcon {
@@ -60,15 +62,22 @@ span.inlineIcon {
 }
 
 span.unreadIndicator {
-  background: #3b005e;
-  color: #fff;
-  width: 24px;
-  height: 24px;
-  border-radius: 12px;
+  background: var(--clr-primary);
+  color: var(--clr-foreground-on-primary);
+  width: var(--icon-size);
+  aspect-ratio: 1;
+  font-size: calc(var(--icon-size) * 0.65);
+  border-radius: calc(var(--icon-size) / 2);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
+
+  &.reduced {
+    width: calc(var(--icon-size) / 2);
+    border-radius: calc(var(--icon-size) / 4);
+    font-size: 0;
+  }
 }
 
 [hidden] {
diff --git a/static/note.css b/static/note.css
index cd9166c..84f079c 100644
--- a/static/note.css
+++ b/static/note.css
@@ -1,23 +1,27 @@
 .timelineReason {
-  background: #fee4;
-  border: 1px solid #3b005e44;
+  background: var(--clr-note-background);
+  border: var(--border);
   border-bottom: none;
-  border-radius: 8px 8px 0 0;
-  margin: 16px 16px -16px 16px;
-  padding: 8px;
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  margin: var(--spacing-double) var(--spacing-double)
+    calc(-1 * var(--spacing-double)) var(--spacing-double);
+  padding: var(--spacing-single);
   display: grid;
   grid-template-columns: max-content 1fr;
   align-items: center;
-  gap: 8px;
+  gap: var(--spacing-single);
 
   .icon {
-    font-size: 24px;
+    font-size: var(--icon-size);
     user-select: none;
   }
   a {
     text-decoration: none;
     font-weight: bold;
     color: inherit;
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   + article.note {
@@ -27,39 +31,39 @@
 }
 
 article.note {
-  background: #fee4;
-  border: 1px solid #3b005e44;
-  border-radius: 8px;
-  margin: 16px;
-  padding: 16px;
+  background: var(--clr-note-background);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  margin: var(--spacing-double);
+  padding: var(--spacing-double);
   display: grid;
   grid-template-columns: max-content 1fr;
-  gap: 16px;
+  gap: var(--spacing-double);
 
   img.avatar {
-    width: 64px;
+    width: var(--avatar-size);
     aspect-ratio: 1;
   }
 
   &.selected {
-    background: #ebf4;
+    background: var(--clr-note-selected-background);
   }
 
   .content {
-    font-size: 12pt;
-    padding: 4px 0;
+    font-size: var(--font-normal-size);
+    padding: var(--spacing-half) 0;
     .selected & {
-      font-size: 16pt;
+      font-size: var(--font-big-size);
     }
 
     summary {
-      border: 1px solid #5e380044;
-      border-radius: 8px;
-      padding: 8px 16px;
-      background: #ffda6144;
+      border: var(--border);
+      border-radius: var(--border-radius);
+      padding: var(--spacing-single) var(--spacing-double);
+      background: var(--clr-warning-background);
     }
     details[open] > summary {
-      margin-bottom: 8px;
+      margin-bottom: var(--spacing-single);
     }
   }
 
@@ -67,15 +71,20 @@ article.note {
     display: grid;
     grid-template-columns: max-content 1fr max-content max-content;
     align-items: baseline;
-    margin-bottom: 4px;
-    gap: 8px;
+    margin-bottom: var(--spacing-half);
+    gap: var(--spacing-single);
 
     .authorName {
       font-weight: bold;
+      color: inherit;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
     }
     .authorHandle,
     .timestamp {
-      font-size: 10pt;
+      font-size: var(--font-small-size);
       text-overflow: ellipsis;
       overflow: hidden;
     }
@@ -92,8 +101,8 @@ article.note {
   }
 
   .replyInfo a {
-    font-size: 10pt;
-    color: #555;
+    font-size: var(--font-small-size);
+    color: var(--clr-lesser-foreground);
     text-decoration: none;
     &:hover {
       text-decoration: underline;
@@ -101,40 +110,40 @@ article.note {
   }
 
   .buttons {
-    margin-top: 8px;
+    margin-top: var(--spacing-single);
     padding: 0;
     display: grid;
     grid-auto-flow: column;
-    gap: 16px;
+    gap: var(--spacing-double);
     width: max-content;
 
     .interactButtonContainer {
       display: flex;
       align-items: center;
-      color: #3b005e44;
+      color: var(--clr-action-default);
 
       &.like.active {
-        color: #8c22d8;
+        color: var(--clr-action-like);
       }
       &.dislike.active {
-        color: #c02e2e;
+        color: var(--clr-action-dislike);
       }
       &.reshare.active {
-        color: #21a821;
+        color: var(--clr-action-reshare);
       }
       &.reply.active {
-        color: #0761b6;
+        color: var(--clr-action-reply);
       }
     }
 
     label {
-      margin-left: 4px;
+      margin-left: var(--spacing-half);
       font-weight: bold;
     }
 
     button {
-      width: 24px;
-      font-size: 24px;
+      width: var(--icon-size);
+      font-size: var(--icon-size);
       cursor: pointer;
       color: inherit;
 
diff --git a/static/profile.css b/static/profile.css
index 3912e82..0814cbb 100644
--- a/static/profile.css
+++ b/static/profile.css
@@ -1,26 +1,26 @@
 .fullProfile {
-  border-radius: 8px;
-  margin: 16px;
-  padding: 16px;
-  border: 1px solid #23f4;
-  background: #e6eaff44;
+  border-radius: var(--border-radius);
+  margin: var(--spacing-double);
+  padding: var(--spacing-double);
+  border: var(--border);
+  background: var(--clr-profile-background);
 
   .basicInfo {
     display: grid;
     grid-template-columns: max-content 1fr max-content;
-    gap: 16px;
+    gap: var(--spacing-double);
 
     img.avatar {
-      width: 96px;
+      width: var(--avatar-big-size);
       aspect-ratio: 1;
     }
     .displayName {
-      font-size: 16pt;
+      font-size: var(--font-big-size);
       font-weight: bold;
     }
     .handle,
     .joinedDate {
-      font-size: 10pt;
+      font-size: var(--font-small-size);
     }
   }
 
@@ -29,13 +29,13 @@
     justify-content: end;
     align-items: baseline;
     grid-auto-flow: column;
-    gap: 16px;
+    gap: var(--spacing-double);
 
     .pendingInfo {
       display: grid;
       align-items: baseline;
       grid-auto-flow: column;
-      gap: 16px;
+      gap: var(--spacing-double);
     }
   }
 }
diff --git a/static/skeleton.css b/static/skeleton.css
index bd68c93..6526c29 100644
--- a/static/skeleton.css
+++ b/static/skeleton.css
@@ -1,10 +1,10 @@
 body {
-  background: #fdf5ff;
-  color: #0f070f;
+  background: var(--clr-background);
+  color: var(--clr-foreground);
   margin: 0;
   padding: 0;
-  font-family: "DM Sans", sans-serif;
-  font-size: 12pt;
+  font-family: var(--font-family);
+  font-size: var(--font-normal-size);
   display: grid;
   grid-template-rows: max-content 1fr;
   justify-items: center;
@@ -14,12 +14,12 @@ body {
 }
 
 header {
-  background: #3b005e;
-  color: white;
+  background: var(--clr-primary);
+  color: var(--clr-foreground-on-primary);
   position: sticky;
   top: 0;
-  padding: 8px;
-  margin-bottom: 8px;
+  padding: var(--spacing-single);
+  margin-bottom: var(--spacing-single);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -32,7 +32,7 @@ header {
 }
 
 nav {
-  width: min(800px, 100%);
+  width: min(900px, 100%);
   height: 32px;
   box-sizing: border-box;
   display: grid;
@@ -48,7 +48,7 @@ nav {
     grid-template-columns: 1fr max-content;
     align-items: center;
     justify-self: end;
-    gap: 8px;
+    gap: var(--spacing-single);
   }
 
   ul {
@@ -58,42 +58,49 @@ nav {
     > li {
       display: inline;
       > .navlink {
-        border-radius: 4px;
-        background: #fff3;
-        padding: 4px 8px;
-        color: white;
+        border-radius: var(--spacing-half); /* --border-radius ???? */
+        background: var(--clr-lighter-primary);
+        padding: var(--spacing-half) var(--spacing-single);
+        color: var(--clr-foreground-on-primary);
         text-decoration: none;
+        user-select: none;
         &.disabled {
           opacity: 0.6;
         }
       }
     }
+    @media (width < 600px) {
+      max-width: 0;
+      max-height: 0;
+      font-size: 0;
+      visibility: hidden;
+    }
   }
   img.avatar {
-    width: 32px;
+    width: var(--icon-size);
     aspect-ratio: 1;
   }
 }
 
 ul.sideNavigation {
-  border: 1px solid #3334;
-  border-radius: 8px;
-  margin: 16px;
+  border: var(--border);
+  border-radius: var(--border-radius);
+  margin: var(--spacing-double);
   padding: 0;
-  background: #f8e9ff5e;
+  background: var(--clr-panel-background);
   list-style: none;
   > li a {
     display: grid;
     grid-template-columns: max-content 1fr max-content;
     align-items: center;
     justify-content: start;
-    padding: 16px;
-    gap: 16px;
+    padding: var(--spacing-double);
+    gap: var(--spacing-double);
     color: inherit;
     text-decoration: none;
   }
   > li:not(:last-child) {
-    border-bottom: 1px solid #3334;
+    border-bottom: var(--border);
   }
 }
 
@@ -109,20 +116,23 @@ main {
     height: max-content;
   }
   @media (width < 1300px) {
-    grid-auto-flow: row;
-    grid-template-columns: 1fr;
+    #leftPane,
+    #rightPane {
+      max-width: 0;
+      visibility: hidden;
+    }
   }
 }
 
 h1 {
-  margin: 32px 16px;
+  margin: var(--spacing-quadruple) var(--spacing-double);
   padding: 0;
 }
 
 hr {
   border: none;
-  border-top: 1px solid #5554;
-  margin: 0px 16px;
+  border-top: var(--border);
+  margin: 0 var(--spacing-double);
 }
 
 .placeholder {
diff --git a/static/style.css b/static/style.css
index da65e4a..d5078bb 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,3 +1,4 @@
+@import url(theme.css);
 @import url(skeleton.css);
 @import url(note.css);
 @import url(form.css);
diff --git a/static/theme.css b/static/theme.css
new file mode 100644
index 0000000..a01dd3a
--- /dev/null
+++ b/static/theme.css
@@ -0,0 +1,49 @@
+:root {
+  /* colours */
+  --clr-primary: #3b005e;
+  --clr-secondary: #dfd4e7;
+  --clr-lighter-primary: #62337e;
+  --clr-positive: #21a821;
+  --clr-negative: #c02e2e;
+  --clr-neutral: #0761b6;
+  --clr-background: #fdf5ff;
+  --clr-note-background: #fef4fb;
+  --clr-note-selected-background: #feeef5;
+  --clr-profile-background: #f7f3ff;
+  --clr-panel-background: #fcf1ff;
+  --clr-info-background: #d1d2ff;
+  --clr-warning-background: #ffedd2;
+  --clr-error-background: #f4a9b1;
+  --clr-field-background: var(--clr-background);
+  --clr-foreground: #0f070f;
+  --clr-lesser-foreground: #555555;
+  --clr-foreground-on-primary: var(--clr-background);
+  --clr-foreground-on-secondary: var(--clr-foreground);
+  /*--clr-border: #bdb6be;*/
+  --clr-border: #3b005e44;
+  --clr-action-default: #cab3d1;
+  --clr-action-like: var(--clr-lighter-primary);
+  --clr-action-dislike: var(--clr-negative);
+  --clr-action-reshare: var(--clr-positive);
+  --clr-action-reply: var(--clr-neutral);
+
+  /* margins and padding */
+  --spacing-half: 4px;
+  --spacing-single: 8px;
+  --spacing-double: 16px;
+  --spacing-triple: 24px;
+  --spacing-quadruple: 32px;
+
+  /* type */
+  --font-family: "DM Sans", sans-serif;
+  --font-normal-size: 12pt;
+  --font-small-size: 10pt;
+  --font-big-size: 16pt;
+
+  /* misc */
+  --border: 1px solid var(--clr-border);
+  --border-radius: 8px;
+  --icon-size: 24px;
+  --avatar-size: 64px;
+  --avatar-big-size: 96px;
+}