Skip to content

Commit

Permalink
drink styling
Browse files Browse the repository at this point in the history
  • Loading branch information
Reed Nelson committed Aug 19, 2023
1 parent 23d1a35 commit e717c0e
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 62 deletions.
30 changes: 14 additions & 16 deletions src/layouts/DrinkSingle.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,6 @@ import { getSinglePage } from "@/lib/contentParser.astro";
import similerItems from "@/lib/utils/similarItems";
import { markdownify } from "@/lib/utils/textConverter";
import { Image } from "@astrojs/image/components";
import {
FaWineBottle,
FaVial,
FaNewspaper,
} from "react-icons/fa/index.js";
interface Recipe {
ingredients: {
Expand All @@ -35,7 +30,6 @@ const { ingredients, instructions }: Recipe = post.data;
<article class="lg:col-10">
<h1 set:html={markdownify(title)} class="mb-4" />

<!-- Categories -->
<div class="row">
<div class="lg:col-8 mb-8">
{
Expand All @@ -51,16 +45,16 @@ const { ingredients, instructions }: Recipe = post.data;
)
}
</div>
<!-- Categories -->
<div class="lg:col-4 mb-8">
<section class={`section-sm h-full bg-theme-light dark:bg-darkmode-theme-light rounded-lg mb-4`}>
<div class="container -my-10">
<h2 set:html="Tags" class="mb-4" />
<ul class="mb-4">
<!-- Spirits -->
<section class={`section-sm h-full bg-theme-light dark:bg-darkmode-theme-light rounded-lg`}>
<div class="container -my-14">
<h3 set:html="Tags" class="mb-4" />
<!-- Spirits -->
<ul>
{
spirits.length > 0 && (
<li class="mr-4">
<FaWineBottle className={"mr-2 -mt-1 inline-block"} />
{
spirits.map((spirit: string, index: number) => (
<a
Expand All @@ -72,13 +66,15 @@ const { ingredients, instructions }: Recipe = post.data;
))
}
</li>
<hr class="my-2">
)
}
<!-- Bottles -->
</ul>
<!-- Bottles -->
<ul>
{
bottles.length > 0 && (
<li class="mr-4">
<FaVial className={"mr-2 -mt-1 inline-block"} />
{
bottles.map((bottle: string, index: number) => (
<a
Expand All @@ -90,13 +86,15 @@ const { ingredients, instructions }: Recipe = post.data;
))
}
</li>
<hr class="my-2">
)
}
<!-- Tags -->
</ul>
<!-- Tags -->
<ul>
{
tags.length > 0 && (
<li class="mr-4">
<FaNewspaper className={"mr-2 -mt-1 inline-block"} />
{
tags.map((tag: string, index: number) => (
<a
Expand Down
51 changes: 26 additions & 25 deletions src/layouts/components/DrinkCard.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,31 @@ const { title, image } = data.data;
---

<div class="bg-body dark:bg-darkmode-body">
<a href={`/${drink_folder}/${data.slug}`}>
<div class="relative">
{
image && (
<Image
class="mb-2 w-full rounded"
src={image}
alt={title}
width={1280}
height={720}
format="webp"
/>
)
}
<div class="bg-theme-light bg-opacity-60 dark:bg-darkmode-theme-light dark:bg-opacity-60 rounded absolute bottom-0 px-2 py-1">
<h4 class="opacity-60 dark:opacity-60 font-normal">
{title}
</h4>
</div>
</div>
</a>
</div>


<!-- <div class="bg-body dark:bg-darkmode-body">
<a href={`/${drink_folder}/${data.slug}`}>
<div>
{
Expand All @@ -29,28 +54,4 @@ const { title, image } = data.data;
</h4>
</div>
</a>
</div>

<!--
<div class=" bg-theme-light dark:bg-darkmode-theme-light rounded">
<a href={`/${drink_folder}/${data.slug}`}>
<div>
{
image && (
<Image
class="mb-2 w-full rounded"
src={image}
alt={title}
width={1920}
height={1080}
format="webp"
/>
)
}
<h4 class="mb-3 pl-3 pb-2">
{title}
</h4>
</div>
</a>
</div>
-->
</div> -->
34 changes: 14 additions & 20 deletions src/layouts/partials/DrinkSidebar.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ const { tags, spirits, bottles, allSpirits, allBottles } = Astro.props;
<div class="lg:col-4">
<!-- spirits -->
<div class="mb-8">
<h4 class="mb-2 text-center">
<a href="/drink/spirits">Spirits</a>
</h4>
<div class="rounded bg-theme-light p-8 dark:bg-darkmode-theme-light">
<div class="rounded bg-theme-light p-4 dark:bg-darkmode-theme-light">
<h4 class="my-2 text-center">
<a href="/drink/spirits">Spirits</a>
</h4>
<ul>
{
spirits.map((spirit: any) => {
Expand All @@ -25,14 +25,11 @@ const { tags, spirits, bottles, allSpirits, allBottles } = Astro.props;
})
}
</ul>
</div>
</div>
<!-- bottles -->
<div class="mb-8">
<h4 class="mb-2 text-center">
<a href="/drink/bottles">Bottles</a>
</h4>
<div class="rounded bg-theme-light p-8 dark:bg-darkmode-theme-light">
<hr class="my-4">
<!-- bottles -->
<h4 class="my-2 text-center">
<a href="/drink/bottles">Bottles</a>
</h4>
<ul>
{
bottles.map((bottle: any) => {
Expand All @@ -49,14 +46,11 @@ const { tags, spirits, bottles, allSpirits, allBottles } = Astro.props;
})
}
</ul>
</div>
</div>
<!-- tags -->
<div class="mb-8">
<h4 class="mb-2 text-center">
<a href="/drink/tags">Tags</a>
</h4>
<div class="rounded bg-theme-light p-6 dark:bg-darkmode-theme-light">
<hr class="my-4">
<!-- tags -->
<h4 class="my-2 text-center">
<a href="/drink/tags">Tags</a>
</h4>
<ul>
{
tags.map((tag: any) => {
Expand Down
2 changes: 1 addition & 1 deletion src/pages/drink/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const currentPosts = sortedPosts.slice(0, config.settings.drink_pagination);
<div class="row">
{
currentPosts.map((post) => (
<div class="mb-14 md:col-6">
<div class="mb-8 md:col-6">
<DrinkCard data={post} />
</div>
))
Expand Down

0 comments on commit e717c0e

Please sign in to comment.