Compare commits

...

18 Commits

29 changed files with 696 additions and 270 deletions

View File

@ -1,128 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Solstice Market at the Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/2025/solstice/" />
<meta name="description" content="Solstice Market at the Beall Greenhouses" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="Solstice Market at the Beall Greenhouses" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/2025/solstice/" />
<meta property="og:description" content="Solstice Market at the Beall Greenhouses" />
<meta property="og:image" content="/img/logo-light.png" />
<meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" />
<!-- JS -->
<script src="/scripts/nav.js" defer></script>
<!-- CSS -->
<link rel="stylesheet" href="/styles/main.css">
<link rel="stylesheet" href="/styles/nav.css">
<link rel="stylesheet" href="/styles/artist.css">
</head>
<body>
<div id="content">
<header>
<nav id="top-nav"><!-- auto-populated by nav.js --></nav>
<img id="logo-dark" src="/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
<img id="logo-light" src="/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
</header>
<main>
<h1>Solstice 2025 Market at the Beall Greenhouses</h1>
<h2>When?</h2>
<p><time datetime="2025-12-21 10:00">Sunday, December 21st, 2025, 10am - 5pm</time>.</p>
<h2>Where?</h2>
<p>Studios in the former cold storage facility at the old Beall Greenhouses: 18527 Beall Rd SW, Vashon, WA 98070</p>
<h2>What else?</h2>
<p>There will be hot cider, popcorn, and a warm fire.</p>
<h2>Who?</h2>
<div id="artists">
<div id="brooke" class="artist">
<div class="fit-contain"><img src="/img/2025/solstice/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%20Solstice%202025">email Brooke</a></p>
</div>
</div>
<div id="rachel" class="artist">
<div class="fit-contain"><img src="/img/2025/solstice/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 target="_blank" href="https://www.instagram.com/rglkart/">@rglkart on instagram</a><a target="_blank" href="https://www.rglkart.com/">rglkart.com</a></p>
</div>
</div>
<div id="mags" class="artist">
<div class="fit-contain"><img src="/img/2025/solstice/mags.jpg" alt="a 2 picture collage. the first shows a miniature dress with white lace, pink bows and rosettes, and tiny maple leaves. the second shows mags, the artist, a white person with shaggy green hair, smiling slightly."></div>
<h3>Mags (Mary) McGinnis</h3>
<div class="description">
<p>Eclectic creator working with natural materials and found objects.</p>
<p><a target="_blank" href="https://www.instagram.com/worldsinsideworlds/">@worldsinsideworlds on instagram</a></p>
</div>
</div>
<div id="hawke" class="artist">
<div class="fit-contain"><img src="/img/2025/solstice/hawke.jpg" alt="4 image collage. image 1: Coulter pinecone with dried oranges, & apples, dried flowers, & bay leaves. image 2: a collage titled 'when the black rock opens'. artist statement on the piece: ntentional Collage: seeds have been planted in the line of the future. There is a promise of what will be growing when it is time for us to understand. image 3: Coulter pinecone with feathers, moon, snail shell, dried flowers, spices, bay leaves, and found sculpted porcelain face. image 4: jennifer hawke, the artist, a white person with a beard and knowing eyes. the top half of their face is painted blue with a white heart, and they are wearing a huge elaborate flower crown, a red shawl, and several chunky pendants"></div>
<h3>Jennifer Hawke</h3>
<div class="description">
<p>Jennifer Hawke hails from Billings, Montana where they got their degree in Cast Metals and Painting. They have been on Vashon Island for about 18 years and love doing the Bearded Lady Road Report. They have had their Studio at the Beall Greenhouses for about 8 years and only recently started opening to the public. Their space is warmed by a singular woodstove & all the ephemera that comes with being the child of an antique dealer.</p>
<p><a target="_blank" href="https://www.instagram.com/jenniferhawkestudio">@jenniferhawkestudio on instagram</a></p>
</div>
</div>
<div id="hope" class="artist">
<div class="fit-contain"><img src="/img/2025/solstice/hope.jpg" alt="3 picture collage of a white brunette woman. in picture one, she sits on a tall stool with her leg pulled up, holding paintbrushes. in picture 2 she stares at the camera with chanterelles held up to her ears. picture 3, she aims a camera at the camera."></div>
<h3>Hope Black</h3>
<div class="description">
<p>Hope Black is a conceptual portrait photographer and multi-media artist based on Vashon Island, WA. Her work blends fine-art portraiture with macabre photo editing, and she draws on mixed-media illustrations, varied textures, and found-objects to create portraits and paintings that feel symbolic and dream-like. Her images echo the archetypes found in the tarot and the emotional undercurrents of womanhood -- inviting viewers into a world that is both haunting and deeply human.</p>
<p><a target="_blank" href="https://hopeblack.photo">hopeblack.photo</a></p>
</div>
</div>
<div id="lee" class="artist">
<div class="fit-contain"><img src="/img/2025/solstice/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 target="_blank" href="https://leecat.art/">leecat.art</a></p>
</div>
</div>
<div id="jon" class="artist">
<div class="fit-contain"><img src="/img/2025/solstice/jon.jpg" alt="2 image collage showing a cast concrete votive candle holder with candle, and a bottle of a tincture made from foraged red belted conk and artist conk mushrooms."></div>
<h3>Jon Haaland</h3>
<div class="description">
<p>Jon Haaland is a mixed media artist, photographer and designer hailing from the Pacific Northwest. With an innate passion for blending mediums and exploring the interplay between man and nature, Jon draws his inspiration from the intrinsic harmony of nature and the pressures of man. Through his mixed media creations, he intertwines natural elements constructing a unique narrative that speaks to the deep interplay between civilization and the environment.</p>
<p><a target="_blank" href="https://www.jonhaalandart.com/">jonhaalandart.com</a></p>
</div>
</div>
<div id="karen" class="artist">
<div class="fit-contain"><img src="/img/2025/solstice/karen.jpg" alt="4 photo collage. clockwise from top left: Karen, an older white woman, smiles at the camera while holding a steam press print of leaves; rows of fragrance-free goat milk soap; Karen sits in a greenhouse holding a squash and grins widely; bags of dark chocolate pecan toffee and crispy molasses crisps on a table."></div>
<h3>Karen Biondo</h3>
<div class="description">
<p>I am a farmer, chef, creator. I make fun, delicious and sometimes useful items from what inspires me in the world around me.</p>
<p><a target="_blank" href="https://labiondofarm.com">labiondofarm.com</a><a href="mailto:labiondo@comcast.net?subject=Beall%20Greenhouses%20Market%20Solstice%202025">email Karen</a>
</p>
</div>
</div>
</div>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</html>

50
about/index.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>About | the historic Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/about/" />
<meta name="description" content="About | the historic Beall Greenhouses" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="About | the historic Beall Greenhouses" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/about/" />
<meta property="og:description" content="About | the historic Beall Greenhouses" />
<meta property="og:image" content="/assets/img/logo-light.png" />
<meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" />
<!-- JS -->
<script src="/assets/scripts/nav.js" defer></script>
<!-- CSS -->
<link rel="stylesheet" href="/assets/styles/main.css">
<link rel="stylesheet" href="/assets/styles/nav.css">
</head>
<body>
<div id="content">
<header>
<nav id="top-nav"><!-- auto-populated by nav.js --></nav>
<img class="dark-mode" src="/assets/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
<img class="light-mode" src="/assets/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
</header>
<main id="main">
<h1>About the Beall Greenhouses</h1>
<h2 id="past">Past</h2>
<p><a href="https://www.historylink.org/File/2346" target="_blank">
Read about the Beall Greenhouses on HistoryLink.org
</a>.</p>
<h2 id="present">Present</h2>
<h2 id="future">Future</h2>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</html>

54
artists/hawke/index.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jennifer Hawke | artists at the historic Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/artists/hawke/" />
<meta name="description" content="Jennifer Hawke | artists at the historic Beall Greenhouses" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="Jennifer Hawke | artists at the historic Beall Greenhouses" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/artists/hawke/" />
<meta property="og:description" content="Jennifer Hawke | artists at the historic Beall Greenhouses" />
<meta property="og:image" content="/assets/img/logo-light.png" />
<meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" />
<!-- JS -->
<script src="/assets/scripts/nav.js" defer></script>
<!-- CSS -->
<link rel="stylesheet" href="/assets/styles/main.css">
<link rel="stylesheet" href="/assets/styles/nav.css">
<link rel="stylesheet" href="/assets/styles/artist-resident.css">
</head>
<body>
<div id="content">
<header>
<nav id="top-nav"><!-- auto-populated by nav.js --></nav>
<img class="dark-mode" src="/assets/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
<img class="light-mode" src="/assets/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
</header>
<main id="main">
<div class="resident">
<h1>Jennifer Hawke</h1>
<img src="/assets/img/artists/hawke.jpg" alt="jennifer hawke, the artist, a white person with a beard and knowing eyes. the top half of their face is painted blue with a white heart, and they are wearing a huge elaborate flower crown, a red shawl, and several chunky pendants.">
<p id="bio">Jennifer Hawke hails from Billings, Montana where they got their degree in Cast Metals and Painting. They have been on Vashon Island for about 18 years and love doing the Bearded Lady Road Report. They have had their Studio at the Beall Greenhouses for about 8 years and only recently started opening to the public. Their space is warmed by a singular woodstove & all the ephemera that comes with being the child of an antique dealer.</p>
</div>
<div class="contact">
<h2>Get in touch...</h2>
<ul>
<li>
<a href="https://www.instagram.com/jenniferhawkestudio">@jenniferhawkestudio on instagram</a>
</li>
</ul>
</div>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</html>

51
artists/index.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Artists directory | the historic Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/artists/" />
<meta name="description" content="Artists directory | the historic Beall Greenhouses" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="Artists directory | the historic Beall Greenhouses" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/artists/" />
<meta property="og:description" content="Artists directory | the historic Beall Greenhouses" />
<meta property="og:image" content="/assets/img/logo-light.png" />
<meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" />
<!-- JS -->
<script src="/assets/scripts/nav.js" defer></script>
<!-- CSS -->
<link rel="stylesheet" href="/assets/styles/main.css">
<link rel="stylesheet" href="/assets/styles/nav.css">
<link rel="stylesheet" href="/assets/styles/directory.css">
</head>
<body>
<div id="content">
<header>
<nav id="top-nav"><!-- auto-populated by nav.js --></nav>
<img class="dark-mode" src="/assets/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
<img class="light-mode" src="/assets/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
</header>
<main id="main">
<h1>Artists in residence at the Beall Greenhouses</h1>
<ol id="directory">
<li>
<a href="/artists/hawke">
<h2>Jennifer Hawke</h2>
<img src="/assets/img/artists/hawke.jpg" alt="jennifer hawke, the artist, a white person with a beard and knowing eyes. the top half of their face is painted blue with a white heart, and they are wearing a huge elaborate flower crown, a red shawl, and several chunky pendants." />
</a>
</li>
</ol>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</html>

View File

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

View File

Before

Width:  |  Height:  |  Size: 634 KiB

After

Width:  |  Height:  |  Size: 634 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

Before

Width:  |  Height:  |  Size: 610 KiB

After

Width:  |  Height:  |  Size: 610 KiB

View File

Before

Width:  |  Height:  |  Size: 518 KiB

After

Width:  |  Height:  |  Size: 518 KiB

View File

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 1.9 MiB

View File

Before

Width:  |  Height:  |  Size: 586 KiB

After

Width:  |  Height:  |  Size: 586 KiB

View File

Before

Width:  |  Height:  |  Size: 272 KiB

After

Width:  |  Height:  |  Size: 272 KiB

BIN
assets/img/artists/hawke.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 263 KiB

View File

Before

Width:  |  Height:  |  Size: 2.3 MiB

After

Width:  |  Height:  |  Size: 2.3 MiB

View File

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

View File

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

64
assets/scripts/market.js Normal file
View File

@ -0,0 +1,64 @@
const makeArtist = function(artist) {
let container = document.createElement("div");
container.classList.add("artist");
container.id = artist.id;
/* artist img */
let imgDiv = document.createElement("div");
imgDiv.classList.add("fit-contain");
let img = document.createElement("img");
img.src = artist.img.src;
img.alt = artist.img.alt;
imgDiv.append(img);
container.append(imgDiv);
/* artist name */
let h3 = document.createElement("h3");
h3.innerHTML = artist.name;
container.append(h3);
/* artist bio */
let descDiv = document.createElement("div");
descDiv.classList.add("description");
let bio = document.createElement("p");
bio.innerHTML = artist.bio;
descDiv.append(bio);
/* artist contact info */
let contacts = document.createElement("p");
for (let i = 0; i < artist.contact.length; i++) {
let a = document.createElement("a");
a.href = artist.contact[i].href;
a.innerHTML = artist.contact[i].title;
a.target = "_blank";
contacts.append(a);
if (i !== artist.contact.length - 1) contacts.append(" ● ");
}
descDiv.append(contacts);
container.append(descDiv);
return container;
}
let artistContainer = document.getElementById("artists");
const makeArtistPage = function(artists) {
for (const artist of artists)
artistContainer.append(makeArtist(artist));
}
let script = document.currentScript;
let artistsfile = script.dataset.artists;
fetch(artistsfile)
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error, status = ${response.status}`);
}
return response.json();
})
.then((artists) => makeArtistPage(artists))
.catch((error) => {
console.log(`Error: ${error.message}`);
});

75
assets/scripts/nav.js Normal file
View File

@ -0,0 +1,75 @@
/* Top nav */
const navItems = [
{
href: "/about/",
title: "ⓘ about",
tooltip: "about the Beall Greenhouses"
},
{
href: "/events/",
title: "🗓 events",
tooltip: "events at the Beall Greenhouses"
},
{
href: "/artists/",
title: "🖌 artists",
tooltip: "artists in residence at the Beall Greenhouses"
}
];
const createMenuLink = function(title, href, tooltip) {
let path = window.location.pathname;
let a = document.createElement("a");
a.href = href;
a.innerHTML = title;
a.title = tooltip;
a.ariaLabel = tooltip;
if (path === href) a.id = "current-page";
return a;
}
const createSkipLink = function() {
let a = createMenuLink("skip ↷", "#main", "skip to main content");
a.id = "skip";
return a;
}
const populateNav = function() {
let nav = document.getElementById("top-nav");
nav.append(createSkipLink());
nav.append(createMenuLink("↩ home", "/", "home page for the Beall Greenhouses"));
let ul = document.createElement("ul");
for (const item of navItems) {
let li = document.createElement("li");
li.append(createMenuLink(item.title, item.href, item.tooltip));
ul.append(li);
}
nav.append(ul);
}
populateNav();
/* Footer */
const footerHTML = `
<div id="contacts">
<p>questions?
<a href="mailto:beall.greenhouses@gmail.com">
email us!
</a>
</p>
</div>
<p>brought to you in 2026</p>
`
const populateFooter = function() {
let footer = document.getElementById("footer");
footer.innerHTML = footerHTML;
}
populateFooter();

View File

@ -57,7 +57,7 @@
.description {
grid-area: desc;
background-color: var(--color-alt);
background-color: var(--color-bg-alt);
border-radius: 0 0 1rem 1rem;
}
@ -71,7 +71,7 @@
@media (max-width: 1050px) {
.artist:nth-child(n) h3 {
padding: .5rem 0 0;
padding: 1rem 0 0;
}
.artist:nth-child(odd) .description {

View File

@ -0,0 +1,55 @@
.resident {
margin: 2rem auto;
display: grid;
grid-template:
'img h1'
'img desc'
'img .';
grid-template-columns: 1fr 1fr;
}
@media (max-width: 1050px) {
.resident {
grid-template:
'img'
'h1'
'desc';
}
}
.resident h1 {
grid-area: h1;
font-size: 2rem;
margin: 0;
border-bottom: solid var(--color-accent);
}
.resident img {
grid-area: img;
border-radius: 1rem;
}
.resident .bio {
grid-area: desc;
margin-left: 1.75rem;
}
@media (max-width: 1050px) {
.resident img {
border-radius: 1rem 1rem 0 0;
border-bottom: solid var(--color-accent);
}
.resident .bio {
margin: 0;
}
}
.contact {
margin-top: 4rem;
text-align: center;
}
.contact li {
list-style: none;
}

View File

@ -20,7 +20,12 @@
@media (any-hover: hover) {
#directory li:hover {
outline: solid .25rem var(--color-accent);
background-color: var(--color-text);
border-color: var(--color-text);
}
#directory li:hover h2 {
color: var(--color-bg);
}
}

View File

@ -10,7 +10,8 @@
--color-bg: light-dark(var(--color-light), var(--color-dark));
--color-text: light-dark(var(--color-dark), var(--color-light));
--color-alt: light-dark(var(--color-light-alt), var(--color-dark-alt));
--color-bg-alt: light-dark(var(--color-light-alt), var(--color-dark-alt));
--color-text-alt: light-dark(var(--color-dark-alt), var(--color-light-alt));
--color-accent: light-dark(var(--color-orange-dark), var(--color-orange-light));
--color-accent-flipped: light-dark(var(--color-orange-light), var(--color-orange-dark));
}
@ -39,6 +40,18 @@ body {
padding: 1rem 0 2rem;
}
@media (prefers-color-scheme: light) {
.dark-mode {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.light-mode {
display: none;
}
}
header,
main {
width: 65%;
@ -64,6 +77,10 @@ img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-text-alt);
}
h1 {
text-align: center;
margin: 2rem 0;
@ -101,19 +118,25 @@ a:focus-visible {
outline: solid .25rem var(--color-accent);
}
p {
background-color: var(--color-alt);
color: var(--color-text);
padding: .5rem;
p,
main ul {
padding: .8rem;
background-color: var(--color-bg-alt);
border-radius: 0 0 1rem 1rem;
}
main > p {
main li {
margin-left: 1rem;
}
main > p,
main > ul {
margin-left: 2.5rem;
}
@media (max-width: 650px) {
main > p {
main > p,
main > ul {
margin-left: 1.25rem;
}
}

View File

@ -1,46 +1,87 @@
/* top nav */
nav {
position: relative;
margin: 0 auto 1.5rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
nav a {
display: inline-block;
text-decoration: none;
font-size: 1.2rem;
padding: 0 .25rem;
border: solid thin var(--color-accent);
border-radius: .25rem;
outline-offset: .1rem;
}
@media (any-hover: hover) {
nav a:hover {
outline: solid .25rem var(--color-accent);
color: var(--color-bg);
background-color: var(--color-text);
border-color: var(--color-text);
}
}
#current-page {
nav a:focus-visible {
outline: solid .25rem var(--color-accent);
}
#skip {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -99;
background-color: var(--color-bg);
}
#skip:focus-visible {
left: 3rem;
top: 1.5rem;
width: auto;
height: auto;
overflow: auto;
z-index: 999;
}
nav ul {
display: flex;
justify-content: flex-end;
gap: .5rem;
align-items: flex-end;
}
@media (max-width: 450px) {
nav ul {
flex-flow: column nowrap;
}
}
nav li {
list-style: none;
}
/* this specifically handles the home button
we want it taking up flex container space */
nav > #current-page {
visibility: hidden;
}
nav > div > #current-page {
display: none;
}
header img {
max-height: 25vh;
max-width: 100%;
margin: 0 auto;
}
@media (prefers-color-scheme: light) {
#logo-dark {
display: none;
}
}
@media (prefers-color-scheme: dark) {
#logo-light {
display: none;
}
}
/* footer */
footer {
width: 95%;

View File

@ -1,52 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Directory | Markets at the Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/directory/" />
<meta name="description" content="Directory | Markets at the Beall Greenhouses" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="Directory | Markets at the Beall Greenhouses" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/directory/" />
<meta property="og:description" content="Directory | Markets at the Beall Greenhouses" />
<meta property="og:image" content="/img/logo-light.png" />
<meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" />
<!-- JS -->
<script src="/scripts/nav.js" defer></script>
<!-- CSS -->
<link rel="stylesheet" href="/styles/main.css">
<link rel="stylesheet" href="/styles/nav.css">
<link rel="stylesheet" href="/styles/directory.css">
<link rel="stylesheet" href="/styles/artist.css">
</head>
<body>
<div id="content">
<header>
<nav id="top-nav"><!-- auto-populated by nav.js --></nav>
<img id="logo-dark" src="/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
<img id="logo-light" src="/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
</header>
<main>
<h1>Markets at the Beall Greenhouses</h1>
<ol id="directory">
<li>
<a href="/2025/solstice">
<h2>Solstice 2025</h2>
<img src="/img/filler0.jpg" alt="a filler image for testing" />
</a>
</li>
</ol>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</html>

View File

@ -0,0 +1,130 @@
[
{
"id": "brooke",
"img": {
"src": "/assets/img/2025-solstice/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."
},
"name": "Brooke Osment",
"bio": "found art jackets, stitchwork, visible mending",
"contact": [
{
"href": "mailto:bsosment@gmail.com?subject=Beall%20Greenhouses%20Market%20Solstice%202025",
"title": "email Brooke"
}
]
},
{
"id": "rachel",
"img": {
"src": "/assets/img/2025-solstice/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."
},
"name": "Rachel Guinevere LordKenaga",
"bio": "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.",
"contact": [
{
"href": "https://www.instagram.com/rglkart/",
"title": "@rglkart on instagram"
},
{
"href": "https://www.rglkart.com/",
"title": "rglkart.com"
}
]
},
{
"id": "mags",
"img": {
"src": "/assets/img/2025-solstice/mags.jpg",
"alt": "a 3 picture collage. the first shows a miniature dress with white lace, pink bows and rosettes, and tiny maple leaves. the second shows mags, the artist, a white person with shaggy green hair, smiling slightly. third shows a natural-art sculpture with tiny mushroom figures added to real wood and lichen."
},
"name": "Mags (Mary) McGinnis",
"bio": "Eclectic creator working with natural materials and found objects.",
"contact": [
{
"href": "https://www.instagram.com/worldsinsideworlds/",
"title": "@worldsinsideworlds on instagram"
}
]
},
{
"id": "hawke",
"img": {
"src": "/assets/img/2025-solstice/hawke.jpg",
"alt": "4 image collage. image 1: Coulter pinecone with dried oranges, & apples, dried flowers, & bay leaves. image 2: a collage titled 'when the black rock opens'. artist statement on the piece: ntentional Collage: seeds have been planted in the line of the future. There is a promise of what will be growing when it is time for us to understand. image 3: Coulter pinecone with feathers, moon, snail shell, dried flowers, spices, bay leaves, and found sculpted porcelain face. image 4: jennifer hawke, the artist, a white person with a beard and knowing eyes. the top half of their face is painted blue with a white heart, and they are wearing a huge elaborate flower crown, a red shawl, and several chunky pendants."
},
"name": "Jennifer Hawke",
"bio": "Jennifer Hawke hails from Billings, Montana where they got their degree in Cast Metals and Painting. They have been on Vashon Island for about 18 years and love doing the Bearded Lady Road Report. They have had their Studio at the Beall Greenhouses for about 8 years and only recently started opening to the public. Their space is warmed by a singular woodstove & all the ephemera that comes with being the child of an antique dealer.",
"contact": [
{
"href": "https://www.instagram.com/jenniferhawkestudio",
"title": "@jenniferhawkestudio on instagram"
}
]
},
{
"id": "hope",
"img": {
"src": "/assets/img/2025-solstice/hope.jpg",
"alt": "3 picture collage of a white brunette woman. in picture one, she sits on a tall stool with her leg pulled up, holding paintbrushes. in picture 2 she stares at the camera with chanterelles held up to her ears. picture 3, she aims a camera at the camera."
},
"name": "Hope Black",
"bio": "Hope Black is a conceptual portrait photographer and multi-media artist based on Vashon Island, WA. Her work blends fine-art portraiture with macabre photo editing, and she draws on mixed-media illustrations, varied textures, and found-objects to create portraits and paintings that feel symbolic and dream-like. Her images echo the archetypes found in the tarot and the emotional undercurrents of womanhood -- inviting viewers into a world that is both haunting and deeply human.",
"contact": [
{
"href": "https://hopeblack.photo",
"title": "hopeblack.photo"
}
]
},
{
"id": "lee",
"img": {
"src": "/assets/img/2025-solstice/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."
},
"name": "Lee Cattarin",
"bio": "multidisciplinary artist and birder",
"contact": [
{
"href": "https://leecat.art/",
"title": "leecat.art"
}
]
},
{
"id": "jon",
"img": {
"src": "/assets/img/2025-solstice/jon.jpg",
"alt": "2 image collage showing a cast concrete votive candle holder with candle, and a bottle of a tincture made from foraged red belted conk and artist conk mushrooms."
},
"name": "Jon Haaland",
"bio": "Jon Haaland is a mixed media artist, photographer and designer hailing from the Pacific Northwest. With an innate passion for blending mediums and exploring the interplay between man and nature, Jon draws his inspiration from the intrinsic harmony of nature and the pressures of man. Through his mixed media creations, he intertwines natural elements constructing a unique narrative that speaks to the deep interplay between civilization and the environment.",
"contact": [
{
"href": "https://www.jonhaalandart.com/",
"title": "jonhaalandart.com"
}
]
},
{
"id": "karen",
"img": {
"src": "/assets/img/2025-solstice/karen.jpg",
"alt": "4 photo collage. clockwise from top left: Karen, an older white woman, smiles at the camera while holding a steam press print of leaves; rows of fragrance-free goat milk soap; Karen sits in a greenhouse holding a squash and grins widely; bags of dark chocolate pecan toffee and crispy molasses crisps on a table."
},
"name": "Karen Biondo",
"bio": "I am a farmer, chef, creator. I make fun, delicious and sometimes useful items from what inspires me in the world around me.",
"contact": [
{
"href": "https://labiondofarm.com",
"title": "labiondofarm.com"
},
{
"href": "mailto:labiondo@comcast.net?subject=Beall%20Greenhouses%20Market%20Solstice%202025",
"title": "email Karen"
}
]
}
]

View File

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>2025 Solstice Market | events at the historic Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/events/2025-solstice/" />
<meta name="description" content="2025 Solstice Market | events at the historic Beall Greenhouses" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="2025 Solstice Market | events at the historic Beall Greenhouses" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/events/2025-solstice/" />
<meta property="og:description" content="2025 Solstice Market | events at the historic Beall Greenhouses" />
<meta property="og:image" content="/assets/img/logo-light.png" />
<meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" />
<!-- JS -->
<script src="/assets/scripts/nav.js" defer></script>
<script src="/assets/scripts/market.js" data-artists="/events/2025-solstice/artists.json" defer></script>
<!-- CSS -->
<link rel="stylesheet" href="/assets/styles/main.css">
<link rel="stylesheet" href="/assets/styles/nav.css">
<link rel="stylesheet" href="/assets/styles/artist-market.css">
</head>
<body>
<div id="content">
<header>
<nav id="top-nav"><!-- auto-populated by nav.js --></nav>
<img class="dark-mode" src="/assets/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
<img class="light-mode" src="/assets/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
</header>
<main id="main">
<h1>Solstice 2025 Market at the Beall Greenhouses</h1>
<h2>When?</h2>
<p><time datetime="2025-12-21 10:00">Sunday, December 21st, 2025, 10am - 5pm</time>.</p>
<h2>Where?</h2>
<p>Studios in the former cold storage facility at the old Beall Greenhouses:
<a href="https://maps.app.goo.gl/5p1NAArdjX4vaEgw9" target="_blank">18527 Beall Rd SW, Vashon, WA 98070</a>
</p>
<h2>What else?</h2>
<p>There will be popcorn, cookies, fresh hot coffee from
<a href="www.zenbelliescoffeeco.com" target="_blank">Zenbellies Coffee Co.</a>,
and a warm fire.</p>
<h2>Who?</h2>
<div id="artists"><!-- auto-populated by artists.js --></div>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</html>

51
events/index.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Events directory | the historic Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/events/" />
<meta name="description" content="Events directory | the historic Beall Greenhouses" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="Events directory | the historic Beall Greenhouses" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/events/" />
<meta property="og:description" content="Events directory | the historic Beall Greenhouses" />
<meta property="og:image" content="/assets/img/logo-light.png" />
<meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" />
<!-- JS -->
<script src="/assets/scripts/nav.js" defer></script>
<!-- CSS -->
<link rel="stylesheet" href="/assets/styles/main.css">
<link rel="stylesheet" href="/assets/styles/nav.css">
<link rel="stylesheet" href="/assets/styles/directory.css">
</head>
<body>
<div id="content">
<header>
<nav id="top-nav"><!-- auto-populated by nav.js --></nav>
<img class="dark-mode" src="/assets/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
<img class="light-mode" src="/assets/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
</header>
<main id="main">
<h1>Events at the Beall Greenhouses</h1>
<ol id="directory">
<li>
<a href="/events/2025-solstice">
<h2>Solstice 2025</h2>
<img src="/assets/img/filler0.jpg" alt="a filler image for testing" />
</a>
</li>
</ol>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</html>

View File

@ -1,28 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Markets at the Beall Greenhouses</title>
<title>the historic Beall Greenhouses</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/" />
<meta name="description" content="Markets at the Beall Greenhouses" />
<meta name="description" content="the historic Beall Greenhouses" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="Markets at the Beall Greenhouses" />
<meta property="og:title" content="the historic Beall Greenhouses" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/" />
<meta property="og:description" content="Markets at the Beall Greenhouses" />
<meta property="og:image" content="/img/logo-light.png" />
<meta property="og:description" content="the historic Beall Greenhouses" />
<meta property="og:image" content="/assets/img/logo-light.png" />
<meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" />
<!-- JS -->
<script src="/scripts/nav.js" defer></script>
<script src="/assets/scripts/nav.js" defer></script>
<!-- CSS -->
<link rel="stylesheet" href="/styles/main.css">
<link rel="stylesheet" href="/styles/nav.css">
<link rel="stylesheet" href="/styles/artist.css">
<link rel="stylesheet" href="/assets/styles/main.css">
<link rel="stylesheet" href="/assets/styles/nav.css">
</head>
<body>
<div id="content">
@ -30,14 +29,17 @@
<nav id="top-nav">
</nav>
<img id="logo-dark" src="/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
<img id="logo-light" src="/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
<img class="dark-mode" src="/assets/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
<img class="light-mode" src="/assets/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
</header>
<main>
<main id="main">
<h1>Markets at the Beall Greenhouses</h1>
<h2>Status</h2>
<p>We've just completed a successful <a href="/2025/solstice">Solstice 2025</a> market. Stay tuned for more!</p>
<ul>
<li>We've just completed a successful <a href="/events/2025-solstice">Solstice 2025</a> market. Stay tuned for more!</li>
<li>Big website updates coming soon!</li>
</ul>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>

View File

@ -1,53 +0,0 @@
/* Top nav */
const navItems = [
{
href: "/",
name: "↩ back home"
},
{
href: "/directory/",
name: "🧺 all markets"
}
];
const populateNav = function() {
let nav = document.getElementById("top-nav");
let path = window.location.pathname;
for (const item of navItems) {
let a = document.createElement("a");
a.href = item.href;
a.innerHTML = item.name;
if (item.href === path) a.id = "current-page";
nav.append(a);
}
}
populateNav();
/* Footer */
const footerHTML = `
<div id="contacts">
<p>
Website questions or feedback?
<a href="mailto:lee.cattarin@gmail.com?cc=montanahawke@gmail.com&subject=Beall%20Greenhouses%20Market">
email Lee
</a>
</p>
<p>Market questions?
<a href="mailto:montanahawke@gmail.com?subject=Beall%20Greenhouses%20Market">
email Hawke
</a>
</p>
</div>
<p>brought to you in 2025</p>
`
const populateFooter = function() {
let footer = document.getElementById("footer");
footer.innerHTML = footerHTML;
}
populateFooter();