diff --git a/css/main.css b/css/main.css index 7838a9d..90ef115 100644 --- a/css/main.css +++ b/css/main.css @@ -14,24 +14,127 @@ } body { - color: light-dark(var(--color-dark), var(--color-light)); + background-color: light-dark(var(--color-dark), var(--color-light)); + color: light-dark(var(--color-light), var(--color-dark)); + display: flex; + flex-direction: column; + font-family: sans-serif; + min-height: 100vh; +} + +#content { background-color: light-dark(var(--color-light), var(--color-dark)); + color: light-dark(var(--color-dark), var(--color-light)); + width: 100%; + flex-grow: 1; + border-radius: 0 0 2rem 2rem; + padding: 2rem 0; +} + +header, +main { + width: 65%; + margin: 0 auto; +} + +@media (max-width: 650px) { + header, + main { + width: 95%; + } +} + +header img { + display: block; + max-height: 25vh; + max-width: 100%; + margin: 0 auto; } @media (prefers-color-scheme: light) { #dark-logo { - visibility: hidden; + display: none; } } @media (prefers-color-scheme: dark) { #light-logo { - visibility: hidden; + display: none; } } -a, -a:active { - color: light-dark(var(--color-orange-light), var(--color-orange-dark)); +h1 { + text-align: center; + margin: 2rem 0; } +h2 { + margin: 1rem 0 0; +} + +a { + font-weight: bold; + text-decoration: solid underline .25rem; +} + +#content p { + margin: .5rem 0 0 2.5rem; +} + +@media (max-width: 650px) { + #content p { + margin-left: 1.25rem; + } +} + +#artists { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.artist { + margin: .5rem 0 0 1.25rem; +} + +@media (max-width: 650px) { + .artist { + margin-left: .625rem; + } +} + +.artist img { + max-height: 35vh; + max-width: 100%; +} + +@media (max-width: 650px) { + .artist img { + max-width: 100%; + } +} + +footer { + width: 95%; + margin: 0 auto; + padding: 0 0 1rem; +} + +footer p { + text-align: center; + margin: 1rem 0 0; +} + +footer a { + color: light-dark(var(--color-light), var(--color-dark)); + text-decoration-color: light-dark(var(--color-orange-light), var(--color-orange-dark)); +} + +#contacts { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + gap: 1rem; + margin: 0 0 1rem; +} diff --git a/img/greenhouse1.jpg b/img/greenhouse1.jpg new file mode 100755 index 0000000..bf2b63f Binary files /dev/null and b/img/greenhouse1.jpg differ diff --git a/img/greenhouse2.jpg b/img/greenhouse2.jpg new file mode 100755 index 0000000..c7bad29 Binary files /dev/null and b/img/greenhouse2.jpg differ diff --git a/img/greenhouse3.jpg b/img/greenhouse3.jpg new file mode 100755 index 0000000..aa92eca Binary files /dev/null and b/img/greenhouse3.jpg differ diff --git a/img/lee.jpg b/img/lee.jpg new file mode 100755 index 0000000..671490d Binary files /dev/null and b/img/lee.jpg differ diff --git a/index.html b/index.html index 50a8e31..36a640a 100644 --- a/index.html +++ b/index.html @@ -17,32 +17,63 @@ -
- - -

Solstice Market at the Beall Greenhouses

-
-
-

What?

-

- -

When?

-

-
+
+
+ + +

Solstice Market at the Beall Greenhouses

+
+
+

What?

+

+ +

When?

+

.

+ +

Where?

+

Studios in the former cold storage facility at the old Beall Greenhouses: 18527 Beall Rd SW, Vashon, WA 98070

+ +

Who?

+

Participating artists include...

+ +
+
+ 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

+
+ +
+ a dilapidated greenhouse +

Brooke Osment

+
+
+
+