From ca720110940c96915d4abfd8107b6aa745f37963 Mon Sep 17 00:00:00 2001
From: Michael Freno <michaelt.freno@gmail.com>
Date: Sun, 4 Jan 2026 10:22:11 -0500
Subject: [PATCH] improved stylings

---
 src/components/blog/PostBodyClient.tsx |  7 +--
 src/routes/blog/[title]/index.tsx      | 65 +++++++++++++-------------
 src/routes/blog/post.css               | 25 ++++++++--
 3 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/src/components/blog/PostBodyClient.tsx b/src/components/blog/PostBodyClient.tsx
index 0d4aec7..c5691e2 100644
--- a/src/components/blog/PostBodyClient.tsx
+++ b/src/components/blog/PostBodyClient.tsx
@@ -194,8 +194,6 @@ export default function PostBodyClient(props: PostBodyClientProps) {
         link.textContent = `[${refNumber}]`;
         link.className =
           "reference-link text-blue hover:text-sky no-underline cursor-pointer";
-        link.style.cssText =
-          "text-decoration: none; font-size: 0.75em; vertical-align: super;";
 
         link.onclick = (e) => {
           e.preventDefault();
@@ -235,9 +233,7 @@ export default function PostBodyClient(props: PostBodyClientProps) {
       // Find the parent container and add styling
       const parentDiv = referencesSection.parentElement;
       if (parentDiv) {
-        // Add top border and padding
-        parentDiv.style.cssText =
-          "border-top: 1px solid var(--surface2); margin-top: 4rem; padding-top: 2rem;";
+        parentDiv.classList.add("references-heading");
       }
 
       // Find all paragraphs after the References heading that start with [n]
@@ -258,7 +254,6 @@ export default function PostBodyClient(props: PostBodyClientProps) {
             // Add styling
             currentElement.className =
               "reference-item transition-colors duration-500 text-sm mb-3";
-            currentElement.style.cssText = "scroll-margin-top: 100px;";
 
             // Parse and style the content - get everything after [n]
             let refText = text.substring(match[0].length);
diff --git a/src/routes/blog/[title]/index.tsx b/src/routes/blog/[title]/index.tsx
index fd6aa67..35e1e82 100644
--- a/src/routes/blog/[title]/index.tsx
+++ b/src/routes/blog/[title]/index.tsx
@@ -370,35 +370,36 @@ export default function PostPage() {
                       <div class="z-10 pt-80 backdrop-blur-[0.01px] sm:pt-96 md:pt-[50vh]">
                         {/* Content that slides over the fixed image */}
                         <div class="bg-base relative pb-24">
-                          <div class="flex w-full flex-col justify-center pt-8 md:flex-row md:justify-between">
-                            <div class="">
-                              <div class="flex justify-center italic md:justify-start md:pl-24">
-                                Written {new Date(p().date).toDateString()}
-                              </div>
-                              <div>
+                          <div class="flex w-full flex-col justify-center pt-8 lg:flex-row lg:items-start lg:justify-between">
+                            <div class="flex flex-col gap-2 px-4 md:px-8">
+                              <div class="flex flex-col text-center md:text-left">
+                                <div class="text-sm italic">
+                                  Written {new Date(p().date).toDateString()}
+                                </div>
                                 <Show when={p().last_edited_date !== p().date}>
-                                  <div class="flex justify-center text-sm italic md:justify-start md:pl-24">
+                                  <div class="text-subtext0 text-xs italic">
                                     Edited:{" "}
                                     {new Date(
                                       p().last_edited_date
                                     ).toDateString()}
                                   </div>
                                 </Show>
-
-                                <div class="flex justify-center md:justify-start md:pl-24">
-                                  By Michael Freno
-                                </div>
                               </div>
-                              <div class="flex max-w-105 flex-wrap justify-center italic md:justify-start md:pl-24">
+
+                              <div class="text-center text-sm md:text-left">
+                                By Michael Freno
+                              </div>
+
+                              <div class="flex flex-wrap justify-center gap-2 pt-2 md:justify-start">
                                 <For each={postData.tags as any[]}>
                                   {(tag) => {
                                     const tagValue = tag.value;
                                     return tagValue ? (
                                       <A
                                         href={`/blog?include=${encodeURIComponent(tagValue.split("#")[1])}`}
-                                        class="group bg-teal relative m-1 h-fit w-fit rounded-xl px-2 py-1 text-sm transition-all duration-200 hover:brightness-110 active:scale-95"
+                                        class="bg-teal rounded-lg px-3 py-1.5 text-xs font-medium text-white transition-all duration-200 hover:brightness-110 active:scale-95 sm:text-sm"
                                       >
-                                        <div class="text-white">{tagValue}</div>
+                                        {tagValue}
                                       </A>
                                     ) : null;
                                   }}
@@ -406,40 +407,38 @@ export default function PostPage() {
                               </div>
                             </div>
 
-                            <div class="flex flex-row justify-center pt-4 md:pt-0 md:pr-8">
-                              <div class="mx-2">
-                                <div class="tooltip flex flex-col">
-                                  <div class="mx-auto">
-                                    <Fire
-                                      height={32}
-                                      width={32}
-                                      color="var(--color-red)"
-                                    />
-                                  </div>
-                                  <div class="text-text my-auto pt-0.5 pl-2 text-sm">
-                                    {postData.reads || 0}{" "}
-                                    {postData.reads === 1 ? "Hit" : "Hits"}
-                                  </div>
+                            <div class="flex flex-row justify-center gap-4 pt-6 lg:pt-0 lg:pr-8">
+                              <div class="tooltip flex flex-col items-center">
+                                <div>
+                                  <Fire
+                                    height={32}
+                                    width={32}
+                                    color="var(--color-red)"
+                                  />
+                                </div>
+                                <div class="text-text pt-0.5 text-sm whitespace-nowrap">
+                                  {postData.reads || 0}{" "}
+                                  {postData.reads === 1 ? "Hit" : "Hits"}
                                 </div>
                               </div>
 
-                              <a href="#comments" class="mx-2">
+                              <a href="#comments">
                                 <button
                                   onClick={() => {
                                     document
                                       .getElementById("comments")
                                       ?.scrollIntoView({ behavior: "smooth" });
                                   }}
-                                  class="tooltip flex flex-col"
+                                  class="tooltip flex flex-col items-center"
                                 >
-                                  <div class="mx-auto hover:brightness-125">
+                                  <div class="hover:brightness-125">
                                     <CommentIcon
                                       strokeWidth={1}
                                       height={32}
                                       width={32}
                                     />
                                   </div>
-                                  <div class="text-text my-auto pt-0.5 pl-2 text-sm">
+                                  <div class="text-text pt-0.5 text-sm whitespace-nowrap">
                                     {postData.comments.length}{" "}
                                     {postData.comments.length === 1
                                       ? "Comment"
@@ -448,7 +447,7 @@ export default function PostPage() {
                                 </button>
                               </a>
 
-                              <div class="mx-2">
+                              <div>
                                 <SessionDependantLike
                                   currentUserID={postData.userID}
                                   privilegeLevel={postData.privilegeLevel}
diff --git a/src/routes/blog/post.css b/src/routes/blog/post.css
index 63ecb7a..eb52454 100644
--- a/src/routes/blog/post.css
+++ b/src/routes/blog/post.css
@@ -687,6 +687,25 @@ button:active,
 #post-content-body span#references-section-start {
   display: none !important;
 }
+
+/* Reference links in content */
+#post-content-body .reference-link {
+  text-decoration: none;
+  font-size: 0.75em;
+  vertical-align: super;
+}
+
+/* References section styling */
+#post-content-body .references-heading {
+  border-top: 1px solid var(--color-surface2);
+  margin-top: 4rem;
+  padding-top: 2rem;
+}
+
+/* Individual reference item */
+#post-content-body .reference-item {
+  scroll-margin-top: 100px;
+}
 /* Code block styles for published posts */
 #post-content-body pre {
   position: relative;
@@ -740,8 +759,8 @@ button:active,
   position: absolute;
   left: 0;
   top: 0;
-  bottom: 0;
-  padding: 1rem 0.75rem;
+  height: 100%;
+  padding: 0.75rem 0.75rem;
   text-align: right;
   user-select: none;
   pointer-events: none;
@@ -749,7 +768,7 @@ button:active,
   border-right: 1px solid var(--color-surface0);
   color: var(--color-overlay0);
   font-size: 0.875rem;
-  line-height: 1.5rem;
+  line-height: 1.35rem;
   font-family: inherit;
   min-width: 3rem;
 }