Reorganize styles.css a bit, moving common / utility / layout styles to top of file

internal/webserver/static/styles.css

@@ -31,23 +31,35 @@ const QColor COLOR_SPACE_PURPLE_OUTLINE = QColor(100, 82, 252);
 */
 }
 
+
+/***************************************************************************************************
+ *
+ * Base styles
+ * -----------
+ *
+ * Page global / default styles.  Should only use tag selectors or attribute selectors.  No ID or
+ * class selectors; those are purpose-specific, i.e., non-default.
+ *
+ ***************************************************************************************************/
+
 html {
-    /* Force scrollbar, even when it fits on 1 page.  Prevents viewport from resizing -> flickering / stuff moving btw page loads */
+    /*
+     * Force scrollbar, even when it fits on 1 page.  Prevents viewport from resizing -> flickering
+     * and stuff moving between page loads
+     */
     overflow-y: scroll;
 }
 body {
     margin: 0 30%;
+    min-height: 100vh;
+
     border-color: var(--color-twitter-off-white-dark);
     border-right-style: solid;
     border-left-style: solid;
     border-width: 1px;
-    min-height: 100vh;
 
     font-family: "Titillium Web";
 }
-main {
-    padding-top: 4em;
-}
 input, select {
     font-family: inherit;
     font-size: 1em;
@@ -55,11 +67,117 @@ input, select {
     box-sizing: border-box;
     border-radius: 0.5em;
 }
-
+input[type="submit"] {
+    background-color: var(--color-twitter-blue-light);
+    width: 10em;
+    padding: 1em;
+    border-radius: 1em;
+    font-size: 1em;
+    cursor: pointer;
+}
+a {
+    text-decoration: none;
+    color: inherit;
+}
 h1 {
     margin: 0.5em 0;
     text-align: center;
 }
+h3 {
+    margin: 0.5em 0;
+}
+
+
+/***************************************************************************************************
+ *
+ * Utility styles
+ * --------------
+ *
+ * Generic or reusable styles.  Should use only class selectors.  Should *not* actually be modules
+ * (anything application specific).
+ *
+ ***************************************************************************************************/
+
+.row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.row--spread {
+    justify-content: space-between;
+}
+
+/* A list of items separated by interpuncts */
+.inline-dotted-list {
+    list-style: none;
+    margin: 0;
+}
+.inline-dotted-list > * {
+    display: inline;
+}
+.inline-dotted-list > *:after {
+    content: " ⋅";
+}
+.inline-dotted-list > *:last-child:after {
+    content: "";
+}
+
+.rounded-gray-outline {
+    outline-color: lightgray;
+    outline-style: solid;
+    outline-width: 1px;
+    overflow: hidden;
+    border-radius: 1.5em;
+}
+
+/***************************************************************************************************
+ *
+ * Layout styles
+ * -------------
+ *
+ * Major page elements.  Can use semantic HTML tag names and IDs.  Class selectors are for modules.
+ *
+ ***************************************************************************************************/
+
+header {
+    /* Sticky to top of page */
+    position: fixed;
+    z-index: 1;
+
+    /* Match layout width of `body` */
+    left: 30%;
+    right: 30%;
+
+    height: 4em;
+    padding: 0.5em 1em;
+    border: 1px solid var(--color-outline-gray);
+    box-sizing: border-box;
+
+    background-color: white;
+}
+
+main {
+    /* Space taken up by the header search bar */
+    padding-top: 4em;
+}
+
+#nav-sidebar {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    transform: translate(-100%, 0);
+    font-size: 1.4em;
+}
+
+
+/*******************************************************************************
+ *
+ * Module styles
+ * -------------
+ *
+ * Normal page elements.  Should only use classes; no IDs or tag names.
+ *
+ *******************************************************************************/
 
 .server-error-msg {
     position: fixed;
@@ -83,24 +201,11 @@ h1 {
     text-align: center;
 }
 
-ul.inline-dotted-list {
-    list-style: none;
-    margin: 0;
-}
-ul.inline-dotted-list li {
-    display: inline;
-}
-ul.inline-dotted-list li:after {
-    content: " ⋅";
-}
-ul.inline-dotted-list li:last-child:after {
-    content: "";
-}
-
 .tweet {
     padding: 0 1.5em;
     position: relative;
     z-index: 0;  /* Dunno why, but without it, hovering a tweet with a Poll hides the poll fill bars */
+    overflow: hidden; /* Otherwise HTMX spinner sticks over the rounded edges in a quoted tweet */
 }
 :not(#focused-tweet) > .tweet:hover:not(:has(.tweet:hover)) {
     background-color: var(--color-twitter-off-white);
@@ -168,25 +273,10 @@ dialog::backdrop {
     margin: 1em 0;
 }
 
-.rounded-gray-outline {
-    outline-color: lightgray;
-    outline-style: solid;
-    outline-width: 1px;
-}
-.rounded-gray-outline, .rounded-gray-outline > .tweet {
-    border-radius: 1.5em;
-    overflow: hidden;
-}
-
 .profile-banner-image {
     width: 100%;
 }
 
-.unstyled-link {
-    text-decoration: none;
-    color: inherit;
-}
-
 .author-info {
     display: flex;
     align-items: center;
@@ -241,7 +331,6 @@ dialog::backdrop {
     color: var(--color-twitter-text-gray);
 }
 a.entity {
-    text-decoration: none;
     color: var(--color-twitter-blue);
 }
 
@@ -281,9 +370,6 @@ img.embedded-link-preview {
     font-size: 0.8em;
     margin: 0;
 }
-h3 {
-    margin: 0.5em 0;
-}
 .embedded-link-domain-container {
     margin-top: 0.2em
 }
@@ -356,15 +442,6 @@ img.svg-icon.pinned-tweet__pin-icon {
     height: auto;
 }
 
-.row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-.row.spread {
-    justify-content: space-between;
-}
-
 .vertical-reply-line-container {
     flex-grow: 0;
     flex-shrink: 0;
@@ -421,13 +498,6 @@ p.posted-at {
     padding-bottom: 1em;
     border-bottom: 1px solid var(--color-twitter-off-white-dark);
 }
-.nav-sidebar {
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    transform: translate(-100%, 0);
-    font-size: 1.4em;
-}
 ul.quick-links {
     display: flex;
     flex-direction: column;
@@ -511,22 +581,6 @@ ul.quick-links {
     background-color: var(--color-twitter-blue-extra-light);
 }
 
-.top-bar {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 4em;
-    padding: 0.5em 1em;
-    gap: 1em;
-    border: 1px solid var(--color-outline-gray);
-    position: fixed;
-    background-color: white;
-    width: 40%;
-    left: 30%;
-    box-sizing: border-box;
-    z-index: 1;
-}
-
 .back-button {
     flex-grow: 0;
     border-radius: 50%;
@@ -553,7 +607,8 @@ svg {
     left: 50%;
     transform: translate(-50%, -50%);
 }
-.top-bar form {
+.search-form {
+    margin-left: 1em;
     flex-grow: 1;
     display: flex;
 }
@@ -587,14 +642,7 @@ svg {
 .submit-container {
     text-align: right;
 }
-input[type="submit"] {
+
-    background-color: var(--color-twitter-blue-light);
-    width: 10em;
-    padding: 1em;
-    border-radius: 1em;
-    font-size: 1em;
-    cursor: pointer;
-}
 .change-session-form select {
     display: block;
     width: 100%;

internal/webserver/tpl/includes/base.tpl

@@ -21,21 +21,20 @@
             });
         }
       </script>
-
     </head>
     <body>
-      <div class="top-bar">
+      <header class="row search-bar">
         <a onclick="window.history.back()" class="back-button quick-link">
           <img class="svg-icon" src="/static/icons/back.svg" width="24" height="24"/>
         </a>
-        <form hx-get="/search" hx-push-url="true" hx-target="body" hx-swap="inner-html show:window:top">
+        <form class="search-form" hx-get="/search" hx-push-url="true" hx-target="body" hx-swap="inner-html show:window:top">
           <input id="search-bar"
             name="q"
             placeholder="Search" type="text"
             {{with (search_text)}} value="{{.}}" {{end}}
           />
         </form>
-      </div>
+      </header>
       {{template "nav-sidebar"}}
       <main>
         {{template "main" .}}

internal/webserver/tpl/includes/nav_sidebar.tpl

@@ -1,5 +1,5 @@
 {{define "nav-sidebar"}}
-  <div class="nav-sidebar">
+  <nav id="nav-sidebar">
     <div id="logged-in-user-info">
       <div class="quick-link" hx-get="/login" hx-trigger="click" hx-target="body" hx-push-url="true">
         {{template "author-info" active_user}}
@@ -72,5 +72,5 @@
         </li>
       </a>
     </ul>
-  </div>
+  </nav>
 {{end}}

internal/webserver/tpl/list_of_lists.tpl

@@ -17,7 +17,7 @@
   <div class="users-list-previews">
     {{range .}}
       {{$max_display_users := 10}}
-      <div class="users-list-preview row spread">
+      <div class="users-list-preview row row--spread">
         <div class="list-info-container" hx-get="/lists/{{.ID}}" hx-trigger="click" hx-target="body" hx-push-url="true">
           <span class="list-name">{{.Name}}</span>
           <span class="num-users">({{(len .Users)}})</span>

internal/webserver/tpl/login.tpl

@@ -2,7 +2,7 @@
 
 {{define "main"}}
 <div class="login">
-  <form hx-post="/change-session" hx-target=".nav-sidebar" hx-swap="outerHTML" hx-ext="json-enc">
+  <form hx-post="/change-session" hx-target="#nav-sidebar" hx-swap="outerHTML" hx-ext="json-enc">
     <label for="select-account">Choose account:</label>
     <select name="account" id="select-account">
       {{range .ExistingSessions}}

internal/webserver/tpl/search.tpl

@@ -2,7 +2,7 @@
 
 {{define "main"}}
   <div class="search-header">
-    <div class="row spread">
+    <div class="row row--spread">
       <div class="dummy"></div> {{/* Extra div to take up a slot in the `row` */}}
       <h1>Search results: {{.SearchText}}</h1>
       <div class="user-feed-buttons-container">

internal/webserver/tpl/tweet_page_includes/list.tpl

@@ -3,7 +3,7 @@
     {{range .UserIDs}}
       {{$user := (user .)}}
       <div class="user">
-        <div class="row spread">
+        <div class="row row--spread">
           {{template "author-info" $user}}
           {{if $.button_text}}
             <a class="unstyled-link quick-link danger" href="{{$.button_url}}?user_handle={{$user.Handle}}"onclick="return confirm('{{$.button_text}} this user?  Are you sure?')">