Card layout - Visual Improvements for Index/ToC pages

Makefile

@@ -1,8 +1,9 @@
 
+FMT ?= html
 
 .PHONY: docs
 docs: venv
-	venv/bin/sphinx-build -j auto -b html -D language=en -d build/en/doctrees source dist/en
+	venv/bin/sphinx-build -j auto -b $(FMT) -D language=en -d build/en/doctrees source dist/en
 
 venv:
 	python -m venv venv
@@ -12,7 +13,7 @@ venv:
 check: venv
 	# ignore-messages is needed due to links being used in directives, which
 	# are not visible by rstcheck as these directives are ignored (mostly faq)
-	venv/bin/rstcheck --recursive --ignore-directives tabs,faq,product-table \
+	venv/bin/rstcheck --recursive --ignore-directives card,tabs,faq,product-table \
 		--ignore-messages "faq(.*)Hyperlink target(.*)is not referenced" \
 		source
 

requirements.txt

@@ -30,3 +30,4 @@ sphinxprettysearchresults==0.3.5
 urllib3==2.2.3
 setuptools==75.6.0
 docutils==0.21.2
+sphinx-design==0.6.1

source/_static/css/custom.css

@@ -691,6 +691,16 @@ article ul li {
   margin: 0 0.5rem !important;
 }
 
+p.not-header {
+  font-size: 1.35em;
+  font-weight: 800;
+  margin-top: 1.3em;
+  margin-bottom: 0.7em;
+}
+
+
+/* breadcrumbs */
+
 #breadcrumbs .icon {
     display: none;
 }
@@ -719,6 +729,10 @@ article ul li {
     display: none;
 }
 
+
+
+/* Custom css for `products-table` directive */
+
 .products-table table {
     width: 90%;
     horizontal-alignment: center;
@@ -758,6 +772,14 @@ article ul li {
     font-weight: bold;
 }
 
+/* Card class (sphinx_design) */
+
+.sd-card {
+    border: 3px solid var(--sd-color-card-border);
+}
+
+
+/* ----------------- not active:
 /* tooltips */
 
 /* use class to show tooltip for element */

source/components/nitrokeys/features/index.rst

@@ -1,9 +1,51 @@
 Features
 ========
 
+.. card:: FIDO2
+    :link: fido2/index
+    :link-type: doc
+
+.. card:: U2F
+    :link: u2f/index
+    :link-type: doc
+
+.. card:: (Timed)-One-Time-Passwords (TOTP)
+    :link: totp/index
+    :link-type: doc
+
+.. card:: OpenPGP Card 
+    :link: openpgp-card/index
+    :link-type: doc    
+
+.. card:: Password Safe
+    :link: password-safe/index
+    :link-type: doc
+
+.. card:: Encrypted Mobile Storage
+    :link: encrypted-storage/index
+    :link-type: doc
+
+.. card:: Hidden Storage
+    :link: hidden-storage/index
+    :link-type: doc
+
+.. card:: Hardware Security Module
+    :link: hsm/index
+    :link-type: doc
+
+.. card:: PIV Smartcard
+    :link: piv/index
+    :link-type: doc
+
+.. card:: Miscellaneous
+    :link: misc/index
+    :link-type: doc
+
+
 .. toctree:: 
     :maxdepth: 1
     :glob:
+    :hidden:
 
     FIDO2 <fido2/index>
     U2F <u2f/index>

source/components/nitrokeys/index.rst

@@ -1,16 +1,71 @@
 Nitrokeys
 =========
 
+.. rubric:: Explore Features
+    :class: not-header
+
+.. card:: All Nitrokey Features
+    :link: features/index
+    :link-type: doc
+
+    Browse and learn about all the different features available on your Nitrokeys
+
+.. rubric:: Choose a Nitrokey Model
+    :class: not-header
+
+.. card:: Nitrokey 3
+    :link: nitrokey3/index
+    :link-type: doc
+
+    Deep dive into the Nitrokey 3 and its endless applications
+
+.. card:: Nitrokey Passkey
+    :link: passkey/index
+    :link-type: doc
+
+    Passkeys and robust web-security for everyone
+
+.. card:: Nitrokey Pro 2
+    :link: pro/index
+    :link-type: doc    
+
+    Smartcard-based OpenPGPCard security token
+
+.. card:: Nitrokey Storage 2
+    :link: storage/index
+    :link-type: doc
+
+    Smartcard-based token combined with encrypted flash storage
+
+.. card:: Nitrokey HSM 2
+    :link: hsm/index
+    :link-type: doc
+
+    More capacity, more possibilities - the Nitrokey for commercial applications
+
+.. card:: Nitrokey Start 2
+    :link: start/index
+    :link-type: doc
+
+    GNUK-based pure software only OpenPGPCard
+
+.. card:: Nitrokey U2F
+    :link: u2f/index
+    :link-type: doc
+
+    Secure 2FA token for to increase your web security
+
 .. toctree:: 
-    :maxdepth: 1
-    :glob:
-
-    Features <features/index>
-    Nitrokey 3 <nitrokey3/index>
-	Nitrokey Passkey <passkey/index>
-	Nitrokey FIDO2 <fido2/index>
-	Nitrokey U2F <u2f/index>
-	Nitrokey HSM 2 <hsm/index>
-	Nitrokey Pro 2 <pro/index>
-    Nitrokey Start <start/index>
-	Nitrokey Storage 2 <storage/index>
+     :maxdepth: 1
+     :glob:   
+     :hidden:
+
+     Features <features/index>
+     Nitrokey 3 <nitrokey3/index>
+ 	 Nitrokey Passkey <passkey/index>
+ 	 Nitrokey FIDO2 <fido2/index>
+ 	 Nitrokey U2F <u2f/index>
+ 	 Nitrokey HSM 2 <hsm/index>
+ 	 Nitrokey Pro 2 <pro/index>
+     Nitrokey Start <start/index>
+ 	 Nitrokey Storage 2 <storage/index>

source/conf.py

@@ -45,6 +45,7 @@
     #'sphinx_copybutton',
     #'sphinxprettysearchresults',
     "sphinx_tabs.tabs",
+    "sphinx_design",
     "nk_product_table",
     "faq_item",
 ]

source/index.rst

@@ -1,9 +1,64 @@
 Nitrokey Documentation
 ======================
 
+.. card:: Nitrokeys
+    :link: components/nitrokeys/index
+    :link-type: doc
+
+    Open-Source security tokens for your personal and business needs
+
+.. card:: Nitropad
+    :link: components/nitropad/index
+    :link-type: doc
+
+    Wide range of coreboot firmware based laptops
+
+.. card:: NitroPC
+    :link: components/nitropc/index
+    :link-type: doc
+
+    The open-source firmware equipped PC for your desk
+
+.. card:: Nitrophone
+    :link: components/nitrophone/index
+    :link-type: doc
+
+    Top-tier hardware equipped with the most secure smartphone OS
+
+.. card:: NextBox
+    :link: components/nextbox/index
+    :link-type: doc
+
+    Private, low-to-no administration home cloud - Nextcloud in your own hands
+
+.. card:: NetHSM
+    :link: components/nethsm/index
+    :link-type: doc
+
+    The trustworthy, open hardware security module that just works
+
+.. card:: Nitrowall NW678, NW4J3
+    :link: components/nitrowall/index
+    :link-type: doc
+
+    Network PCs for firwalls, routing and a more secure home network
+
+.. card:: Nitrowall NW750
+    :link: components/nitrowall/nw750/index
+    :link-type: doc
+
+    Never use open WiFis again, just get your own mobile Wifi
+
+.. card:: Software
+    :link: components/software/index
+    :link-type: doc
+
+    Software and SDK documentation - NitrokeyApp2 is here!
+
 .. toctree::
-   :maxdepth: 1
-   :titlesonly:
+   :maxdepth: 3
+   :glob:
+   :hidden:
 
    components/nitrokeys/index
    components/nitropad/index