diff --git a/css/artist.css b/css/artist.css new file mode 100644 index 0000000..d18182c --- /dev/null +++ b/css/artist.css @@ -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; + } +} diff --git a/css/main.css b/css/main.css index 116b93f..7a37ce4 100644 --- a/css/main.css +++ b/css/main.css @@ -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; diff --git a/img/rachel.jpg b/img/rachel.jpg new file mode 100755 index 0000000..dde5f21 Binary files /dev/null and b/img/rachel.jpg differ diff --git a/index.html b/index.html index 7ee729f..7ed8952 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,7 @@ +
@@ -36,37 +37,12 @@

Who?

-
-
-
- a dilapidated greenhouse -

Jennifer Hawke

-
-
- -
-
- a dilapidated greenhouse -

Mary McGinnis

-
-
- -
-
- a block print in black ink on white paper depicting a grinning and very fat raccoon, waving one little paw -

Lee Cattarin

-
-

multidisciplinary artist and birder

-

leecat.art

-
- -
-
- a dilapidated greenhouse -

Brooke Osment

-
-

found art jackets, fashion items, visible mending

-

email Brooke

+
+
+

Rachel Guinevere LordKenaga

+
+

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.

+

@rglkart on instagram ● Rachel's website