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

add editorconfig and convert spaces to tabs

Browse Source
This commit is contained in:
Lee Cattarin
2026-01-07 14:42:15 -08:00
parent 648234959f
commit c7b2134ea8
19 changed files with 969 additions and 951 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.editorconfig Normal file
View File

@ -0,0 +1,9 @@
root = true
[*]
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
charset = utf-8
indent_style = tab
indent_size = 2

9
README.md Normal file
View File

@ -0,0 +1,9 @@
# README
Website for the Beall Greenhouses on Vashon Island, WA.
[beall-greenhouses-market.pages.dev](https://beall-greenhouses-market.pages.dev)
## Editing in VSCode
This project has an [`.editorconfig` file](.editorconfig). To utilize this in VSCode, install the ["Editorconfig" extension](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig).

78
about/index.html
View File

@ -1,47 +1,47 @@
<!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" />
<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>
<!-- 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">
<!-- CSS -->
<link rel="stylesheet" href="/assets/styles/main.css">
<link rel="stylesheet" href="/assets/styles/nav.css">
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></header>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></header>
<main id="main">
<h1>About the Beall Greenhouses</h1>
<main id="main">
<h1>About the Beall Greenhouses</h1>
<div class="no-header">
<p><a href="https://www.historylink.org/File/2346" target="_blank">
Read about the Beall Greenhouses on HistoryLink.org
</a></p>
</div>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
<div class="no-header">
<p><a href="https://www.historylink.org/File/2346" target="_blank">
Read about the Beall Greenhouses on HistoryLink.org
</a></p>
</div>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</html>

110
artists/hawke/index.html
View File

@ -1,63 +1,63 @@
<!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" />
<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>
<!-- 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">
<!-- 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">
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></header>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></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.">
<div id="bio">
<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>
</div>
</div>
<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.">
<div id="bio">
<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>
</div>
</div>
<div class="contact">
<h2>Get in touch...</h2>
<ul>
<li>
<a href="https://www.instagram.com/jenniferhawkestudio">@jenniferhawkestudio</a> and <a href="https://www.instagram.com/montana_hawke">@montana_hawke</a> on instagram
</li>
<li>
<a href="https://www.facebook.com/pugetsoundgypsy">Jennifer Hawke on facebook</a>
</li>
<li>
<a href="mailto:montanahawke@gmail.com?subject=Beall%20Greenhouses">email Jennifer Hawke</a>
</li>
</ul>
</div>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
<div class="contact">
<h2>Get in touch...</h2>
<ul>
<li>
<a href="https://www.instagram.com/jenniferhawkestudio">@jenniferhawkestudio</a> and <a href="https://www.instagram.com/montana_hawke">@montana_hawke</a> on instagram
</li>
<li>
<a href="https://www.facebook.com/pugetsoundgypsy">Jennifer Hawke on facebook</a>
</li>
<li>
<a href="mailto:montanahawke@gmail.com?subject=Beall%20Greenhouses">email Jennifer Hawke</a>
</li>
</ul>
</div>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</html>

86
artists/index.html
View File

@ -1,51 +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" />
<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>
<!-- 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">
<!-- 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">
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></header>
<main id="main">
<h1>Artists in residence at the Beall Greenhouses</h1>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></header>
<main id="main">
<h1>Artists in residence at the Beall Greenhouses</h1>
<ul 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>
</ul>
<ul 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>
</ul>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</html>

116
assets/scripts/market.js
View File

@ -1,86 +1,86 @@
const makeArtistImg = function(artistImg) {
let imgDiv = document.createElement("div");
imgDiv.classList.add("fit-contain");
let imgDiv = document.createElement("div");
imgDiv.classList.add("fit-contain");
let img = document.createElement("img");
img.src = artistImg.src;
let img = document.createElement("img");
img.src = artistImg.src;
/* handle single-line or multi-line alts */
if (typeof artistImg.alt === "string") img.alt = artistImg.alt;
else {
let fullAlt = `a ${artistImg.alt.length} image collage.`
for (let i = 0; i < artistImg.alt.length; i++)
fullAlt += ` ${i}: ${artistImg.alt[i]}`
img.alt = fullAlt;
}
/* handle single-line or multi-line alts */
if (typeof artistImg.alt === "string") img.alt = artistImg.alt;
else {
let fullAlt = `a ${artistImg.alt.length} image collage.`
for (let i = 0; i < artistImg.alt.length; i++)
fullAlt += ` ${i}: ${artistImg.alt[i]}`
img.alt = fullAlt;
}
imgDiv.append(img);
return imgDiv;
imgDiv.append(img);
return imgDiv;
}
const makeArtistDesc = function(bio, contact) {
let descDiv = document.createElement("div");
descDiv.classList.add("description");
let descDiv = document.createElement("div");
descDiv.classList.add("description");
/* multi-line bio array */
for (const bioLine of bio) {
let p = document.createElement("p");
p.innerHTML = bioLine;
descDiv.append(p);
}
/* multi-line bio array */
for (const bioLine of bio) {
let p = document.createElement("p");
p.innerHTML = bioLine;
descDiv.append(p);
}
/* artist contact info */
let contacts = document.createElement("p");
for (let i = 0; i < contact.length; i++) {
let a = document.createElement("a");
a.href = contact[i].href;
a.innerHTML = contact[i].title;
a.target = "_blank";
contacts.append(a);
/* artist contact info */
let contacts = document.createElement("p");
for (let i = 0; i < contact.length; i++) {
let a = document.createElement("a");
a.href = contact[i].href;
a.innerHTML = contact[i].title;
a.target = "_blank";
contacts.append(a);
if (i !== contact.length - 1) contacts.append(" ● ");
}
descDiv.append(contacts);
if (i !== contact.length - 1) contacts.append(" ● ");
}
descDiv.append(contacts);
return descDiv;
return descDiv;
}
const makeArtist = function(artist) {
let container = document.createElement("div");
container.classList.add("artist");
container.id = artist.id;
let container = document.createElement("div");
container.classList.add("artist");
container.id = artist.id;
/* artist img */
container.append(makeArtistImg(artist.img));
/* artist img */
container.append(makeArtistImg(artist.img));
/* artist name */
let h3 = document.createElement("h3");
h3.innerHTML = artist.name;
container.append(h3);
/* artist name */
let h3 = document.createElement("h3");
h3.innerHTML = artist.name;
container.append(h3);
/* artist description */
container.append(makeArtistDesc(artist.bio, artist.contact));
return container;
/* artist description */
container.append(makeArtistDesc(artist.bio, artist.contact));
return container;
}
let artistContainer = document.getElementById("artists");
const makeArtistPage = function(artists) {
for (const artist of artists)
artistContainer.append(makeArtist(artist));
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}`);
});
.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}`);
});

114
assets/scripts/nav.js
View File

@ -1,76 +1,76 @@
/* 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"
}
{
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 path = window.location.pathname;
let a = document.createElement("a");
a.href = href;
a.innerHTML = title;
a.title = tooltip;
a.ariaLabel = tooltip;
if (href === "#main") a.id = "skip";
else if (href === path) a.id = "current-page";
let a = document.createElement("a");
a.href = href;
a.innerHTML = title;
a.title = tooltip;
a.ariaLabel = tooltip;
if (href === "#main") a.id = "skip";
else if (href === path) a.id = "current-page";
return a;
return a;
}
const createHomeLink = function() {
let path = window.location.pathname;
let path = window.location.pathname;
let a = document.createElement("a");
a.href = "/";
a.ariaLabel = "Beall Greenhouses home";
if (path === "/") {
a.id = "current-page";
a.title = "Beall Greenhouses home";
} else {
a.title = "↩ Beall Greenhouses home"
}
let a = document.createElement("a");
a.href = "/";
a.ariaLabel = "Beall Greenhouses home";
if (path === "/") {
a.id = "current-page";
a.title = "Beall Greenhouses home";
} else {
a.title = "↩ Beall Greenhouses home"
}
let logo = document.createElement("img");
logo.src = "/assets/img/logo.jpg";
logo.alt = "block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'"
let logo = document.createElement("img");
logo.src = "/assets/img/logo.jpg";
logo.alt = "block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'"
a.append(logo);
a.append(logo);
return a;
return a;
}
const createNav = function() {
let nav = document.createElement("nav");
nav.title = "background image shows the peak of a dilapidated greenhouse in black and white";
let nav = document.createElement("nav");
nav.title = "background image shows the peak of a dilapidated greenhouse in black and white";
nav.append(createMenuLink("skip ↷", "#main", "skip to main content"));
nav.append(createHomeLink());
nav.append(createMenuLink("skip ↷", "#main", "skip to main content"));
nav.append(createHomeLink());
let ul = document.createElement("ul");
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);
}
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);
nav.append(ul);
return nav;
return nav;
}
let header = document.querySelector("header");
@ -78,15 +78,15 @@ header.append(createNav());
/* Footer */
const footerHTML = `
<p>questions?
<a href="mailto:beall.greenhouses@gmail.com">email us!</a>
</p>
<p>brought to you in 2026</p>
<p>questions?
<a href="mailto:beall.greenhouses@gmail.com">email us!</a>
</p>
<p>brought to you in 2026</p>
`
const populateFooter = function() {
let footer = document.getElementById("footer");
footer.innerHTML = footerHTML;
let footer = document.getElementById("footer");
footer.innerHTML = footerHTML;
}
populateFooter();

102
assets/styles/artist-market.css
View File

@ -1,99 +1,99 @@
.artist {
width: 100%;
margin: 2rem 0;
display: grid;
scroll-margin-top: 1rem;
width: 100%;
margin: 2rem 0;
display: grid;
scroll-margin-top: 1rem;
}
.artist:nth-child(odd) {
grid-template:
'imgs h3'
'imgs desc'
'imgs .';
grid-template-columns: 45% auto;
grid-template:
'imgs h3'
'imgs desc'
'imgs .';
grid-template-columns: 45% auto;
}
.artist:nth-child(even) {
grid-template:
'h3 imgs'
'desc imgs'
'. imgs';
grid-template-columns: auto 45%;
grid-template:
'h3 imgs'
'desc imgs'
'. imgs';
grid-template-columns: auto 45%;
}
@media (max-width: 1050px) {
.artist:nth-child(n) {
grid-template:
'imgs'
'h3'
'desc';
}
.artist:nth-child(n) {
grid-template:
'imgs'
'h3'
'desc';
}
}
.fit-contain {
object-fit: contain;
grid-area: imgs;
object-fit: contain;
grid-area: imgs;
}
.artist img {
max-height: 100%;
max-width: 100%;
border-radius: 1rem;
max-height: 100%;
max-width: 100%;
border-radius: 1rem;
}
@media (max-width: 1050px) {
.artist img {
border-radius: 1rem 1rem 0 0;
border-bottom: .25rem solid var(--color-accent);
}
.artist img {
border-radius: 1rem 1rem 0 0;
border-bottom: .25rem solid var(--color-accent);
}
}
.artist h3 {
grid-area: h3;
text-transform: uppercase;
line-height: 2rem;
grid-area: h3;
text-transform: uppercase;
line-height: 2rem;
}
.artist:nth-child(odd) h3 {
padding-left: .5rem;
padding-left: .5rem;
}
.artist:nth-child(even) h3 {
padding-right: .5rem;
text-align: right;
padding-right: .5rem;
text-align: right;
}
@media (max-width: 1050px) {
.artist:nth-child(n) h3 {
padding: 0;
}
.artist:nth-child(n) h3 {
padding: 0;
}
}
.description {
grid-area: desc;
background-color: var(--color-bg-alt);
border-radius: 0 0 1rem 1rem;
grid-area: desc;
background-color: var(--color-bg-alt);
border-radius: 0 0 1rem 1rem;
}
.artist:nth-child(odd) .description {
margin-left: 1.75rem;
margin-left: 1.75rem;
}
.artist:nth-child(even) .description {
margin-right: 1.75rem;
margin-right: 1.75rem;
}
@media (max-width: 750px) {
.artist:nth-child(odd) .description {
margin-left: .875rem;
}
.artist:nth-child(odd) .description {
margin-left: .875rem;
}
.artist:nth-child(even) .description {
margin-right: .875rem;
}
.artist:nth-child(even) .description {
margin-right: .875rem;
}
}
.description p:last-child {
text-align: center;
padding-bottom: 1rem;
text-align: center;
padding-bottom: 1rem;
}

66
assets/styles/artist-resident.css
View File

@ -1,61 +1,61 @@
.resident {
margin: 2rem auto;
display: grid;
grid-template:
'img h1'
'img desc'
'img .';
grid-template-columns: 1fr 1fr;
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 {
grid-template:
'img'
'h1'
'desc';
}
}
.resident h1 {
grid-area: h1;
font-size: 2rem;
margin: 0;
border-bottom: .25rem solid var(--color-accent);
grid-area: h1;
font-size: 2rem;
margin: 0;
border-bottom: .25rem solid var(--color-accent);
}
.resident img {
grid-area: img;
border-radius: 1rem;
grid-area: img;
border-radius: 1rem;
}
.resident #bio {
grid-area: desc;
margin-left: 1.75rem;
grid-area: desc;
margin-left: 1.75rem;
}
@media (max-width: 1050px) {
.resident img {
border-radius: 1rem 1rem 0 0;
border-bottom: .25rem solid var(--color-accent);
}
.resident img {
border-radius: 1rem 1rem 0 0;
border-bottom: .25rem solid var(--color-accent);
}
.resident #bio {
margin: 0;
}
.resident #bio {
margin: 0;
}
}
.resident #bio,
.contact ul {
background-color: var(--color-bg-alt);
border-radius: 0 0 1rem 1rem;
background-color: var(--color-bg-alt);
border-radius: 0 0 1rem 1rem;
}
.contact {
margin-top: 4rem;
text-align: center;
margin-top: 4rem;
text-align: center;
}
.contact li {
list-style: none;
list-style: none;
}

60
assets/styles/directory.css
View File

@ -1,61 +1,61 @@
#directory {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
margin: 0 .5rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
margin: 0 .5rem;
}
@media (max-width: 1050px) {
#directory {
grid-template-columns: 1fr;
}
#directory {
grid-template-columns: 1fr;
}
}
ul#directory,
ol#directory {
background-color: var(--color-bg);
padding: 0;
background-color: var(--color-bg);
padding: 0;
}
#directory li {
list-style: none;
border: solid .25rem var(--color-accent);
border-radius: .75rem;
outline-offset: .25rem;
margin: 0;
padding: 0;
list-style: none;
border: solid .25rem var(--color-accent);
border-radius: .75rem;
outline-offset: .25rem;
margin: 0;
padding: 0;
}
@media (any-hover: hover) {
#directory li:hover {
background-color: var(--color-text);
}
#directory li:hover {
background-color: var(--color-text);
}
#directory li:hover h2 {
color: var(--color-bg);
border-color: var(--color-accent-flipped);
}
#directory li:hover h2 {
color: var(--color-bg);
border-color: var(--color-accent-flipped);
}
}
#directory li:focus-within {
outline: solid .25rem var(--color-accent);
outline: solid .25rem var(--color-accent);
}
#directory a {
text-decoration: none;
margin: 0;
text-decoration: none;
margin: 0;
}
#directory a:focus-visible {
outline: none; /* outline handled by li:focus-within */
outline: none; /* outline handled by li:focus-within */
}
#directory h2 {
text-align: center;
margin-top: 1rem;
text-align: center;
margin-top: 1rem;
}
#directory img {
margin: 0;
border-radius: 0 0 .5rem .5rem;
margin: 0;
border-radius: 0 0 .5rem .5rem;
}

170
assets/styles/main.css
View File

@ -1,177 +1,177 @@
:root {
color-scheme: light dark;
color-scheme: light dark;
--color-concrete: #e5e0c7;
--color-concrete-alt: #d1cbab;
--color-green: #142b15;
--color-green-alt: #1a3b1b;
--color-teal-light: #4ba19e;
--color-teal-dark: #0c6a74;
--color-concrete: #e5e0c7;
--color-concrete-alt: #d1cbab;
--color-green: #142b15;
--color-green-alt: #1a3b1b;
--color-teal-light: #4ba19e;
--color-teal-dark: #0c6a74;
--color-bg: light-dark(var(--color-concrete), var(--color-green));
--color-text: light-dark(var(--color-green), var(--color-concrete));
--color-bg-alt: light-dark(var(--color-concrete-alt), var(--color-green-alt));
--color-text-alt: light-dark(var(--color-green-alt), var(--color-concrete-alt));
--color-accent: light-dark(var(--color-teal-dark), var(--color-teal-light));
--color-accent-flipped: light-dark(var(--color-teal-light), var(--color-teal-dark));
--color-bg: light-dark(var(--color-concrete), var(--color-green));
--color-text: light-dark(var(--color-green), var(--color-concrete));
--color-bg-alt: light-dark(var(--color-concrete-alt), var(--color-green-alt));
--color-text-alt: light-dark(var(--color-green-alt), var(--color-concrete-alt));
--color-accent: light-dark(var(--color-teal-dark), var(--color-teal-light));
--color-accent-flipped: light-dark(var(--color-teal-light), var(--color-teal-dark));
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--color-text);
color: var(--color-bg);
display: flex;
flex-direction: column;
font-family: sans-serif;
min-height: 100vh;
background-color: var(--color-text);
color: var(--color-bg);
display: flex;
flex-direction: column;
font-family: sans-serif;
min-height: 100vh;
}
#content {
background-color: var(--color-bg);
color: var(--color-text);
width: 100%;
flex-grow: 1;
border-radius: 0 0 2rem 2rem;
padding: 1rem 0 2rem;
background-color: var(--color-bg);
color: var(--color-text);
width: 100%;
flex-grow: 1;
border-radius: 0 0 2rem 2rem;
padding: 1rem 0 2rem;
}
@media (prefers-color-scheme: light) {
.dark-mode {
display: none;
}
.dark-mode {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.light-mode {
display: none;
}
.light-mode {
display: none;
}
}
header,
main {
width: 65%;
margin: 0 auto 1rem;
width: 65%;
margin: 0 auto 1rem;
}
@media (max-width: 750px) {
header,
main {
width: 92%;
}
header,
main {
width: 92%;
}
}
@media (min-width: 2000px) {
header,
main {
width: 45%;
}
header,
main {
width: 45%;
}
}
img {
display: block;
max-width: 100%;
display: block;
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-text-alt);
color: var(--color-text-alt);
}
h1,
h2 {
font-family: 'Bellota', sans-serif;
font-family: 'Bellota', sans-serif;
}
h1 {
text-align: center;
margin: 2rem 0;
font-size: 2.2rem;
text-align: center;
margin: 2rem 0;
font-size: 2.2rem;
}
h2 {
margin: 2rem 0 0;
font-size: 1.65rem;
margin: 2rem 0 0;
font-size: 1.65rem;
}
h2,
h3 {
border-bottom: .25rem solid var(--color-accent);
border-bottom: .25rem solid var(--color-accent);
}
a {
color: var(--color-text);
font-weight: bold;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: .25rem;
text-decoration-color: var(--color-accent);
transition: text-decoration-thickness .5s;
margin: 0 .25rem;
border-radius: .1rem;
outline-offset: .1rem;
color: var(--color-text);
font-weight: bold;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: .25rem;
text-decoration-color: var(--color-accent);
transition: text-decoration-thickness .5s;
margin: 0 .25rem;
border-radius: .1rem;
outline-offset: .1rem;
}
a:hover,
a:active {
text-decoration-thickness: .5rem;
text-decoration-thickness: .5rem;
}
a:focus-visible {
text-decoration: none;
outline: solid .25rem var(--color-accent);
text-decoration: none;
outline: solid .25rem var(--color-accent);
}
main p,
main ul {
padding: .8rem;
line-height: 1.5rem;
padding: .8rem;
line-height: 1.5rem;
}
main li {
margin-left: 1rem;
margin-left: 1rem;
}
main li:not(:last-child) {
padding: 0 0 .5rem;
padding: 0 0 .5rem;
}
/* styles for sets of <p>s under an h2/3/etc vs alone */
.under-header,
.no-header {
background-color: var(--color-bg-alt);
background-color: var(--color-bg-alt);
}
.under-header {
border-radius: 0 0 1rem 1rem;
margin-left: 2.5rem;
border-radius: 0 0 1rem 1rem;
margin-left: 2.5rem;
}
@media (max-width: 750px) {
.under-header {
margin-left: 1.25rem;
}
.under-header {
margin-left: 1.25rem;
}
}
.no-header {
border-radius: 1rem;
border-radius: 1rem;
}
.two-col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.two-col > * {
place-self: start center;
place-self: start center;
}
@media (max-width: 750px) {
.two-col {
grid-template-columns: 1fr;
}
.two-col {
grid-template-columns: 1fr;
}
}

120
assets/styles/nav.css
View File

@ -1,43 +1,43 @@
/* top nav */
nav {
position: relative;
margin: 0 auto 1.5rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
background-image: url("/assets/img/greenhouse.jpg");
background-size: cover;
background-repeat: no-repeat;
border-radius: 2rem .25rem .25rem 2rem;
position: relative;
margin: 0 auto 1.5rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
background-image: url("/assets/img/greenhouse.jpg");
background-size: cover;
background-repeat: no-repeat;
border-radius: 2rem .25rem .25rem 2rem;
}
nav a {
margin: 0;
margin: 0;
}
nav a:not(:has(img)) {
display: inline-block;
text-decoration: none;
font-size: 1.2rem;
padding: 0 .25rem;
border: solid .125rem var(--color-accent);
border-radius: .25rem;
background-color: var(--color-bg);
display: inline-block;
text-decoration: none;
font-size: 1.2rem;
padding: 0 .25rem;
border: solid .125rem var(--color-accent);
border-radius: .25rem;
background-color: var(--color-bg);
}
@media (any-hover: hover) {
nav a:not(:has(img)):hover {
color: var(--color-bg);
background-color: var(--color-text-alt);
border-color: var(--color-accent-flipped);
outline: .125rem solid var(--color-accent);
outline-offset: 0;
}
nav a:not(:has(img)):hover {
color: var(--color-bg);
background-color: var(--color-text-alt);
border-color: var(--color-accent-flipped);
outline: .125rem solid var(--color-accent);
outline-offset: 0;
}
}
nav a:not(:has(img)):focus-visible {
outline: solid .125rem var(--color-accent);
outline-offset: .125rem;
outline: solid .125rem var(--color-accent);
outline-offset: .125rem;
}
#skip {
@ -59,69 +59,69 @@ nav a:not(:has(img)):focus-visible {
}
@media (max-width: 750px) {
#skip:focus-visible {
left: 5rem;
}
#skip:focus-visible {
left: 5rem;
}
}
nav img {
max-height: 6.75rem;
max-width: 100%;
margin: 0 auto;
border-radius: 2rem;
border: .2rem solid var(--color-accent);
max-height: 6.75rem;
max-width: 100%;
margin: 0 auto;
border-radius: 2rem;
border: .2rem solid var(--color-accent);
}
@media (any-hover: hover) {
nav img:hover {
border-color: var(--color-accent-flipped);
outline-offset: 0;
outline: .2rem solid var(--color-accent);
}
nav img:hover {
border-color: var(--color-accent-flipped);
outline-offset: 0;
outline: .2rem solid var(--color-accent);
}
}
nav a:has(img):focus {
border-radius: 2rem;
outline-offset: .2rem;
outline: .2rem solid var(--color-accent);
border-radius: 2rem;
outline-offset: .2rem;
outline: .2rem solid var(--color-accent);
}
nav a:has(img):focus img {
outline: none;
outline: none;
}
nav ul {
display: flex;
justify-content: flex-end;
gap: .6rem;
align-items: flex-end;
flex-flow: column nowrap;
display: flex;
justify-content: flex-end;
gap: .6rem;
align-items: flex-end;
flex-flow: column nowrap;
}
nav li {
list-style: none;
list-style: none;
}
/* footer */
footer {
width: 95%;
margin: 0 auto;
padding: 1rem 0;
width: 95%;
margin: 0 auto;
padding: 1rem 0;
}
footer p {
background-color: var(--color-text);
color: var(--color-bg);
text-align: center;
font-size: .9rem;
padding: .25rem;
background-color: var(--color-text);
color: var(--color-bg);
text-align: center;
font-size: .9rem;
padding: .25rem;
}
footer a {
color: var(--color-bg);
text-decoration-color: var(--color-accent-flipped);
color: var(--color-bg);
text-decoration-color: var(--color-accent-flipped);
}
footer a:focus-visible {
outline-color: var(--color-accent-flipped);
outline-color: var(--color-accent-flipped);
}

288
events/2025-solstice/artists.json
View File

@ -1,146 +1,146 @@
[
{
"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"
}
]
}
{
"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"
}
]
}
]

98
events/2025-solstice/index.html
View File

@ -1,60 +1,60 @@
<!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" />
<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>
<!-- 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">
<!-- 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">
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></header>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></header>
<main id="main">
<h1>Solstice 2025 Market at the Beall Greenhouses</h1>
<main id="main">
<h1>Solstice 2025 Market at the Beall Greenhouses</h1>
<h2>When?</h2>
<p class="under-header"><time datetime="2025-12-21 10:00">Sunday, December 21st, 2025, 10am - 5pm</time>.</p>
<h2>When?</h2>
<p class="under-header"><time datetime="2025-12-21 10:00">Sunday, December 21st, 2025, 10am - 5pm</time>.</p>
<h2>Where?</h2>
<p class="under-header">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>Where?</h2>
<p class="under-header">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 class="under-header">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>What else?</h2>
<p class="under-header">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>
<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>

136
events/2026-imbolc/artists.json
View File

@ -1,70 +1,70 @@
[
{
"id": "hawke",
"img": {
"src": "/assets/img/2026-imbolc/hawke.jpg",
"alt": [
"A green feather emerging from cracked earth, curled in a spiral",
"Two crane figures with their beaks meeting in the middle where a large circle is suspended in the air. The sky behind it is stormy and full of clouds. The hill they are standing on has a large crack running down the center, with ancient carved stone animal heads around the crack.",
"A vintage map of the Bremerton area. Super imposed throughout the map is a sacred geometry pattern called the Flower of Life. A red Octopus is emerging from the pattern.",
"A bear curled up in a ball with its paw over its eyes. The ground is covered in snow and there are bird tracks in between stones poking out. In the sky above, there is a comet amongst the stars.",
"A vintage map of the Bremerton area. Super imposed throughout the map is a sacred geometry pattern called the Flower of Life. A Dungeness crab is emerging from the pattern."
]
},
"name": "Jennifer Hawke",
"bio": [
"Jennifer Hawke came to Vashon Island about 20 years ago from Billings, Montana.",
"Hawke has a studio at the Beall Greenhouses, and has participated in the Vashon Studio Tour for the last four seasons. They also paint large Sacred Geometry installations on the road during the First Friday Art Walks in the summer months.",
"Hawke has a degree in Painting and Cast Metals from Montana State University, but they work in many different mediums. Their primary studio work is assemblage using vintage detritus and beach trash.",
"You may also know Hawke through the Bearded Lady Road Reports: a live broadcast on Facebook dedicated to reporting on road conditions during inclement weather."
],
"contact": [
{
"href": "https://www.instagram.com/jenniferhawkestudio",
"title": "@jenniferhawkestudio on instagram"
},
{
"href": "https://www.facebook.com/pugetsoundgypsy",
"title": "Jennifer Hawke on facebook"
},
{
"href": "https://www.instagram.com/montana_hawke",
"title": "@montana_hawke on instagram"
}
]
},
{
"id": "lee",
"img": {
"src": "/assets/img/2026-imbolc/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": "brooke",
"img": {
"src": "/assets/img/2026-imbolc/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%20Imbolc%202026",
"title": "email Brooke"
}
]
}
{
"id": "hawke",
"img": {
"src": "/assets/img/2026-imbolc/hawke.jpg",
"alt": [
"A green feather emerging from cracked earth, curled in a spiral",
"Two crane figures with their beaks meeting in the middle where a large circle is suspended in the air. The sky behind it is stormy and full of clouds. The hill they are standing on has a large crack running down the center, with ancient carved stone animal heads around the crack.",
"A vintage map of the Bremerton area. Super imposed throughout the map is a sacred geometry pattern called the Flower of Life. A red Octopus is emerging from the pattern.",
"A bear curled up in a ball with its paw over its eyes. The ground is covered in snow and there are bird tracks in between stones poking out. In the sky above, there is a comet amongst the stars.",
"A vintage map of the Bremerton area. Super imposed throughout the map is a sacred geometry pattern called the Flower of Life. A Dungeness crab is emerging from the pattern."
]
},
"name": "Jennifer Hawke",
"bio": [
"Jennifer Hawke came to Vashon Island about 20 years ago from Billings, Montana.",
"Hawke has a studio at the Beall Greenhouses, and has participated in the Vashon Studio Tour for the last four seasons. They also paint large Sacred Geometry installations on the road during the First Friday Art Walks in the summer months.",
"Hawke has a degree in Painting and Cast Metals from Montana State University, but they work in many different mediums. Their primary studio work is assemblage using vintage detritus and beach trash.",
"You may also know Hawke through the Bearded Lady Road Reports: a live broadcast on Facebook dedicated to reporting on road conditions during inclement weather."
],
"contact": [
{
"href": "https://www.instagram.com/jenniferhawkestudio",
"title": "@jenniferhawkestudio on instagram"
},
{
"href": "https://www.facebook.com/pugetsoundgypsy",
"title": "Jennifer Hawke on facebook"
},
{
"href": "https://www.instagram.com/montana_hawke",
"title": "@montana_hawke on instagram"
}
]
},
{
"id": "lee",
"img": {
"src": "/assets/img/2026-imbolc/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": "brooke",
"img": {
"src": "/assets/img/2026-imbolc/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%20Imbolc%202026",
"title": "email Brooke"
}
]
}
]

98
events/2026-imbolc/index.html
View File

@ -1,59 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>2026 Imbolc Celebration & 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/2026-imbolc/" />
<meta name="description" content="2026 Imbolc Celebration & Market | events at the historic Beall Greenhouses" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="2026 Imbolc Celebration & Market | events at the historic Beall Greenhouses" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/events/2026-imbolc/" />
<meta property="og:description" content="2026 Imbolc Celebration & 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" />
<head>
<title>2026 Imbolc Celebration & 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/2026-imbolc/" />
<meta name="description" content="2026 Imbolc Celebration & Market | events at the historic Beall Greenhouses" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="2026 Imbolc Celebration & Market | events at the historic Beall Greenhouses" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/events/2026-imbolc/" />
<meta property="og:description" content="2026 Imbolc Celebration & 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/2026-imbolc/artists.json" defer></script>
<!-- JS -->
<script src="/assets/scripts/nav.js" defer></script>
<script src="/assets/scripts/market.js" data-artists="/events/2026-imbolc/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">
<!-- 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">
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></header>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></header>
<main id="main">
<h1>Imbolc 2026 Celebration & Market at the Beall Greenhouses</h1>
<main id="main">
<h1>Imbolc 2026 Celebration & Market at the Beall Greenhouses</h1>
<div class="two-col">
<div class="no-header">
<p>Join us to celebrate the returning of the light on
<time datetime="2026-01-31 10:00">Saturday, January 31st, 2026, 10am - 5pm</time>.</p>
<p>Find us in 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>
<p>Share the flyer and bring friends!</p>
</div>
<div class="two-col">
<div class="no-header">
<p>Join us to celebrate the returning of the light on
<time datetime="2026-01-31 10:00">Saturday, January 31st, 2026, 10am - 5pm</time>.</p>
<p>Find us in 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>
<p>Share the flyer and bring friends!</p>
</div>
<img src="/assets/img/2026-imbolc/flyer.jpg" alt="a black and white flyer for the Imbolc event that reads: Imbolc Celebration and Market at the Beall Greenhouses. Crafting and art, open studios. It then lists the address, time, and website. The text is overlaid on a darkened image of a dilapidated greenhouse, and the site's hummingbird logo is inset.">
</div>
<img src="/assets/img/2026-imbolc/flyer.jpg" alt="a black and white flyer for the Imbolc event that reads: Imbolc Celebration and Market at the Beall Greenhouses. Crafting and art, open studios. It then lists the address, time, and website. The text is overlaid on a darkened image of a dilapidated greenhouse, and the site's hummingbird logo is inset.">
</div>
<h2>Artists</h2>
<div id="artists"><!-- auto-populated by artists.js --></div>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
<h2>Artists</h2>
<div id="artists"><!-- auto-populated by artists.js --></div>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</html>

98
events/index.html
View File

@ -1,59 +1,59 @@
<!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" />
<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>
<!-- 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">
<!-- 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">
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></header>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></header>
<main id="main">
<h1>Events at the Beall Greenhouses</h1>
<main id="main">
<h1>Events at the Beall Greenhouses</h1>
<ol id="directory">
<li>
<a href="/events/2026-imbolc">
<h2>Imbolc 2026</h2>
<img src="/assets/img/2026-imbolc/event.jpg" alt="part of the Imbolc 2026 market flyer. in the background, a greenhouse in black and white; in the foreground, text reading: Celebration and Market at the Beall Greenhouses; Crafting and Art; Open Studios. inset in the lower left is the top of the site's logo, a hummingbird in flight." />
</a>
</li>
<ol id="directory">
<li>
<a href="/events/2026-imbolc">
<h2>Imbolc 2026</h2>
<img src="/assets/img/2026-imbolc/event.jpg" alt="part of the Imbolc 2026 market flyer. in the background, a greenhouse in black and white; in the foreground, text reading: Celebration and Market at the Beall Greenhouses; Crafting and Art; Open Studios. inset in the lower left is the top of the site's logo, a hummingbird in flight." />
</a>
</li>
<li>
<a href="/events/2025-solstice">
<h2>Solstice 2025</h2>
<img src="/assets/img/2025-solstice/event.jpg" alt="group photo of all eight artists of the Solstice 2025 market." />
</a>
</li>
</ol>
<li>
<a href="/events/2025-solstice">
<h2>Solstice 2025</h2>
<img src="/assets/img/2025-solstice/event.jpg" alt="group photo of all eight artists of the Solstice 2025 market." />
</a>
</li>
</ol>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</html>

76
index.html
View File

@ -1,46 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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="the historic Beall Greenhouses" />
<meta name="robots" content="index,follow" />
<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="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" />
<head>
<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="the historic Beall Greenhouses" />
<meta name="robots" content="index,follow" />
<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="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>
<!-- 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">
<!-- CSS -->
<link rel="stylesheet" href="/assets/styles/main.css">
<link rel="stylesheet" href="/assets/styles/nav.css">
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></header>
<main id="main">
<h1>The Beall Greenhouses</h1>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></header>
<main id="main">
<h1>The Beall Greenhouses</h1>
<h2>Upcoming Imbolc celebration</h2>
<p class="under-header">See the <a href="/events/2026-imbolc">Imbolc event page</a> for more details.</p>
<h2>Upcoming Imbolc celebration</h2>
<p class="under-header">See the <a href="/events/2026-imbolc">Imbolc event page</a> for more details.</p>
<h2>A successful Solstice</h2>
<p class="under-header">Our inaugural <a href="/events/2025-solstice">Solstice Market</a> was a rousing success.</p>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
<h2>A successful Solstice</h2>
<p class="under-header">Our inaugural <a href="/events/2025-solstice">Solstice Market</a> was a rousing success.</p>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</html>

86
palette/index.html
View File

@ -1,50 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Palette | 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="/palette/" />
<meta name="description" content="Palette | the historic Beall Greenhouses" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="Palette | the historic Beall Greenhouses" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/palette/" />
<meta property="og:description" content="Palette | 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" />
<head>
<title>Palette | 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="/palette/" />
<meta name="description" content="Palette | the historic Beall Greenhouses" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="Palette | the historic Beall Greenhouses" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/palette/" />
<meta property="og:description" content="Palette | 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>
<!-- 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/palette.css">
<!-- CSS -->
<link rel="stylesheet" href="/assets/styles/main.css">
<link rel="stylesheet" href="/assets/styles/nav.css">
<link rel="stylesheet" href="/assets/styles/palette.css">
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></header>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="content">
<header><!-- auto-populated by nav.js --></header>
<main id="main">
<h1>Site Palette</h1>
<div class="color">
<p id="concrete">#e5e0c7</p>
<p id="concrete-alt">#d1cbab</p>
<p id="green">#142b15</p>
<p id="green-alt">#1a3b1b</p>
<p id="teal-light">#4ba19e</p>
<p id="teal-dark">#0c6a74</p>
</div>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
<main id="main">
<h1>Site Palette</h1>
<div class="color">
<p id="concrete">#e5e0c7</p>
<p id="concrete-alt">#d1cbab</p>
<p id="green">#142b15</p>
<p id="green-alt">#1a3b1b</p>
<p id="teal-light">#4ba19e</p>
<p id="teal-dark">#0c6a74</p>
</div>
</main>
</div>
<footer id="footer"><!-- auto-populated by nav.js --></footer>
</body>
</html>