git.stevedylan.dev

chore: improved copy bce62957

Steve · 2026-05-07 06:53 2 file(s) · +26 −32

src/components/page/HeroImage.astro +24 −30

  {
    src: savage,
    title: "The Savage State",
    year: "1836",
    year: "1834",
    description:
      "The first in Thomas Cole's Course of Empire series. Primitive hunters chase prey through untouched wilderness as a storm gathers. Nature is raw, violent, and indifferent to man.",
      "The first in Thomas Cole's Course of Empire. Dawn breaks over a wilderness as nomadic hunters chase a wounded deer and storm clouds wreathe the mountain. Nature is supreme; man clings to its edges.",
    link: "https://explorethomascole.org/project/the-savage-state/"
  },
  {
    src: pastoral,
    title: "The Pastoral or Arcadian State",
    year: "1836",
    year: "1834",
    description:
      "The second in Thomas Cole's Course of Empire series. Civilization rises from the wilderness — shepherds graze flocks, a stone temple takes shape, and the land is tamed. Youth and promise hang in the air.",
      "The second in Thomas Cole's Course of Empire. Morning light, cleared fields, a Stonehenge-like temple, an old man tracing geometry in the dirt while a boy sketches a figure on stone. Civilization stirs; agriculture, science, art, all still close to the earth.",
    link: "https://explorethomascole.org/project/the-arcadian-or-pastoral-state/"
  },
  {
    src: consumation,
    title: "The Consummation of Empire",
    year: "1836",
    description:
      "The third and central panel of Thomas Cole's Course of Empire. Empire at its peak — marble columns, gilded processions, and the harbor choked with ships. Triumph so total it can only precede collapse.",
      "The central panel of Thomas Cole's Course of Empire. High noon over a marble city. A triumphant ruler crosses the bridge in an elephant-drawn car, temples crowd the bay, the harbor brims with ships. Splendor so total it can only precede collapse.",
    link: "https://explorethomascole.org/project/the-consummation-of-empire/"
  },
  {
    src: destruction,
    title: "Destruction",
    year: "1836",
    description:
      "The fourth panel of Thomas Cole's Course of Empire. The empire burns. Invaders pour through the gates, monuments topple into the sea, and the sky turns red with fire and ruin.",
      "The fourth panel of Thomas Cole's Course of Empire. Storm and sack. Invaders pour through the gates, the temple porch becomes a catapult, ships burn in the harbor, a headless warrior presides over the slaughter as the sky turns to fire.",
    link: "https://explorethomascole.org/project/destruction/"
  },
  {
  src: desolation,
  title: "Desolation",
  year: "1836",
  description:
  "The fifth and final panel of Thomas Cole's Course of Empire. The city is gone. A lone column stands amid ruins reclaimed by vines. No human figures remain. Nature has outlasted everything.",
    src: desolation,
    title: "Desolation",
    year: "1836",
    description:
      "The final panel of Thomas Cole's Course of Empire. Sunset and moonrise over silent ruins. Vines climb a lone column, a bird nests where a temple stood, deer roam the broken friezes. No human figures remain. Nature outlasts everything man builds.",
    link: "https://explorethomascole.org/project/desolation/"
  },
];


  }),
);

const boundaries = [8, 11, 14, 17, 19];
const boundaries = [6, 9, 12, 15, 18];
const idx = boundaries.findLastIndex((b) => estHour >= b);
const { src, title, year, description } = paintings[idx === -1 ? 4 : idx];
const { src, title, year, description, link } = paintings[idx === -1 ? 4 : idx];
---

<div class="hero-wrapper mb-12" id="hero-wrapper">
<div  class="hero-wrapper mb-12" id="hero-wrapper">
  <a href={link} target="_blank" rel="noreferrer">
  <Image
    src={src}
    loading="eager"

    <p class="hero-title">{title} <span class="hero-year">({year})</span></p>
    <p class="hero-desc">{description}</p>
  </div>
  </a>
</div>

<style>

  .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    background: rgba(18, 17, 19, 0.76);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

<script>
  const wrapper = document.getElementById("hero-wrapper");
  const overlay = document.getElementById("hero-overlay");
  let timer: ReturnType<typeof setTimeout> | null = null;

  function show() {
  wrapper?.addEventListener("mouseenter", () => {
    overlay?.classList.add("visible");
  }

  function hide() {
    overlay?.classList.remove("visible");
  }

  wrapper?.addEventListener("mouseenter", () => {
    timer = setTimeout(show, 300);
  });

  wrapper?.addEventListener("mouseleave", () => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    hide();
    overlay?.classList.remove("visible");
  });
</script>

src/pages/index.astro +2 −2

            src="https://api.iconify.design/hugeicons:tree-04.svg?color=%23888888"
            class="inline-block h-5 w-5"
            height="100"
            loading="eager"
            loading="lazy"
            width="100"
            alt="sequoia logo"
          /> Sequoia

          ><Image
            src="https://api.iconify.design/fluent-emoji-high-contrast:beaver.svg?color=%23888888"
            class="inline-block h-4 w-4"
            loading="eager"
            loading="lazy"
            height="100"
            width="100"
            alt="bhvr"

60	60		src="https://api.iconify.design/hugeicons:tree-04.svg?color=%23888888"
61	61		class="inline-block h-5 w-5"
62	62		height="100"
63		-	loading="eager"
	63	+	loading="lazy"
64	64		width="100"
65	65		alt="sequoia logo"
66	66		/> Sequoia

76	76		><Image
77	77		src="https://api.iconify.design/fluent-emoji-high-contrast:beaver.svg?color=%23888888"
78	78		class="inline-block h-4 w-4"
79		-	loading="eager"
	79	+	loading="lazy"
80	80		height="100"
81	81		width="100"
82	82		alt="bhvr"

10	10		{
11	11		src: savage,
12	12		title: "The Savage State",
13		-	year: "1836",
	13	+	year: "1834",
14	14		description:
15		-	"The first in Thomas Cole's Course of Empire series. Primitive hunters chase prey through untouched wilderness as a storm gathers. Nature is raw, violent, and indifferent to man.",
	15	+	"The first in Thomas Cole's Course of Empire. Dawn breaks over a wilderness as nomadic hunters chase a wounded deer and storm clouds wreathe the mountain. Nature is supreme; man clings to its edges.",
	16	+	link: "https://explorethomascole.org/project/the-savage-state/"
16	17		},
17	18		{
18	19		src: pastoral,
19	20		title: "The Pastoral or Arcadian State",
20		-	year: "1836",
	21	+	year: "1834",
21	22		description:
22		-	"The second in Thomas Cole's Course of Empire series. Civilization rises from the wilderness — shepherds graze flocks, a stone temple takes shape, and the land is tamed. Youth and promise hang in the air.",
	23	+	"The second in Thomas Cole's Course of Empire. Morning light, cleared fields, a Stonehenge-like temple, an old man tracing geometry in the dirt while a boy sketches a figure on stone. Civilization stirs; agriculture, science, art, all still close to the earth.",
	24	+	link: "https://explorethomascole.org/project/the-arcadian-or-pastoral-state/"
23	25		},
24	26		{
25	27		src: consumation,
26	28		title: "The Consummation of Empire",
27	29		year: "1836",
28	30		description:
29		-	"The third and central panel of Thomas Cole's Course of Empire. Empire at its peak — marble columns, gilded processions, and the harbor choked with ships. Triumph so total it can only precede collapse.",
	31	+	"The central panel of Thomas Cole's Course of Empire. High noon over a marble city. A triumphant ruler crosses the bridge in an elephant-drawn car, temples crowd the bay, the harbor brims with ships. Splendor so total it can only precede collapse.",
	32	+	link: "https://explorethomascole.org/project/the-consummation-of-empire/"
30	33		},
31	34		{
32	35		src: destruction,
33	36		title: "Destruction",
34	37		year: "1836",
35	38		description:
36		-	"The fourth panel of Thomas Cole's Course of Empire. The empire burns. Invaders pour through the gates, monuments topple into the sea, and the sky turns red with fire and ruin.",
	39	+	"The fourth panel of Thomas Cole's Course of Empire. Storm and sack. Invaders pour through the gates, the temple porch becomes a catapult, ships burn in the harbor, a headless warrior presides over the slaughter as the sky turns to fire.",
	40	+	link: "https://explorethomascole.org/project/destruction/"
37	41		},
38	42		{
39		-	src: desolation,
40		-	title: "Desolation",
41		-	year: "1836",
42		-	description:
43		-	"The fifth and final panel of Thomas Cole's Course of Empire. The city is gone. A lone column stands amid ruins reclaimed by vines. No human figures remain. Nature has outlasted everything.",
	43	+	src: desolation,
	44	+	title: "Desolation",
	45	+	year: "1836",
	46	+	description:
	47	+	"The final panel of Thomas Cole's Course of Empire. Sunset and moonrise over silent ruins. Vines climb a lone column, a bird nests where a temple stood, deer roam the broken friezes. No human figures remain. Nature outlasts everything man builds.",
	48	+	link: "https://explorethomascole.org/project/desolation/"
44	49		},
45	50		];
46	51

52	57		}),
53	58		);
54	59
55		-	const boundaries = [8, 11, 14, 17, 19];
	60	+	const boundaries = [6, 9, 12, 15, 18];
56	61		const idx = boundaries.findLastIndex((b) => estHour >= b);
57		-	const { src, title, year, description } = paintings[idx === -1 ? 4 : idx];
	62	+	const { src, title, year, description, link } = paintings[idx === -1 ? 4 : idx];
58	63		---
59	64
60		-	<div class="hero-wrapper mb-12" id="hero-wrapper">
	65	+	<div class="hero-wrapper mb-12" id="hero-wrapper">
	66	+	<a href={link} target="_blank" rel="noreferrer">
61	67		<Image
62	68		src={src}
63	69		loading="eager"

68	74		<p class="hero-title">{title} <span class="hero-year">({year})</span></p>
69	75		<p class="hero-desc">{description}</p>
70	76		</div>
	77	+	</a>
71	78		</div>
72	79
73	80		<style>

79	86		.hero-overlay {
80	87		position: absolute;
81	88		inset: 0;
82		-	background: rgba(0, 0, 0, 0.72);
	89	+	background: rgba(18, 17, 19, 0.76);
83	90		display: flex;
84	91		flex-direction: column;
85	92		justify-content: flex-end;

116	123		<script>
117	124		const wrapper = document.getElementById("hero-wrapper");
118	125		const overlay = document.getElementById("hero-overlay");
119		-	let timer: ReturnType<typeof setTimeout> \| null = null;
120	126
121		-	function show() {
	127	+	wrapper?.addEventListener("mouseenter", () => {
122	128		overlay?.classList.add("visible");
123		-	}
124		-
125		-	function hide() {
126		-	overlay?.classList.remove("visible");
127		-	}
128		-
129		-	wrapper?.addEventListener("mouseenter", () => {
130		-	timer = setTimeout(show, 300);
131	129		});
132	130
133	131		wrapper?.addEventListener("mouseleave", () => {
134		-	if (timer) {
135		-	clearTimeout(timer);
136		-	timer = null;
137		-	}
138		-	hide();
	132	+	overlay?.classList.remove("visible");
139	133		});
140	134		</script>