Use markdown for the guide cards

Author: N3MI-DG

.gitignore

@@ -1,4 +1,5 @@
 *.pyc
 __pycache__/
 site/
+.vscode/
 .cache/

.vscode/settings.json

@@ -1,16 +1,13 @@
-<div class="md-typeset">
-    <div class="grid cards guide-cards-container">
-    {% for title, guide in guides.items() %}
-        <a href="{{ guide.folder|urlencode }}/" class="guide-card-link">
-            <div class="card guide-card">
-                <img src="{{ guide.folder|urlencode }}/image.png" alt="{{ title }}" class="guide-card-image">
-                <div class="guide-card-content">
-                    <hr class="guide-card-divider">
-                    <h3 class="guide-card-title">{{ title }}</h3>
-                    <p class="guide-card-author">{{ guide.author }}</p>
-                </div>
-            </div>
-        </a>
-    {% endfor %}
-    </div>
-</div>
+<div class="grid cards" style="text-align: center;" markdown>
+{% for title, guide in guides.items() %}
+- ## {{ title }} { .guide-toc-heading }
+    [![{{ title }}]({{ guide.folder|urlencode }}/image.png){ .guide-card-image }]({{ guide.folder|urlencode }}/)
+
+    ---
+
+    [**{{ title }}**]({{ guide.folder|urlencode }}/){ .guide-card-title }  
+    [*{{ guide.author }}*]({{ guide.folder|urlencode }}/){ .guide-card-author }
+{% endfor %}
+</div>
+
+

docs/_templates/guide_cards.md

@@ -12,66 +12,53 @@
 }
 
 /* Guide Cards Styles */
-.guide-cards-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1rem;
-  margin: 1rem 0;
-}
-
-.guide-card-link {
-  text-decoration: none;
-  color: inherit;
-}
-
-.guide-card {
-  border-radius: 0.2rem;
-  overflow: hidden;
-  transition: box-shadow 0.25s, transform 0.25s;
-  background: var(--md-default-bg-color);
-  cursor: pointer;
-  box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.05), 0 0 0.05rem rgba(0,0,0,0.1);
-}
-
-.guide-card:hover {
-  box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.1), 0 0 0.1rem rgba(0,0,0,0.1) !important;
-  transform: translateY(-2px);
-}
-
 .guide-card-image {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
 }
 
-.guide-card-content {
-  padding: 1rem;
-  text-align: center;
-}
-
-.guide-card-divider {
-  margin: 0 0 1rem 0;
-  border: none;
-  border-top: 1px solid var(--md-default-fg-color--lightest);
+/* Hide guide TOC headings but keep anchors functional */
+.guide-toc-heading {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 .guide-card-title {
-  margin: 0 0 0.25rem 0;
+  /* margin: 0 0 0.25rem 0; */
   font-size: 1.1rem;
   font-weight: 600;
+  color: var(--md-default-fg-color) !important;
+  text-decoration: none;
+}
+
+.guide-card-title:hover {
+  text-decoration: none;
 }
 
 .guide-card-author {
   /* margin: 0; */
-  margin-top: -1.0rem;
+  margin-top: -0.25rem;
   margin-bottom: 0;
   font-size: 0.75rem;
-  color: var(--md-default-fg-color--light);
+  color: var(--md-default-fg-color--light) !important;
   font-style: italic;
   opacity: 0.8;
+  text-decoration: none;
+  display: block;
 }
 
+.guide-card-author:hover {
+  text-decoration: none;
+}
 
 /* Contributors Grid */
 .contributors-grid {