reshuffle some naming to work in artists part of sitemap

This commit is contained in:
2026-01-02 09:37:47 -08:00
parent 23d77d8a60
commit 8216a2b6af
10 changed files with 186 additions and 22 deletions

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

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

51
artists/index.html Normal file
View File

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

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 263 KiB

View File

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

View File

@ -1,4 +1,4 @@
#events {
#directory {
display: grid;
flex-flow: row wrap;
grid-template-columns: repeat(2, 1fr);
@ -6,12 +6,12 @@
}
@media (max-width: 850px) {
#events {
#directory {
grid-template-columns: 1fr;
}
}
#events li {
#directory li {
list-style: none;
border: solid thin var(--color-accent);
border-radius: .5rem;
@ -19,35 +19,35 @@
}
@media (any-hover: hover) {
#events li:hover {
#directory li:hover {
background-color: var(--color-text);
border-color: var(--color-text);
}
#events li:hover h2 {
#directory li:hover h2 {
color: var(--color-bg);
}
}
#events li:focus-within {
#directory li:focus-within {
outline: solid .25rem var(--color-accent);
}
#events a {
#directory a {
text-decoration: none;
margin: 0;
}
#events a:focus-visible {
#directory a:focus-visible {
outline: none; /* outline handled by li:focus-within */
}
#events h2 {
#directory h2 {
text-align: center;
margin-top: 1rem;
}
#events img {
#directory img {
margin: 0;
border-radius: 0 0 .5rem .5rem;
}

View File

@ -140,3 +140,7 @@ main > ul {
margin-left: 1.25rem;
}
}
.ml-embedded {
margin: 2rem auto;
}

View File

@ -1,29 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>2025 Solstice Market | the historic Beall Greenhouses</title>
<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 | the historic Beall Greenhouses" />
<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 | the historic Beall Greenhouses" />
<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 | the historic Beall Greenhouses" />
<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/artists.js" data-artists="/events/2025-solstice/artists.json" 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.css">
<link rel="stylesheet" href="/assets/styles/artist-market.css">
</head>
<body>
<div id="content">

View File

@ -1,18 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Events | the historic Beall Greenhouses</title>
<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 | the historic Beall Greenhouses" />
<meta name="description" content="Events directory | the historic Beall Greenhouses" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="Events | the historic Beall Greenhouses" />
<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 | the historic Beall Greenhouses" />
<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" />
@ -22,7 +22,7 @@
<!-- CSS -->
<link rel="stylesheet" href="/assets/styles/main.css">
<link rel="stylesheet" href="/assets/styles/nav.css">
<link rel="stylesheet" href="/assets/styles/events.css">
<link rel="stylesheet" href="/assets/styles/directory.css">
</head>
<body>
<div id="content">
@ -35,7 +35,7 @@
<main id="main">
<h1>Events at the Beall Greenhouses</h1>
<ol id="events">
<ol id="directory">
<li>
<a href="/events/2025-solstice">
<h2>Solstice 2025</h2>