daball/dashersupply
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vertically align items of parent container for brand store logo and short descriptions.

Browse Source
This commit is contained in:
David Ball 2024-07-13 02:33:06 -04:00
parent 79906cfac2
commit 35a8bea436
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/brand/[brandLookup].astro
View File

@ -38,7 +38,7 @@ const isAnyAmazon = brandProducts.find(p => p.amazonLink) || false;
<Layout title={`${brand.name} Store - Dasher Supply`}> <Layout title={`${brand.name} Store - Dasher Supply`}>
<main> <main>
<h1 class="center"><a href="/"><span class="text-gradient">Dasher Supply</span></a> &gt; {brand.name} Store</h1> <h1 class="center"><a href="/"><span class="text-gradient">Dasher Supply</span></a> &gt; {brand.name} Store</h1>
<div class="instructions"> <div class="brand">
<div class="flex"> <div class="flex">
{brand.logoUrl && <div class="float-left"><img src={brand.logoUrl} /></div> } {brand.logoUrl && <div class="float-left"><img src={brand.logoUrl} /></div> }
<div class="flex-right"> <div class="flex-right">
@ -100,7 +100,7 @@ const isAnyAmazon = brandProducts.find(p => p.amazonLink) || false;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
.instructions { .brand {
margin-bottom: 2rem; margin-bottom: 2rem;
border: 1px solid rgba(var(--accent-light), 25%); border: 1px solid rgba(var(--accent-light), 25%);
background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%)); background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
@ -111,26 +111,27 @@ const isAnyAmazon = brandProducts.find(p => p.amazonLink) || false;
font-size: 1rem; font-size: 1rem;
text-align: left; text-align: left;
} }
.instructions .flex { .brand .flex {
display: flex; display: flex;
gap: 2rem; gap: 2rem;
align-items: center;
} }
.instructions .after-flex p { .brand .after-flex p {
text-indent: 5em each-line; text-indent: 5em each-line;
color: pink; color: pink;
} }
.instructions .short-desc { .brand .short-desc {
font-family: "Caveat", cursive; font-family: "Caveat", cursive;
font-size: 2rem; font-size: 2rem;
} }
.instructions .float-left { .brand .float-left {
justify-content: flex-start; justify-content: flex-start;
} }
.instructions .flex-right { .brand .flex-right {
justify-content: flex-start; justify-content: flex-start;
position: relative; position: relative;
} }
.instructions code { .brand code {
font-size: 0.8em; font-size: 0.8em;
font-weight: bold; font-weight: bold;
background: rgba(var(--accent-light), 12%); background: rgba(var(--accent-light), 12%);
@ -138,7 +139,7 @@ const isAnyAmazon = brandProducts.find(p => p.amazonLink) || false;
border-radius: 4px; border-radius: 4px;
padding: 0.3em 0.4em; padding: 0.3em 0.4em;
} }
.instructions strong { .brand strong {
color: rgb(var(--accent-light)); color: rgb(var(--accent-light));
/* font-weight: 800; */ /* font-weight: 800; */
} }