Compare commits
8 Commits
fc3c6f921f
...
3f3528a614
| Author | SHA1 | Date | |
|---|---|---|---|
| 3f3528a614 | |||
| 2c9e252fcd | |||
| ebc3eedbcc | |||
| e585bf3cdf | |||
| ea82632091 | |||
| b19ebe417e | |||
| 645d384867 | |||
| 10106c8a8e |
@ -30,12 +30,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<header>
|
||||
<nav id="top-nav"><!-- auto-populated by nav.js --></nav>
|
||||
<header><!-- auto-populated by nav.js --></header>
|
||||
|
||||
<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>About the Beall Greenhouses</h1>
|
||||
|
||||
@ -43,7 +39,7 @@
|
||||
|
||||
<p><a href="https://www.historylink.org/File/2346" target="_blank">
|
||||
Read about the Beall Greenhouses on HistoryLink.org
|
||||
</a>.</p>
|
||||
</a></p>
|
||||
|
||||
<h2 id="present">Present</h2>
|
||||
|
||||
|
||||
@ -31,12 +31,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<header>
|
||||
<nav id="top-nav"><!-- auto-populated by nav.js --></nav>
|
||||
<header><!-- auto-populated by nav.js --></header>
|
||||
|
||||
<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>
|
||||
|
||||
@ -31,23 +31,18 @@
|
||||
</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>
|
||||
<header><!-- auto-populated by nav.js --></header>
|
||||
<main id="main">
|
||||
<h1>Artists in residence at the Beall Greenhouses</h1>
|
||||
|
||||
<ol id="directory">
|
||||
<ul 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>
|
||||
</ul>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
BIN
assets/img/logo.jpg
Executable file
BIN
assets/img/logo.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
@ -25,22 +25,39 @@ const createMenuLink = function(title, href, tooltip) {
|
||||
a.innerHTML = title;
|
||||
a.title = 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;
|
||||
}
|
||||
|
||||
const createSkipLink = function() {
|
||||
let a = createMenuLink("skip ↷", "#main", "skip to main content");
|
||||
a.id = "skip";
|
||||
const createHomeLink = function() {
|
||||
let path = window.location.pathname;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
const populateNav = function() {
|
||||
let nav = document.getElementById("top-nav");
|
||||
const createNav = function() {
|
||||
let nav = document.createElement("nav");
|
||||
|
||||
nav.append(createSkipLink());
|
||||
nav.append(createMenuLink("↩ home", "/", "home page for the Beall Greenhouses"));
|
||||
nav.append(createMenuLink("skip ↷", "#main", "skip to main content"));
|
||||
nav.append(createHomeLink());
|
||||
|
||||
let ul = document.createElement("ul");
|
||||
|
||||
@ -51,9 +68,12 @@ const populateNav = function() {
|
||||
}
|
||||
|
||||
nav.append(ul);
|
||||
|
||||
return nav;
|
||||
}
|
||||
|
||||
populateNav();
|
||||
let header = document.querySelector("header");
|
||||
header.append(createNav());
|
||||
|
||||
/* Footer */
|
||||
const footerHTML = `
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
#directory {
|
||||
display: grid;
|
||||
flex-flow: row wrap;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 3rem;
|
||||
margin: 0 .5rem;
|
||||
@ -12,6 +11,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
ul#directory,
|
||||
ol#directory {
|
||||
background-color: var(--color-bg);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#directory li {
|
||||
list-style: none;
|
||||
border: solid .25rem var(--color-accent);
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
--color-light: #e5e0c7;
|
||||
--color-light-alt: #d1cbab;
|
||||
--color-dark: #142B15;
|
||||
--color-dark-alt: #1a3b1b;
|
||||
--color-accent-light: #4ba19e;
|
||||
--color-accent-dark: #0c6a74;
|
||||
--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-light), var(--color-dark));
|
||||
--color-text: light-dark(var(--color-dark), var(--color-light));
|
||||
--color-bg-alt: light-dark(var(--color-light-alt), var(--color-dark-alt));
|
||||
--color-text-alt: light-dark(var(--color-dark-alt), var(--color-light-alt));
|
||||
--color-accent: light-dark(var(--color-accent-dark), var(--color-accent-light));
|
||||
--color-accent-flipped: light-dark(var(--color-accent-light), var(--color-accent-dark));
|
||||
--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));
|
||||
}
|
||||
|
||||
* {
|
||||
@ -61,7 +61,7 @@ main {
|
||||
@media (max-width: 650px) {
|
||||
header,
|
||||
main {
|
||||
width: 95%;
|
||||
width: 92%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ nav {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
nav a {
|
||||
nav a:not(:has(img)) {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
font-size: 1.2rem;
|
||||
@ -17,7 +17,7 @@ nav a {
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
nav a:hover {
|
||||
nav a:not(:has(img)):hover {
|
||||
color: var(--color-bg);
|
||||
background-color: var(--color-text-alt);
|
||||
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-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 {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: .5rem;
|
||||
gap: .6rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
nav ul {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
nav li {
|
||||
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 {
|
||||
width: 95%;
|
||||
|
||||
33
assets/styles/palette.css
Normal file
33
assets/styles/palette.css
Normal 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);
|
||||
}
|
||||
@ -32,12 +32,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<header>
|
||||
<nav id="top-nav"><!-- auto-populated by nav.js --></nav>
|
||||
<header><!-- auto-populated by nav.js --></header>
|
||||
|
||||
<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>Solstice 2025 Market at the Beall Greenhouses</h1>
|
||||
|
||||
|
||||
@ -6,12 +6,12 @@
|
||||
<meta charset="utf-8">
|
||||
<!-- Meta -->
|
||||
<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="robots" content="index,follow" />
|
||||
<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: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: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" />
|
||||
@ -32,12 +32,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<header>
|
||||
<nav id="top-nav"><!-- auto-populated by nav.js --></nav>
|
||||
<header><!-- auto-populated by nav.js --></header>
|
||||
|
||||
<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>Imbolc 2026 Market at the Beall Greenhouses</h1>
|
||||
|
||||
|
||||
@ -31,12 +31,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<header>
|
||||
<nav id="top-nav"><!-- auto-populated by nav.js --></nav>
|
||||
<header><!-- auto-populated by nav.js --></header>
|
||||
|
||||
<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>Events at the Beall Greenhouses</h1>
|
||||
|
||||
|
||||
BIN
favicon.ico
BIN
favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 37 KiB |
@ -30,12 +30,7 @@
|
||||
</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>
|
||||
<header><!-- auto-populated by nav.js --></header>
|
||||
<main id="main">
|
||||
<h1>The Beall Greenhouses</h1>
|
||||
|
||||
|
||||
50
palette/index.html
Normal file
50
palette/index.html
Normal 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>
|
||||
Reference in New Issue
Block a user
