wymiller/my-website-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjusted css

Browse Source
This commit is contained in:
Wyatt J. Miller
2025-07-14 20:09:10 -04:00
parent 29011c8f48
commit 13d022d44c
7 changed files with 44 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/Footer.tsx
View File

@@ -2,7 +2,7 @@ import * as hi from "jsr:@preact-icons/hi2";
export default function Footer() {
return (
<footer class="bg-[#313244] text-[#cdd6f4] py-8">
<footer class="bg-[#313244] text-[#cdd6f4] py-8 mt-auto">
<div class="container mx-auto px-4">
{/* Grid layout that switches from 2 to 1 column on small screens */}
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">

39
frontend/components/PostCard.tsx
View File

@@ -3,22 +3,31 @@ import { truncateString } from "../lib/truncate.ts";
import { Post } from "../types/index.ts";
export const PostCard = function PostCard({ post }: { post: Post }) {
const handleCardClick = (e: MouseEvent) => {
// Don't navigate if clicking on the author link
if ((e.target as HTMLElement).closest("a")) {
return;
}
window.location.href = `${Deno.env.get("BASE_URI_WEB")}/posts/${post.post_id}`;
};
return (
<div class="p-6 bg-[#45475a] rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105">
<a href={`${Deno.env.get("BASE_URI_WEB")}/posts/${post.post_id}`}>
<h2 class="text-white text-lg font-bold mb-2">{post.title}</h2>
<p class="text-white">
Written by{" "}
<a
class="text-white transition-all duration-300 ease-in-out hover:text-[#74c7ec] hover:drop-shadow-[0_0_10px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer"
href={`${Deno.env.get("BASE_URI_WEB")}/authors/${post.author_id}`}
>
{post.first_name} {post.last_name}
</a>{" "}
at {convertUtc(post.created_at)}
</p>
<p class="text-gray-400">{truncateString(post.body, 15)}</p>
</a>
<div
class="p-6 bg-[#45475a] rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105 cursor-pointer"
onClick={handleCardClick}
>
<h2 class="text-white text-lg font-bold mb-2">{post.title}</h2>
<p class="text-white">
Written by{" "}
<a
class="text-white transition-all duration-300 ease-in-out hover:text-[#74c7ec] hover:drop-shadow-[0_0_10px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer"
href={`${Deno.env.get("BASE_URI_WEB")}/authors/${post.author_id}`}
>
{post.first_name} {post.last_name}
</a>{" "}
at {convertUtc(post.created_at)}
</p>
<p class="text-gray-400">{truncateString(post.body, 15)}</p>
</div>
);
};

2
frontend/components/PostHeader.tsx
View File

@@ -8,7 +8,7 @@ export const PostHeader = function PostHeader({ post }: PostHeaderOpts) {
<Head>
<title>Wyatt J. Miller | {post.title}</title>
</Head>
<div class="p-6 bg-[#313244]">
<div class="p-4 bg-[#313244]">
<div class="min-w-screen flex flex-col items-center justify-between bg-[#45475a] rounded-lg shadow-md">
<div class="sm:mt-14 sm:mb-14 mt-8 mb-8 flex flex-col items-center gap-y-5 gap-x-10 md:flex-row">
<div class="space-y-2 text-center md:text-left">