add brooke; update artist layout to use nth-child even/odd
This commit is contained in:
@ -4,7 +4,7 @@
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.right {
|
||||
.artist:nth-child(odd) {
|
||||
grid-template:
|
||||
'imgs h3'
|
||||
'imgs desc'
|
||||
@ -12,7 +12,7 @@
|
||||
grid-template-columns: 45% auto;
|
||||
}
|
||||
|
||||
.left {
|
||||
.artist:nth-child(even) {
|
||||
grid-template:
|
||||
'h3 imgs'
|
||||
'desc imgs'
|
||||
@ -22,6 +22,10 @@
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
.artist {
|
||||
margin: 1rem 0 3rem;
|
||||
}
|
||||
|
||||
.artist:nth-child(n) {
|
||||
grid-template:
|
||||
'imgs'
|
||||
'h3'
|
||||
@ -45,11 +49,11 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.right h3 {
|
||||
.artist:nth-child(odd) h3 {
|
||||
padding-left: .5rem;
|
||||
}
|
||||
|
||||
.left h3 {
|
||||
.artist:nth-child(even) h3 {
|
||||
padding-right: .5rem;
|
||||
text-align: right;
|
||||
}
|
||||
@ -60,25 +64,25 @@
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
}
|
||||
|
||||
.right .description {
|
||||
.artist:nth-child(odd) .description {
|
||||
margin-left: 1.75rem;
|
||||
}
|
||||
|
||||
.left .description {
|
||||
.artist:nth-child(even) .description {
|
||||
margin-right: 1.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
.artist h3 {
|
||||
.artist:nth-child(n) h3 {
|
||||
padding: .5rem 0 0;
|
||||
}
|
||||
|
||||
.left .description {
|
||||
margin-right: .625rem;
|
||||
.artist:nth-child(odd) .description {
|
||||
margin-left: .625rem;
|
||||
}
|
||||
|
||||
.right .description {
|
||||
margin-left: .625rem;
|
||||
.artist:nth-child(even) .description {
|
||||
margin-right: .625rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
BIN
img/brooke.jpg
Executable file
BIN
img/brooke.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
113
index.html
113
index.html
@ -37,66 +37,77 @@
|
||||
|
||||
<h2>Who?</h2>
|
||||
|
||||
<div class="artist right">
|
||||
<div class="fit-contain"><img src="/img/greenhouse0.jpg" alt="a dilapidated greenhouse."></div>
|
||||
<h3>Jennifer Hawke</h3>
|
||||
<div class="description">
|
||||
<p></p>
|
||||
<p></p>
|
||||
<div id="artists">
|
||||
<div class="artist">
|
||||
<div class="fit-contain"><img src="/img/greenhouse0.jpg" alt="a dilapidated greenhouse."></div>
|
||||
<h3>Jennifer Hawke</h3>
|
||||
<div class="description">
|
||||
<p></p>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="artist left">
|
||||
<div class="fit-contain"><img src="/img/greenhouse1.jpg" alt="a dilapidated greenhouse."></div>
|
||||
<h3>Brooke Osment</h3>
|
||||
<div class="description">
|
||||
<p>found art jackets, stitchwork, visible mending</p>
|
||||
<p><a href="mailto:bsosment@gmail.com?subject=Beall%20Greenhouses%20Market">Email Brooke</a></p>
|
||||
<div class="artist">
|
||||
<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>
|
||||
<div class="description">
|
||||
<p>found art jackets, stitchwork, visible mending</p>
|
||||
<p><a href="mailto:bsosment@gmail.com?subject=Beall%20Greenhouses%20Market">email Brooke</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="artist right">
|
||||
<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>
|
||||
<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><a href="https://www.instagram.com/rglkart/">@rglkart on instagram</a> ● <a href="https://www.rglkart.com/">Rachel's website</a></p>
|
||||
<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>
|
||||
<h3>Rachel Guinevere LordKenaga</h3>
|
||||
<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><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 class="artist left">
|
||||
<div class="fit-contain"><img src="/img/greenhouse2.jpg" alt="a dilapidated greenhouse"></div>
|
||||
<h3>Mags (Mary) McGinnis</h3>
|
||||
<div class="description">
|
||||
<p></p>
|
||||
<p></p>
|
||||
|
||||
<div class="artist">
|
||||
<div class="fit-contain"><img src="/img/greenhouse1.jpg" alt="a dilapidated greenhouse"></div>
|
||||
<h3>Mags (Mary) McGinnis</h3>
|
||||
<div class="description">
|
||||
<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 class="artist right">
|
||||
<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 class="artist">
|
||||
<div class="fit-contain"><img src="/img/greenhouse0.jpg" alt="a dilapidated greenhouse"></div>
|
||||
<h3>Logan Price</h3>
|
||||
<div class="description">
|
||||
<p></p>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="artist left">
|
||||
<div class="fit-contain"><img src="/img/greenhouse0.jpg" alt="a dilapidated greenhouse"></div>
|
||||
<h3>Logan Price</h3>
|
||||
<div class="description">
|
||||
<p></p>
|
||||
<p></p>
|
||||
</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 class="artist">
|
||||
<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>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user
