Mike/freno-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved stylings

Browse Source
This commit is contained in:
Michael Freno
2026-01-04 10:22:11 -05:00
parent afefb8fc5b
commit ca72011094
3 changed files with 55 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/blog/PostBodyClient.tsx
View File

@@ -194,8 +194,6 @@ export default function PostBodyClient(props: PostBodyClientProps) {
link.textContent = `[${refNumber}]`; link.textContent = `[${refNumber}]`;
link.className = link.className =
"reference-link text-blue hover:text-sky no-underline cursor-pointer"; "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) => { link.onclick = (e) => {
e.preventDefault(); e.preventDefault();
@@ -235,9 +233,7 @@ export default function PostBodyClient(props: PostBodyClientProps) {
// Find the parent container and add styling // Find the parent container and add styling
const parentDiv = referencesSection.parentElement; const parentDiv = referencesSection.parentElement;
if (parentDiv) { if (parentDiv) {
// Add top border and padding parentDiv.classList.add("references-heading");
parentDiv.style.cssText =
"border-top: 1px solid var(--surface2); margin-top: 4rem; padding-top: 2rem;";
} }
// Find all paragraphs after the References heading that start with [n] // Find all paragraphs after the References heading that start with [n]
@@ -258,7 +254,6 @@ export default function PostBodyClient(props: PostBodyClientProps) {
// Add styling // Add styling
currentElement.className = currentElement.className =
"reference-item transition-colors duration-500 text-sm mb-3"; "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] // Parse and style the content - get everything after [n]
let refText = text.substring(match[0].length); let refText = text.substring(match[0].length);

65
src/routes/blog/[title]/index.tsx
View File

@@ -370,35 +370,36 @@ export default function PostPage() {
<div class="z-10 pt-80 backdrop-blur-[0.01px] sm:pt-96 md:pt-[50vh]"> <div class="z-10 pt-80 backdrop-blur-[0.01px] sm:pt-96 md:pt-[50vh]">
{/* Content that slides over the fixed image */} {/* Content that slides over the fixed image */}
<div class="bg-base relative pb-24"> <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="flex w-full flex-col justify-center pt-8 lg:flex-row lg:items-start lg:justify-between">
<div class=""> <div class="flex flex-col gap-2 px-4 md:px-8">
<div class="flex justify-center italic md:justify-start md:pl-24"> <div class="flex flex-col text-center md:text-left">
Written {new Date(p().date).toDateString()} <div class="text-sm italic">
</div> Written {new Date(p().date).toDateString()}
<div> </div>
<Show when={p().last_edited_date !== p().date}> <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:{" "} Edited:{" "}
{new Date( {new Date(
p().last_edited_date p().last_edited_date
).toDateString()} ).toDateString()}
</div> </div>
</Show> </Show>
<div class="flex justify-center md:justify-start md:pl-24">
By Michael Freno
</div>
</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[]}> <For each={postData.tags as any[]}>
{(tag) => { {(tag) => {
const tagValue = tag.value; const tagValue = tag.value;
return tagValue ? ( return tagValue ? (
<A <A
href={`/blog?include=${encodeURIComponent(tagValue.split("#")[1])}`} 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> </A>
) : null; ) : null;
}} }}
@@ -406,40 +407,38 @@ export default function PostPage() {
</div> </div>
</div> </div>
<div class="flex flex-row justify-center pt-4 md:pt-0 md:pr-8"> <div class="flex flex-row justify-center gap-4 pt-6 lg:pt-0 lg:pr-8">
<div class="mx-2"> <div class="tooltip flex flex-col items-center">
<div class="tooltip flex flex-col"> <div>
<div class="mx-auto"> <Fire
<Fire height={32}
height={32} width={32}
width={32} color="var(--color-red)"
color="var(--color-red)" />
/> </div>
</div> <div class="text-text pt-0.5 text-sm whitespace-nowrap">
<div class="text-text my-auto pt-0.5 pl-2 text-sm"> {postData.reads || 0}{" "}
{postData.reads || 0}{" "} {postData.reads === 1 ? "Hit" : "Hits"}
{postData.reads === 1 ? "Hit" : "Hits"}
</div>
</div> </div>
</div> </div>
<a href="#comments" class="mx-2"> <a href="#comments">
<button <button
onClick={() => { onClick={() => {
document document
.getElementById("comments") .getElementById("comments")
?.scrollIntoView({ behavior: "smooth" }); ?.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 <CommentIcon
strokeWidth={1} strokeWidth={1}
height={32} height={32}
width={32} width={32}
/> />
</div> </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}{" "}
{postData.comments.length === 1 {postData.comments.length === 1
? "Comment" ? "Comment"
@@ -448,7 +447,7 @@ export default function PostPage() {
</button> </button>
</a> </a>
<div class="mx-2"> <div>
<SessionDependantLike <SessionDependantLike
currentUserID={postData.userID} currentUserID={postData.userID}
privilegeLevel={postData.privilegeLevel} privilegeLevel={postData.privilegeLevel}

25
src/routes/blog/post.css
View File

@@ -687,6 +687,25 @@ button:active,
#post-content-body span#references-section-start { #post-content-body span#references-section-start {
display: none !important; 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 */ /* Code block styles for published posts */
#post-content-body pre { #post-content-body pre {
position: relative; position: relative;
@@ -740,8 +759,8 @@ button:active,
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; height: 100%;
padding: 1rem 0.75rem; padding: 0.75rem 0.75rem;
text-align: right; text-align: right;
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
@@ -749,7 +768,7 @@ button:active,
border-right: 1px solid var(--color-surface0); border-right: 1px solid var(--color-surface0);
color: var(--color-overlay0); color: var(--color-overlay0);
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.5rem; line-height: 1.35rem;
font-family: inherit; font-family: inherit;
min-width: 3rem; min-width: 3rem;
} }