diff --git a/about/index.html b/about/index.html index 55b60d0..04eacf5 100644 --- a/about/index.html +++ b/about/index.html @@ -30,12 +30,8 @@
-
- +
- Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme - Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme -

About the Beall Greenhouses

diff --git a/artists/hawke/index.html b/artists/hawke/index.html index 3e4407d..060936c 100644 --- a/artists/hawke/index.html +++ b/artists/hawke/index.html @@ -31,12 +31,8 @@
-
- +
- Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme - Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme -

Jennifer Hawke

diff --git a/artists/index.html b/artists/index.html index 0be8972..824e178 100644 --- a/artists/index.html +++ b/artists/index.html @@ -31,12 +31,7 @@
-
- - - Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme - Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme -
+

Artists in residence at the Beall Greenhouses

diff --git a/assets/img/logo-dark.png b/assets/img/logo-dark.png deleted file mode 100755 index 098ff21..0000000 Binary files a/assets/img/logo-dark.png and /dev/null differ diff --git a/assets/img/logo-light.png b/assets/img/logo-light.png deleted file mode 100755 index d8d383b..0000000 Binary files a/assets/img/logo-light.png and /dev/null differ diff --git a/assets/img/logo.jpg b/assets/img/logo.jpg new file mode 100755 index 0000000..e3ee5ab Binary files /dev/null and b/assets/img/logo.jpg differ diff --git a/assets/scripts/nav.js b/assets/scripts/nav.js index 09b1e24..0af8aad 100644 --- a/assets/scripts/nav.js +++ b/assets/scripts/nav.js @@ -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 = ` diff --git a/assets/styles/nav.css b/assets/styles/nav.css index 706ef7a..2d2eeef 100644 --- a/assets/styles/nav.css +++ b/assets/styles/nav.css @@ -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%; diff --git a/events/2025-solstice/index.html b/events/2025-solstice/index.html index a193834..8d922a0 100644 --- a/events/2025-solstice/index.html +++ b/events/2025-solstice/index.html @@ -32,12 +32,8 @@
-
- +
- Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme - Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme -

Solstice 2025 Market at the Beall Greenhouses

diff --git a/events/2026-imbolc/index.html b/events/2026-imbolc/index.html index 1ecff2d..4ad8fcd 100644 --- a/events/2026-imbolc/index.html +++ b/events/2026-imbolc/index.html @@ -32,12 +32,8 @@
-
- +
- Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme - Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme -

Imbolc 2026 Market at the Beall Greenhouses

diff --git a/events/index.html b/events/index.html index be11d91..eb940ba 100644 --- a/events/index.html +++ b/events/index.html @@ -31,12 +31,8 @@
-
- +
- Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme - Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme -

Events at the Beall Greenhouses

diff --git a/index.html b/index.html index 23df5f4..fa91562 100644 --- a/index.html +++ b/index.html @@ -30,12 +30,7 @@
-
- - - Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme - Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme -
+

The Beall Greenhouses

diff --git a/palette/index.html b/palette/index.html index 71cd88e..df8cbdc 100644 --- a/palette/index.html +++ b/palette/index.html @@ -31,12 +31,8 @@
-
- +
- Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme - Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme -

Site Palette