Switch the docs theme to Furo (proof of concept)

CONTRIBUTING.rst

@@ -82,6 +82,20 @@ Pyvec Guide
 
 Tento projekt se původně jmenoval ``pyvec-guide`` a proto se tak jmenuje i projekt na ReadTheDocs. Projekt nemá smysl přejmenovávat, když máme nyní doménu ``docs.pyvec.org``, akorát bychom rozbili staré odkazy. JavaScript ``_static/redirect.js`` zajišťuje, že staré odkazy se přesměrují.
 
+Obrázek pro sociální sítě
+-------------------------
+
+Když někdo sdílí odkaz na dokumentaci, třeba na sociálních sítích nebo na Slacku, zobrazí se u něj náhledový obrázek ``docs/_static/images/og-image.png``. Zdrojem je ``docs/_static/images/og-image.svg`` a PNG se z něj vyrábí ručně:
+
+#. Upravte ``og-image.svg``, např. v `Inkscape <https://inkscape.org/>`__. Nadpis je napsaný písmem `Inter Display <https://rsms.me/inter/>`__ v řezu Bold, takže ho musíte mít nainstalované.
+#. Vyexportujte z něj PNG o rozměrech 1200 × 630 px:
+
+   .. code-block:: console
+
+      $ inkscape docs/_static/images/og-image.svg --export-type=png --export-filename=docs/_static/images/og-image.png -w 1200 -h 630
+
+#. Commitněte oba soubory.
+
 Verze Pythonu
 -------------
 

docs/_static/custom.css

@@ -1,13 +1,80 @@
-.rst-content blockquote {
+/*
+  Single-colour illustrations are drawn black. In dark mode, invert them to
+  light grey (#ccc). Follows both Furo's toggle and, in its "auto" mode, the
+  system setting, the same way Furo switches its own colours.
+
+  Sphinx puts the image's class on the wrapping link too, so the selector
+  must target only the img, or the filter would apply twice.
+*/
+body[data-theme="dark"] img.adaptive-image {
+  filter: invert(80%);
+}
+
+@media (prefers-color-scheme: dark) {
+  body:not([data-theme="light"]) img.adaptive-image {
+    filter: invert(80%);
+  }
+}
+
+/*
+  The logo is drawn black, but the sidebar is dark slate in both modes.
+*/
+.sidebar-logo {
+  filter: invert(80%);
+}
+
+/*
+  Furo's overflow-wrap:break-word makes the title wrap mid-word
+  ("česk/é") in the sidebar, even though whole words fit on the line.
+*/
+.sidebar-brand-text {
+  overflow-wrap: normal;
+}
+
+/*
+  Furo doesn't declare color-scheme, so browsers follow the OS. On a light
+  page with the OS in dark mode, the native text selection was dark blue
+  and unreadable. Declare the active scheme, so the browser and OS pick
+  fitting native colours for selection, scrollbars, and form controls.
+  The sidebar is slate in both modes, so it's always dark.
+*/
+body {
+  color-scheme: light;
+}
+
+body[data-theme="dark"],
+.sidebar-drawer {
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  body:not([data-theme="light"]) {
+    color-scheme: dark;
+  }
+}
+
+/*
+  The browser's default placeholder grey has poor contrast on the slate
+  sidebar. Use the same colour as the search icon (5.8:1).
+*/
+.sidebar-search::placeholder {
+  color: var(--color-sidebar-search-icon);
+}
+
+/*
+  Sphinx centres tables that don't set :align:, and Furo keeps that.
+  Align them to the left like the rest of the text.
+*/
+article table.align-default {
   margin-left: 0;
-  padding: 24px 12px 24px 24px;
-  border-left: 0.5rem solid #bbb;
-  background: #eee;
+  margin-right: 0;
 }
 
 /*
-  Fixing margin of illustrations
+  Furo's logo has no dimensions, so the sidebar jumps when it loads.
+  Reserve its space with the proportions of org.svg (viewBox 2923×1573).
 */
-.rst-content .image-reference img {
-  margin-bottom: 12px;
+.sidebar-logo {
+  width: 100%;
+  aspect-ratio: 2923 / 1573;
 }