<header class="site-head">
  <details class="brand-menu">
    <summary class="brand">
      <span class="brand-mark" aria-hidden="true">
        <svg class="logo" viewBox="0 0 100 100" width="30" height="30" focusable="false">
          <defs>
            <linearGradient id="flogo" x1="12" y1="0" x2="88" y2="0" gradientUnits="userSpaceOnUse">
              <stop offset="0" stop-color="#ff3344"/>
              <stop offset=".5" stop-color="#ff8a3a"/>
              <stop offset="1" stop-color="#ffd633"/>
            </linearGradient>
          </defs>
          <path d="M50 60 C 22 60 12 38 16 18 C 38 22 54 38 50 60 Z" fill="url(#flogo)"/>
          <path d="M50 60 C 78 60 88 38 84 18 C 62 22 46 38 50 60 Z" fill="url(#flogo)"/>
          <path d="M50 58 C 50 72 50 84 50 92" stroke="url(#flogo)" stroke-width="6" stroke-linecap="round" fill="none"/>
        </svg>
      </span>
      flove <span class="brand-sub">blog</span>
    </summary>
    <nav class="brand-drop" aria-label="site menu">
      <a href="{{ site.Home.RelPermalink }}#about">About</a>
      <a href="https://flove.org/development/standards/">Dev wiki</a>
      <a href="https://flove.org/docs/">Docs</a>
      <a href="https://flove.org/solo/apps/apps-intro.html">Apps</a>
      <a href="https://flove.org/">flove.org</a>
    </nav>
  </details>
</header>
