CSS improvements

Author: localhost433

css/blog.css

@@ -4,30 +4,40 @@
 
 /* Remove default list spacing */
 #posts-list {
-    margin-top: 0;
-  }
-  
-  /* Stack each entry vertically */
-  .post-entry {
-    margin-bottom: 1.5rem;
-  }
-  
-  /* Title & Meta */
-  .post-title {
-    display: block;
-    font-size: 1.5rem;
-    color: #0055aa;
-    margin-bottom: 0.25rem;
-  }
-  .post-meta-inline {
-    display: block;
-    font-size: 0.9rem;
-    color: #777;
-    margin-bottom: 0.5rem;
-  }
-  
-  /* Tag row under each entry */
-  .tags-container {
-    margin-top: 0.5rem;
-  }
-  
+  margin-top: 0;
+}
+
+/* Stack each entry vertically */
+.post-entry {
+  margin-bottom: 1.5rem;
+}
+
+/* Title & Meta */
+.post-title {
+  display: block;
+  font-size: 1.5rem;
+  color: #0055aa;
+  margin-bottom: 0.25rem;
+}
+
+.post-meta-inline {
+  display: block;
+  font-size: 0.9rem;
+  color: #777;
+  margin-bottom: 0.5rem;
+}
+
+/* Tag row under each entry */
+.tags-container {
+  margin-top: 0.5rem;
+}
+
+.tag-button.selected {
+  background-color: #99ccff;
+  color: #fff;
+}
+
+.dark-mode .tag-button.selected {
+  background-color: #0055aa;
+  color: #fff;
+}

css/post.css

@@ -25,7 +25,7 @@ article#post-content .post-meta {
 #comments-section {
   margin-top: 3rem;
   padding: 1.5rem;
-  background-color: #f9f9f9;
+  background-color: #666666;
   border-radius: 1rem;
   box-shadow: 0 2px 6px rgba(0,0,0,0.1);
 }

css/shared.css

@@ -1,8 +1,6 @@
 /* ==========================================================================
-   SHARED / GLOBAL STYLES
-   ========================================================================== */
-
-/* — Reset & Box-Sizing — */
+  RESET & BOX-SIZING
+  ========================================================================== */
 html,
 body,
 *,
@@ -13,7 +11,9 @@ body,
   padding: 0;
 }
 
-/* — Base Typography & Layout — */
+/* ==========================================================================
+  BASE TYPOGRAPHY & LAYOUT
+  ========================================================================== */
 body {
   font-family: Georgia, 'Noto Serif', serif;
   max-width: 800px;
@@ -24,7 +24,6 @@ body {
   line-height: 1.8;
 }
 
-/* — Headings & Paragraphs — */
 h1,
 h2,
 h3,
@@ -41,7 +40,9 @@ p {
   margin-bottom: 1rem;
 }
 
-/* — Links — */
+/* ==========================================================================
+  LINKS
+  ========================================================================== */
 a {
   color: #0055aa;
   text-decoration: none;
@@ -52,7 +53,9 @@ a:focus {
   text-decoration: underline;
 }
 
-/* — Header & Nav — */
+/* ==========================================================================
+  HEADER & NAVIGATION
+  ========================================================================== */
 .header-title {
   font-size: 2.5rem;
   font-weight: bold;
@@ -68,7 +71,6 @@ nav a {
   margin-right: 0.5rem;
 }
 
-/* — Header Row (sub-heading + toggle) — */
 .header-row {
   display: flex;
   justify-content: space-between;
@@ -81,7 +83,9 @@ nav a {
   color: #555;
 }
 
-/* — Buttons & Toggles — */
+/* ==========================================================================
+  BUTTONS & TOGGLES
+  ========================================================================== */
 button,
 #theme-toggle,
 .tag-button {
@@ -102,18 +106,19 @@ button:hover,
   background-color: #ccddee;
 }
 
-/* — Tag “Chips” — */
+/* ==========================================================================
+  TAGS & FILTERS
+  ========================================================================== */
 .post-tag {
   display: inline-block;
-  background-color: #eef;
-  color: #336;
+  background-color: #eee;
+  color: #555;
   font-size: 0.85rem;
   padding: 0.3rem 0.7rem;
   border-radius: 0.6rem;
   margin: 0.2rem 0.3rem 0.2rem 0;
 }
 
-/* — Filter Button Container — */
 #tag-filter {
   margin-top: 2rem;
   margin-bottom: 2rem;
@@ -123,7 +128,9 @@ button:hover,
   margin-top: 0.5rem;
 }
 
-/* — Back Link — */
+/* ==========================================================================
+  BACK LINK
+  ========================================================================== */
 .back-link {
   display: inline-block;
   margin-top: 2rem;
@@ -135,7 +142,9 @@ button:hover,
   text-decoration: underline;
 }
 
-/* — Form Controls — */
+/* ==========================================================================
+  FORM CONTROLS
+  ========================================================================== */
 input[type="text"],
 textarea {
   width: 100%;
@@ -151,7 +160,9 @@ textarea {
   resize: vertical;
 }
 
-/* — Dark Mode — */
+/* ==========================================================================
+  DARK MODE
+  ========================================================================== */
 .dark-mode,
 .dark-mode body {
   background-color: #0e0e0e;
@@ -162,18 +173,34 @@ textarea {
   color: #88aaff;
 }
 
-.dark-mode button,
-.dark-mode #theme-toggle,
-.dark-mode .tag-button {
+.dark-mode button {
   background-color: transparent;
-  color: #ddeeff;
+  color: #def;
+  border: none;
+}
+
+.dark-mode button:hover {
+  background-color: #456;
+}
+
+.dark-mode #theme-toggle {
+  background-color: transparent;
+  color: #def;
+  border: none;
+}
+
+.dark-mode #theme-toggle:hover {
+  background-color: #456;
+}
+
+.dark-mode .tag-button {
+  background-color: #456;
+  color: #def;
   border: none;
 }
 
-.dark-mode button:hover,
-.dark-mode #theme-toggle:hover,
 .dark-mode .tag-button:hover {
-  background-color: #445566;
+  background-color: #678;
 }
 
 .dark-mode input[type="text"],
@@ -194,4 +221,14 @@ textarea {
 
 .dark-mode .header-title {
   color: #cccccc;
+}
+
+.dark-mode .header-row p {
+  font-size: 1.2rem;
+  color: #888888;
+}
+
+.dark-mode .post-tag {
+  background-color: #555;
+  color: #eee;
 }