Add Cards

Author: rcosta358

_includes/card_grid.html

@@ -0,0 +1,13 @@
+<div class="{{ include.grid_class | default: 'card-grid' }}">
+  {% assign heading_level = include.heading_level | default: 'h3' %}
+  {% for card in include.cards %}
+    <div class="{{ include.card_class | default: 'card-panel' }}">
+      <{{ heading_level }}>
+        <a href="{{ card.url | relative_url }}">{{ card.title }}</a>
+      </{{ heading_level }}>
+      {% if card.description %}
+        <p>{{ card.description }}</p>
+      {% endif %}
+    </div>
+  {% endfor %}
+</div>

_sass/custom/custom.scss

@@ -169,7 +169,7 @@
   background: rgba(107, 114, 128, 0.08);
 }
 
-.home-grid {
+.card-grid {
   display: grid;
   gap: 1rem;
   margin: 2rem 0;
@@ -218,27 +218,27 @@
   border-color: rgba(42, 54, 66, 0.15);
 }
 
-.home-card {
+.card-panel {
   padding: 1.1rem 1.15rem;
   border: 1px solid rgba(17, 24, 39, 0.08);
   border-radius: 1rem;
   background: rgba(255, 255, 255, 0.92);
   transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
 }
 
-.home-card:hover {
+.card-panel:hover {
   transform: translateY(-2px);
   border-color: rgba(65, 88, 111, 0.18);
   box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
 }
 
-.home-card h3,
-.home-card h4 {
+.card-panel h3,
+.card-panel h4 {
   margin-top: 0;
   margin-bottom: 0.45rem;
 }
 
-.home-card p:last-child {
+.card-panel p:last-child {
   margin-bottom: 0;
 }
 
@@ -324,7 +324,7 @@
 }
 
 @media (min-width: 50rem) {
-  .home-grid {
+  .card-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }

getting-started/index.md

@@ -2,13 +2,23 @@
 title: Getting Started
 nav_order: 1
 has_children: true
+has_toc: false
 permalink: /getting-started/
+description: Start with the LiquidJava basics, from overview to installation and a first verification run.
+cards:
+  - title: Overview
+    url: /getting-started/overview/
+    description: Learn what LiquidJava adds to Java and how the documentation is organized.
+  - title: Installation
+    url: /getting-started/installation/
+    description: Set up the API, verifier, and editor tooling needed to start checking Java code.
+  - title: Quickstart
+    url: /getting-started/quickstart/
+    description: Follow a short end-to-end example that introduces refinements and verification feedback.
 ---
 
 # Getting Started
 
 Start here if you are new to LiquidJava.
 
-- [Overview]({{ '/getting-started/overview/' | relative_url }})
-- [Installation]({{ '/getting-started/installation/' | relative_url }})
-- [Quickstart]({{ '/getting-started/quickstart/' | relative_url }})
+{% include card_grid.html cards=page.cards %}

index.md

@@ -2,7 +2,27 @@
 title: LiquidJava Docs
 layout: default
 nav_exclude: true
+has_toc: false
 description: Start with installation, quickstart, runnable examples, and reference material for LiquidJava.
+cards:
+  - title: Quickstart
+    url: /getting-started/quickstart/
+    description: Install the annotation API, run the verifier, and see a failing refinement in a few minutes.
+  - title: VS Code Extension
+    url: /tooling/vscode-extension/
+    description: Use real-time diagnostics, syntax highlighting, and state-machine visualizations directly in the editor.
+  - title: Command Line
+    url: /tooling/cli/
+    description: Run the verifier directly from the terminal for local checks, debugging, and CI workflows.
+  - title: Reference
+    url: /reference/
+    description: Look up LiquidJava concepts, annotations, and protocol rules in a more formal, detailed format.
+  - title: Examples
+    url: /examples/
+    description: Open runnable demo projects through Codespaces, dev containers, or a local Maven setup.
+  - title: Resources
+    url: /resources/
+    description: Explore related research papers, poster material, and source repositories.
 ---
 
 <div>
@@ -19,29 +39,4 @@ description: Start with installation, quickstart, runnable examples, and referen
   </div>
 </div>
 
-<div class="home-grid">
-  <div class="home-card">
-    <h3><a href="{{ '/getting-started/quickstart/' | relative_url }}">Quickstart</a></h3>
-    <p>Install the annotation API, run the verifier, and see a failing refinement in a few minutes.</p>
-  </div>
-  <div class="home-card">
-    <h3><a href="{{ '/tooling/vscode-extension/' | relative_url }}">VS Code Extension</a></h3>
-    <p>Use real-time diagnostics, syntax highlighting, and state-machine visualizations directly in the editor.</p>
-  </div>
-  <div class="home-card">
-    <h3><a href="{{ '/tooling/cli/' | relative_url }}">Command Line</a></h3>
-    <p>Run the verifier directly from the terminal for local checks, debugging, and CI workflows.</p>
-  </div>
-  <div class="home-card">
-    <h3><a href="{{ '/reference/' | relative_url }}">Reference</a></h3>
-    <p>Look up LiquidJava concepts, annotations, and protocol rules in a more formal, detailed format.</p>
-  </div>
-  <div class="home-card">
-    <h3><a href="{{ '/examples/' | relative_url }}">Examples</a></h3>
-    <p>Open runnable demo projects through Codespaces, dev containers, or a local Maven setup.</p>
-  </div>
-  <div class="home-card">
-    <h3><a href="{{ '/resources/' | relative_url }}">Resources</a></h3>
-    <p>Explore related research papers, poster material, and source repositories.</p>
-  </div>
-</div>
+{% include card_grid.html cards=page.cards %}

reference/index.md

@@ -2,16 +2,29 @@
 title: Reference
 nav_order: 2
 has_children: true
+has_toc: false
 permalink: /reference/
 description: Browse the LiquidJava reference for refinements, typestates, aliases, ghost variables, and external refinements.
+cards:
+  - title: Refinements
+    url: /reference/refinements/
+    description: Review refinement syntax, annotation forms, and the main rules used during verification.
+  - title: Refinement Aliases
+    url: /reference/refinement-aliases/
+    description: Reuse common predicates with aliases to keep contracts shorter and easier to maintain.
+  - title: Typestates
+    url: /reference/typestates/
+    description: Model protocol-oriented object states and valid method transitions.
+  - title: Ghost Variables
+    url: /reference/ghost-variables/
+    description: Track logical state that helps express and verify richer object invariants.
+  - title: External Refinements
+    url: /reference/external-refinements/
+    description: Attach contracts to code you cannot or do not want to annotate directly.
 ---
 
 # LiquidJava Reference
 
 LiquidJava extends Java with logical refinements and object protocol specifications. This section covers the core annotation model:
 
-- [Refinements]({{ '/reference/refinements/' | relative_url }})
-- [Refinement Aliases]({{ '/reference/refinement-aliases/' | relative_url }})
-- [Typestates]({{ '/reference/typestates/' | relative_url }})
-- [Ghost Variables]({{ '/reference/ghost-variables/' | relative_url }})
-- [External Refinements]({{ '/reference/external-refinements/' | relative_url }})
+{% include card_grid.html cards=page.cards %}