public-web/layouts/partials/services.html

<h2 class="sr-only">Služby</h2>
<ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-8 gap-y-12">
  {{ range (where site.RegularPages.ByWeight "Type" "services") }}
    <li>
      <article>
        <div class="flex flex-row items-center gap-2 mb-2 -ml-0.5">
          {{ with .Params.icon }}
          <span class="fill-current svg-w-8">{{ . | safeHTML }}</span>
          {{ end }}
          <h3 class="mr-1"><a href="{{ .Params.href }}" class="font-bold link">{{ .Title }}</a></h3>
        </div>
        <div class="prose text-sm mb-2">
          {{ .Params.description | safeHTML }}
        </div>
        <ul class="flex flex-wrap gap-1">
          {{ if .Params.encrypted }}
            <li class="inline-flex">
              <button
                class="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-red-100 dark:bg-red-500/30"
                data-tooltip="Služba využívá end-to-end šifrování, to znamená, že ani my nemůžeme číst obsah, který skrz ní posíláte."
              >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-3"><path d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17ZM11 14V18H13V14H11Z" fill="currentColor"></path></svg>
                <span>šifrováno</span>
              </button>
            </li>
          {{ else }}
            <li class="inline-flex">
              <button
                class="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-red-100 dark:bg-red-500/30"
                data-tooltip="Služba nevyužívá end-to-end šifrování, nedoporučujeme ji proto skrz ni posílat extrémně senzitivní data."
              >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-3"><path d="M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z" fill="currentColor"></path></svg>
                <span>nešifrováno</span>
              </button>
            </li>
          {{ end }}
          {{ with .Params.onion }}
            <li class="inline-flex">
              <a
                href="{{ . }}"
                class="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-red-100 dark:bg-red-500/30"
                data-tooltip="Služba je dostupná též přímo na síti Tor. Pro nejvyšší míru anonymity k ní doporučujeme přistupovat skrz .onion adresu. Pokud přistupujete skrz Tor browser, budete automaticky přesměrováni."
              >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" class="w-3">
                    <path d="M90.1846205,163.631147 L90.1846205,152.721073 C124.743583,152.621278 152.726063,124.581416 152.726063,89.9975051 C152.726063,55.4160892 124.743583,27.3762266 90.1846205,27.2764318 L90.1846205,16.366358 C130.768698,16.4686478 163.633642,49.3909741 163.633642,89.9975051 C163.633642,130.606531 130.768698,163.531352 90.1846205,163.631147 Z M90.1846205,125.444642 C109.677053,125.342352 125.454621,109.517381 125.454621,89.9975051 C125.454621,70.4801242 109.677053,54.6551533 90.1846205,54.5528636 L90.1846205,43.6452847 C115.704663,43.7450796 136.364695,64.4550091 136.364695,89.9975051 C136.364695,115.542496 115.704663,136.252426 90.1846205,136.35222 L90.1846205,125.444642 Z M90.1846205,70.9167267 C100.640628,71.0165216 109.090758,79.5165493 109.090758,89.9975051 C109.090758,100.480956 100.640628,108.980984 90.1846205,109.080778 L90.1846205,70.9167267 Z M0,89.9975051 C0,139.705328 40.2921772,180 90,180 C139.705328,180 180,139.705328 180,89.9975051 C180,40.2921772 139.705328,0 90,0 C40.2921772,0 0,40.2921772 0,89.9975051 Z" fill="currentColor"/>
                </svg>
                <span>.onion</span>
              </a>
            </li>
          {{ end }}
          {{ if (eq .Params.status "beta") }}
            <li class="inline-flex">
              <button
                class="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-red-100 dark:bg-red-500/30"
                data-tooltip="Službu zatím testujeme, očekávejte proto občasné výpadky a případně registraci pouze za vyžádání."
              >
                <span>β</span>
                <span>Beta</span>
              </button>
            </li>
          {{ end }}
        </ul>
        {{/*  <p class="mt-2">
          <a class="link text-default font-semibold" href="{{ .RelPermalink }}">Číst více →</a>
        </p>  */}}
      </article>
    </li>
  {{ end }}
</ul>