breadone/Recipie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dark theme + format changes

Browse Source
This commit is contained in:
June 2025-08-13 11:11:31 +12:00
parent 013077d87f
commit 4f08b122e6
Signed by: breadone
GPG Key ID: FDC19FE143200483
5 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Card/OverviewCard.astro
View File

@ -8,15 +8,15 @@ const headerImage = await client.collection("images").getOne(recipe.images[0])
const image = await client.files.getURL(headerImage, headerImage.image) const image = await client.files.getURL(headerImage, headerImage.image)
--- ---
<div class="relative z-0 flex h-60"> <div class="relative z-0 flex h-50">
<img <img
class="w-full h-full object-cover rounded-xl" class="w-full h-full object-cover rounded-xl"
src={ image } src={ image }
/> />
<div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl z-1"> <div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-20 backdrop-filter backdrop-blur-lg rounded-b-xl z-1">
<p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold" >{recipe.name}</p> <p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold line-clamp-1" >{recipe.name}</p>
<p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> <!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->
<div id="tag-row" class=""> <div id="tag-row" class="">
<TagRow tagIds={recipe.tags}/> <TagRow tagIds={recipe.tags}/>

9
src/components/Header.astro
View File

@ -1,13 +1,14 @@
<div class="flex w-full items-center bg-yellow-100 p-5"> <div class="flex w-full items-center bg-yellow-200 text-black p-5">
<a class="flex" href="/"> <a class="flex" href="/">
<p class="text-3xl">Recipie</p> <p class="text-3xl">Recipie</p>
<!-- <p class=" text-3xl text-amber-500">pie</p> --> <!-- <p class=" text-3xl text-amber-500">pie</p> -->
🥧 🥧
</a> </a>
<div class="flex ml-10 space-x-5"> <div class="ml-auto space-x-5">
<!-- <span>new</span> <a>new</a>
<span>sf</span> --> <a>tags</a>
<a>search</a>
</div> </div>
</div> </div>

2
src/layouts/base.astro
View File

@ -10,7 +10,7 @@ import Header from "@/components/Header";
<body> <body>
<main id="main" class="flex-1"> <main id="main" class="flex-1">
<Header/> <Header/>
<div class="px-5 pt-2"> <div class="px-3 md:px-5 pt-2">
<slot /> <slot />
</div> </div>
</main> </main>

2
src/pages/index.astro
View File

@ -9,7 +9,7 @@ const recipies = await client.collection("recipes").getFullList()
<PageLayout> <PageLayout>
<!-- <p class="pb-2">What would you like today?</p> --> <!-- <p class="pb-2">What would you like today?</p> -->
<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4"> <div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4">
{ {
recipies.map(r => ( recipies.map(r => (
<OverviewCard recipe={r} /> <OverviewCard recipe={r} />

5
src/styles/global.css
View File

@ -1,7 +1,8 @@
@import "tailwindcss"; @import "tailwindcss";
html { html {
/* @apply bg-[#1d1f21]; */ @apply bg-[#1d1f21];
@apply bg-[#fafafa]; /* @apply bg-[#fafafa]; */
@apply text-white;
@apply font-stretch-condensed; @apply font-stretch-condensed;
} }