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

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>

7
artists/index.html
View File

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

51
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;
}
@media (max-width: 450px) {
nav ul {
flex-flow: column nowrap; 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%;

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>

6
events/2026-imbolc/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>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>

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>

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