site-portfolio/src/pages/cases/obsidian-plugin-columns-view.html

<!DOCTYPE html>
<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta
      name="description"
      content="Кейс: плагин колоночного вида для Obsidian — дизайн и UX плагина для заметок."
    />
    <title>Колоночный вид для Obsidian — кейс</title>
    {{> head-links}}
    {{> head-plyr}}
    <style>
      .case-article {
        max-width: 48rem;
        margin: 0 auto;
      }
      .case-article h2 {
        margin: 2rem 0 0.75rem;
        font-size: clamp(1.15rem, 2vw, 1.35rem);
        font-weight: 700;
        color: var(--text);
      }
      .case-article h3 {
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--text);
      }
      .case-article .section__prose {
        margin-bottom: 0.75rem;
        color: var(--text);
      }
      .case-article a:not(.btn) {
        color: var(--accent);
      }
    </style>
    <script>
      (function () {
        try {
          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
          var d = document.documentElement;
          var m = t.mode;
          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
          var eff =
            m === "system"
              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
                ? "dark"
                : "light"
              : m;
          d.dataset.theme = eff;
          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
          if (h !== null) d.style.setProperty("--theme-h", String(h));
          if (s !== null) d.style.setProperty("--theme-s", String(s));
          if (l !== null) {
            var L = Number(l);
            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
          }
          var rad = t.radius;
          if (rad === "soft" || rad === "medium" || rad === "strong") {
            d.dataset.radius = rad;
          } else {
            d.dataset.radius = "medium";
          }
          var f = t.font;
          if (f === "onest") f = "geologica";
          if (f === "anonymous") f = "mono";
          if (f === "merriweather" || f === "mono" || f === "geologica") {
            d.dataset.font = f;
          } else {
            d.dataset.font = "merriweather";
          }
          var mb = t.meshBg;
          if (mb === "off") {
            d.dataset.meshBg = "off";
          } else {
            d.dataset.meshBg = "on";
          }
        } catch (e) {}
      })();
    </script>
  </head>
  <body>
    {{> header-case}}
{{> fab-stack}}
<main id="case-main" class="section section--tight">
      <div class="section__inner case-article">
        <p class="hero__eyebrow">Obsidian · Plugin</p>
        <h1 class="case-page__h1">Колоночный вид — плагин для Obsidian</h1>
        <p class="case-page__sub">Дизайн и разработка интерфейса для многоколоночной работы с заметками</p>

        <p class="section__prose">
          <!-- Здесь будет введение -->
        </p>

        <h2 id="context">Контекст</h2>
        <p class="section__prose">
          <!-- Контекст проекта -->
        </p>

        <h2 id="task">Задача</h2>
        <p class="section__prose">
          <!-- Описание задачи -->
        </p>

        <h2 id="solution">Решение</h2>
        <p class="section__prose">
          <!-- Что было сделано -->
        </p>

        <h3>Фильтр использования</h3>
        <figure class="case-media">
          <div class="case-video-shell">
            <video controls preload="metadata" playsinline poster="{{assetPrefix}}assets/obsidian-plugin-columns-view/filter use.webp" data-case-video-player style="display: block; width: 100%; height: auto">
              <source src="{{assetPrefix}}assets/obsidian-plugin-columns-view/filter use.webm" type="video/webm" />
              <source src="{{assetPrefix}}assets/obsidian-plugin-columns-view/filter use.mp4" type="video/mp4" />
              Ваш браузер не поддерживает видео.
            </video>
          </div>
          <figcaption>Фильтрация заметок в колоночном виде.</figcaption>
        </figure>

        <h3>Конфигурация отображения</h3>
        <figure class="case-media">
          <div class="case-video-shell">
            <video controls preload="metadata" playsinline poster="{{assetPrefix}}assets/obsidian-plugin-columns-view/view configure.webp" data-case-video-player style="display: block; width: 100%; height: auto">
              <source src="{{assetPrefix}}assets/obsidian-plugin-columns-view/view configure.webm" type="video/webm" />
              <source src="{{assetPrefix}}assets/obsidian-plugin-columns-view/view configure.mp4" type="video/mp4" />
              Ваш браузер не поддерживает видео.
            </video>
          </div>
          <figcaption>Настройка колонок и отображения.</figcaption>
        </figure>

        <h2 id="result">Результат</h2>
        <p class="section__prose">
          <!-- Итоги -->
        </p>
      </div>
    </main>

    {{> projects-related}}{{> projects-section}}
{{> contact-section}}
{{> footer}}
{{> cookie-notice}}
{{> nav-more-floating}}

  </body>
</html>