big reshuffling

assets/scripts/artists.js

@@ -0,0 +1,64 @@
+const makeArtist = function(artist) {
+  let container = document.createElement("div");
+  container.classList.add("artist");
+  container.id = artist.id;
+
+  /* artist img */
+  let imgDiv = document.createElement("div");
+  imgDiv.classList.add("fit-contain");
+  let img = document.createElement("img");
+  img.src = artist.img.src;
+  img.alt = artist.img.alt;
+  imgDiv.append(img);
+  container.append(imgDiv);
+
+  /* artist name */
+  let h3 = document.createElement("h3");
+  h3.innerHTML = artist.name;
+  container.append(h3);
+
+  /* artist bio */
+  let descDiv = document.createElement("div");
+  descDiv.classList.add("description");
+  let bio = document.createElement("p");
+  bio.innerHTML = artist.bio;
+  descDiv.append(bio);
+  
+  /* artist contact info */
+  let contacts = document.createElement("p");
+  for (let i = 0; i < artist.contact.length; i++) {
+    let a = document.createElement("a");
+    a.href = artist.contact[i].href;
+    a.innerHTML = artist.contact[i].title;
+    a.target = "_blank";
+    contacts.append(a);
+
+    if (i !== artist.contact.length - 1) contacts.append(" ● ");
+  }
+  descDiv.append(contacts);
+
+  container.append(descDiv);
+  return container;
+}
+
+let artistContainer = document.getElementById("artists");
+
+const makeArtistPage = function(artists) {
+  for (const artist of artists)
+    artistContainer.append(makeArtist(artist));
+}
+
+let script = document.currentScript;
+let artistsfile = script.dataset.artists;
+
+fetch(artistsfile)
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error(`HTTP error, status = ${response.status}`);
+    }
+    return response.json();
+  })
+  .then((artists) => makeArtistPage(artists))
+  .catch((error) => {
+    console.log(`Error: ${error.message}`);
+  });

assets/scripts/nav.js

@@ -0,0 +1,65 @@
+/* Top nav */
+const navItems = [
+  {
+    href: "/about/",
+    title: "ⓘ about"
+  },
+  {
+    href: "/events/",
+    title: "🗓 events"
+  }
+];
+
+const populateNav = function() {
+  let nav = document.getElementById("top-nav");
+  let path = window.location.pathname;
+
+  let home = document.createElement("a");
+  home.href = "/";
+  home.innerHTML = "↩ home";
+  if (path === "/") home.id = "current-page";
+  nav.append(home);
+
+  let ul = document.createElement("ul");
+
+  for (const item of navItems) {
+    let li = document.createElement("li");
+    let a = document.createElement("a");
+    a.href = item.href;
+    a.innerHTML = item.title;
+
+    if (item.href === path) a.id = "current-page";
+
+    li.append(a);
+    ul.append(li);
+  }
+
+  nav.append(ul);
+}
+
+populateNav();
+
+/* Footer */
+const footerHTML = `
+  <div id="contacts">
+    <p>
+      Website questions or feedback?
+      <a href="mailto:lee.cattarin@gmail.com?cc=montanahawke@gmail.com&subject=Beall%20Greenhouses%20Market">
+        email Lee
+      </a>
+    </p>
+    <p>Market questions?
+      <a href="mailto:montanahawke@gmail.com?subject=Beall%20Greenhouses%20Market">
+        email Hawke
+      </a>
+    </p>
+  </div>
+  <p>brought to you in 2026</p>
+`
+
+const populateFooter = function() {
+  let footer = document.getElementById("footer");
+  footer.innerHTML = footerHTML;
+}
+
+populateFooter();

assets/styles/artist.css

@@ -0,0 +1,89 @@
+.artist {
+  width: 100%;
+  margin: 2rem 0;
+  display: grid;
+  scroll-margin-top: 1rem;
+}
+
+.artist:nth-child(odd) {
+  grid-template:
+    'imgs h3'
+    'imgs desc'
+    'imgs .';
+  grid-template-columns: 45% auto;
+}
+
+.artist:nth-child(even) {
+  grid-template:
+    'h3 imgs'
+    'desc imgs'
+    '. imgs';
+  grid-template-columns: auto 45%;
+}
+
+@media (max-width: 1050px) {
+  .artist:nth-child(n) {
+    grid-template:
+      'imgs'
+      'h3'
+      'desc';
+  }
+}
+
+.fit-contain {
+  object-fit: contain;
+  grid-area: imgs;
+}
+
+.artist img {
+  max-height: 100%;
+  max-width: 100%;
+  border-radius: 1rem;
+}
+
+.artist h3 {
+  grid-area: h3;
+  text-transform: uppercase;
+}
+
+.artist:nth-child(odd) h3 {
+  padding-left: .5rem;
+}
+
+.artist:nth-child(even) h3 {
+  padding-right: .5rem;
+  text-align: right;
+}
+
+.description {
+  grid-area: desc;
+  background-color: var(--color-bg-alt);
+  border-radius: 0 0 1rem 1rem;
+}
+
+.artist:nth-child(odd) .description {
+  margin-left: 1.75rem;
+}
+
+.artist:nth-child(even) .description {
+  margin-right: 1.75rem;
+}
+
+@media (max-width: 1050px) {
+  .artist:nth-child(n) h3 {
+    padding: .5rem 0 0;
+  }
+
+  .artist:nth-child(odd) .description {
+    margin-left: .625rem;
+  }
+
+  .artist:nth-child(even) .description {
+    margin-right: .625rem;
+  }
+}
+
+.description p:last-child {
+  text-align: center;
+  padding-bottom: 1rem;
+}

assets/styles/events.css

@@ -0,0 +1,48 @@
+#events {
+  display: grid;
+  flex-flow: row wrap;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 3rem;
+}
+
+@media (max-width: 850px) {
+  #events {
+    grid-template-columns: 1fr;
+  }
+}
+
+#events li {
+  list-style: none;
+  border: solid thin var(--color-accent);
+  border-radius: .5rem;
+  outline-offset: .1rem;
+}
+
+@media (any-hover: hover) {
+  #events li:hover {
+    outline: solid .25rem var(--color-accent);
+  }
+}
+
+#events li:focus-within {
+  outline: solid .25rem var(--color-accent);
+}
+
+#events a {
+  text-decoration: none;
+  margin: 0;
+}
+
+#events a:focus-visible {
+  outline: none; /* outline handled by li:focus-within */
+}
+
+#events h2 {
+  text-align: center;
+  margin-top: 1rem;
+}
+
+#events img {
+  margin: 0;
+  border-radius: 0 0 .5rem .5rem;
+}

assets/styles/main.css

@@ -0,0 +1,142 @@
+:root {
+  color-scheme: light dark;
+
+  --color-light: #d5e9ff;
+  --color-light-alt: #beddff;
+  --color-dark: #001a33;
+  --color-dark-alt: #00274b;
+  --color-orange-light: #ff764f;
+  --color-orange-dark: #f55e33;
+
+  --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-orange-dark), var(--color-orange-light));
+  --color-accent-flipped: light-dark(var(--color-orange-light), var(--color-orange-dark));
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--color-text);
+  color: var(--color-bg);
+  display: flex;
+  flex-direction: column;
+  font-family: sans-serif;
+  min-height: 100vh;
+}
+
+#content {
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  width: 100%;
+  flex-grow: 1;
+  border-radius: 0 0 2rem 2rem;
+  padding: 1rem 0 2rem;
+}
+
+@media (prefers-color-scheme: light) {
+  .dark-mode {
+    display: none;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .light-mode {
+    display: none;
+  }
+}
+
+header,
+main {
+  width: 65%;
+  margin: 0 auto;
+}
+
+@media (max-width: 650px) {
+  header,
+  main {
+    width: 95%;
+  }
+}
+
+@media (min-width: 2000px) {
+  header,
+  main {
+    width: 45%;
+  }
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--color-text-alt);
+}
+
+h1 {
+  text-align: center;
+  margin: 2rem 0;
+}
+
+h2 {
+  margin: 2rem 0 0;
+}
+
+h2,
+h3 {
+  border-bottom: .25rem solid var(--color-accent);
+}
+
+a {
+  color: var(--color-text);
+  font-weight: bold;
+  text-decoration: underline;
+  text-decoration-style: solid;
+  text-decoration-thickness: .25rem;
+  text-decoration-color: var(--color-accent);
+  transition: text-decoration-thickness .5s;
+  margin: 0 .25rem;
+  border-radius: .1rem;
+  outline-offset: .1rem;
+}
+
+a:hover,
+a:active {
+  text-decoration-thickness: .5rem;
+}
+
+a:focus-visible {
+  text-decoration: none;
+  outline: solid .25rem var(--color-accent);
+}
+
+p,
+main ul {
+  padding: .5rem;
+  background-color: var(--color-bg-alt);
+  border-radius: 0 0 1rem 1rem;
+}
+
+main li {
+  margin-left: 1rem;
+}
+
+main > p,
+main > ul {
+  margin-left: 2.5rem;
+}
+
+@media (max-width: 650px) {
+  main > p,
+  main > ul {
+    margin-left: 1.25rem;
+  }
+}

assets/styles/nav.css

@@ -0,0 +1,87 @@
+/* top nav */
+nav {
+  margin: 0 auto 1.5rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+nav a {
+  text-decoration: none;
+  font-size: 1.2rem;
+  padding: 0 .25rem;
+}
+
+@media (any-hover: hover) {
+  nav a:hover {
+    outline: solid .25rem var(--color-accent);
+  }
+}
+
+nav ul {
+  display: flex;
+  justify-content: flex-end;
+  gap: .5rem;
+}
+
+nav li {
+  list-style: none;
+  border: solid thin var(--color-accent);
+  border-radius: .25rem;
+  outline-offset: .1rem;
+}
+
+nav li:focus-within {
+  outline: solid .25rem var(--color-accent);
+}
+
+nav li a:focus-visible {
+  outline: none; /* handled by above nav li rule */
+}
+
+/* this specifically handles the home button
+we want it taking up flex container space */
+nav > #current-page {
+  visibility: hidden;
+}
+
+nav > div > #current-page {
+  display: none;
+}
+
+header img {
+  max-height: 25vh;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+/* footer */
+footer {
+  width: 95%;
+  margin: 0 auto;
+  padding: 0 0 1rem;
+}
+
+footer p {
+  background-color: var(--color-text);
+  color: var(--color-bg);
+  text-align: center;
+  font-size: .9rem;
+}
+
+footer a {
+  color: var(--color-bg);
+  text-decoration-color: var(--color-accent-flipped);
+}
+
+footer a:focus-visible {
+  outline-color: var(--color-accent-flipped);
+}
+
+#contacts {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  column-gap: 3rem;
+  margin: 1rem 0 0;
+}