cleanup styles

remove unused styles and deduplicate styles
shouya · Sep 17, 2024 · 431c061 · 431c061
1 parent 9a76f02
commit 431c061
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 95 deletions.
diff --git a/src/server/web.rs b/src/server/web.rs
@@ -84,7 +84,7 @@ async fn handle_endpoint(
 fn header_libs_fragment() -> Markup {
   html! {
     script
-      src="https://unpkg.com/htmx.org@2.0.2"
+      src="https://unpkg.com/htmx.org@2.0.1/dist/htmx.min.js"
       referrerpolicy="no-referrer" {}
   }
 }

diff --git a/src/server/web/endpoint.rs b/src/server/web/endpoint.rs
@@ -72,7 +72,7 @@ pub async fn render_endpoint_page(
           }
         }
 
-        details .config {
+        details {
           summary {
             "Config";
             (config_tags)
@@ -299,7 +299,7 @@ fn render_post(preview: PostPreview, post: Post) -> Markup {
 
   html! {
     article data-display-mode="rendered" data-folded="true" .post-entry {
-      header .flex {
+      header {
         span .icon-container.fold-icon onclick="toggleFold(this)" title="Expand" {
           (sprite("caret-right"))
         }
@@ -310,7 +310,7 @@ fn render_post(preview: PostPreview, post: Post) -> Markup {
           (sprite("json"))
         }
 
-        div .flex.grow style="margin-left: .5rem" {
+        div .flex style="margin-left: .5rem" {
           span .entry-title.grow { (preview.title) }
           (external_link(&preview.link))
         }
@@ -348,7 +348,7 @@ fn render_post(preview: PostPreview, post: Post) -> Markup {
           time .inline datetime=(date.to_rfc3339()) { (date.to_rfc2822()) }
         }
         @if let Some(author) = &preview.author {
-          span .ml-1 {
+          span .author {
             (PreEscaped("By&nbsp;"));
             address .inline rel="author" { (author) }
           }

diff --git a/static/common.css b/static/common.css
@@ -20,46 +20,6 @@
   --bg-remote: #d6d8d9;
 }
 
-.tag-container {
-  margin: 0 0.5rem;
-  display: inline-flex;
-  gap: 0.2rem;
-
-  .tag {
-    color: var(--fg-muted);
-    background-color: var(--bg-muted);
-    padding: 0.2rem;
-    border-radius: var(--bd-radius);
-    font-size: 0.8rem;
-    cursor: default;
-
-    &.otf {
-      background-color: var(--bg-otf);
-    }
-    &.templated {
-      background-color: var(--bg-templated);
-    }
-    &.scratch {
-      background-color: var(--bg-scratch);
-    }
-    &.local {
-      background-color: var(--bg-local);
-    }
-    &.remote {
-      background-color: var(--bg-remote);
-    }
-
-    a {
-      color: var(--fg);
-      text-decoration: none;
-
-      &:hover {
-        color: var(--fg-active);
-      }
-    }
-  }
-}
-
 body {
   & > header,
   section,
@@ -82,21 +42,11 @@ body {
   align-items: center;
 
   h2 {
+    flex: 1;
     margin: 0;
   }
 }
 
-.flash {
-  border-radius: var(--bd-radius);
-  padding: 0.5rem;
-  border: 1px solid;
-
-  &.error {
-    color: red;
-    border-color: red;
-  }
-}
-
 article {
   margin: 1rem;
   padding: 0.5rem;
@@ -122,21 +72,74 @@ article {
   }
 }
 
+button {
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+/* Utility classes */
+
 .flex {
   display: flex;
+}
 
-  &.grow {
-    flex: 1;
-  }
+.grow {
+  flex: 1;
 }
 
 .inline {
   display: inline;
 }
 
-button {
-  a {
-    color: inherit;
-    text-decoration: none;
+.flash {
+  border-radius: var(--bd-radius);
+  padding: 0.5rem;
+  border: 1px solid;
+
+  &.error {
+    color: red;
+    border-color: red;
+  }
+}
+
+.tag-container {
+  margin: 0 0.5rem;
+  display: inline-flex;
+  gap: 0.2rem;
+
+  .tag {
+    color: var(--fg-muted);
+    background-color: var(--bg-muted);
+    padding: 0.2rem;
+    border-radius: var(--bd-radius);
+    font-size: 0.8rem;
+    cursor: default;
+
+    &.otf {
+      background-color: var(--bg-otf);
+    }
+    &.templated {
+      background-color: var(--bg-templated);
+    }
+    &.scratch {
+      background-color: var(--bg-scratch);
+    }
+    &.local {
+      background-color: var(--bg-local);
+    }
+    &.remote {
+      background-color: var(--bg-remote);
+    }
+
+    a {
+      color: var(--fg);
+      text-decoration: none;
+
+      &:hover {
+        color: var(--fg-active);
+      }
+    }
   }
 }
diff --git a/static/endpoint.css b/static/endpoint.css
@@ -92,11 +92,23 @@
 
 .filter-item {
   position: relative;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 
   > .filter-name {
+    font-family: monospace;
+    color: var(--fg-active);
+    background-color: var(--bg-muted);
+    padding: 0.2rem 0.5rem;
+    border-radius: var(--bd-radius);
     cursor: pointer;
   }
 
+  > .filter-name[data-enabled="0"] {
+    color: var(--fg-muted);
+    background-color: var(--bg-muted);
+  }
+
   > .filter-definition,
   .filter-link {
     display: none;
@@ -151,17 +163,6 @@ main.feed-section {
 }
 
 .header-bar {
-  /* padding-bottom: 1rem; */
-  /* border-bottom: 1.5px dotted; */
-  /* display: flex; */
-  /* align-items: center; */
-  /* height: 2rem; */
-
-  > h2 {
-    flex: 1;
-    margin-bottom: 0;
-  }
-
   > .back-button {
     margin-right: 2rem;
 
@@ -177,13 +178,6 @@ main.feed-section {
   }
 }
 
-.filter-item {
-  .filter-name[data-enabled="0"] {
-    color: var(--fg-muted);
-    background-color: var(--bg-muted);
-  }
-}
-
 pre[class*="language"] {
   margin: 0 !important;
 }
@@ -198,17 +192,3 @@ pre[class*="language"] {
   flex-direction: column;
   gap: 1rem;
 }
-
-.filter-item {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-
-  .filter-name {
-    font-family: monospace;
-    color: var(--fg-active);
-    background-color: var(--bg-muted);
-    padding: 0.2rem 0.5rem;
-    border-radius: var(--bd-radius);
-    cursor: pointer;
-  }
-}