inherentlee/beall-greenhouses-market
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add brooke; update artist layout to use nth-child even/odd

Browse Source
This commit is contained in:
Lee Cattarin
2025-11-21 11:22:08 -08:00
parent a247750eb6
commit 5d16103345
3 changed files with 77 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
css/artist.css
View File

@ -4,7 +4,7 @@
display: grid; display: grid;
} }
.right { .artist:nth-child(odd) {
grid-template: grid-template:
'imgs h3' 'imgs h3'
'imgs desc' 'imgs desc'
@ -12,7 +12,7 @@
grid-template-columns: 45% auto; grid-template-columns: 45% auto;
} }
.left { .artist:nth-child(even) {
grid-template: grid-template:
'h3 imgs' 'h3 imgs'
'desc imgs' 'desc imgs'
@ -22,6 +22,10 @@
@media (max-width: 1050px) { @media (max-width: 1050px) {
.artist { .artist {
margin: 1rem 0 3rem;
}
.artist:nth-child(n) {
grid-template: grid-template:
'imgs' 'imgs'
'h3' 'h3'
@ -45,11 +49,11 @@
text-transform: uppercase; text-transform: uppercase;
} }
.right h3 { .artist:nth-child(odd) h3 {
padding-left: .5rem; padding-left: .5rem;
} }
.left h3 { .artist:nth-child(even) h3 {
padding-right: .5rem; padding-right: .5rem;
text-align: right; text-align: right;
} }
@ -60,25 +64,25 @@
border-radius: 0 0 1rem 1rem; border-radius: 0 0 1rem 1rem;
} }
.right .description { .artist:nth-child(odd) .description {
margin-left: 1.75rem; margin-left: 1.75rem;
} }
.left .description { .artist:nth-child(even) .description {
margin-right: 1.75rem; margin-right: 1.75rem;
} }
@media (max-width: 1050px) { @media (max-width: 1050px) {
.artist h3 { .artist:nth-child(n) h3 {
padding: .5rem 0 0; padding: .5rem 0 0;
} }
.left .description { .artist:nth-child(odd) .description {
margin-right: .625rem; margin-left: .625rem;
} }
.right .description { .artist:nth-child(even) .description {
margin-left: .625rem; margin-right: .625rem;
} }
} }

BIN
img/brooke.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

113
index.html
View File

@ -37,66 +37,77 @@
<h2>Who?</h2> <h2>Who?</h2>
<div class="artist right"> <div id="artists">
<div class="fit-contain"><img src="/img/greenhouse0.jpg" alt="a dilapidated greenhouse."></div> <div class="artist">
<h3>Jennifer Hawke</h3> <div class="fit-contain"><img src="/img/greenhouse0.jpg" alt="a dilapidated greenhouse."></div>
<div class="description"> <h3>Jennifer Hawke</h3>
<p></p> <div class="description">
<p></p> <p></p>
<p></p>
</div>
</div> </div>
</div>
<div class="artist left"> <div class="artist">
<div class="fit-contain"><img src="/img/greenhouse1.jpg" alt="a dilapidated greenhouse."></div> <div class="fit-contain"><img src="/img/brooke.jpg" alt="a triptych of photos of the artist wearing jackets of her own creation. the first jacket is orange and teal wool with a stag graphic appliqued onto the back panel. the second jacket is a woody green leather jacket with fur collar accent, snap epaulettes, and a front lapel detail created from colorful angular leather scraps. the third is a white denim jacket with a central linocut patch stitched in place with intricate topwork and embroidery. pink silk accents, flower details, and direct print work frame the central piece."></div>
<h3>Brooke Osment</h3> <h3>Brooke Osment</h3>
<div class="description"> <div class="description">
<p>found art jackets, stitchwork, visible mending</p> <p>found art jackets, stitchwork, visible mending</p>
<p><a href="mailto:bsosment@gmail.com?subject=Beall%20Greenhouses%20Market">Email Brooke</a></p> <p><a href="mailto:bsosment@gmail.com?subject=Beall%20Greenhouses%20Market">email Brooke</a></p>
</div>
</div> </div>
</div>
<div class="artist right"> <div class="artist">
<div class="fit-contain"><img src="/img/rachel.jpg" alt="a 3 picture collage. 2 pictures show the case and cards of a tarot deck created by Rachel. The third shows Rachel, a white person with turquoise hair, cat eye glasses, and contrasting striped jacket and dress, standing in front of paintings of shorelines."></div> <div class="fit-contain"><img src="/img/rachel.jpg" alt="a 3 picture collage. 2 pictures show the case and cards of a tarot deck created by Rachel. The third shows Rachel, a white person with turquoise hair, cat eye glasses, and contrasting striped jacket and dress, standing in front of paintings of shorelines."></div>
<h3>Rachel Guinevere LordKenaga</h3> <h3>Rachel Guinevere LordKenaga</h3>
<div class="description"> <div class="description">
<p>I am an artist and art therapist living on Vashon. I'm most interested in evoking feelings and memory with my work. I will have my handmade Tarot deck and small oil paintings. I'll offer 1 card pulls for $20.</p> <p>I am an artist and art therapist living on Vashon. I'm most interested in evoking feelings and memory with my work. I will have my handmade Tarot deck and small oil paintings. I'll offer 1 card pulls for $20.</p>
<p><a href="https://www.instagram.com/rglkart/">@rglkart on instagram</a> ● <a href="https://www.rglkart.com/">Rachel's website</a></p> <p><a href="https://www.instagram.com/rglkart/">@rglkart on instagram</a> ● <a href="https://www.rglkart.com/">Rachel's website</a></p>
</div>
</div> </div>
</div>
<div class="artist">
<div class="artist left"> <div class="fit-contain"><img src="/img/greenhouse1.jpg" alt="a dilapidated greenhouse"></div>
<div class="fit-contain"><img src="/img/greenhouse2.jpg" alt="a dilapidated greenhouse"></div> <h3>Mags (Mary) McGinnis</h3>
<h3>Mags (Mary) McGinnis</h3> <div class="description">
<div class="description"> <p></p>
<p></p> <p></p>
<p></p> </div>
</div>
<div class="artist">
<div class="fit-contain"><img src="/img/greenhouse0.jpg" alt="a dilapidated greenhouse"></div>
<h3>Hope Black</h3>
<div class="description">
<p></p>
<p></p>
</div>
</div>
<div class="artist">
<div class="fit-contain"><img src="/img/lee.jpg" alt="a four picture collage. two pictures show lee, a white person with curly hair and glasses; in one picture, wearing a colorful knit shawl. the other two frames show lee's work: 1, two leather card wallets with an elegant swoop on the back in vivid colors of leather; 2, a pile of greeting cards with a block-printed loon spread across front and back of the cards."></div>
<h3>Lee Cattarin</h3>
<div class="description">
<p>multidisciplinary artist and birder</p>
<p><a href="https://leecat.art/">Lee's website</a></p>
</div>
</div> </div>
</div>
<div class="artist right"> <div class="artist">
<div class="fit-contain"><img src="/img/lee.jpg" alt="a four picture collage. two pictures show lee, a white person with curly hair and glasses; in one picture, wearing a colorful knit shawl. the other two frames show lee's work: 1, two leather card wallets with an elegant swoop on the back in vivid colors of leather; 2, a pile of greeting cards with a block-printed loon spread across front and back of the cards."></div> <div class="fit-contain"><img src="/img/greenhouse0.jpg" alt="a dilapidated greenhouse"></div>
<h3>Lee Cattarin</h3> <h3>Logan Price</h3>
<div class="description"> <div class="description">
<p>multidisciplinary artist and birder</p> <p></p>
<p><a href="https://leecat.art/">Lee's website</a></p> <p></p>
</div>
</div> </div>
</div>
<div class="artist left"> <div class="artist">
<div class="fit-contain"><img src="/img/greenhouse0.jpg" alt="a dilapidated greenhouse"></div> <div class="fit-contain"><img src="/img/greenhouse1.jpg" alt="a dilapidated greenhouse"></div>
<h3>Logan Price</h3> <h3>Karen Biondo</h3>
<div class="description"> <div class="description">
<p></p> <p></p>
<p></p> <p></p>
</div> </div>
</div>
<div class="artist right">
<div class="fit-contain"><img src="/img/greenhouse1.jpg" alt="a dilapidated greenhouse"></div>
<h3>Karen Biondo</h3>
<div class="description">
<p></p>
<p></p>
</div> </div>
</div> </div>
</main> </main>