Scriptorium/index.html at main · Eritrix/Scriptorium · 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>The Scriptorium — Home</title>

  <!-- Fonts: Cinzel Decorative for headings, Lora for body -->
  <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Lora:wght@400;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="styles.css">
  <script defer src="script.js"></script>
</head>
<body data-page="home">
  <header class="site-header" role="banner">
    <div class="header-inner container">
      <a class="logo" href="index.html" aria-label="The Scriptorium — home">
        <svg class="logo-svg" viewBox="0 0 64 64" width="44" height="44" aria-hidden="true">
          <g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 50c6-10 18-13 26-16 6 3 18 6 24 16" />
            <path d="M20 14c6-2 18-2 24 6" />
            <path d="M28 20l8-8" />
          </g>
        </svg>
        <span class="site-title">The Scriptorium</span>
      </a>

      <button id="nav-toggle" aria-expanded="false" aria-controls="primary-nav" class="hamburger" title="Open menu">
        <span></span><span></span><span></span>
      </button>

      <nav id="primary-nav" class="nav" role="navigation" aria-label="Main navigation">
        <ul>
          <li><a class="nav-link" href="index.html">Home</a></li>
          <li><a class="nav-link" href="gallery.html">Library</a></li>
          <li><a class="nav-link" href="manage.html">Manage</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="main" class="main" role="main">
    <section class="hero parchment-fade" aria-label="Introduction">
      <div class="hero-bg" aria-hidden="true">
        <!-- subtle floating motes (decorative) -->
        <svg class="motes" viewBox="0 0 400 200" preserveAspectRatio="none" aria-hidden="true">
          <circle class="mote mote-1" cx="30" cy="40" r="2" />
          <circle class="mote mote-2" cx="120" cy="30" r="1.6" />
          <circle class="mote mote-3" cx="220" cy="60" r="1.8" />
          <circle class="mote mote-4" cx="320" cy="50" r="1.2" />
          <circle class="mote mote-5" cx="260" cy="20" r="1.4" />
        </svg>
      </div>

      <div class="hero-inner container">
        <h1 class="hero-title"><span class="illumin">A</span> Hearth for Artists & Novelists</h1>
        <p class="hero-sub">Store, showcase and cherish stories and artworks — wrapped in the warm nostalgia of medieval parchment.</p>
        <p>
          <a class="cta glimmer" href="gallery.html" role="button">Explore the Library</a>
        </p>
      </div>

      <!-- subtle ornament -->
      <svg class="hero-ornament" viewBox="0 0 200 40" aria-hidden="true" focusable="false">
        <path d="M0 20 Q50 0 100 20 T200 20" fill="none" stroke="currentColor" stroke-width="0.8" opacity="0.15"/>
      </svg>
    </section>

    <section class="features container" aria-labelledby="features-heading">
      <h2 id="features-heading" class="section-heading">What you can do</h2>
      <div class="feature-grid" role="list">
        <article class="card float-y" role="listitem" tabindex="0">
          <div class="card-icon" aria-hidden="true">✒️</div>
          <h3>Create</h3>
          <p>Submit books & artwork with an elegant validated form.</p>
        </article>

        <article class="card float-y" role="listitem" tabindex="0">
          <div class="card-icon" aria-hidden="true">🖼️</div>
          <h3>Showcase</h3>
          <p>Beautiful gallery with parchment frames and medieval ornaments.</p>
        </article>

        <article class="card float-y" role="listitem" tabindex="0">
          <div class="card-icon" aria-hidden="true">⭐</div>
          <h3>Rate</h3>
          <p>Mark favorites, leave star-ratings, and spotlight admired authors.</p>
        </article>
      </div>
    </section>

    <section class="recent container" aria-labelledby="recent-heading">
      <h2 id="recent-heading" class="section-heading">Recent Additions</h2>
      <div id="recent-scroller" class="recent-scroller" aria-live="polite"></div>
    </section>
  </main>

  <footer class="site-footer" role="contentinfo">
    <div class="container">
      <small>© <span id="year"></span> The Scriptorium — a cozy archive for creatives</small>
    </div>
  </footer>
</body>
</html>