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

new logo and new header generation

Browse Source
This commit is contained in:
Lee Cattarin
2026-01-06 15:15:23 -08:00
parent e585bf3cdf
commit ebc3eedbcc
13 changed files with 68 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
about/index.html
View File

@ -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>

6
artists/hawke/index.html
View File

@ -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>

7
artists/index.html
View File

@ -31,12 +31,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>Artists in residence at the Beall Greenhouses</h1>

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.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 = `

51
assets/styles/nav.css
View File

@ -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;
}
}
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%;

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

@ -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
events/2026-imbolc/index.html
View File

@ -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>

6
events/index.html
View File

@ -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>

7
index.html
View File

@ -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>

6
palette/index.html
View File

@ -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>Site Palette</h1>
<div class="color">