Update distribution quick-install instructions

Author: ximion

content/get/_index.md

@@ -13,13 +13,20 @@ toc: false
 
 ## Quick Install Guides
 
-{{% detailsicon title="Installation on Ubuntu" closed="true" %}}
+<!--
+##############
+UBUNTU & KUBUNTU
+##############
+-->
+{{% detailsicon title="Installation on Ubuntu & Kubuntu" icon="images/distros/ubuntu.svg" closed="true" %}}
 
 {{% steps %}}
 
 ### Verify the Ubuntu version
 
 You need Ubuntu 24.04 or later in order to run Syntalos.
+You can see your Ubuntu/Kubuntu version in the system settings,
+usually under "Details".
 
 ### Add the PPA
 
@@ -39,7 +46,50 @@ sudo apt install syntalos
 
 {{% /detailsicon %}}
 
-{{% detailsicon title="Other Linux / Software Store" closed="true" %}}
+
+<!--
+##############
+DEBIAN
+##############
+-->
+{{% detailsicon title="Installation on Debian" icon="images/distros/debian.svg" closed="true" %}}
+
+{{% steps %}}
+
+### Verify the Debian version
+
+We are currently building packages for Debian 13 (Trixie).
+You can see your Debian version in the system settings dialog,
+or run `cat /etc/os-release` in a terminal to see it.
+
+### Download the packages
+
+Go to the [Syntalos Releases](https://github.com/syntalos/syntalos/releases) page and download
+the .deb packages for your Debian version.
+
+### Install Syntalos
+
+You can install the packages using your graphical package manager (just make sure the
+`syntalos-hwsupport*.deb` package is installed first).
+
+Alternatively, you can extract the ZIP rchive to a directory and install the packages
+from the command-line:
+```bash
+cd path/with/syntalos/debfiles
+sudo apt install ./syntalos*.deb
+```
+
+{{% /steps %}}
+
+{{% /detailsicon %}}
+
+
+<!--
+##############
+FLATPAK & OTHER
+##############
+-->
+{{% detailsicon title="Other Linux / Software Store" icon="images/distros/linux.svg" closed="true" %}}
 
 {{% steps %}}
 
@@ -61,5 +111,3 @@ flatpak install flathub org.syntalos.syntalos
 {{% /steps %}}
 
 {{% /detailsicon %}}
-
-

layouts/shortcodes/detailsicon.html

@@ -4,7 +4,7 @@
 
 <details class="last-of-type:hx-mb-0 hx-rounded-lg hx-bg-neutral-50 dark:hx-bg-neutral-800 hx-p-2 hx-mt-4 hx-group" {{ if not $closed }}open{{ end }}>
   <summary class="hx-flex hx-items-center hx-cursor-pointer hx-select-none hx-list-none hx-p-1 hx-rounded hx-transition-colors hover:hx-bg-gray-100 dark:hover:hx-bg-neutral-800 before:hx-mr-1 before:hx-inline-block before:hx-transition-transform before:hx-content-[''] dark:before:hx-invert rtl:before:hx-rotate-180 group-open:before:hx-rotate-90">
-    {{ if ne $icon "" }}<img src="/{{ $icon }}" />{{ end }}<strong class="hx-text-lg">{{ $title | markdownify }}</strong>
+    {{ if ne $icon "" }}<img style="margin: 0 4px 0 0;" height="32" src="/{{ $icon }}" />{{ end }}<strong class="hx-text-lg">{{ $title | markdownify }}</strong>
   </summary>
   <div class="hx-p-2 hx-overflow-hidden">
     {{ .InnerDeindent | markdownify }}