Add Gradient Garden site

2026-08-29 13:06:44 +04:00
parent 73b65c9a24
commit 471cc1594f
3 changed files with 293 additions and 0 deletions
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="theme-color" content="#f2efe8">
+  <meta name="description" content="Gradient Garden — короткие заметки о цвете, свете и спокойных цифровых пространствах.">
+  <title>Gradient Garden — наблюдения о цвете</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+  <header class="site-header">
+    <a class="brand" href="#top" aria-label="Gradient Garden — на главную">
+      <span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
+      <span>Gradient Garden</span>
+    </a>
+    <nav aria-label="Основная навигация">
+      <a href="#notes">Наблюдения</a>
+      <a href="#principles">Принципы</a>
+      <a href="#about">О проекте</a>
+    </nav>
+  </header>
+
+  <main id="top">
+    <section class="hero" aria-labelledby="hero-title">
+      <div class="hero-copy">
+        <p class="eyebrow">Независимый визуальный блокнот · Выпуск 01</p>
+        <h1 id="hero-title">Цвету тоже нужно<br><em>пространство.</em></h1>
+        <p class="intro">Небольшая коллекция наблюдений о градиентах, естественном свете и интерфейсах, в которых приятно задержаться.</p>
+        <a class="text-link" href="#notes">Перейти к заметкам <span aria-hidden="true">↘</span></a>
+      </div>
+
+      <div class="composition" aria-label="Абстрактная цветовая композиция">
+        <div class="composition-noise"></div>
+        <div class="orb orb-coral"></div>
+        <div class="orb orb-violet"></div>
+        <div class="orb orb-lime"></div>
+        <div class="composition-caption">
+          <span>Study 01</span>
+          <span>Warm / Quiet</span>
+        </div>
+      </div>
+    </section>
+
+    <section class="notes" id="notes" aria-labelledby="notes-title">
+      <div class="section-heading">
+        <p class="eyebrow">Три наблюдения</p>
+        <h2 id="notes-title">Как собирать атмосферу</h2>
+        <p>Не правила, а отправные точки для спокойной визуальной работы.</p>
+      </div>
+
+      <div class="note-grid">
+        <article class="note-card card-sunrise">
+          <div class="card-art" aria-hidden="true"><span></span></div>
+          <p class="card-index">01 / Мягкий контраст</p>
+          <h3>Начинайте не с цвета, а со света</h3>
+          <p>Сначала определите, откуда приходит свет и насколько он рассеян. Палитра станет естественным продолжением этого решения.</p>
+        </article>
+
+        <article class="note-card card-depth">
+          <div class="card-art" aria-hidden="true"><span></span></div>
+          <p class="card-index">02 / Глубина</p>
+          <h3>Один оттенок может звучать по-разному</h3>
+          <p>Меняйте не только яркость, но и температуру. Тёплый передний план и холодная глубина создают объём без лишнего шума.</p>
+        </article>
+
+        <article class="note-card card-air">
+          <div class="card-art" aria-hidden="true"><span></span></div>
+          <p class="card-index">03 / Воздух</p>
+          <h3>Пустое место — часть композиции</h3>
+          <p>Свободное пространство даёт глазу точку отдыха. Благодаря ему даже насыщенные сочетания воспринимаются спокойнее.</p>
+        </article>
+      </div>
+    </section>
+
+    <section class="principles" id="principles" aria-labelledby="principles-title">
+      <div class="principles-panel">
+        <p class="eyebrow">Рабочая памятка</p>
+        <h2 id="principles-title">Тише, но выразительнее</h2>
+        <p>Хорошая палитра поддерживает содержание, а не просит всё внимание себе. Достаточно одного заметного акцента, последовательной температуры и честного белого пространства.</p>
+      </div>
+      <ol class="principle-list">
+        <li><span>01</span><p><strong>Выберите настроение</strong> до выбора конкретных оттенков.</p></li>
+        <li><span>02</span><p><strong>Оставьте один акцент,</strong> остальным цветам дайте поддерживающую роль.</p></li>
+        <li><span>03</span><p><strong>Проверьте палитру без цвета:</strong> иерархия должна сохраниться.</p></li>
+      </ol>
+    </section>
+
+    <section class="about" id="about" aria-labelledby="about-title">
+      <p class="eyebrow">О проекте</p>
+      <h2 id="about-title">Gradient Garden — место для визуальных экспериментов без спешки.</h2>
+      <p>Здесь появляются короткие заметки о цвете, композиции и цифровой среде. Новые материалы выходят тогда, когда есть наблюдение, которым действительно хочется поделиться.</p>
+    </section>
+  </main>
+
+  <footer>
+    <span>Gradient Garden</span>
+    <span>Наблюдения о цвете · 2026</span>
+  </footer>
+</body>
+</html>