_site/about/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	
		
	<title>About the Beall Greenhouses | 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="About the Beall Greenhouses | 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.jpg">
	<meta property="og:image:alt" content="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'">

	<meta name="generator" content="Eleventy v3.1.5">

	<!-- CSS -->
	
	
	<style>:root {
	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-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;
}

body {
	background-color: var(--color-text);
	color: var(--color-bg);
	display: flex;
	flex-direction: column;
	font-family: Arial, Helvetica, 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;
}

@media (prefers-color-scheme: light) {
	.dark-mode {
		display: none;
	}
}

@media (prefers-color-scheme: dark) {
	.light-mode {
		display: none;
	}
}

header,
main {
	width: 65%;
	margin: 0 auto 1rem;
}


@media (max-width: 1000px ) {
	header,
	main {
		width: 80%;
	}
}

@media (max-width: 750px) {
	header,
	main {
		width: 92%;
	}
}

@media (min-width: 2000px) {
	header,
	main {
		width: 45%;
	}
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--color-text-alt);
}

h1,
h2 {
	font-family: 'Bellota', Arial, Helvetica, sans-serif;
}

h1 {
	text-align: center;
	margin: 2rem 0;
	font-size: 2.2rem;
}

h2 {
	margin: 2rem 0 0;
	font-size: 1.65rem;
}

h2,
h3 {
	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;
	border-radius: .1rem;
	outline-offset: .1rem;
}

a:hover,
a:active {
	text-decoration-thickness: .5rem;
}

a:focus-visible {
	text-decoration: none;
	outline: solid .25rem var(--color-accent);
}

main p,
main ul {
	padding: .8rem;
	line-height: 1.5rem;
}

main li {
	margin-left: 1rem;
}

main li:not(:last-child) {
	padding: 0 0 .5rem;
}

/* styles for sets of <p>s under an h2/3/etc vs alone
this is done as a class rather than just h2 + p to accomodate
for multi-<p> segments which can then be wrapped in <div>s */
.under-header,
.no-header {
	background-color: var(--color-bg-alt);
}

.under-header {
	border-radius: 0 0 1rem 1rem;
	margin-left: 2.5rem;
}

@media (max-width: 750px) {
	.under-header {
		margin-left: 1.25rem;
	}
}

.no-header {
	border-radius: 1rem;
}

.two-col {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.two-col > * {
	place-self: start center;
}

@media (max-width: 950px) {
	.two-col {
		grid-template-columns: 1fr;
	}
}
/* top nav */
nav {
	position: relative;
	margin: 0 auto 1.5rem;
	display: grid;
	grid-template: "logo nav";
	grid-template-rows: 7rem;
	grid-template-columns: 7rem auto;
	background-image: url("/greenhouse.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 2rem .25rem .25rem 2rem;
}

nav a {
	margin: 0;
}

nav a:not(:has(img)) {
	display: inline-block;
	text-decoration: none;
	font-size: 1.2rem;
	padding: .1rem .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)):focus-visible {
	outline: solid .125rem var(--color-accent);
	outline-offset: .125rem;
}

#skip {
	left: -999px;
	position: absolute;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: -99;
}

#skip:focus-visible {
	left: -6rem;
	width: auto;
	height: auto;
	overflow: auto;
	z-index: 999;
}

@media (max-width: 750px) {
	#skip:focus-visible {
		left: 5rem;
	}
}

nav img {
	max-height: 100%;
	margin: 0;
	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 a:has(img) {
	grid-area: logo;
	justify-self: start;
}

nav a:has(img):focus-visible {
	border-radius: 2rem;
	outline-offset: .2rem;
	outline: .2rem solid var(--color-accent);
}

nav a:has(img):focus-visible img {
	outline: none;
}

nav ul {
	grid-area: nav;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-flow: column nowrap;
}

nav li {
	list-style: none;
}

/* footer */
footer {
	width: 95%;
	margin: 0 auto;
	padding: 1rem 0;
	display: flex;
	justify-content: center;
}

@media (max-width: 750px) {
	footer {
		flex-flow: column;
	}
}

footer p {
	background-color: var(--color-text);
	color: var(--color-bg);
	text-align: center;
	font-size: .9rem;
	padding: .25rem;
}

@media (min-width: 751px) {
	footer p:nth-child(2)::before {
		content: "● " / "";
	}
	footer p:nth-child(2)::after {
		content: " ●" / "";
	}
}

footer a {
	color: var(--color-bg);
	text-decoration-color: var(--color-accent-flipped);
}

footer a:focus-visible {
	outline-color: var(--color-accent-flipped);
}</style>

	<!-- JS -->
	<script type="module"></script>

	<!-- 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>
	<nav title="background image shows the peak of a dilapidated greenhouse in black and white">

		<a href="#main" title="skip to main content" aria-label="skip to main content" id="skip">
			skip ↷</a>

		<a href="/" aria-label="Beall Greenhouses home" title="Beall Greenhouses home">
			<img src="/img/pZQvBRGd3A-500.jpeg" 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.'" loading="lazy" decoding="async" width="500" height="500">
		</a>

		<ul>
      
        <li>
          <a href="/about/" title="About the Beall Greenhouses" aria-current="page">ℹ️ about</a>
        </li>
      
        <li>
          <a href="/events/" title="Events at the Beall Greenhouses">🗓️ events</a>
        </li>
      
        <li>
          <a href="/artists/" title="Artists in residence at the Beall Greenhouses">🎨 artists</a>
        </li>
      
		</ul>
	</nav>
</header>


		<main id="main">
			
<h1>About the Beall Greenhouses</h1>


<div class="no-header">
  <p>
    The old Beall Greenhouses can be found at
    <a href="https://maps.app.goo.gl/5p1NAArdjX4vaEgw9" target="_blank">18527 Beall Rd SW, Vashon, WA 98070</a>.
  </p>

	<p><a href="https://www.historylink.org/File/2346" target="_blank">
			Read about the Beall Greenhouses on HistoryLink.org
		</a></p>

  <p>
    Questions? <a href="mailto:beall.greenhouses@gmail.com">Email us!</a>
  </p>
</div>


		</main>
	</div>

  <footer>
  <p>questions?
		<a href="mailto:beall.greenhouses@gmail.com">email us!</a>
	</p>
	<p>brought to you in 2026</p>
	<p><a href="/attribution/">site attribution</a></p>
</footer>

	<!-- This page `/about/` was built on 2026-05-05T21:25:57.397Z -->
</body>
</html>