docs: serve the documentation screenshots next to the pages

The pages reference their screenshots as resources/gallery/<name>.png,
relative to /docs/, but the build copied only the Markdown out of the
source repository and dropped the folder, so every image was a broken
link. Copy Documentation/resources beside the pages, without the kernel
patches that already link to GitHub, and let a centred paragraph of
screenshots sit as a row instead of the one-image-per-line rule the
docs stylesheet applies to every image.

Signed-off-by: ravindu644 <droidcasts@protonmail.com>

Author: ravindu644

.github/workflows/build-docs.yml

@@ -34,6 +34,11 @@ jobs:
           rm -rf docs/content/
           mkdir -p docs/content
           cp -r /tmp/source/Documentation/. docs/content/
+          # the pages reference screenshots as resources/gallery/<name>.png, relative to
+          # /docs/, so the folder has to live next to the pages
+          rm -rf docs/resources
+          cp -r /tmp/source/Documentation/resources docs/resources
+          rm -rf docs/resources/kernel-patches
 
       - name: Install the build's Markdown renderer and highlighter
         run: pip install markdown-it-py mdit-py-plugins pygments

assets/css/main.css

@@ -182,6 +182,8 @@ html { scroll-padding-top: 80px; } /* an anchor lands below the 64px sticky nav,
 .docs-content li { margin-bottom: 4px; }
 .docs-content li > p { margin-bottom: 8px; }
 .docs-content img { display: block; max-width: 100%; height: auto; margin: 16px 0; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-lg); }
+/* a row of phone screenshots: the pages mark it up as <p align="center"> with 30% wide images */
+.docs-content p[align="center"] img { display: inline-block; width: 30%; margin: 8px 1%; vertical-align: top; }
 .docs-content hr { margin: 32px 0; border: 0; border-top: 1px solid var(--md-sys-color-outline-variant); }
 .docs-content hr + h2 { padding-top: 0; border-top: 0; } /* the page already drew its own rule */
 .docs-content :not(pre) > code { overflow-wrap: anywhere; } /* a long path wraps instead of widening a phone screen */