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

added color accents to cards, underlines to subheaders
Some checks failed
Build and Release Docker Images / build-and-push (./backend, public/Dockerfile, my-website-v2_public) (push) Failing after 21m47s
Details
Build and Release Docker Images / build-and-push (./backend, task/Dockerfile, my-website-v2_task) (push) Failing after 23m39s
Details
Build and Release Docker Images / build-and-push (./frontend, Dockerfile, my-website-v2_frontend) (push) Failing after 17m34s
Details
Build and Release Docker Images / create-release (push) Has been skipped
Details

Browse Source
This commit is contained in:
Wyatt J. Miller
2025-07-31 22:45:23 -04:00
parent fb071df6e4
commit 82cf30447b
6 changed files with 38 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/PostBody.tsx
View File

@@ -4,7 +4,7 @@ export const PostBody = function PostBody({ post }: PostBodyOpts) {
return (
<div class="mx-auto max-w-4xl p-4 bg-[#313244]">
<div
class="p-6 bg-[#45475a] shadow-md rounded-lg text-[#f5e0dc] post-content overflow-hidden break-words hyphens-auto max-w-full
class="p-6 bg-[#484659] shadow-md rounded-lg text-[#f5e0dc] post-content overflow-hidden break-words hyphens-auto max-w-full
[&>*]:max-w-5xl [&>*]:overflow-wrap-anywhere"
dangerouslySetInnerHTML={{ __html: post.body }}
></div>

15
frontend/components/PostCard.tsx
View File

@@ -2,15 +2,24 @@ import { convertUtc } from "../lib/convertUtc.ts";
import { truncateString } from "../lib/truncate.ts";
import { Post } from "../types/index.ts";
export const PostCard = function PostCard({ post }: { post: Post }) {
export const PostCard = function PostCard({
post,
colorValue,
}: {
post: Post;
colorValue: string;
}) {
return (
<div class="p-6 bg-[#484659] rounded-lg shadow-xl transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105">
<div
class={`p-6 bg-[#484659] rounded-lg shadow-xl transition-all duration-300 ease-in-out border-b-4 hover:shadow-xl hover:scale-105`}
style={{ borderBottomColor: colorValue }}
>
<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"
class="text-white transition-all duration-300 ease-in-out hover:text-[#cba6f7] 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}

8
frontend/components/PostCarousel.tsx
View File

@@ -3,15 +3,19 @@ import { Post } from "../types/index.ts";
interface PostOpts {
posts: Post[];
colorValue: string;
}
export const PostCarousel = function PostCarousel({ posts }: PostOpts) {
export const PostCarousel = function PostCarousel({
posts,
colorValue,
}: PostOpts) {
return (
<div className="flex w-full justify-start items-start bg-[#313244] p-8">
<div className="max-w-7xl mx-auto">
<div className="flex flex-wrap justify-center gap-3">
{posts.map((post: Post) => (
<PostCard key={post.post_id} post={post} />
<PostCard key={post.post_id} post={post} colorValue={colorValue} />
))}
</div>
</div>