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

big ol artist refactor - add rachel for real sample data, remove old placeholders

Browse Source
This commit is contained in:
Lee Cattarin
2025-11-19 10:52:08 -08:00
parent 48fa9b2884
commit fdfd388173
4 changed files with 72 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
css/artist.css Normal file
View File

@ -0,0 +1,54 @@
.artist {
width: 100%;
margin: 1rem 0;
display: grid;
grid-template:
'imgs h3'
'imgs desc'
'imgs .';
grid-template-columns: 45% auto;
}
@media (max-width: 1050px) {
.artist {
grid-template:
'imgs'
'h3'
'desc';
}
}
.fit-contain {
object-fit: contain;
grid-area: imgs;
}
.artist img {
max-height: 100%;
max-width: 100%;
border-radius: 1rem;
}
.artist h3 {
grid-area: h3;
padding-left: .5rem;
text-transform: uppercase;
}
.description {
grid-area: desc;
background-color: light-dark(var(--color-dark), var(--color-light));
margin-left: 1.75rem;
border-radius: 0 0 1rem 1rem;
}
@media (max-width: 1050px) {
.artist h3 {
padding-left: 0;
padding-top: .5rem;
}
.description {
margin-left: .625rem;
}
}

51
css/main.css
View File

@ -89,16 +89,20 @@ h1 {
h2 {
margin: 2rem 0 0;
}
h2,
h3 {
border-bottom: .25rem solid light-dark(var(--color-orange-dark), var(--color-orange-light));
}
a {
color: light-dark(var(--color-dark), var(--color-light));
color: light-dark(var(--color-light), var(--color-dark));
font-weight: bold;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: .25rem;
text-decoration-color: light-dark(var(--color-orange-dark), var(--color-orange-light));
text-decoration-color: light-dark(var(--color-orange-light), var(--color-orange-dark));
transition: text-decoration-thickness .5s;
margin: 0 .25rem;
}
@ -115,56 +119,23 @@ a:focus {
border-radius: .1rem;
}
main > p {
margin-left: 2.5rem;
p {
background-color: light-dark(var(--color-dark), var(--color-light));
color: light-dark(var(--color-light), var(--color-dark));
padding: .5rem;
border-radius: 0 0 1rem 1rem;
}
main > p {
margin-left: 2.5rem;
}
@media (max-width: 650px) {
main > p {
margin-left: 1.25rem;
}
}
#artists {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
row-gap: 2rem;
column-gap: 1rem;
margin: 2rem 0;
}
.artist-name-bg {
background-color: light-dark(var(--color-dark), var(--color-light));
color: light-dark(var(--color-light), var(--color-dark));
border-radius: 1rem;
}
.artist img {
max-height: 35vh;
max-width: 100%;
border-radius: 1rem;
margin: 0 auto;
}
.artist h3,
.artist p {
text-align: center;
}
.artist h3 {
text-transform: uppercase;
padding: .25rem 0;
}
.artist p {
margin-top: .25rem;
}
footer {
width: 95%;
margin: 0 auto;