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