layout: introduce 'card's for those empty index pages

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",
 ]