From 628337f3afcd5125299cbf620832779ab209022b Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Mon, 30 Dec 2024 15:43:01 -0500
Subject: Add in some hand-rolled styles

---
 ui/styles/variables.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 ui/styles/variables.css

(limited to 'ui/styles/variables.css')

diff --git a/ui/styles/variables.css b/ui/styles/variables.css
new file mode 100644
index 0000000..e948c71
--- /dev/null
+++ b/ui/styles/variables.css
@@ -0,0 +1,18 @@
+:root {
+  /*
+   * Not great that these are in px, but not sure what else to do.
+   */
+  --app-bar-height: 48px;
+  --input-row-height: 2rem;
+  --interface-padding: 16px;
+  --nav-width: 21rem;
+
+  /* coloUrs */
+  --colour-background: rgba(0, 0, 0, 0.25);
+  --colour-background-alt: rgba(0, 0, 0, 0.35);
+  --colour-border: rgba(0, 0, 0, 0.45);
+  --colour-text: rgb(240, 240, 240);
+  --colour-okay: #2a9d8f;
+  --colour-warn: #e9c46a;
+  --colour-error: #e76f51;
+}
-- 
cgit v1.2.3


From c9b3394e9fc2cf6eb505ab03a6479eae996ed6e9 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Wed, 1 Jan 2025 18:09:46 -0500
Subject: Just oh so many styles

---
 ui/app.css                                |  6 +++
 ui/lib/components/Message.svelte          | 40 +--------------
 ui/lib/components/MessageRun.svelte       | 15 +-----
 ui/routes/(app)/+layout.svelte            | 54 ++------------------
 ui/routes/(app)/ch/[channel]/+page.svelte | 20 +-------
 ui/styles/active-channel.css              |  3 ++
 ui/styles/app-bar.css                     |  1 +
 ui/styles/app-layout.css                  | 56 +++++++++++++++++++++
 ui/styles/messages.css                    | 83 +++++++++++++++++++++++++++++++
 ui/styles/sidebar.css                     | 11 ++++
 ui/styles/textarea.css                    | 38 ++++++++++++++
 ui/styles/variables.css                   | 28 ++++++++---
 12 files changed, 228 insertions(+), 127 deletions(-)
 create mode 100644 ui/styles/active-channel.css
 create mode 100644 ui/styles/app-layout.css
 create mode 100644 ui/styles/messages.css
 create mode 100644 ui/styles/textarea.css

(limited to 'ui/styles/variables.css')

diff --git a/ui/app.css b/ui/app.css
index c4b464b..a945c6a 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -2,11 +2,17 @@
 @import url("styles/variables.css");
 @import url("styles/overscroll.css");
 @import url("styles/app-bar.css");
+@import url("styles/app-layout.css");
 @import url("styles/sidebar.css");
+@import url("styles/active-channel.css");
+@import url("styles/messages.css");
+@import url("styles/textarea.css");
 
 /* Debugging */
+/* * /
 div {
   outline: 1px dashed grey;
   background-color: var(--colour-background);
   box-shadow: 5px 5px 5px var(--colour-border);
 }
+/* */
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index cfadbba..6918b5d 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -26,8 +26,8 @@
 </script>
 
 <div
-    class="message relative"
-    class:bg-warning-800={deleteArmed}
+    class="message"
+    class:delete-armed={deleteArmed}
     role="article"
     data-at={at}
     {onmouseleave}
@@ -43,39 +43,3 @@
     {@html renderedBody}
   </section>
 </div>
-
-<style>
-  .message .handle {
-    display: none;
-  }
-  .message:hover .handle {
-    display: flex;
-  }
-  .message-body {
-    overflow: auto;
-    max-width: 80vw;
-    @media (width > 640px) {
-      /* 21rem is width of the nav bar in full-screen mode. */
-      max-width: calc(90vw - 21rem);
-    }
-  }
-  .message-body:empty:after {
-    content: '.';
-    visibility: hidden;
-  }
-  /* Without the global selector, the Svelte CSS compiler will see this as
-   * unused, and purge it from the output. However, this is "plausibly used"
-   * because it may occur in renderedBody.
-   */
-  :global(.message-body blockquote) {
-    border-left: 0.25rem solid lightgrey;
-    margin-left: 0.5rem;
-    padding-left: 0.5rem;
-  }
-  :global(.message-body pre) {
-    border: 1px solid #312e81;
-    border-radius: 0.25rem;
-    background-color: #282555;;
-    padding: 0.25rem;
-  }
-</style>
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index 6cad381..09388ac 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -9,6 +9,7 @@
 </script>
 
 <div
+  class="message-run"
   class:own-message={ownMessage}
   class:other-message={!ownMessage}
 >
@@ -19,17 +20,3 @@
     <Message {...message} editable={ownMessage} />
   {/each}
 </div>
-
-<style>
-  .own-message {
-    background-color: rgb(32, 42, 74);
-  }
-  /* Honestly, I don't love scoping styles per component, and this is a great
-   * example of why. MessageRuns know if they're own-message, but Messages in
-   * them need to get a style based on that fact. I don't wanna bucket-brigade
-   * that fact into the Message, when it's a pure CSS concern.
-   */
-  .own-message :global(*) {
-    color: rgb(198, 198, 198);
-  }
-</style>
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 8a70c4b..cacfc2d 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -126,63 +126,19 @@
 {#if loading}
   <h2>Loading&hellip;</h2>
 {:else}
-  <div id="interface" class="p-2">
+  <div id="interface">
     <nav id="sidebar" data-expanded={pageContext.showMenu}>
-      <div class="channel-list">
         <ChannelList active={channel} channels={enrichedChannels} />
+        <!--
+      <div class="channel-list">
       </div>
+        -->
       <div class="create-channel">
         <CreateChannelForm />
       </div>
     </nav>
-    <main class="pl-4">
+    <main>
       {@render children?.()}
     </main>
   </div>
 {/if}
-
-<style>
-  #interface {
-    margin: unset;
-    display: grid;
-    grid-template:
-      'side main' 1fr
-      / auto 1fr;
-    height: calc(100vh - var(--app-bar-height));
-
-    @media (width > 640px) {
-      --overlay: static;
-      --translate: 0;
-    }
-  }
-  nav {
-    grid-area: side;
-    background-color: rgb(var(--color-surface-800));
-    inset: auto auto 0 0;
-    padding: 0.25rem;
-    position: var(--overlay, absolute);
-    transition: translate 300ms ease-out;
-    width: var(--nav-width);
-    height: 100vh;
-    @media (width > 640px) {
-      height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
-    }
-    z-index: 10;
-    border-top-right-radius: 1.4rem;
-    border-bottom-right-radius: 1.4rem;
-  }
-  main {
-    grid-area: main;
-    height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
-  }
-  .channel-list {
-    height: calc(100vh - var(--input-row-height));
-    @media (width > 640px) {
-      height: calc(100vh - var(--app-bar-height) - var(--input-row-height) - var(--interface-padding));
-    }
-    overflow: auto;
-  }
-  nav[data-expanded='false'] {
-    translate: var(--translate, -100% 0);
-  }
-</style>
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index d4e04fe..8eba709 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -67,24 +67,6 @@
 <div class="active-channel" on:scroll={handleScroll} bind:this={activeChannel}>
   <ActiveChannel {messageRuns} />
 </div>
-<div class="create-message max-h-full">
+<div class="create-message">
   <MessageInput {channel} />
 </div>
-
-<style>
-  .active-channel {
-    height: calc(
-      100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height)
-    );
-    overflow: auto;
-  }
-  .create-message {
-    position: fixed;
-    bottom: 0.5rem;
-    width: calc(100% - var(--nav-width) - 2rem);
-    @media (width <= 640px) {
-      width: 100%;
-      left: 0;
-    }
-  }
-</style>
diff --git a/ui/styles/active-channel.css b/ui/styles/active-channel.css
new file mode 100644
index 0000000..6efc3e3
--- /dev/null
+++ b/ui/styles/active-channel.css
@@ -0,0 +1,3 @@
+.active-channel {
+  padding: 1rem;
+}
diff --git a/ui/styles/app-bar.css b/ui/styles/app-bar.css
index 401a278..caa50ed 100644
--- a/ui/styles/app-bar.css
+++ b/ui/styles/app-bar.css
@@ -5,6 +5,7 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: stretch;
+  background-color: var(--colour-background);
 }
 
 .app-bar > * {
diff --git a/ui/styles/app-layout.css b/ui/styles/app-layout.css
new file mode 100644
index 0000000..ef1eb10
--- /dev/null
+++ b/ui/styles/app-layout.css
@@ -0,0 +1,56 @@
+/* TODO: generally remove literals from this file. */
+
+#interface {
+  margin: unset;
+  display: grid;
+  grid-template:
+    'side main' 1fr
+    / auto 1fr;
+  height: calc(100vh - var(--app-bar-height));
+
+  @media (width > 640px) {
+    --overlay: static;
+    --translate: 0;
+  }
+}
+
+nav#sidebar {
+  grid-area: side;
+  inset: auto auto 0 0;
+  padding-right: 0.5rem;
+  position: var(--overlay, absolute);
+  transition: translate 300ms ease-out;
+  width: var(--nav-width);
+  height: 100vh;
+  z-index: 10;
+
+  border-radius: 0 1.4rem 1.4rem 0;
+
+  background-color: var(--colour-background-alt);
+
+  @media (width > 640px) {
+    height: calc(100vh - var(--app-bar-height));
+  }
+}
+
+nav.list-nav {
+  height: calc(100vh - var(--input-row-height) - var(--interface-padding));
+  overflow: auto;
+
+  @media (width > 640px) {
+    height: calc(100vh - var(--app-bar-height) - var(--input-row-height) - var(--interface-padding));
+  }
+}
+
+main {
+  grid-area: main;
+  height: calc(100vh - var(--app-bar-height));
+}
+
+main textarea {
+  resize: none;
+}
+
+nav[data-expanded='false'] {
+  translate: var(--translate, -100% 0);
+}
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
new file mode 100644
index 0000000..bd46baf
--- /dev/null
+++ b/ui/styles/messages.css
@@ -0,0 +1,83 @@
+.message-run {
+  position: relative;
+  border-radius: 0.25rem;
+  border: 1px solid var(--colour-border);
+  padding: 0 0 0.5rem 0;
+  margin-bottom: 1rem;
+  box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
+}
+
+/* TODO: replace these with colour variables. */
+.own-message {
+  background-color: rgb(32, 42, 74);
+}
+
+.own-message * {
+  color: rgb(198, 198, 198);
+}
+
+.message-run > span {
+  /* Username */
+  color: var(--colour-text);
+  background-color: rgb(67, 88, 156);
+}
+
+.message {
+  padding: 0.5rem 0 0 0.5rem;
+}
+
+.message:hover {
+  background-color: rgb(21, 28, 49);
+}
+
+.message .handle {
+  --text-size: 0.5rem;
+  float: right;
+  line-height: var(--text-size);
+  font-size: var(--text-size);
+  top: -0.5rem;
+  position: relative;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  display: none;
+  background-color: rgb(67, 88, 156);
+}
+
+.message:hover .handle {
+  display: flex;
+}
+
+.message .handle button {
+  line-height: 0.35rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.message-body {
+  overflow: auto;
+  max-width: 80vw;
+
+  @media (width > 640px) {
+    /* 21rem is width of the nav bar in full-screen mode. */
+    max-width: calc(90vw - 21rem);
+  }
+}
+
+.message-body:empty:after {
+  content: '.';
+  visibility: hidden;
+}
+
+/* For rendered message bodies: */
+.message-body blockquote {
+  border-left: 0.25rem solid lightgrey;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+}
+.message-body pre {
+  border: 1px solid #312e81;
+  border-radius: 0.25rem;
+  background-color: #282555;;
+  padding: 0.25rem;
+}
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index e512847..e9098f2 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -3,6 +3,10 @@
   background-color: var(--colour-background-alt);
 }
 
+.list-nav ul {
+  padding: 0.5rem;
+}
+
 .list-nav li {
   padding: 0.5rem;
   border-radius: 0.5rem;
@@ -32,8 +36,15 @@
   border: 1px solid var(--colour-border);
   z-index: 1;  /* Just to make the focus-active border go over the following button. */
   flex-grow: 1;
+  background-color: var(--colour-text);
+  color: var(--colour-background);
 }
 
 .create-channel button {
   border-radius: 0 0.5rem 0.5rem 0;
+  border: 1px solid var(--colour-border);
+  background-color: var(--colour-text);
+  color: var(--colour-background);
 }
+
+/* TODO: media-query stuff. Margin-left at a constant zero? */
diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css
new file mode 100644
index 0000000..72d727f
--- /dev/null
+++ b/ui/styles/textarea.css
@@ -0,0 +1,38 @@
+/* Message input */
+.create-message form {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
+.create-message textarea {
+  padding: 0.5rem;
+  border-radius: 0.5rem 0 0 0.5rem;
+  border: 1px solid var(--colour-border);
+  z-index: 1;  /* Just to make the focus-active border go over the following button. */
+  flex-grow: 1;
+  background-color: var(--colour-text);
+  color: var(--colour-background);
+}
+
+.create-message button {
+  border-radius: 0 0.5rem 0.5rem 0;
+  border: 1px solid var(--colour-border);
+  background-color: var(--colour-text);
+  color: var(--colour-background);
+}
+
+.active-channel {
+  overflow: auto;
+  flex-grow: 1;
+  /* TODO: make this all-app background */
+  background-color: var(--colour-background);
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+}
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index e948c71..5ea4d74 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -8,11 +8,25 @@
   --nav-width: 21rem;
 
   /* coloUrs */
-  --colour-background: rgba(0, 0, 0, 0.25);
-  --colour-background-alt: rgba(0, 0, 0, 0.35);
-  --colour-border: rgba(0, 0, 0, 0.45);
-  --colour-text: rgb(240, 240, 240);
-  --colour-okay: #2a9d8f;
-  --colour-warn: #e9c46a;
-  --colour-error: #e76f51;
+  /* Really, we need:
+   * - Dark header background
+   * - Medium sidebar background
+   * - Light channel background
+   * - okay/warn/error
+   * - Border colours?
+   * - Text colour
+   * - Hover colour
+   * - Active colour
+   */
+  --colour-background: #253031;
+  --colour-border: #192122;
+
+  --colour-background-alt: #426A5A;
+  --colour-border-alt: #2E4A3E;
+
+  --colour-text: #FFFFEA;
+
+  --colour-okay: #6A994E;
+  --colour-warn: #EBC3BE;
+  --colour-error: #DE5F55;
 }
-- 
cgit v1.2.3


From 58a349af98d2b0ea9744e1c5372334f0c826eb47 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Sat, 4 Jan 2025 12:14:20 -0500
Subject: Update colour variables

---
 ui/styles/app-bar.css    |  2 +-
 ui/styles/app-layout.css |  2 +-
 ui/styles/messages.css   | 18 +++++++++++++-----
 ui/styles/sidebar.css    | 20 ++++++++++----------
 ui/styles/textarea.css   | 14 +++++++-------
 ui/styles/variables.css  | 49 ++++++++++++++++++++++++++++++------------------
 6 files changed, 63 insertions(+), 42 deletions(-)

(limited to 'ui/styles/variables.css')

diff --git a/ui/styles/app-bar.css b/ui/styles/app-bar.css
index caa50ed..d34eb87 100644
--- a/ui/styles/app-bar.css
+++ b/ui/styles/app-bar.css
@@ -5,7 +5,7 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: stretch;
-  background-color: var(--colour-background);
+  background-color: var(--colour-header-bg);
 }
 
 .app-bar > * {
diff --git a/ui/styles/app-layout.css b/ui/styles/app-layout.css
index ef1eb10..53f003c 100644
--- a/ui/styles/app-layout.css
+++ b/ui/styles/app-layout.css
@@ -26,7 +26,7 @@ nav#sidebar {
 
   border-radius: 0 1.4rem 1.4rem 0;
 
-  background-color: var(--colour-background-alt);
+  background-color: var(--colour-navbar-bg);
 
   @media (width > 640px) {
     height: calc(100vh - var(--app-bar-height));
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index bd46baf..ebb01c9 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -1,24 +1,32 @@
 .message-run {
   position: relative;
   border-radius: 0.25rem;
-  border: 1px solid var(--colour-border);
   padding: 0 0 0.5rem 0;
   margin-bottom: 1rem;
   box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
 }
 
-/* TODO: replace these with colour variables. */
 .own-message {
-  background-color: rgb(32, 42, 74);
+  background-color: var(--colour-message-run-self-bg);
+  border: 1px solid var(--colour-message-run-self-bg);
 }
 
 .own-message * {
-  color: rgb(198, 198, 198);
+  color: var(--colour-message-run-text);
+}
+
+.other-message {
+  background-color: var(--colour-message-run-other-bg);
+  border: 1px solid var(--colour-message-run-other-bg);
+}
+
+.other-message * {
+  color: var(--colour-message-run-text);
 }
 
 .message-run > span {
   /* Username */
-  color: var(--colour-text);
+  color: var(--colour-message-run-text);
   background-color: rgb(67, 88, 156);
 }
 
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index e9098f2..7fe5ca0 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -1,6 +1,6 @@
 /* Sidebar and channel selector */
 #sidebar {
-  background-color: var(--colour-background-alt);
+  background-color: var(--colour-navbar-bg);
 }
 
 .list-nav ul {
@@ -10,16 +10,16 @@
 .list-nav li {
   padding: 0.5rem;
   border-radius: 0.5rem;
-  border: 1px solid var(--colour-border);
+  border: 1px solid var(--colour-navbar-bg);
   margin: 0.25rem;
 }
 
 .list-nav li.active {
-  background-color: var(--colour-okay);
+  background-color: var(--colour-navbar-bg);
 }
 
 .list-nav li:hover {
-  background-color: var(--colour-warn);
+  background-color: var(--colour-navbar-bg);
 }
 
 /* create channel form */
@@ -33,18 +33,18 @@
 .create-channel input {
   padding: 0.5rem;
   border-radius: 0.5rem 0 0 0.5rem;
-  border: 1px solid var(--colour-border);
+  border: 1px solid var(--colour-input-bg);
   z-index: 1;  /* Just to make the focus-active border go over the following button. */
   flex-grow: 1;
-  background-color: var(--colour-text);
-  color: var(--colour-background);
+  background-color: var(--colour-input-bg);
+  color: var(--colour-input-text);
 }
 
 .create-channel button {
   border-radius: 0 0.5rem 0.5rem 0;
-  border: 1px solid var(--colour-border);
-  background-color: var(--colour-text);
-  color: var(--colour-background);
+  border: 1px solid var(--colour-input-bg);
+  background-color: var(--colour-input-bg);
+  color: var(--colour-input-text);
 }
 
 /* TODO: media-query stuff. Margin-left at a constant zero? */
diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css
index 72d727f..3a28d1b 100644
--- a/ui/styles/textarea.css
+++ b/ui/styles/textarea.css
@@ -9,25 +9,25 @@
 .create-message textarea {
   padding: 0.5rem;
   border-radius: 0.5rem 0 0 0.5rem;
-  border: 1px solid var(--colour-border);
+  border: 1px solid var(--colour-input-bg);
   z-index: 1;  /* Just to make the focus-active border go over the following button. */
   flex-grow: 1;
-  background-color: var(--colour-text);
-  color: var(--colour-background);
+  background-color: var(--colour-input-bg);
+  color: var(--colour-input-text);
 }
 
 .create-message button {
   border-radius: 0 0.5rem 0.5rem 0;
-  border: 1px solid var(--colour-border);
-  background-color: var(--colour-text);
-  color: var(--colour-background);
+  border: 1px solid var(--colour-input-bg);
+  background-color: var(--colour-input-bg);
+  color: var(--colour-input-text);
 }
 
 .active-channel {
   overflow: auto;
   flex-grow: 1;
   /* TODO: make this all-app background */
-  background-color: var(--colour-background);
+  background-color: var(--colour-active-channel-bg);
 }
 
 main {
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index 5ea4d74..0f5cd0e 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -8,25 +8,38 @@
   --nav-width: 21rem;
 
   /* coloUrs */
-  /* Really, we need:
-   * - Dark header background
-   * - Medium sidebar background
-   * - Light channel background
-   * - okay/warn/error
-   * - Border colours?
-   * - Text colour
-   * - Hover colour
-   * - Active colour
-   */
-  --colour-background: #253031;
-  --colour-border: #192122;
-
-  --colour-background-alt: #426A5A;
-  --colour-border-alt: #2E4A3E;
-
-  --colour-text: #FFFFEA;
-
   --colour-okay: #6A994E;
   --colour-warn: #EBC3BE;
   --colour-error: #DE5F55;
+
+  /* Header BG (dark) */
+  --colour-header-bg: rgb(66, 66, 66);
+  /* Header text (light) */
+  --colour-header-text: rgb(245, 245, 245);
+  /* Navbar BG (medium) */
+  --colour-navbar-bg: rgb(117, 117, 117);
+  /* Navbar text (light) */
+  --colour-navbar-text: rgb(224, 224, 224);
+  /* Input BG (light) */
+  --colour-input-bg: rgb(224, 224, 224);
+  /* Input text (dark) */
+  --colour-input-text: rgb(66, 66, 66);
+  /* Active channel BG (light) */
+  --colour-active-channel-bg: rgb(224, 224, 224);
+  /* MessageRun self BG (medium) */
+  --colour-message-run-self-bg: rgb(117, 117, 117);
+  /* MessageRun other BG (medium) */
+  --colour-message-run-other-bg: rgb(117, 117, 117);
+  /* Message hover BG (medium-dark) */
+  --colour-message-hover-bg: rgb(170, 170, 170);
+  /* Message handle BG (medium-light) */
+  --colour-message-handle-bg: rgb(224, 224, 224);
+  /* Message handle text */
+  --colour-message-handle-text: rgb(170, 170, 170);
+  /* Navbar active BG */
+  --colour-navbar-active-bg: rgb(117, 117, 117);
+  /* Navbar hover BG */
+  --colour-navbar-hover-bg: rgb(170, 170, 170);
+  /* MessageRun text */
+  --colour-message-run-text: rgb(170, 170, 170);
 }
-- 
cgit v1.2.3


From 7cb7c339a2ba0b3a0cf39b09194e7882f74c6e1f Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Sat, 4 Jan 2025 18:46:43 -0500
Subject: Do a lot of styling

---
 ui/app.css                   | 16 ++++++++++++++
 ui/styles/active-channel.css |  2 ++
 ui/styles/messages.css       | 10 +++++++--
 ui/styles/sidebar.css        | 10 ++++-----
 ui/styles/textarea.css       | 11 ++--------
 ui/styles/variables.css      | 52 +++++++++++++++++++++++++-------------------
 6 files changed, 63 insertions(+), 38 deletions(-)

(limited to 'ui/styles/variables.css')

diff --git a/ui/app.css b/ui/app.css
index a945c6a..1f1fc20 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -8,6 +8,22 @@
 @import url("styles/messages.css");
 @import url("styles/textarea.css");
 
+body {
+  background-color: var(--colour-active-channel-bg);
+}
+
+/* TODO:
+ * put this somewhere appropriate,
+ * use a correct variable,
+ * be sensitive to background colour context.
+ */
+a,
+a:hover,
+a:visited,
+a:active {
+  color: var(--light-text);
+}
+
 /* Debugging */
 /* * /
 div {
diff --git a/ui/styles/active-channel.css b/ui/styles/active-channel.css
index 6efc3e3..96e8354 100644
--- a/ui/styles/active-channel.css
+++ b/ui/styles/active-channel.css
@@ -1,3 +1,5 @@
 .active-channel {
   padding: 1rem;
+  overflow: auto;
+  flex-grow: 1;
 }
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index 81afe47..a0005d1 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -4,11 +4,14 @@
   padding: 0 0 0.5rem 0;
   margin-bottom: 1rem;
   box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
+  width: 95%;
+  clear: both;
 }
 
 .own-message {
   background-color: var(--colour-message-run-self-bg);
-  border: 1px solid var(--colour-message-run-self-bg);
+  border: 1px solid var(--colour-message-run-self-border);
+  float: right;
 }
 
 .own-message * {
@@ -17,7 +20,7 @@
 
 .other-message {
   background-color: var(--colour-message-run-other-bg);
-  border: 1px solid var(--colour-message-run-other-bg);
+  border: 1px solid var(--colour-message-run-other-border);
 }
 
 .other-message * {
@@ -36,6 +39,9 @@
 .message:hover {
   background-color: var(--colour-message-hover-bg);
 }
+.message:hover * {
+  color: var(--colour-message-hover-text);
+}
 
 .message .handle {
   --text-size: 0.5rem;
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index 7fe5ca0..8808a3b 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -10,16 +10,16 @@
 .list-nav li {
   padding: 0.5rem;
   border-radius: 0.5rem;
-  border: 1px solid var(--colour-navbar-bg);
+  border: 1px solid var(--colour-navbar-border);
   margin: 0.25rem;
 }
 
 .list-nav li.active {
-  background-color: var(--colour-navbar-bg);
+  background-color: var(--colour-navbar-active-bg);
 }
 
 .list-nav li:hover {
-  background-color: var(--colour-navbar-bg);
+  background-color: var(--colour-navbar-hover-bg);
 }
 
 /* create channel form */
@@ -33,7 +33,7 @@
 .create-channel input {
   padding: 0.5rem;
   border-radius: 0.5rem 0 0 0.5rem;
-  border: 1px solid var(--colour-input-bg);
+  border: 1px solid var(--colour-input-border);
   z-index: 1;  /* Just to make the focus-active border go over the following button. */
   flex-grow: 1;
   background-color: var(--colour-input-bg);
@@ -42,7 +42,7 @@
 
 .create-channel button {
   border-radius: 0 0.5rem 0.5rem 0;
-  border: 1px solid var(--colour-input-bg);
+  border: 1px solid var(--colour-input-border);
   background-color: var(--colour-input-bg);
   color: var(--colour-input-text);
 }
diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css
index 3a28d1b..b45a66d 100644
--- a/ui/styles/textarea.css
+++ b/ui/styles/textarea.css
@@ -9,7 +9,7 @@
 .create-message textarea {
   padding: 0.5rem;
   border-radius: 0.5rem 0 0 0.5rem;
-  border: 1px solid var(--colour-input-bg);
+  border: 1px solid var(--colour-input-border);
   z-index: 1;  /* Just to make the focus-active border go over the following button. */
   flex-grow: 1;
   background-color: var(--colour-input-bg);
@@ -18,18 +18,11 @@
 
 .create-message button {
   border-radius: 0 0.5rem 0.5rem 0;
-  border: 1px solid var(--colour-input-bg);
+  border: 1px solid var(--colour-input-border);
   background-color: var(--colour-input-bg);
   color: var(--colour-input-text);
 }
 
-.active-channel {
-  overflow: auto;
-  flex-grow: 1;
-  /* TODO: make this all-app background */
-  background-color: var(--colour-active-channel-bg);
-}
-
 main {
   display: flex;
   flex-direction: column;
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index 0f5cd0e..947cf68 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -12,34 +12,42 @@
   --colour-warn: #EBC3BE;
   --colour-error: #DE5F55;
 
-  /* Header BG (dark) */
+  --light-text: rgb(228, 228, 255);
+  --dark-text: rgb(28, 28, 35);
+
+  /* Header */
   --colour-header-bg: rgb(66, 66, 66);
-  /* Header text (light) */
-  --colour-header-text: rgb(245, 245, 245);
-  /* Navbar BG (medium) */
+  --colour-header-border: color-mix(in srgb, var(--colour-header-bg) 50%, black);
+  --colour-header-text: var(--light-text);
+
+  /* Navbar */
   --colour-navbar-bg: rgb(117, 117, 117);
-  /* Navbar text (light) */
-  --colour-navbar-text: rgb(224, 224, 224);
-  /* Input BG (light) */
+  --colour-navbar-border: color-mix(in srgb, var(--colour-navbar-bg) 50%, black);
+  --colour-navbar-text: var(--light-text);
+  --colour-navbar-active-bg: color-mix(in srgb, var(--colour-navbar-bg) 40%, white);
+  --colour-navbar-hover-bg: color-mix(in srgb, var(--colour-navbar-bg) 20%, white);
+
+  /* Input */
   --colour-input-bg: rgb(224, 224, 224);
-  /* Input text (dark) */
-  --colour-input-text: rgb(66, 66, 66);
-  /* Active channel BG (light) */
+  --colour-input-border: color-mix(in srgb, var(--colour-input-bg) 50%, black);
+  --colour-input-text: var(--dark-text);
+
+  /* Active channel */
   --colour-active-channel-bg: rgb(224, 224, 224);
-  /* MessageRun self BG (medium) */
+
+  /* MessageRun */
   --colour-message-run-self-bg: rgb(117, 117, 117);
-  /* MessageRun other BG (medium) */
+  --colour-message-run-self-border: color-mix(in srgb, var(--colour-message-run-self-bg) 50%, black);
   --colour-message-run-other-bg: rgb(117, 117, 117);
-  /* Message hover BG (medium-dark) */
+  --colour-message-run-other-border: color-mix(in srgb, var(--colour-message-run-other-bg) 50%, black);
+  --colour-message-run-text: var(--light-text);
+
+  /* Message */
   --colour-message-hover-bg: rgb(170, 170, 170);
-  /* Message handle BG (medium-light) */
+  --colour-message-hover-text: var(--dark-text);
+
+  /* Message handle */
   --colour-message-handle-bg: rgb(224, 224, 224);
-  /* Message handle text */
-  --colour-message-handle-text: rgb(170, 170, 170);
-  /* Navbar active BG */
-  --colour-navbar-active-bg: rgb(117, 117, 117);
-  /* Navbar hover BG */
-  --colour-navbar-hover-bg: rgb(170, 170, 170);
-  /* MessageRun text */
-  --colour-message-run-text: rgb(170, 170, 170);
+  --colour-message-handle-border: color-mix(in srgb, var(--colour-message-handle-bg) 50%, black);
+  --colour-message-handle-text: var(--dark-text);
 }
-- 
cgit v1.2.3


From 436e3cd7d2cab5779f3e33de140fc37038beaf6c Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Sat, 4 Jan 2025 22:03:41 -0500
Subject: Set a sample colour

---
 ui/styles/messages.css  |  8 ++++----
 ui/styles/variables.css | 30 +++++++++++++++++++-----------
 2 files changed, 23 insertions(+), 15 deletions(-)

(limited to 'ui/styles/variables.css')

diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index a0005d1..ba659ed 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -15,7 +15,7 @@
 }
 
 .own-message * {
-  color: var(--colour-message-run-text);
+  color: var(--colour-message-run-self-text);
 }
 
 .other-message {
@@ -24,12 +24,12 @@
 }
 
 .other-message * {
-  color: var(--colour-message-run-text);
+  color: var(--colour-message-run-other-text);
 }
 
 .message-run > .username {
-  color: var(--colour-message-run-text);
-  background-color: var(--colour-message-run-other-bg);
+  background-color: var(--colour-message-run-username-bg);
+  color: var(--colour-message-run-username-text);
 }
 
 .message {
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index 947cf68..9a1c689 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -12,42 +12,50 @@
   --colour-warn: #EBC3BE;
   --colour-error: #DE5F55;
 
-  --light-text: rgb(228, 228, 255);
-  --dark-text: rgb(28, 28, 35);
+  /* I dunno, I liked this colour: */
+  --colour-base: rgb(121, 96, 159);
+
+  /* Light text is a bit hard to read; I may need to adjust it. */
+  --light-text: color-mix(in srgb, var(--colour-base) 10%, white);
+  --dark-text: color-mix(in srgb, var(--colour-base) 10%, black);
 
   /* Header */
-  --colour-header-bg: rgb(66, 66, 66);
+  --colour-header-bg: color-mix(in srgb, var(--colour-base) 30%, black);
   --colour-header-border: color-mix(in srgb, var(--colour-header-bg) 50%, black);
   --colour-header-text: var(--light-text);
 
   /* Navbar */
-  --colour-navbar-bg: rgb(117, 117, 117);
+  --colour-navbar-bg: color-mix(in srgb, var(--colour-base) 50%, black);
   --colour-navbar-border: color-mix(in srgb, var(--colour-navbar-bg) 50%, black);
   --colour-navbar-text: var(--light-text);
   --colour-navbar-active-bg: color-mix(in srgb, var(--colour-navbar-bg) 40%, white);
   --colour-navbar-hover-bg: color-mix(in srgb, var(--colour-navbar-bg) 20%, white);
 
   /* Input */
-  --colour-input-bg: rgb(224, 224, 224);
+  --colour-input-bg: color-mix(in srgb, var(--colour-base) 10%, white);
   --colour-input-border: color-mix(in srgb, var(--colour-input-bg) 50%, black);
   --colour-input-text: var(--dark-text);
 
   /* Active channel */
-  --colour-active-channel-bg: rgb(224, 224, 224);
+  --colour-active-channel-bg: color-mix(in srgb, var(--colour-base) 25%, white);
 
   /* MessageRun */
-  --colour-message-run-self-bg: rgb(117, 117, 117);
+  --colour-message-run-self-bg: color-mix(in srgb, var(--colour-base) 30%, white);
   --colour-message-run-self-border: color-mix(in srgb, var(--colour-message-run-self-bg) 50%, black);
-  --colour-message-run-other-bg: rgb(117, 117, 117);
+  --colour-message-run-other-bg: color-mix(in srgb, var(--colour-base) 50%, white);
   --colour-message-run-other-border: color-mix(in srgb, var(--colour-message-run-other-bg) 50%, black);
-  --colour-message-run-text: var(--light-text);
+  --colour-message-run-self-text: var(--dark-text);
+  --colour-message-run-other-text: var(--light-text);
+
+  --colour-message-run-username-bg: color-mix(in srgb, var(--colour-base) 70%, white);
+  --colour-message-run-username-text: color-mix(in srgb, var(--colour-base) 50%, black);
 
   /* Message */
-  --colour-message-hover-bg: rgb(170, 170, 170);
+  --colour-message-hover-bg: color-mix(in srgb, var(--colour-base) 70%, white);
   --colour-message-hover-text: var(--dark-text);
 
   /* Message handle */
-  --colour-message-handle-bg: rgb(224, 224, 224);
+  --colour-message-handle-bg: color-mix(in srgb, var(--colour-base) 90%, black);
   --colour-message-handle-border: color-mix(in srgb, var(--colour-message-handle-bg) 50%, black);
   --colour-message-handle-text: var(--dark-text);
 }
-- 
cgit v1.2.3


From 16ec9ef2e1e53b5cc2a3fd86c123e39371d00c2b Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Sun, 5 Jan 2025 14:44:31 -0500
Subject: Stylize more better

---
 ui/app.css                                     |  6 ++++++
 ui/app.html                                    |  2 +-
 ui/lib/components/Invite.svelte                |  2 +-
 ui/lib/components/Invites.svelte               |  2 +-
 ui/routes/(app)/+layout.svelte                 |  4 ----
 ui/routes/(app)/me/+page.svelte                |  2 ++
 ui/routes/(login)/invite/[invite]/+page.svelte |  4 ++--
 ui/styles/forms.css                            |  2 ++
 ui/styles/invites.css                          | 11 +++++++++++
 ui/styles/messages.css                         |  6 ++++++
 ui/styles/sidebar.css                          |  4 ++++
 ui/styles/variables.css                        |  1 +
 12 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 ui/styles/invites.css

(limited to 'ui/styles/variables.css')

diff --git a/ui/app.css b/ui/app.css
index 7ac9237..27086e7 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -8,9 +8,15 @@
 @import url("styles/messages.css");
 @import url("styles/textarea.css");
 @import url("styles/forms.css");
+@import url("styles/invites.css");
 
 body {
   background-color: var(--colour-active-channel-bg);
+  color: var(--dark-text);
+}
+
+hr {
+  width: 90%;
 }
 
 /* TODO:
diff --git a/ui/app.html b/ui/app.html
index 942e328..e6be518 100644
--- a/ui/app.html
+++ b/ui/app.html
@@ -8,6 +8,6 @@
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">
-    <div class="m-0 p-0 h-vh w-full">%sveltekit.body%</div>
+    <div>%sveltekit.body%</div>
   </body>
 </html>
diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte
index 9e6e469..29631f4 100644
--- a/ui/lib/components/Invite.svelte
+++ b/ui/lib/components/Invite.svelte
@@ -10,4 +10,4 @@
 </script>
 
 <button use:copy={{ text: inviteUrl }}>copy</button>
-<span>{inviteUrl}</span>
+<span class="invite-url-literal">{inviteUrl}</span>
diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte
index 5c5d601..7861448 100644
--- a/ui/lib/components/Invites.svelte
+++ b/ui/lib/components/Invites.svelte
@@ -17,7 +17,7 @@
   <button type="submit">create invitation</button>
 </form>
 
-<ul>
+<ul class="invite-list">
   {#each invites as invite}
     <li><Invite id={invite.id} /></li>
   {/each}
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index cacfc2d..08444bd 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -129,10 +129,6 @@
   <div id="interface">
     <nav id="sidebar" data-expanded={pageContext.showMenu}>
         <ChannelList active={channel} channels={enrichedChannels} />
-        <!--
-      <div class="channel-list">
-      </div>
-        -->
       <div class="create-channel">
         <CreateChannelForm />
       </div>
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index 9718ce1..14a9db8 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -5,5 +5,7 @@
 </script>
 
 <ChangePassword />
+<hr />
 <Invites />
+<hr />
 <LogOut />
diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
index 4433bd6..132cbc1 100644
--- a/ui/routes/(login)/invite/[invite]/+page.svelte
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -25,11 +25,11 @@
 </script>
 
 {#await data.invite}
-  <div class="card m-4 p-4">
+  <div class="invite-text">
     <p>Loading invitation…</p>
   </div>
 {:then invite}
-  <div class="card m-4 p-4">
+  <div class="invite-text">
     <p>Hi there! {invite.issuer} invites you to the conversation.</p>
   </div>
   <LogIn {disabled} bind:username bind:password onsubmit={(event) => onSubmit(event, invite.id)} />
diff --git a/ui/styles/forms.css b/ui/styles/forms.css
index aaae92c..0ab9b77 100644
--- a/ui/styles/forms.css
+++ b/ui/styles/forms.css
@@ -1,6 +1,7 @@
 label {
   display: block;
   padding: 0.25rem;
+  font-style: italic;
 }
 
 label input {
@@ -16,4 +17,5 @@ form > button {
   padding: 0.25rem;
   border-radius: 0.25rem;
   border: 1px solid var(--colour-input-border);
+  margin: 0.25rem;
 }
diff --git a/ui/styles/invites.css b/ui/styles/invites.css
new file mode 100644
index 0000000..9cd3fd4
--- /dev/null
+++ b/ui/styles/invites.css
@@ -0,0 +1,11 @@
+.invite-list {
+  padding: 0.25rem;
+}
+
+.invite-url-literal {
+  font-family: monospace;
+}
+
+.invite-text {
+  margin: 1rem;
+}
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index ba659ed..0854d17 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -6,6 +6,7 @@
   box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
   width: 95%;
   clear: both;
+  overflow: hidden;
 }
 
 .own-message {
@@ -30,6 +31,11 @@
 .message-run > .username {
   background-color: var(--colour-message-run-username-bg);
   color: var(--colour-message-run-username-text);
+  display: inline-block;
+  border-bottom-right-radius: 0.25rem;
+  padding: 0.25rem;
+  border-bottom: 1px solid var(--colour-message-run-username-border);
+  border-right: 1px solid var(--colour-message-run-username-border);
 }
 
 .message {
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index 8808a3b..b10789f 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -23,6 +23,10 @@
 }
 
 /* create channel form */
+.create-channel {
+  padding-left: 0.5rem;
+}
+
 .create-channel form {
   display: flex;
   flex-direction: row;
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index 9a1c689..f753589 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -48,6 +48,7 @@
   --colour-message-run-other-text: var(--light-text);
 
   --colour-message-run-username-bg: color-mix(in srgb, var(--colour-base) 70%, white);
+  --colour-message-run-username-border: color-mix(in srgb, var(--colour-base) 50%, black);
   --colour-message-run-username-text: color-mix(in srgb, var(--colour-base) 50%, black);
 
   /* Message */
-- 
cgit v1.2.3


From b0bce048bfd15ff7585ee7e297d3fab9996c8899 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Sun, 5 Jan 2025 21:44:40 -0500
Subject: Fix up active and hover sidebar styles

---
 ui/styles/sidebar.css   | 2 ++
 ui/styles/variables.css | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

(limited to 'ui/styles/variables.css')

diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index 695628c..b31c4fd 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -20,10 +20,12 @@
 
 .list-nav li.active {
   background-color: var(--colour-navbar-active-bg);
+  color: var(--colour-navbar-active-text);
 }
 
 .list-nav li:hover {
   background-color: var(--colour-navbar-hover-bg);
+  color: var(--colour-navbar-hover-text);
 }
 
 /* create channel form */
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index f753589..6252d7b 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -29,7 +29,9 @@
   --colour-navbar-border: color-mix(in srgb, var(--colour-navbar-bg) 50%, black);
   --colour-navbar-text: var(--light-text);
   --colour-navbar-active-bg: color-mix(in srgb, var(--colour-navbar-bg) 40%, white);
-  --colour-navbar-hover-bg: color-mix(in srgb, var(--colour-navbar-bg) 20%, white);
+  --colour-navbar-active-text: color-mix(in srgb, var(--colour-navbar-bg) 40%, black);
+  --colour-navbar-hover-bg: color-mix(in srgb, var(--colour-navbar-bg) 30%, white);
+  --colour-navbar-hover-text: color-mix(in srgb, var(--colour-navbar-bg) 30%, black);
 
   /* Input */
   --colour-input-bg: color-mix(in srgb, var(--colour-base) 10%, white);
-- 
cgit v1.2.3


From 26a3170c20a47335a9fb396eddf5d7493aa9a855 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Sun, 5 Jan 2025 21:52:20 -0500
Subject: Make all text in active channel same colour

---
 ui/styles/variables.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/styles/variables.css')

diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index 6252d7b..5caf094 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -47,7 +47,7 @@
   --colour-message-run-other-bg: color-mix(in srgb, var(--colour-base) 50%, white);
   --colour-message-run-other-border: color-mix(in srgb, var(--colour-message-run-other-bg) 50%, black);
   --colour-message-run-self-text: var(--dark-text);
-  --colour-message-run-other-text: var(--light-text);
+  --colour-message-run-other-text: var(--dark-text);
 
   --colour-message-run-username-bg: color-mix(in srgb, var(--colour-base) 70%, white);
   --colour-message-run-username-border: color-mix(in srgb, var(--colour-base) 50%, black);
-- 
cgit v1.2.3


From bc0d9748cb403523426b43847b54c3b98e17bdea Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Mon, 6 Jan 2025 22:45:44 -0500
Subject: Take the edge off the text colours

---
 ui/styles/variables.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/styles/variables.css')

diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index 5caf094..fa51506 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -16,8 +16,8 @@
   --colour-base: rgb(121, 96, 159);
 
   /* Light text is a bit hard to read; I may need to adjust it. */
-  --light-text: color-mix(in srgb, var(--colour-base) 10%, white);
-  --dark-text: color-mix(in srgb, var(--colour-base) 10%, black);
+  --light-text: color-mix(in srgb, var(--colour-base) 40%, white);
+  --dark-text: color-mix(in srgb, var(--colour-base) 40%, black);
 
   /* Header */
   --colour-header-bg: color-mix(in srgb, var(--colour-base) 30%, black);
-- 
cgit v1.2.3


From 6d51f8568e337e768505ccfdef916b84dd6eb1b3 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Sat, 11 Jan 2025 13:34:13 -0500
Subject: npm run format

---
 ui/app.css                                 |  22 ++---
 ui/lib/components/ChangePassword.svelte    |   7 +-
 ui/lib/components/Channel.svelte           |   2 +-
 ui/lib/components/CreateChannelForm.svelte |   7 +-
 ui/lib/components/LogIn.svelte             |   8 +-
 ui/lib/components/Message.svelte           |   8 +-
 ui/lib/components/MessageInput.svelte      |  11 +--
 ui/lib/components/MessageRun.svelte        |   6 +-
 ui/lib/store/channels.svelte.js            |   9 +-
 ui/lib/store/messages.svelte.js            |   2 +-
 ui/routes/(app)/+layout.svelte             |   6 +-
 ui/routes/(app)/+page.svelte               |   4 +-
 ui/routes/(app)/ch/[channel]/+page.svelte  |  14 +--
 ui/styles/app-layout.css                   |   4 +-
 ui/styles/reset.css                        | 147 ++++++++++++++++++++++-------
 ui/styles/sidebar.css                      |   2 +-
 ui/styles/textarea.css                     |   2 +-
 ui/styles/variables.css                    |  18 +++-
 18 files changed, 167 insertions(+), 112 deletions(-)

(limited to 'ui/styles/variables.css')

diff --git a/ui/app.css b/ui/app.css
index 2df588e..a02106d 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -1,14 +1,14 @@
-@import url("styles/reset.css");
-@import url("styles/variables.css");
-@import url("styles/overscroll.css");
-@import url("styles/app-bar.css");
-@import url("styles/app-layout.css");
-@import url("styles/sidebar.css");
-@import url("styles/active-channel.css");
-@import url("styles/messages.css");
-@import url("styles/textarea.css");
-@import url("styles/forms.css");
-@import url("styles/invites.css");
+@import url('styles/reset.css');
+@import url('styles/variables.css');
+@import url('styles/overscroll.css');
+@import url('styles/app-bar.css');
+@import url('styles/app-layout.css');
+@import url('styles/sidebar.css');
+@import url('styles/active-channel.css');
+@import url('styles/messages.css');
+@import url('styles/textarea.css');
+@import url('styles/forms.css');
+@import url('styles/invites.css');
 
 body {
   background-color: var(--colour-active-channel-bg);
diff --git a/ui/lib/components/ChangePassword.svelte b/ui/lib/components/ChangePassword.svelte
index 51ebccd..bf94ea7 100644
--- a/ui/lib/components/ChangePassword.svelte
+++ b/ui/lib/components/ChangePassword.svelte
@@ -35,12 +35,7 @@
 
   <label
     >new password
-    <input
-      name="newPassword"
-      type="password"
-      placeholder="password"
-      bind:value={newPassword}
-    />
+    <input name="newPassword" type="password" placeholder="password" bind:value={newPassword} />
   </label>
 
   <label
diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index 2fc3249..c73340f 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <a href="/ch/{id}">
-  <li class:active={active}>
+  <li class:active>
     {#if hasUnreads}
       <span class="badge has-unreads">❦</span>
     {:else}
diff --git a/ui/lib/components/CreateChannelForm.svelte b/ui/lib/components/CreateChannelForm.svelte
index 8fab4c4..85c85bb 100644
--- a/ui/lib/components/CreateChannelForm.svelte
+++ b/ui/lib/components/CreateChannelForm.svelte
@@ -16,11 +16,6 @@
 </script>
 
 <form onsubmit={handleSubmit}>
-  <input
-    type="text"
-    placeholder="create channel"
-    bind:value={name}
-    {disabled}
-  />
+  <input type="text" placeholder="create channel" bind:value={name} {disabled} />
   <button type="submit">&#x2795;</button>
 </form>
diff --git a/ui/lib/components/LogIn.svelte b/ui/lib/components/LogIn.svelte
index 44aab44..5bfdae2 100644
--- a/ui/lib/components/LogIn.svelte
+++ b/ui/lib/components/LogIn.svelte
@@ -12,13 +12,7 @@
   <form class="form" {onsubmit}>
     <label for="username">
       username
-      <input
-        name="username"
-        type="text"
-        placeholder="username"
-        bind:value={username}
-        {disabled}
-      />
+      <input name="username" type="text" placeholder="username" bind:value={username} {disabled} />
     </label>
     <label for="password">
       password
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index 6918b5d..1b1598b 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -25,13 +25,7 @@
   }
 </script>
 
-<div
-    class="message"
-    class:delete-armed={deleteArmed}
-    role="article"
-    data-at={at}
-    {onmouseleave}
-    >
+<div class="message" class:delete-armed={deleteArmed} role="article" data-at={at} {onmouseleave}>
   <div class="handle">
     {atFormatted}
     {#if editable}
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index 25a0352..162db1b 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -24,13 +24,6 @@
 </script>
 
 <form bind:this={form} onsubmit={onSubmit}>
-  <textarea
-    onkeydown={onKeyDown}
-    bind:value
-    {disabled}
-    type="search"
-  ></textarea>
-  <button
-    type="submit"
-  >&raquo;</button>
+  <textarea onkeydown={onKeyDown} bind:value {disabled} type="search"></textarea>
+  <button type="submit">&raquo;</button>
 </form>
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index dec5f4f..bee64e8 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -8,11 +8,7 @@
   let ownMessage = $derived($currentUser !== null && $currentUser.id == sender);
 </script>
 
-<div
-  class="message-run"
-  class:own-message={ownMessage}
-  class:other-message={!ownMessage}
->
+<div class="message-run" class:own-message={ownMessage} class:other-message={!ownMessage}>
   <span class="username">
     @{name}:
   </span>
diff --git a/ui/lib/store/channels.svelte.js b/ui/lib/store/channels.svelte.js
index 8919be0..c82f9aa 100644
--- a/ui/lib/store/channels.svelte.js
+++ b/ui/lib/store/channels.svelte.js
@@ -1,5 +1,5 @@
 import { DateTime } from 'luxon';
-const EPOCH_STRING = "1970-01-01T00:00:00Z";
+const EPOCH_STRING = '1970-01-01T00:00:00Z';
 
 // For reasons unclear to me, a straight up class definition with a constructor
 // doesn't seem to work, reactively. So we resort to this.
@@ -15,7 +15,7 @@ function makeChannelObject({ id, name, draft = '', lastReadAt = null, scrollPosi
     name,
     lastReadAt: lastReadAt || DateTime.fromISO(EPOCH_STRING),
     draft,
-    scrollPosition,
+    scrollPosition
   };
 }
 
@@ -33,10 +33,7 @@ export class Channels {
   }
 
   addChannel(id, name) {
-    this.channels = [
-      ...this.channels,
-      makeChannelObject({ id, name }),
-    ];
+    this.channels = [...this.channels, makeChannelObject({ id, name })];
     this.sort();
     return this;
   }
diff --git a/ui/lib/store/messages.svelte.js b/ui/lib/store/messages.svelte.js
index ba4c895..dadade6 100644
--- a/ui/lib/store/messages.svelte.js
+++ b/ui/lib/store/messages.svelte.js
@@ -5,7 +5,7 @@ import DOMPurify from 'dompurify';
 const RUN_COALESCE_MAX_INTERVAL = 10 /* min */ * 60 /* sec */ * 1000; /* ms */
 
 export class Messages {
-  channels = $state({});  // Mapping<ChannelId, Message>
+  channels = $state({}); // Mapping<ChannelId, Message>
 
   inChannel(channel) {
     return this.channels[channel] || [];
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 08444bd..cbfef54 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -41,7 +41,7 @@
         let hasUnreads = lastMessageAt > ch.lastReadAt;
         enrichedChannels.push({
           ...ch,
-          hasUnreads,
+          hasUnreads
         });
       }
     }
@@ -116,7 +116,7 @@
   }
 </script>
 
-<svelte:window on:beforeunload={beforeUnload}/>
+<svelte:window on:beforeunload={beforeUnload} />
 
 <svelte:head>
   <!-- TODO: unread count? -->
@@ -128,7 +128,7 @@
 {:else}
   <div id="interface">
     <nav id="sidebar" data-expanded={pageContext.showMenu}>
-        <ChannelList active={channel} channels={enrichedChannels} />
+      <ChannelList active={channel} channels={enrichedChannels} />
       <div class="create-channel">
         <CreateChannelForm />
       </div>
diff --git a/ui/routes/(app)/+page.svelte b/ui/routes/(app)/+page.svelte
index e15bca8..007c5c6 100644
--- a/ui/routes/(app)/+page.svelte
+++ b/ui/routes/(app)/+page.svelte
@@ -1,5 +1,3 @@
 <div class="no-active-channel">
-  <span class="vertical-aligner">
-    Please select or create a channel.
-  </span>
+  <span class="vertical-aligner"> Please select or create a channel. </span>
 </div>
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index 8eba709..dbdb507 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -18,15 +18,17 @@
     const elementTop = elRect.top;
     const elementBottom = elRect.bottom;
 
-    return ((parentTop < elementTop) && (parentBottom > elementBottom));
+    return parentTop < elementTop && parentBottom > elementBottom;
   }
 
   function getLastVisibleMessage() {
     const parentElement = activeChannel;
     const childElements = parentElement.getElementsByClassName('message');
-    const lastInView = Array.from(childElements).reverse().find((el) => {
-      return inView(parentElement, el);
-    });
+    const lastInView = Array.from(childElements)
+      .reverse()
+      .find((el) => {
+        return inView(parentElement, el);
+      });
     return lastInView;
   }
 
@@ -50,14 +52,14 @@
   });
 
   function handleKeydown(event) {
-		if (event.key === 'Escape') {
+    if (event.key === 'Escape') {
       setLastRead(); // TODO: pass in "last message DT"?
     }
   }
 
   let lastReadCallback = null;
   function handleScroll() {
-    clearTimeout(lastReadCallback);  // Fine if lastReadCallback is null still.
+    clearTimeout(lastReadCallback); // Fine if lastReadCallback is null still.
     lastReadCallback = setTimeout(setLastRead, 2 * 1000);
   }
 </script>
diff --git a/ui/styles/app-layout.css b/ui/styles/app-layout.css
index 50fa704..82d9914 100644
--- a/ui/styles/app-layout.css
+++ b/ui/styles/app-layout.css
@@ -36,7 +36,9 @@ nav.list-nav {
   overflow: auto;
 
   @media (width > 640px) {
-    height: calc(100vh - var(--app-bar-height) - var(--input-row-height) - var(--interface-padding));
+    height: calc(
+      100vh - var(--app-bar-height) - var(--input-row-height) - var(--interface-padding)
+    );
   }
 }
 
diff --git a/ui/styles/reset.css b/ui/styles/reset.css
index e29c0f5..a3f7681 100644
--- a/ui/styles/reset.css
+++ b/ui/styles/reset.css
@@ -3,46 +3,127 @@
    License: none (public domain)
 */
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
 body {
-	line-height: 1;
+  line-height: 1;
 }
-ol, ul {
-	list-style: none;
+ol,
+ul {
+  list-style: none;
 }
-blockquote, q {
-	quotes: none;
+blockquote,
+q {
+  quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
 }
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index b31c4fd..5e5e16a 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -44,7 +44,7 @@
   padding: 0.5rem;
   border-radius: 0.5rem 0 0 0.5rem;
   border: 1px solid var(--colour-input-border);
-  z-index: 1;  /* Just to make the focus-active border go over the following button. */
+  z-index: 1; /* Just to make the focus-active border go over the following button. */
   flex-grow: 1;
   background-color: var(--colour-input-bg);
   color: var(--colour-input-text);
diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css
index b45a66d..c38de46 100644
--- a/ui/styles/textarea.css
+++ b/ui/styles/textarea.css
@@ -10,7 +10,7 @@
   padding: 0.5rem;
   border-radius: 0.5rem 0 0 0.5rem;
   border: 1px solid var(--colour-input-border);
-  z-index: 1;  /* Just to make the focus-active border go over the following button. */
+  z-index: 1; /* Just to make the focus-active border go over the following button. */
   flex-grow: 1;
   background-color: var(--colour-input-bg);
   color: var(--colour-input-text);
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index fa51506..80817f3 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -8,9 +8,9 @@
   --nav-width: 21rem;
 
   /* coloUrs */
-  --colour-okay: #6A994E;
-  --colour-warn: #EBC3BE;
-  --colour-error: #DE5F55;
+  --colour-okay: #6a994e;
+  --colour-warn: #ebc3be;
+  --colour-error: #de5f55;
 
   /* I dunno, I liked this colour: */
   --colour-base: rgb(121, 96, 159);
@@ -43,9 +43,17 @@
 
   /* MessageRun */
   --colour-message-run-self-bg: color-mix(in srgb, var(--colour-base) 30%, white);
-  --colour-message-run-self-border: color-mix(in srgb, var(--colour-message-run-self-bg) 50%, black);
+  --colour-message-run-self-border: color-mix(
+    in srgb,
+    var(--colour-message-run-self-bg) 50%,
+    black
+  );
   --colour-message-run-other-bg: color-mix(in srgb, var(--colour-base) 50%, white);
-  --colour-message-run-other-border: color-mix(in srgb, var(--colour-message-run-other-bg) 50%, black);
+  --colour-message-run-other-border: color-mix(
+    in srgb,
+    var(--colour-message-run-other-bg) 50%,
+    black
+  );
   --colour-message-run-self-text: var(--dark-text);
   --colour-message-run-other-text: var(--dark-text);
 
-- 
cgit v1.2.3