inherentlee/beall
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a468b5a143a9adb73ec6cfdac5b39726f57bb965
beall/_site/artists/jennifer-hawke/index.html
T

546 lines
11 KiB
HTML
Raw Normal View History

built site
2026-03-31 16:51:15 -07:00
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jennifer Hawke | 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="Jennifer Hawke | 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>.topic {
margin: 4rem auto;
display: grid;
}
.topic:nth-child(odd) {
grid-template:
'img h'
'img desc'
'img .';
grid-template-columns: 45% auto;
}
.topic:nth-child(even) {
grid-template:
'h img'
'desc img'
'. img';
grid-template-columns: auto 45%;
}
@media (max-width: 950px) {
.topic:nth-child(odd),
.topic:nth-child(even) {
grid-template:
'img'
'h'
'desc';
}
}
.topic img {
grid-area: img;
border-radius: 1rem;
}
@media (max-width: 950px) {
.topic img {
border-radius: 1rem 1rem 0 0;
border-bottom: .25rem solid var(--color-accent);
}
}
.topic h1,
.topic h2 {
margin: 0;
grid-area: h;
border-bottom: .25rem solid var(--color-accent);
padding: .25rem;
}
.topic:nth-child(odd) h2 {
padding-left: .75rem;
}
.topic:nth-child(even) h2 {
text-align: right;
padding-right: .75rem;
}
@media (max-width: 950px) {
.topic:nth-child(odd) h2,
.topic:nth-child(even) h2 {
padding: .25rem 0;
}
}
.topic .desc {
grid-area: desc;
background-color: var(--color-bg-alt);
border-radius: 0 0 1rem 1rem;
}
.topic:nth-child(odd) .desc {
margin-left: 1.5rem;
}
.topic:nth-child(even) .desc {
margin-right: 1.5rem;
}
@media (max-width: 950px) {
.topic:nth-child(odd) .desc,
.topic:nth-child(even) .desc {
margin: 0;
}
}
.contact ul {
background-color: var(--color-bg-alt);
border-radius: 0 0 1rem 1rem;
}
.contact {
margin-top: 4rem;
text-align: center;
}
.contact li {
list-style: none;
}
: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: 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: 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)):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">
ⓘ 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">
<div class="topic">
<img src="/img/Lo1hpKdVZo-1024.jpeg" 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." loading="lazy" decoding="async" width="1024" height="681">
<h1>Jennifer Hawke</h1>
<div class="desc">
<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>
<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>
add flyer
2026-04-12 09:48:23 -07:00
<!-- This page `/artists/jennifer-hawke/` was built on 2026-04-12T16:48:00.487Z -->
built site
2026-03-31 16:51:15 -07:00
</body>
</html>
Reference in New Issue Copy Permalink