Compare commits

...

10 Commits

Author SHA1 Message Date
202c7014a1 remove log line 2025-12-28 12:42:43 -08:00
42dbf5e31d fix canonical links 2025-12-28 12:41:43 -08:00
5ec64cfda7 auto populate nav and footer 2025-12-28 12:41:27 -08:00
09b1d2975b rename css/ -> styles/ 2025-12-28 12:40:51 -08:00
59b14a842c more consistent nav structure 2025-12-28 11:56:30 -08:00
6acba69bcc specify market in mailto subjects 2025-12-28 11:49:13 -08:00
4cb0041de0 remove dupe solstice card on dir page 2025-12-28 11:42:10 -08:00
7f4dbebd6f finish split nav out; add directory page 2025-12-28 11:39:01 -08:00
dde23f91de split nav css out 2025-12-28 11:37:58 -08:00
cdf36ddc9d move repetitive rule 2025-12-27 22:08:02 -08:00
9 changed files with 256 additions and 152 deletions

View File

@ -6,25 +6,28 @@
<meta charset="utf-8"> <meta charset="utf-8">
<!-- Meta --> <!-- Meta -->
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="canonical" href="/" /> <link rel="canonical" href="/2025/solstice/" />
<meta name="description" content="Solstice Market at the Beall Greenhouses" /> <meta name="description" content="Solstice Market at the Beall Greenhouses" />
<meta name="robots" content="index,follow" /> <meta name="robots" content="index,follow" />
<meta property="og:title" content="Solstice Market at the Beall Greenhouses" /> <meta property="og:title" content="Solstice Market at the Beall Greenhouses" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:url" content="/" /> <meta property="og:url" content="/2025/solstice/" />
<meta property="og:description" content="Solstice Market at the Beall Greenhouses" /> <meta property="og:description" content="Solstice Market at the Beall Greenhouses" />
<meta property="og:image" content="/img/logo-light.png" /> <meta property="og:image" content="/img/logo-light.png" />
<meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" /> <meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" />
<!-- JS -->
<script src="/scripts/nav.js" defer></script>
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/styles/main.css">
<link rel="stylesheet" href="/css/artist.css"> <link rel="stylesheet" href="/styles/nav.css">
<link rel="stylesheet" href="/styles/artist.css">
</head> </head>
<body> <body>
<div id="content"> <div id="content">
<header> <header>
<nav> <nav id="top-nav"><!-- auto-populated by nav.js --></nav>
<a href="/">↩ back home</a>
</nav>
<img id="logo-dark" src="/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme"> <img id="logo-dark" src="/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
<img id="logo-light" src="/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme"> <img id="logo-light" src="/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
@ -49,7 +52,7 @@
<h3>Brooke Osment</h3> <h3>Brooke Osment</h3>
<div class="description"> <div class="description">
<p>found art jackets, stitchwork, visible mending</p> <p>found art jackets, stitchwork, visible mending</p>
<p><a href="mailto:bsosment@gmail.com?subject=Beall%20Greenhouses%20Market">email Brooke</a></p> <p><a href="mailto:bsosment@gmail.com?subject=Beall%20Greenhouses%20Market%20Solstice%202025">email Brooke</a></p>
</div> </div>
</div> </div>
@ -112,7 +115,7 @@
<h3>Karen Biondo</h3> <h3>Karen Biondo</h3>
<div class="description"> <div class="description">
<p>I am a farmer, chef, creator. I make fun, delicious and sometimes useful items from what inspires me in the world around me.</p> <p>I am a farmer, chef, creator. I make fun, delicious and sometimes useful items from what inspires me in the world around me.</p>
<p><a target="_blank" href="https://labiondofarm.com">labiondofarm.com</a><a href="mailto:labiondo@comcast.net?subject=Beall%20Greenhouses%20Market">email Karen</a> <p><a target="_blank" href="https://labiondofarm.com">labiondofarm.com</a><a href="mailto:labiondo@comcast.net?subject=Beall%20Greenhouses%20Market%20Solstice%202025">email Karen</a>
</p> </p>
</div> </div>
</div> </div>
@ -120,21 +123,6 @@
</div> </div>
</main> </main>
</div> </div>
<footer> <footer id="footer"><!-- auto-populated by nav.js --></footer>
<div id="contacts">
<p>
Website questions or feedback?
<a href="mailto:lee.cattarin@gmail.com?cc=montanahawke@gmail.com&subject=Beall%20Greenhouses%20Market">
email Lee
</a>
</p>
<p>Market questions?
<a href="mailto:montanahawke@gmail.com?subject=Beall%20Greenhouses%20Market">
email Hawke
</a>
</p>
</div>
<p>brought to you in 2025</p>
</footer>
</body> </body>
</html> </html>

52
directory/index.html Normal file
View File

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

BIN
img/filler0.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

View File

@ -15,42 +15,31 @@
<meta property="og:description" content="Markets at the Beall Greenhouses" /> <meta property="og:description" content="Markets at the Beall Greenhouses" />
<meta property="og:image" content="/img/logo-light.png" /> <meta property="og:image" content="/img/logo-light.png" />
<meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" /> <meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" />
<!-- JS -->
<script src="/scripts/nav.js" defer></script>
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/styles/main.css">
<link rel="stylesheet" href="/css/artist.css"> <link rel="stylesheet" href="/styles/nav.css">
<link rel="stylesheet" href="/styles/artist.css">
</head> </head>
<body> <body>
<div id="content"> <div id="content">
<header> <header>
<nav id="top-nav">
</nav>
<img id="logo-dark" src="/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme"> <img id="logo-dark" src="/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
<img id="logo-light" src="/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme"> <img id="logo-light" src="/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
</header> </header>
<main> <main>
<h1>Markets at the Beall Greenhouses</h1> <h1>Markets at the Beall Greenhouses</h1>
<h2>Past markets</h2> <h2>Status</h2>
<p>We've just completed a successful <a href="/2025/solstice">Solstice 2025</a> market. Stay tuned for more!</p>
<ul id="market-list">
<li><a href="/2025/solstice">Solstice 2025</a></li>
</ul>
</main> </main>
</div> </div>
<footer> <footer id="footer"><!-- auto-populated by nav.js --></footer>
<div id="contacts">
<p>
Website questions or feedback?
<a href="mailto:lee.cattarin@gmail.com?cc=montanahawke@gmail.com&subject=Beall%20Greenhouses%20Market">
email Lee
</a>
</p>
<p>Market questions?
<a href="mailto:montanahawke@gmail.com?subject=Beall%20Greenhouses%20Market">
email Hawke
</a>
</p>
</div>
<p>brought to you in 2026</p>
</footer>
</body> </body>
</html> </html>

53
scripts/nav.js Normal file
View File

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

48
styles/directory.css Normal file
View File

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

View File

@ -36,7 +36,7 @@ body {
width: 100%; width: 100%;
flex-grow: 1; flex-grow: 1;
border-radius: 0 0 2rem 2rem; border-radius: 0 0 2rem 2rem;
padding-top: 2rem; padding: 1rem 0 2rem;
} }
header, header,
@ -52,7 +52,7 @@ main {
} }
} }
@media (min-width: 1800px) { @media (min-width: 2000px) {
header, header,
main { main {
width: 45%; width: 45%;
@ -61,24 +61,7 @@ main {
img { img {
display: block; display: block;
}
header img {
max-height: 25vh;
max-width: 100%; max-width: 100%;
margin: 0 auto;
}
@media (prefers-color-scheme: light) {
#logo-dark {
display: none;
}
}
@media (prefers-color-scheme: dark) {
#logo-light {
display: none;
}
} }
h1 { h1 {
@ -105,6 +88,7 @@ a {
transition: text-decoration-thickness .5s; transition: text-decoration-thickness .5s;
margin: 0 .25rem; margin: 0 .25rem;
border-radius: .1rem; border-radius: .1rem;
outline-offset: .1rem;
} }
a:hover, a:hover,
@ -115,7 +99,6 @@ a:active {
a:focus-visible { a:focus-visible {
text-decoration: none; text-decoration: none;
outline: solid .25rem var(--color-accent); outline: solid .25rem var(--color-accent);
outline-offset: .1rem;
} }
p { p {
@ -134,86 +117,3 @@ main > p {
margin-left: 1.25rem; margin-left: 1.25rem;
} }
} }
ul {
background-color: var(--color-alt);
padding: .5rem;
border-radius: 0 0 1rem 1rem;
}
main > ul {
margin-left: 2.5rem;
}
@media (max-width: 650px) {
main > ul {
margin-left: 1.25rem;
}
}
li {
line-height: 2rem;
}
nav {
margin: 0 auto 1rem;
}
nav a {
text-decoration: none;
font-size: 1.2rem;
padding: 0 .25rem;
border: solid thin var(--color-accent);
border-radius: .25rem;
}
@media (any-hover: hover) {
nav a:hover {
outline: solid .25rem var(--color-accent);
outline-offset: .1rem;
}
}
footer {
width: 95%;
margin: 0 auto;
padding: 0 0 1rem;
}
footer p {
background-color: var(--color-text);
color: var(--color-bg);
text-align: center;
margin: 1rem 0 0;
}
footer a {
color: var(--color-bg);
text-decoration-color: var(--color-accent-flipped);
}
footer a:focus-visible {
outline-color: var(--color-accent-flipped);
}
#contacts {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
column-gap: 3rem;
margin: 0 0 1rem;
}
#market-list {
display: flex;
}
#market-list li {
list-style: none;
font-size: 1rem;
}
#market-list li:not(:last-child)::after {
content: '⦿';
}

74
styles/nav.css Normal file
View File

@ -0,0 +1,74 @@
/* top nav */
nav {
margin: 0 auto 1.5rem;
display: flex;
justify-content: space-between;
}
nav a {
text-decoration: none;
font-size: 1.2rem;
padding: 0 .25rem;
border: solid thin var(--color-accent);
border-radius: .25rem;
}
@media (any-hover: hover) {
nav a:hover {
outline: solid .25rem var(--color-accent);
}
}
#current-page {
visibility: hidden;
}
header img {
max-height: 25vh;
max-width: 100%;
margin: 0 auto;
}
@media (prefers-color-scheme: light) {
#logo-dark {
display: none;
}
}
@media (prefers-color-scheme: dark) {
#logo-light {
display: none;
}
}
/* footer */
footer {
width: 95%;
margin: 0 auto;
padding: 0 0 1rem;
}
footer p {
background-color: var(--color-text);
color: var(--color-bg);
text-align: center;
font-size: .9rem;
}
footer a {
color: var(--color-bg);
text-decoration-color: var(--color-accent-flipped);
}
footer a:focus-visible {
outline-color: var(--color-accent-flipped);
}
#contacts {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
column-gap: 3rem;
margin: 1rem 0 0;
}