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

Compare commits

base: inherentlee:fc3c6f921f3a09ea3a887be02b24f1732cac062b
Branches Tags
inherentlee:main
...
compare: inherentlee:3f3528a6140e011189d6596399db792fd7e3d546
Branches Tags
inherentlee:main

8 Commits
fc3c6f921f ... 3f3528a614

Author SHA1 Message Date
Lee Cattarin
3f3528a614 update favicon to match img 2026-01-06 15:31:05 -08:00
Lee Cattarin
2c9e252fcd less cramped mobile spacing 2026-01-06 15:15:37 -08:00
Lee Cattarin
ebc3eedbcc new logo and new header generation 2026-01-06 15:15:23 -08:00
Lee Cattarin
e585bf3cdf slight tweaks to directory layout to work with ul as well as ol 2026-01-06 15:14:30 -08:00
Lee Cattarin
ea82632091 palette page 2026-01-06 12:41:27 -08:00
Lee Cattarin
b19ebe417e rename colors 2026-01-06 12:39:25 -08:00
Lee Cattarin
645d384867 correct URLs 2026-01-06 11:58:50 -08:00
Lee Cattarin
10106c8a8e remove awkward looking period 2026-01-06 11:57:22 -08:00
17 changed files with 174 additions and 87 deletions
Expand all files Collapse all files

8
about/index.html
View File

@ -30,12 +30,8 @@
</head> </head>
<body> <body>
<div id="content"> <div id="content">
<header> <header><!-- auto-populated by nav.js --></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"> <main id="main">
<h1>About the Beall Greenhouses</h1> <h1>About the Beall Greenhouses</h1>
@ -43,7 +39,7 @@
<p><a href="https://www.historylink.org/File/2346" target="_blank"> <p><a href="https://www.historylink.org/File/2346" target="_blank">
Read about the Beall Greenhouses on HistoryLink.org Read about the Beall Greenhouses on HistoryLink.org
</a>.</p> </a></p>
<h2 id="present">Present</h2> <h2 id="present">Present</h2>

6
artists/hawke/index.html
View File

@ -31,12 +31,8 @@
</head> </head>
<body> <body>
<div id="content"> <div id="content">
<header> <header><!-- auto-populated by nav.js --></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"> <main id="main">
<div class="resident"> <div class="resident">
<h1>Jennifer Hawke</h1> <h1>Jennifer Hawke</h1>

11
artists/index.html
View File

@ -31,23 +31,18 @@
</head> </head>
<body> <body>
<div id="content"> <div id="content">
<header> <header><!-- auto-populated by nav.js --></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"> <main id="main">
<h1>Artists in residence at the Beall Greenhouses</h1> <h1>Artists in residence at the Beall Greenhouses</h1>
<ol id="directory"> <ul id="directory">
<li> <li>
<a href="/artists/hawke"> <a href="/artists/hawke">
<h2>Jennifer Hawke</h2> <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." /> <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> </a>
</li> </li>
</ol> </ul>
</main> </main>
</div> </div>

BIN
assets/img/logo-dark.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
assets/img/logo-light.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
assets/img/logo.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

38
assets/scripts/nav.js
View File

@ -25,22 +25,39 @@ const createMenuLink = function(title, href, tooltip) {
a.innerHTML = title; a.innerHTML = title;
a.title = tooltip; a.title = tooltip;
a.ariaLabel = tooltip; a.ariaLabel = tooltip;
if (path === href) a.id = "current-page"; if (href === "#main") a.id = "skip";
else if (href === path) a.id = "current-page";
return a; return a;
} }
const createSkipLink = function() { const createHomeLink = function() {
let a = createMenuLink("skip ↷", "#main", "skip to main content"); let path = window.location.pathname;
a.id = "skip";
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.'"
a.append(logo);
return a; return a;
} }
const populateNav = function() { const createNav = function() {
let nav = document.getElementById("top-nav"); let nav = document.createElement("nav");
nav.append(createSkipLink()); nav.append(createMenuLink("skip ↷", "#main", "skip to main content"));
nav.append(createMenuLink("↩ home", "/", "home page for the Beall Greenhouses")); nav.append(createHomeLink());
let ul = document.createElement("ul"); let ul = document.createElement("ul");
@ -51,9 +68,12 @@ const populateNav = function() {
} }
nav.append(ul); nav.append(ul);
return nav;
} }
populateNav(); let header = document.querySelector("header");
header.append(createNav());
/* Footer */ /* Footer */
const footerHTML = ` const footerHTML = `

7
assets/styles/directory.css
View File

@ -1,6 +1,5 @@
#directory { #directory {
display: grid; display: grid;
flex-flow: row wrap;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 3rem; gap: 3rem;
margin: 0 .5rem; margin: 0 .5rem;
@ -12,6 +11,12 @@
} }
} }
ul#directory,
ol#directory {
background-color: var(--color-bg);
padding: 0;
}
#directory li { #directory li {
list-style: none; list-style: none;
border: solid .25rem var(--color-accent); border: solid .25rem var(--color-accent);

26
assets/styles/main.css
View File

@ -1,19 +1,19 @@
:root { :root {
color-scheme: light dark; color-scheme: light dark;
--color-light: #e5e0c7; --color-concrete: #e5e0c7;
--color-light-alt: #d1cbab; --color-concrete-alt: #d1cbab;
--color-dark: #142B15; --color-green: #142b15;
--color-dark-alt: #1a3b1b; --color-green-alt: #1a3b1b;
--color-accent-light: #4ba19e; --color-teal-light: #4ba19e;
--color-accent-dark: #0c6a74; --color-teal-dark: #0c6a74;
--color-bg: light-dark(var(--color-light), var(--color-dark)); --color-bg: light-dark(var(--color-concrete), var(--color-green));
--color-text: light-dark(var(--color-dark), var(--color-light)); --color-text: light-dark(var(--color-green), var(--color-concrete));
--color-bg-alt: light-dark(var(--color-light-alt), var(--color-dark-alt)); --color-bg-alt: light-dark(var(--color-concrete-alt), var(--color-green-alt));
--color-text-alt: light-dark(var(--color-dark-alt), var(--color-light-alt)); --color-text-alt: light-dark(var(--color-green-alt), var(--color-concrete-alt));
--color-accent: light-dark(var(--color-accent-dark), var(--color-accent-light)); --color-accent: light-dark(var(--color-teal-dark), var(--color-teal-light));
--color-accent-flipped: light-dark(var(--color-accent-light), var(--color-accent-dark)); --color-accent-flipped: light-dark(var(--color-teal-light), var(--color-teal-dark));
} }
* { * {
@ -61,7 +61,7 @@ main {
@media (max-width: 650px) { @media (max-width: 650px) {
header, header,
main { main {
width: 95%; width: 92%;
} }
} }

53
assets/styles/nav.css
View File

@ -7,7 +7,7 @@ nav {
align-items: flex-start; align-items: flex-start;
} }
nav a { nav a:not(:has(img)) {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
font-size: 1.2rem; font-size: 1.2rem;
@ -17,7 +17,7 @@ nav a {
} }
@media (any-hover: hover) { @media (any-hover: hover) {
nav a:hover { nav a:not(:has(img)):hover {
color: var(--color-bg); color: var(--color-bg);
background-color: var(--color-text-alt); background-color: var(--color-text-alt);
border-color: var(--color-accent-flipped); border-color: var(--color-accent-flipped);
@ -26,7 +26,7 @@ nav a {
} }
} }
nav a:focus-visible { nav a:not(:has(img)):focus-visible {
outline: solid .125rem var(--color-accent); outline: solid .125rem var(--color-accent);
outline-offset: .125rem; outline-offset: .125rem;
} }
@ -55,35 +55,44 @@ nav a:focus-visible {
} }
} }
nav img {
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 a:has(img):focus {
border-radius: 2rem;
outline-offset: .2rem;
outline: .2rem solid var(--color-accent);
}
nav a:has(img):focus img {
outline: none;
}
nav ul { nav ul {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: .5rem; gap: .6rem;
align-items: flex-end; align-items: flex-end;
} flex-flow: column nowrap;
@media (max-width: 450px) {
nav ul {
flex-flow: column nowrap;
}
} }
nav li { nav li {
list-style: none; list-style: none;
} }
/* this specifically handles the home button
we want it taking up flex container space */
nav > #current-page {
visibility: hidden;
}
header img {
max-height: 25vh;
max-width: 100%;
margin: 0 auto;
}
/* footer */ /* footer */
footer { footer {
width: 95%; width: 95%;

33
assets/styles/palette.css Normal file
View File

@ -0,0 +1,33 @@
.color p {
width: 50%;
margin: 1rem auto;
border: .25rem solid var(--color-text);
border-radius: 1rem;
text-align: center;
font-weight: bold;
}
@media (max-width: 650px) {
.color p {
width: 100%;
}
}
#concrete { background-color: var(--color-concrete); }
#concrete-alt { background-color: var(--color-concrete-alt); }
#green { background-color: var(--color-green); }
#green-alt { background-color: var(--color-green-alt); }
#teal-light {background-color: var(--color-teal-light); }
#teal-dark { background-color: var(--color-teal-dark); }
#concrete,
#concrete-alt,
#teal-light {
color: var(--color-green);
}
#green,
#green-alt,
#teal-dark {
color: var(--color-concrete);
}

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

@ -32,12 +32,8 @@
</head> </head>
<body> <body>
<div id="content"> <div id="content">
<header> <header><!-- auto-populated by nav.js --></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"> <main id="main">
<h1>Solstice 2025 Market at the Beall Greenhouses</h1> <h1>Solstice 2025 Market at the Beall Greenhouses</h1>

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

@ -6,12 +6,12 @@
<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="/events/2025-solstice/" /> <link rel="canonical" href="/events/2026-imbolc/" />
<meta name="description" content="2026 Imbolc Market and Workshops | events at the historic Beall Greenhouses" /> <meta name="description" content="2026 Imbolc Market and Workshops | events at the historic Beall Greenhouses" />
<meta name="robots" content="index,follow" /> <meta name="robots" content="index,follow" />
<meta property="og:title" content="2026 Imbolc Market and Workshops | events at the historic Beall Greenhouses" /> <meta property="og:title" content="2026 Imbolc Market and Workshops | events at the historic Beall Greenhouses" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:url" content="/events/2025-solstice/" /> <meta property="og:url" content="/events/2026-imbolc/" />
<meta property="og:description" content="2026 Imbolc Market and Workshops | events at the historic Beall Greenhouses" /> <meta property="og:description" content="2026 Imbolc Market and Workshops | events at the historic Beall Greenhouses" />
<meta property="og:image" content="/assets/img/logo-light.png" /> <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" /> <meta property="og:image:alt" content="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme" />
@ -32,12 +32,8 @@
</head> </head>
<body> <body>
<div id="content"> <div id="content">
<header> <header><!-- auto-populated by nav.js --></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"> <main id="main">
<h1>Imbolc 2026 Market at the Beall Greenhouses</h1> <h1>Imbolc 2026 Market at the Beall Greenhouses</h1>

6
events/index.html
View File

@ -31,12 +31,8 @@
</head> </head>
<body> <body>
<div id="content"> <div id="content">
<header> <header><!-- auto-populated by nav.js --></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"> <main id="main">
<h1>Events at the Beall Greenhouses</h1> <h1>Events at the Beall Greenhouses</h1>

BIN
favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 37 KiB

7
index.html
View File

@ -30,12 +30,7 @@
</head> </head>
<body> <body>
<div id="content"> <div id="content">
<header> <header><!-- auto-populated by nav.js --></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"> <main id="main">
<h1>The Beall Greenhouses</h1> <h1>The Beall Greenhouses</h1>

50
palette/index.html Normal file
View File

@ -0,0 +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" />
<!-- 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">
<!-- 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>
</html>