rework with services page and new homepage

assets/sass/_variables.scss

@@ -0,0 +1,147 @@
+// stylelint-disable value-keyword-case, scss/dollar-variable-colon-space-after, max-line-length
+
+// Variables
+
+// Set variables for this site before a library sets its !default value.
+
+// Font faces, stacks and sizes.
+
+// Font styling and line heights are controlled by the several variables that
+// used by mixins like `type-layout()`, `margin-top()`, and `margin-bottom()`.
+// These variable and mixins are documented on the [Typey
+// homepage](https://github.com/jptaranto/typey).
+
+// The font size set on the root html element.
+$base-font-size:    18px;
+
+// The base line height determines the basic unit of vertical rhythm.
+$base-line-height:  $base-font-size * 1.5;
+
+// The font sizes in our type hierarchy as tee shirt sizes.
+$font-size: (
+  xxl:              36px,
+  xl:               28px,
+  l:                22px,
+  m:                $base-font-size,
+  s:                16px,
+  xs:               14px,
+);
+
+// Typey allows you to alter font weights site-wide with this map.
+$font-weight: (
+  bold:             bold,
+  medium:           500,
+  normal:           normal,
+  light:            300,
+  lighter:          lighter,
+);
+
+// The following font family declarations use widely available fonts.
+// A user's web browser will look at the comma-separated list and will
+// attempt to use each font in turn until it finds one that is available
+// on the user's computer. The final "generic" font (sans-serif, serif or
+// monospace) hints at what type of font to use if the web browser doesn't
+// find any of the fonts in the list.
+
+// Serif font stacks.
+$times-new-roman: 'Times New Roman', Times, Georgia, 'DejaVu Serif', serif;
+$times:           Times, 'Times New Roman', Georgia, 'DejaVu Serif', serif;
+$georgia:         Georgia, 'Times New Roman', 'DejaVu Serif', serif;
+$garamond:        'Garamond Premier Pro', Garamond, Charter, 'Times New Roman', serif;
+
+// Sans-serif font stacks.
+$verdana:         Verdana, Tahoma, 'DejaVu Sans', sans-serif;
+$tahoma:          Tahoma, Verdana, 'DejaVu Sans', sans-serif;
+$helvetica:       Helvetica, Arial, 'Nimbus Sans L', sans-serif;
+$arial:           Arial, Helvetica, 'Nimbus Sans L', sans-serif;
+$impact:          Impact, 'Arial Narrow', Helvetica, sans-serif;
+$lucida:          'Lucida Grande', 'Lucida Sans Unicode', Lucida, Verdana, sans-serif;
+$futura:          Futura, 'Century Gothic', AppleGothic, sans-serif;
+
+// System-ui font stack.
+$system-ui:       system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+
+// Monospace font stacks.
+// For an explanation of why "sans-serif" is at the end of this list, see
+// http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
+// $menlo:           Menlo, 'DejaVu Sans Mono', 'Ubuntu Mono', Courier, 'Courier New', monospace, sans-serif;
+$menlo:           Menlo, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', Courier, monospace, sans-serif;
+
+// The font faces you specify in the $typefaces map can be used in the
+// typeface() mixin.
+
+$tf: BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; ;
+
+$typefaces: (
+  body: (
+    font-family: $tf,
+  ),
+  headings: (
+    font-family: $tf,
+  ),
+  monospace: (
+    font-family: $menlo,
+  ),
+  compact: (
+    font-family: $tf,
+    weight: bold,
+    case: uppercase,
+    // We could also specify the following property:
+    // letter-spacing: .5px,
+  ),
+); // stylelint-disable indentation
+
+// Output a horizontal grid to help with debugging typography.
+$typey-debug: false;
+$with-wireframes: false;
+
+// The length unit in which to output font size and margin values.
+// Supported values: px, em, rem.
+$base-unit:         'rem';
+
+// px fallbacks for rem units are needed for IE 8 and earlier.
+$rem-fallback:      false;
+
+// We have separate print file.
+$auto-print-sizing: false;
+
+// Breakpoints
+
+// Use the `respond-to()` mixin to use named breakpoints.
+
+$breakpoints: (
+  'xxxs': 333px,
+  'xxs':  444px,
+  'xs':   555px,
+  's':    666px,
+  'm':    777px,
+  'l':    888px,
+  'xl':   999px,
+  'xxl':  1111px,
+  'xxxl': 1222px
+) !default;
+
+// Layout
+
+// The max content width.
+$max-content-width: 1000px;
+
+// The max line width for readability.
+$max-line-width: 70ch;
+
+// The default left/right gutter/padding.
+$zen-gutters: calc(5px + 1.5625vw);
+$zen-gutters-reverse: calc(0px - (5px + 1.5625vw));
+
+// Border radius.
+$s-radius: 3px;
+$m-radius: .3rem;
+$l-radius: 1rem;
+
+// Miscellaneous variables
+
+// `$indent-amount` controls the amount lists, blockquotes and comments are indented.
+$indent-amount: 2 * $base-font-size;
+
+// `$include-rtl` controls whether RTL styles are output.
+$include-rtl: false;

config.yaml

@@ -16,14 +16,14 @@ params:
   # icon: "images/logo.png"                  # Relative path to icon in json feed and JSON-LD, no leading slash.
   # image: "images/logo.png"                 # Relative path to site image in JSON-LD, no leading slash.
   # apple-touch-icon: "images/logo.png" 
-  logo: false               # Turn off the logo.
-  logoWidth: 74
+  logo: true               # Turn off the logo.
+  logoWidth: 45
   mainSections:             # The sections you want to have listed on the front page.
      - ""            # Default to the section with most content if not set.
   mobileMenu: true          # Turn on a mobile menu on small screens.
   poweredby: false           # Show powered by hugo in footer
   # searchLimit: 20           # Max number of search hits, default 20.
-  sidebar: true             # Show a sidebar to the right
+  sidebar: false             # Show a sidebar to the right
   realfavicongenerator: true
   plausibleSiteID: "nolog.cz"       # Plausible site id/domain.
   plausibleTrackerURL: "https://plausible.nolog.cz/js/plausible.js"   # Plausible url, schemaless and no slash on end. Optional, defaults to "plausible.io/…"
@@ -39,7 +39,7 @@ languages:
       main:
         - identifier: index
           name: O nás
-          url: /
+          url: /about
           weight: -1
 
         - identifier: services
@@ -63,14 +63,14 @@ languages:
           weight: 11
 
         - identifier: status
-          name: Status
+          name: Stav služeb
           url: https://status.nolog.cz
-          weight: 12
+          weight: 15
 
         - identifier: blog
           name: Blog
-          url: https://nolog.noblogs.org
-          weight: 15
+          url: /blog
+          weight: 12
   en:
     weight: 2
     languageName: "English"

content/cs/_index.md

@@ -1,13 +1,19 @@
 ---
 title: "Home"
+sidebar: false
+logo: true
+logowidth: 45px
 
 ---
 
-__Jsme__ aktivistický technologický kolektiv, který si klade za cíl podporovat všechny svobodně smýšlející jednotlivce, organizace a skupiny, usilující o společenskou změnu.  
-Podporujeme antifašistické, antisexistické, antirasistické, antikapitalistické, environmenální aktivity a obecně boj proti jakémukoliv útlaku. 
 
-Věříme, že antiautoritářské hnutí bude ve svých snahách úspěšné pouze pokud bude mít k dispozici bezpečné, nezávislé, nekomerční komunikační kanály a počítačové systémy.
+[__Jsme NoLog__](/about) - kolektiv který svými zkušenostmi z IT prostředí již několik let podporuje svobodně smýšlející jednotlivce i organizace v jejich snahách měnit svět k lepšímu. 
 
-Proto jsme založili NoLog.cz – platformu, která nám slouží k budování takových struktur. Naše činnost není motivovaná ziskem, ale touhou přispět tím co umíme k vytváření lepšího světa tady a teď.
+[__Každému nabízíme__](/services) bezplatné alternativy ke službám za které uživatelé jinak draze platí svými osobními údaji. 
 
-__Nejsme__ technická podpora a nepodporujeme jakékoliv komerční aktivity.
+[__Dokážeme poskytnout__](/sevice/custom) individuální podporu a nástroje organizacím se kterými sdílíme společné hodnoty. Bez ohledu na to zda by si to v komerčním prostředí mohly dovolit.
+
+[__Existujeme díky dobrovolným příspěvkům__](/support) ze kterých hradíme provoz a správu naší infrastruktury.
+
+
+{{< services >}}

content/cs/about.md

@@ -0,0 +1,12 @@
+---
+title: "O nás"
+---
+
+Jsme aktivistický technologický kolektiv, který si klade za cíl podporovat všechny svobodně smýšlející jednotlivce, organizace a skupiny, usilující o společenskou změnu.
+Podporujeme antifašistické, antisexistické, antirasistické, antikapitalistické, environmenální aktivity a obecně boj proti jakémukoliv útlaku.
+
+Věříme, že antiautoritářské hnutí bude ve svých snahách úspěšné pouze pokud bude mít k dispozici bezpečné, nezávislé, nekomerční komunikační kanály a počítačové systémy.
+
+Proto jsme založili NoLog.cz – platformu, která nám slouží k budování takových struktur. Naše činnost není motivovaná ziskem, ale touhou přispět tím co umíme k vytváření lepšího světa tady a teď.
+
+Nejsme technická podpora a nepodporujeme komerční aktivity.

content/cs/blog/_index.md

@@ -0,0 +1,7 @@
+---
+title: "Novinky z NoLogu"
+sidebar: false
+logo: true
+logowidth: 45px
+
+---

content/cs/blog/wip.md

@@ -0,0 +1,9 @@
+---
+title: "Work in progress"
+sidebar: false
+logo: true
+logowidth: 45px
+
+---
+
+Interní blog právě dáváme dohromady, původní verzi u noblogs.org můžete mezitím najít zde: [https://nolog.noblogs.org](https://nolog.noblogs.org)

content/cs/service/cryptpad.md

@@ -0,0 +1,13 @@
+---
+title: "cryptpad.cz"
+sidebar: false
+logo: true
+logowidth: 45px
+
+---
+
+Ahoj
+
+![image info](/images/cryptpad.png)
+
+Ahoj

content/cs/service/custom.md

@@ -0,0 +1,11 @@
+---
+title: "Individuální služby"
+---
+
+Pro jednotlivce i organizace se kterými sdílíme [společné hodnoty](/about) dokážeme individuálně provozovat služby pro interní i veřejnou komunikaci. 
+
+Jde například o hosting webů, e-mailů, komunikační fóra, sdílená úložiště souborů a dokumentů, nástroje pro správu úkolů a projektů a další...
+
+Pokud máte o podobné služby zájem, [ozvěte se nám prosím e-mailem](/contact) abychom se mohli domluvit na vašich potřebách a podrobnostech. Rádi hledáme způsoby jak usnadnit komunikaci nebo [se zbavit závislosti na komerčních řešeních](https://digitalnisvobody.cz/blog/2021/08/11/iure-je-degooglizovano-diky-pisk-a-nolog/).
+
+Peníze pro nás nehrají při poskytování služeb význam. Potřebujeme měsíčně pokrýt náklady na fungování naší infrastrukury (uložení serverů v datacentru, elektřina, konektivita), ale dlouhodobě nemáme problém poskytovat služby bez nároku na jakoukoli odměnu pokud nám podpora dává smysl. 

content/cs/service/nitter.md

@@ -0,0 +1,13 @@
+---
+title: "cryptpad.cz"
+sidebar: false
+logo: true
+logowidth: 45px
+
+---
+
+Ahoj
+
+![image info](/images/cryptpad.png)
+
+Ahoj

content/cs/services.md

@@ -1,67 +1,16 @@
 ---
 title: "Služby"
+sidebar: false
+logo: true
+logowidth: 45px
 
 ---
 
-Většinu služeb provozujeme ve spolupráci s konkrétní skupinou nebo organizací v rámci uzavřeného kolektivu.  
-
-Dokážeme poskytnout nástroje pro vnitřní komunikaci, hosting webů, e-mailů, sdílené úložiště souborů i celé virtuální servery.    
-
-Pokud se shodujete s [našimi hodnotami](/) a máte o naše služby zájem, [napište nám](/contact).
-
-----
-
-Některé služby provozujeme veřejně, to znamená, že je může využít kdokoli, bez registrace, anonymně. 
-
-Vyhrazujeme si právo omezit přístup k našim službám těm, kteří je zneužijí k veřejnému sdílení sexistických, homofobních, rasistických a podobných útoků.
+Tyto služby provozujeme veřejně, to znamená, že je může využít kdokoli, bez registrace, anonymně.
 
 
-👁️ - Služba **nevyužívá** [E2E](https://en.wikipedia.org/wiki/End-to-end_encryption) šifrování.  
-🔒 - Služba **využívá** [E2E](https://en.wikipedia.org/wiki/End-to-end_encryption) šifrování.     
-🧅 - Služba je dostupná také jako [Tor hidden-service](https://2019.www.torproject.org/docs/hidden-services.html.en).   
-```beta``` - službu testujeme a nemůžeme zaručit, že bude stabilní.   
-```obsolete``` - službu plánujeme v blízké budoucnosti zrušit, protože je zastaralá nebo má jiné nedostatky, které nedokážeme odstranit.   
+{{< services >}}
 
-__[nitter.cz](https://nitter.cz)__ 👁️   
-**nitter.cz** je alternativní rozhraní pro Twitter, které nesbírá osobní údaje, nevyžaduje přihlášení a všechny přístupy na Twitter provádí skrz naše servery. Pokud ve webové adrese tweetu nebo účtu přepíšete twitter.com na nitter.cz, zobrazí se vám obsah přímo v rozhraní Nitteru. O vývoj Nitteru se stará vývojář/ka [Zed](https://github.com/zedeus), podpořit další vývoj můžete [zde](https://liberapay.com/zedeus).
+---
 
-__[cryptpad.cz](https://cryptpad.cz)__ 🔒   
-**cryptpad.cz** je end-to-end šifrovaná sada nástrojů pro spolupráci a sdílení souborů. Umožňuje vytvářet sdílené tabulky, dokumenty, kanban nástěnky, formuláře a mnoho dalšího. Software CryptPad vyvíjí francouzská společnost XWiki, jeho vývoj můžete podpořit [zde](https://opencollective.com/cryptpad).
-
-__[pad.nolog.cz](https://pad.nolog.cz)__ 👁️  
-**Pad**.nolog.cz umožňuje tvořit a editovat textový dokument ve více lidech. Vhodné pro tvorbu tiskových prohlášení, checklistů při organizování demonstrací apod.    
-🧅 [fmmyfioav223qsr6snrww4qp2bp2y74brtitf2qa6liwkqyutfujskad.onion](http://fmmyfioav223qsr6snrww4qp2bp2y74brtitf2qa6liwkqyutfujskad.onion/)
-
-__[upload.nolog.cz](https://upload.nolog.cz)__ 🔒  
-**Upload**.nolog.cz slouží k nahrávání a sdílení souborů (až 2GB).     
-🧅 [324fctgcjnb5yiwmxl3qf4k7iul2sgmzhj6eitwyl62iu5wztotmsnad.onion](http://324fctgcjnb5yiwmxl3qf4k7iul2sgmzhj6eitwyl62iu5wztotmsnad.onion/)       
-
-__[nolog.chat](https://nolog.chat)__ 🔒  ```beta```    
-**nolog.chat** je anonymní šifrovaný chat pro skupiny a organizace. Může být alternativou Slacku nebo jiných komerčních nástrojů.
-
-__[nolog.media](https://nolog.media)__ 👁️   
-**nolog.media** je služba umožňující sdílení videí. Cílem je antiautoritářskému hnutí poskytnout bezpečný prostor pro multimediální obsah, který na komerčních serverech často bez zřejmého důvodu mizí. Služba je postavena na softwaru [PeerTube](https://joinpeertube.org/#what-is-peertube). Provoz zatím testujeme, pokud máte o účet zájem, [napište nám](/contact).
-
-__[decide.nolog.cz](https://decide.nolog.cz)__ 🔒  
-**Decide**.nolog.cz umožňuje tvorbu anket a pomůže vám vybrat vhodné datum schůzky.  
-🧅 [jrjk3r27pxapfcrsimuftpz736snd4cyydev3hkc2cf7xjdhtziu7vad.onion](http://jrjk3r27pxapfcrsimuftpz736snd4cyydev3hkc2cf7xjdhtziu7vad.onion)          
-
-__[paste.nolog.cz](https://paste.nolog.cz)__ 🔒  
-**Paste**.nolog.cz umožňuje sdílení textu.       
-🧅 [qetjz2h6cw4rba522s2v57tnfx7xdvwsr66yjiiu3ntj33mbprh4rayd.onion](http://qetjz2h6cw4rba522s2v57tnfx7xdvwsr66yjiiu3ntj33mbprh4rayd.onion/)       
-
-__[call.nolog.cz](https://call.nolog.cz)__ 👁️      
-**Call**.nolog.cz umožňuje pořádání videokonferencí. Aktuálně ji testujeme, proto je k používání nutná registrace.  
-
-__[bridge.nolog.cz](https://bridge.nolog.cz)__ 👁️      
-**Bridge**.nolog.cz umožňuje přeposílání příspěvků z decentralizované sociální sítě [Mastodon](https://joinmastodon.org) na Twitter a naopak.
-
-__ticker.nolog.cz__          
-**Ticker**.nolog.cz lze používat k informování třeba během přímých akcí nebo demonstrací. Umí označovat místa, trasy nebo oblasti v mapě, sdílet zprávy a fotky. A taky se umí napojit na Twitter a posílat na něj zveřejněné zprávy. Pro Ticker vám můžeme na vyžádání také nastavit vaši vlastní doménu.    
-Ukázku běžícího Tickeru naleznete na __[demo.ticker.nolog.cz](https://demo.ticker.nolog.cz)__    
-
-__[wiki.nolog.cz](https://wiki.nolog.cz)__  
-**Wiki**.nolog.cz je postupně vznikající zdroj informací o počítačové bezpečnosti pro aktivisty a aktivistky.
-
-__[acab.link](https://acab.link)__ / __[nolog.link](https://nolog.link)__ 👁️  
-**acab.link / nolog.link** - radikální zkracovač odkazů.
+_Vyhrazujeme si právo omezit přístup k našim službám těm, kteří je zneužijí k veřejnému sdílení sexistických, homofobních, rasistických a podobných útoků._

content/en/_index.md

@@ -1,3 +1,7 @@
+---
+sidebar: true
+---
+
 We are an activist IT collective who's goal is to support all free-thinking individuals, organisations and groups striving for social change.
 We support anti-fascist, anti-sexist, anti-racist, anti-capitalist, environmental activities and generally the struggle against any type of oppression.
 

content/en/contact.md

@@ -1,6 +1,6 @@
 ---
 title: "Contact"
-
+sidebar: true
 ---
 
 __Mastodon__: https://chaos.social/@nolog   

content/en/services.md

@@ -1,6 +1,6 @@
 ---
 title: "Services"
-
+sidebar: true
 ---
 
 Most of our services are done in collaboration with a specific group or organisation within a closed collective.

content/en/support.md

@@ -1,6 +1,6 @@
 ---
 title: "Donate"
-
+sidebar: true
 ---
 
 In order to run our services, we need funds to pay for the operating cost of the servers on which our services run - that is, to pay for space in the data center, electricity and connectivity. That costs us several thousand crowns a month. __That is why we will most appreciate a regular monthly gift, because even a hundred crowns a month will help us cover part of the costs.__

layouts/partials/sidebar.html

@@ -1,6 +1,6 @@
 <aside class="sidebar layout__second-sidebar">
 <section>
-<h4 class="menu"><a href="/services">Služby / Services</a></h4>
+<h4 class="menu"><a href="/services">Services</a></h4>
 <ul class="menu">
 <li><a href="https://cryptpad.cz">cryptpad.cz</a></li>
 <li><a href="https://nitter.cz">nitter.cz</a></li>

layouts/shortcodes/rawhtml.html

@@ -0,0 +1,2 @@
+<!-- raw html -->
+{{.Inner}}

layouts/shortcodes/services.html

@@ -0,0 +1,142 @@
+<link rel="stylesheet" href="/css/services.css">
+
+<style>
+
+.footer-content {
+  display: grid; 
+  grid-template-columns: 1fr 1fr; 
+  grid-template-rows: 1fr 1fr; 
+  gap: 0px 0px; 
+  grid-template-areas: 
+    "link icon"
+    "link icon"; 
+  grid-area: footer-content; 
+}
+.icon { grid-area: icon; }
+.link { grid-area: link; }
+
+</style>
+
+    <div class="mainer">
+            <div class="cards">
+                <ul>
+                    <li class="card">
+                        <div class="img"><img src="/images/nitter.png" alt=""></div>
+                        <div class="text">
+                            <h2><a href="https://nitter.cz">nitter.cz</a></h2>
+                            <p>Alternativní rozhraní pro Twitter, které nesbírá osobní údaje a nevyžaduje přihlášení.</p>
+                            <small>
+                                <!-- <div class="footer-content">
+                                    <div class="icon">
+                                        <div style="float: right">
+                                            <a href="https://status.nolog.cz">
+                                                <img src="https://status.nolog.cz/api/badge/16/status?upLabel=B%C4%9B%C5%BE%C3%AD&downLabel=Neb%C4%9B%C5%BE%C3%AD">
+                                            
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="link"><a href="service/nitter">Více info...</a></div>
+                                </div> -->
+                            </small>
+                        </div>
+                    </li>
+                    <li class="card">
+                        <div class="img"><img src="/images/cryptpad.png" alt=""></div>
+                        <div class="text">
+                            <h2><a href="https://cryptpad.cz">cryptpad.cz</a></h2>
+                            <p>End-to-end šifrovaná sada nástrojů pro spolupráci a sdílení souborů. Tabulky, dokumenty, formuláře a další.</p>
+                            <small><a href="#detail"></a></small>
+                        </div>
+                    </li>
+                    <li class="card">
+                        <div class="img"><img src="/images/upload.png" alt=""></div>
+                        <div class="text">
+                            <h2><a href="https://upload.nolog.cz">upload.nolog.cz</a></h2>
+                            <p>End-to-end šifrované nahrávání a sdílení souborů do velikosti 2GB.</p>
+                            <small><a href="#detail"></a></small>
+                        </div>
+                    </li>
+                    <li class="card">
+                        <div class="img"><img src="/images/nolog-link.png" alt=""></div>
+                        <div class="text">
+                            <h2><a href="https://nolog.link">nolog.link</a></h2>
+                            <p>Zkracovač odkazů bez sledování uživatelů.</p>
+                            <small><a href="#detail"></a></small>
+                        </div>
+                    </li>
+                    <li class="card">
+                        <div class="img"><img src="/images/decide.png" alt=""></div>
+                        <div class="text">
+                            <h2><a href="https://decide.nolog.cz">decide.nolog.cz</a></h2>
+                            <p>Alternativa k Doodle pro vytváření anket a hledání termínů.</p>
+                            <small><a href="#detail"></a></small>
+                        </div>
+                    </li>
+                    <li class="card">
+                        <div class="img"><img src="/images/paste.png" alt=""></div>
+                        <div class="text">
+                            <h2><a href="https://paste.nolog.cz">paste.nolog.cz</a></h2>
+                            <p>Rychlé šifrované sdílení textu s možností "autodestrukce" po přečtení.</p>
+                            <small><a href="#detail"></a></small>
+                        </div>
+                    </li>
+                    <li class="card">
+                        <div class="img"><img src="/images/bbb.png" alt=""></div>
+                        <div class="text">
+                            <h2><a href="https://call.nolog.cz">call.nolog.cz</a></h2>
+                            <p>Videokonferenční a vzdělávací systém bez sledování uživatelů.</p>
+                            <small><a href="#detail"></a></small>
+                        </div>
+                    </li>
+                    <li class="card">
+                        <div class="img"><img src="/images/bridge.png" alt=""></div>
+                        <div class="text">
+                            <h2><a href="https://bridge.nolog.cz">bridge.nolog.cz</a></h2>
+                            <p>Přeposílání příspěvků mezi decentralizovanou sociální sítí <a href="https://joinmastodon.org/">Mastodon</a> a Twitterem.</p>
+                            <small><a href="#detail"></a></small>
+                        </div>
+                    </li>
+                    <!-- <li class="card">
+                        <div class="img"><img src="/images/wiki.png" alt=""></div>
+                        <div class="text">
+                            <h2><a href="https://">wiki.nolog.cz</a></h2>
+                            <p>Sunt deserunt ea sint enim laborum ut qui cupidatat esse sit labore ut.</p>
+                            <small><a href="#detail"></a></small>
+                        </div>
+                    </li> -->
+                    <li class="card">
+                        <div class="img"><img src="/images/nolog-media.png" alt=""></div>
+                        <div class="text">
+                            <h2><a href="https://nolog.media">nolog.media</a></h2>
+                            <p>Sdílení a přehrávání videí, alternativa k YouTube apod. Prozatím ve fázi testování.</p>
+                            <small><a href="#detail"></a></small>
+                        </div>
+                    </li>
+                    <li class="card">
+                        <div class="img"><img src="/images/pad.png" alt=""></div>
+                        <div class="text">
+                            <h2><a href="https://pad.nolog.cz">pad.nolog.cz</a></h2>
+                            <p>Vytváření a úpravy textových souborů ve skupině. Pro citlivý obsah doporučujeme přechod na Cryptpad</p>
+                            <small><a href="#detail"></a></small>
+                        </div>
+                    </li>
+                    <li class="card">
+                        <div class="img" style="clip-path: unset;"><img style="object-fit: contain;" src="/images/nolog_red.svg" alt=""></div>
+                        <div class="text">
+                            <h2><a href="/service/custom">Něco dalšího?</a></h2>
+                            <p>Potřebujete fórum, e-maily, úložiště nebo webhosting pro vaší organizaci, skupinu či třeba kolektiv?</p>
+                            <small><a href="/service/custom">Čtěte dál...</a></small>
+                        </div>
+                    </li>
+                    <!-- <li class="card">
+                        <div class="img"><img src="/images/chat_bg.jpg" alt=""></div>
+                        <div class="text">
+                            <h2><a href="https://nolog.chat">nolog.chat</a></h2>
+                            <p>Sunt deserunt ea sint enim laborum ut qui cupidatat esse sit labore ut.</p>
+                            <small><a href="#detail"></a></small>
+                        </div>
+                    </li> -->
+                </ul>
+            </div>
+    
+    </div>

static/css/services.css

@@ -0,0 +1,143 @@
+article > .content ul > li::before, aside ul > li::before {
+    font-size: 0.88888889rem;
+    padding-right: 0.75rem;
+    display: table-cell;
+    content: unset;
+}
+
+.main h2, .main h3, .main h4, .main h5, .main h6, .main ul, .main ol, .main dl, .main p {
+    max-width: 90ch;
+}
+
+
+article > .content ul > li, aside ul > li {
+    display: flex;
+}
+
+.mainer {
+    max-width: 60rem;
+    margin: 0 auto;
+    padding: 1rem;
+    display: flex;
+}
+
+.mainer * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    color: inherit;
+    max-width: -moz-available;          /* WebKit-based browsers will ignore this. */
+    max-width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
+    max-width: fill-available;
+}
+
+
+h1 {
+    margin-bottom: 1rem;
+}
+
+.card h2 a {
+text-decoration: none;
+}
+
+.cards > ul {
+    list-style: none;
+    display: grid !important;
+    
+}
+
+.card + .card {
+    margin-top: 1.5rem;
+}
+
+@supports (display: grid) {
+    .cards > ul {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+        grid-column-gap: 1.5rem;
+        grid-row-gap:1.5rem;
+    }
+
+    .card + .card {
+        margin-top: 0;
+    }
+}
+
+.card {
+    border: 1px solid;
+    border-radius: 0.25rem;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.card .text {
+    padding: 1rem;
+    flex: 1 0 auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.card p {
+    max-width: 60ch;
+}
+
+.card .img {
+    height: 6.5rem;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1rem));
+}
+
+.card .img img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: top;
+    /* filter: grayscale(100%); */
+}
+
+.card a {
+    text-decoration: none;
+    outline: none;
+}
+
+.h2 a::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+} 
+
+
+.card a:focus {
+    outline: none;
+    text-decoration: underline;
+}
+
+/* .card:focus-within, .card:hover {
+    box-shadow: 0 0 0 0.05rem;
+} */
+
+.card:focus-within a:focus {
+    text-decoration: none;
+}
+
+.card small {
+    display: block;
+    text-decoration: underline;
+}
+
+.card .text > * + * {
+    margin-top: 0.75rem;
+}
+
+.card .text > :last-child {
+    margin-top: auto;
+    padding-top: 0.75rem;
+}
+
+.card a {
+    outline: none;
+    text-decoration: none;
+}