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

fix mobile scroll, weird padding box, improve <code> styles

Browse Source
This commit is contained in:
Michael Freno
2026-01-04 01:32:59 -05:00
parent a3ee392e51
commit afefb8fc5b
3 changed files with 124 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -300,77 +300,73 @@ export default function PostPage() {
};
return (
<Show
when={data()}
fallback={
<div class="flex h-screen items-center justify-center">
<Spinner size="xl" />
</div>
}
>
{(loadedData) => {
// Handle redirect for by-id route
if ("redirect" in loadedData()) {
return <Navigate href={(loadedData() as any).redirect} />;
<CustomScrollbar autoHide={true} autoHideDelay={1500} rightOffset={250}>
<Show
when={data()}
fallback={
<div class="flex h-screen items-center justify-center">
<Spinner size="xl" />
</div>
}
>
{(loadedData) => {
// Handle redirect for by-id route
if ("redirect" in loadedData()) {
return <Navigate href={(loadedData() as any).redirect} />;
}
return (
<Show
when={loadedData().post as Post}
fallback={<Navigate href="/404" />}
>
{(p) => {
const postData = loadedData();
return (
<Show
when={loadedData().post as Post}
fallback={<Navigate href="/404" />}
>
{(p) => {
const postData = loadedData();
// Convert arrays back to Maps for component
const userCommentMap = new Map<UserPublicData, number[]>(
postData.userCommentArray || []
);
const reactionMap = new Map<number, CommentReaction[]>(
postData.reactionArray || []
);
// Convert arrays back to Maps for component
const userCommentMap = new Map<UserPublicData, number[]>(
postData.userCommentArray || []
);
const reactionMap = new Map<number, CommentReaction[]>(
postData.reactionArray || []
);
return (
<>
<Title>
{p().title.replaceAll("_", " ")} | Michael Freno
</Title>
<Meta
name="description"
content={
p().subtitle ||
`Read ${p().title.replaceAll("_", " ")} by Michael Freno on the freno.me blog.`
}
/>
return (
<>
<Title>
{p().title.replaceAll("_", " ")} | Michael Freno
</Title>
<Meta
name="description"
content={
p().subtitle ||
`Read ${p().title.replaceAll("_", " ")} by Michael Freno on the freno.me blog.`
}
/>
<div class="blog-overide relative -mt-16 overflow-x-hidden">
{/* Fixed banner image background */}
<div class="fixed inset-0 top-0 left-0 z-0 aspect-auto max-h-3/4 w-full overflow-hidden brightness-75 md:ml-62.5 md:max-h-[50vh] md:w-[calc(100vw-500px)]">
<img
src={p().banner_photo || "/blueprint.jpg"}
alt="post-cover"
class="h-full w-full object-cover select-none"
style={{
"pointer-events": "none"
}}
/>
<div class="fixed top-24 z-50 m-auto w-full px-4 text-center tracking-widest text-white backdrop-blur-md select-text text-shadow-lg backdrop:brightness-50 sm:top-36 md:top-[20vh] md:w-[calc(100vw-500px)]">
<div class="py-8 text-3xl font-semibold tracking-widest">
{p().title.replaceAll("_", " ")}
<Show when={p().subtitle}>
<div class="py-8 text-xl font-light tracking-widest">
{p().subtitle}
</div>
</Show>
<div class="blog-overide relative -mt-16 overflow-x-hidden">
{/* Fixed banner image background */}
<div class="fixed inset-0 top-0 left-0 z-0 aspect-auto max-h-3/4 w-full overflow-hidden brightness-75 md:ml-62.5 md:max-h-[50vh] md:w-[calc(100vw-500px)]">
<img
src={p().banner_photo || "/blueprint.jpg"}
alt="post-cover"
class="h-full w-full object-cover select-none"
style={{
"pointer-events": "none"
}}
/>
<div class="fixed top-24 z-50 m-auto w-full px-4 text-center tracking-widest text-white backdrop-blur-md select-text text-shadow-lg backdrop:brightness-50 sm:top-36 md:top-[20vh] md:w-[calc(100vw-500px)]">
<div class="py-8 text-3xl font-semibold tracking-widest">
{p().title.replaceAll("_", " ")}
<Show when={p().subtitle}>
<div class="py-8 text-xl font-light tracking-widest">
{p().subtitle}
</div>
</Show>
</div>
</div>
</div>
</div>
<CustomScrollbar
autoHide={true}
autoHideDelay={1500}
rightOffset={250}
>
<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">
@@ -506,14 +502,14 @@ export default function PostPage() {
</div>
</div>
</div>
</CustomScrollbar>
</div>
</>
);
}}
</Show>
);
}}
</Show>
</div>
</>
);
}}
</Show>
);
}}
</Show>
</CustomScrollbar>
);
}

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

@@ -692,7 +692,7 @@ button:active,
position: relative;
overflow: auto;
max-height: 60vh;
background-color: var(--color-crust);
background-color: #1a1a1a;
color: #fff;
font-family: "Source Code Pro", monospace;
border-radius: 0.5rem;
@@ -711,12 +711,16 @@ button:active,
/* Language header */
#post-content-body .language-header {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
background-color: var(--color-mantle);
background-color: #1a1a1a;
color: var(--color-subtext1);
border-bottom: 1px solid var(--color-surface0);
border-top-left-radius: 0.375rem;
@@ -741,7 +745,7 @@ button:active,
text-align: right;
user-select: none;
pointer-events: none;
background-color: var(--color-crust);
background-color: #1a1a1a;
border-right: 1px solid var(--color-surface0);
color: var(--color-overlay0);
font-size: 0.875rem;
@@ -755,13 +759,13 @@ button:active,
padding-left: 4rem;
}
/* Copy button */
/* Copy button - now in header */
#post-content-body .copy-button {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
position: relative;
top: unset;
right: unset;
padding: 0.25rem 0.625rem;
font-size: 0.625rem;
font-weight: 500;
border-radius: 0.25rem;
transition: all 0.2s;
@@ -770,6 +774,8 @@ button:active,
color: var(--color-text);
border: 1px solid var(--color-overlay0);
cursor: pointer;
text-transform: none;
letter-spacing: normal;
}
#post-content-body .copy-button:hover {