RoundelayFarm/index.html at main · TheQuantifier/RoundelayFarm · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Roundelay Farm - Home</title>

  <!-- SEO & Social -->
  <meta name="description" content="Roundelay Farm — seasonal jellies, fresh eggs, and farm updates from our little corner of the hills." />
  <link rel="canonical" href="https://roundelay.farm/">
  <meta property="og:title" content="Roundelay Farm" />
  <meta property="og:description" content="Seasonal jellies, fresh eggs, and farm updates." />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="images/Roundelay_jelly_1_1000x667.jpg" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="color-scheme" content="light dark" />
  <meta name="theme-color" content="#6c8a4a" />

  <!-- Preload animated banner for fast first paint -->
  <link rel="preload" href="images/front_yard_panos_animated_900x209.gif" as="image" />
  <link rel="icon" href="images/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="common.css" />

  <!-- Minimal style so the skip link is usable even without common.css -->
  <style>
    .skip-link {
      position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
    }
    .skip-link:focus {
      position: static; width: auto; height: auto; padding: .5rem 1rem; display: inline-block;
      background: #fff; outline: 2px solid; border-radius: .25rem;
    }
  </style>
</head>

<body>
  <a class="skip-link" href="#main">Skip to content</a>

  <nav class="topnav" aria-label="Primary">
    <a href="index.html" aria-current="page" class="active">Home</a>
    <a href="products.html">Products</a>
    <a href="news/">News</a>
    <a href="contact.html">Contact</a>
    <a href="about.html">About</a>
  </nav>

  <!-- Motion-friendly banner: serves a static JPG if user prefers reduced motion -->
  <picture>
    <source media="(prefers-reduced-motion: reduce)" srcset="images/front_yard_panos_static_900x209.jpg" />
    <img
      src="images/front_yard_panos_animated_900x209.gif"
      alt="Changing seasons at Roundelay Farm"
      class="banner-image"
      width="900"
      height="209"
      decoding="async"
      fetchpriority="high"
    />
  </picture>

  <main id="main" class="page-fade">
    <h1>Welcome to Roundelay<sup>&#174;</sup> Farm</h1>

    <p class="poem">
      I am going to my own hearth-stone,<br>
      Bosomed in yon green hills alone, —<br>
      A secret nook in a pleasant land,<br>
      Whose groves the frolic fairies planned;<br>
      Where arches green, the livelong day,<br>
      Echo the blackbird’s roundelay,<br>
      And vulgar feet have never trod<br>
      A spot that is sacred to thought and God.<br><br>
      <em>Poem “Good-Bye” by Ralph Waldo Emerson (verse 3)</em>
    </p>
  </main>

  <footer class="footer">
    &copy; 2023 Roundelay LLC &mdash; All rights reserved
  </footer>
</body>
</html>