feat(docs): add letter badges to objectives and improve card design (#22)

jgeluk · web-flow · commit a6dbc641872c · 2025-12-01T23:49:17.000Z
- Add stylized circular letter badges (A-M) to replace identical refresh icons
- Remove letter prefixes from card titles (badge already shows letter)
- Fix YAML frontmatter: quote titles with colons and fix indentation
- Ensure all objective summaries are consistently italicized
- Update sidebar navigation to show lettered objectives alphabetically
- Add CSS styling for badge hover effects and dark mode support
diff --git a/assets/Screenshot_2025-12-01_at_23.34.46-3498e6aa-895d-4e60-9b3a-87f775e1e172.png b/assets/Screenshot_2025-12-01_at_23.34.46-3498e6aa-895d-4e60-9b3a-87f775e1e172.png
diff --git a/assets/Screenshot_2025-12-01_at_23.39.31-8748f67b-039b-41e8-9ca3-3a1823e1cb9a.png b/assets/Screenshot_2025-12-01_at_23.39.31-8748f67b-039b-41e8-9ca3-3a1823e1cb9a.png
diff --git a/assets/Screenshot_2025-12-01_at_23.44.02-ccca9932-bf28-4541-a1aa-d1bf017c173d.png b/assets/Screenshot_2025-12-01_at_23.44.02-ccca9932-bf28-4541-a1aa-d1bf017c173d.png
diff --git a/assets/Screenshot_2025-12-01_at_23.45.59-c031983d-701b-4ba7-9325-c89fe113e92c.png b/assets/Screenshot_2025-12-01_at_23.45.59-c031983d-701b-4ba7-9325-c89fe113e92c.png
diff --git a/docs/objective/.pages.yaml b/docs/objective/.pages.yaml
@@ -1,16 +1,16 @@
 title: Objectives
 nav:
-  - Composable Business: composable-business.md
-  - Requirements Captured: know-what-the-business-wants.md
-  - Knowledge Captured: capture-knowledge.md
-  - Gaps Bridged: bridge-the-gap.md
-  - Expectations Managed: manage-expectations.md
-  - Did not boil the ocean: avoid-boiling-the-ocean.md
-  - Disruption Avoided: avoid-disruption.md
-  - Quality Increased: increase-quality.md
-  - Aligned with Strategy: align-with-business-strategy.md
-  - Delivered: strategic-usecases.md
-  - Modularity Managed: modularity.md
-  - Interoperability Achieved: interoperability.md
-  - Reuse Enabled: enable-reuse.md
+  - "A: Interoperability Achieved": interoperability.md
+  - "B: Composable Business": composable-business.md
+  - "C: Requirements Captured": know-what-the-business-wants.md
+  - "D: Knowledge Captured": capture-knowledge.md
+  - "E: Gaps Bridged": bridge-the-gap.md
+  - "F: Expectations Managed": manage-expectations.md
+  - "G: Did not boil the ocean": avoid-boiling-the-ocean.md
+  - "H: Disruption Avoided": avoid-disruption.md
+  - "I: Quality Increased": increase-quality.md
+  - "J: Aligned with Strategy": align-with-business-strategy.md
+  - "K: Delivered": strategic-usecases.md
+  - "L: Modularity Managed": modularity.md
+  - "M: Reuse Enabled": enable-reuse.md
   - ...
diff --git a/docs/objective/align-with-business-strategy.md b/docs/objective/align-with-business-strategy.md
@@ -1,11 +1,11 @@
 ---
-title: Align with Business Strategy
+title: "J: Align with Business Strategy"
 authors:
 - Jacobus Geluk
 hide:
-  - toc
+- toc
 ---
-# Align with Business Strategy
+# J: Align with Business Strategy
 
 <!--summary-start-->
 _Align strategy of business capability improvement and execution._
diff --git a/docs/objective/avoid-boiling-the-ocean.md b/docs/objective/avoid-boiling-the-ocean.md
@@ -1,11 +1,11 @@
 ---
-title: Avoid "boiling the ocean"
+title: "G: Avoid \"boiling the ocean\""
 authors:
 - Jacobus Geluk
 hide:
-  - toc
+- toc
 ---
-# Avoid "boiling the ocean"
+# G: Avoid "boiling the ocean"
 
 <!--summary-start-->
 _Provide focus, clarity, deliver business value fast, do the right things at the right time. Save money._
diff --git a/docs/objective/avoid-disruption.md b/docs/objective/avoid-disruption.md
@@ -1,11 +1,11 @@
 ---
-title: Avoid Disruption
+title: "H: Avoid Disruption"
 authors:
 - Jacobus Geluk
 hide:
-  - toc
+- toc
 ---
-# Avoid Disruption
+# H: Avoid Disruption
 
 <!--summary-start-->
 _Make changes gradually with clear interdependencies to avoid disruption across use cases._
diff --git a/docs/objective/bridge-the-gap.md b/docs/objective/bridge-the-gap.md
@@ -1,14 +1,14 @@
 ---
-title: Bridge the traditional gap between Business & Technology
+title: "E: Bridge the traditional gap between Business & Technology"
 authors:
 - Jacobus Geluk
-hide: 
+hide:
 - toc
 ---
-# Bridge the traditional gap between Business & Technology
+# E: Bridge the traditional gap between Business & Technology
 
 <!--summary-start-->
-Align business expectations with technology delivery.
+_Align business expectations with technology delivery._
 <!--summary-end-->
 
 - Engage with the business, the product owner and get continuous
diff --git a/docs/objective/capture-knowledge.md b/docs/objective/capture-knowledge.md
@@ -1,11 +1,11 @@
 ---
-title: Capture Knowledge
+title: "D: Capture Knowledge"
 authors:
 - Jacobus Geluk
 hide:
 - toc
 ---
-# Capture Knowledge
+# D: Capture Knowledge
 
 <!--summary-start-->
 _Enabling a whole new league of use cases._
diff --git a/docs/objective/composable-business.md b/docs/objective/composable-business.md
@@ -1,14 +1,14 @@
 ---
-title: Composable Business
+title: "B: Composable Business"
 authors:
 - Jacobus Geluk
 hide:
 - toc
 ---
-# Composable Business
+# B: Composable Business
 
 <!--summary-start-->
-The Future of Business Is Composable
+_The Future of Business Is Composable_
 <!--summary-end-->
 
 
diff --git a/docs/objective/enable-reuse.md b/docs/objective/enable-reuse.md
@@ -1,11 +1,11 @@
 ---
-title: Enable Reuse
+title: "M: Enable Reuse"
 authors:
 - Jacobus Geluk
 hide:
 - toc
 ---
-# Enable Reuse
+# M: Enable Reuse
 
 <!--summary-start-->
 _Create an ecosystem of reusable components for the EKG._
diff --git a/docs/objective/increase-quality.md b/docs/objective/increase-quality.md
@@ -1,11 +1,11 @@
 ---
-title: Increase Quality
+title: "I: Increase Quality"
 authors:
 - Jacobus Geluk
 hide:
 - toc
 ---
-# Increase Quality
+# I: Increase Quality
 
 <!--summary-start-->
 _Enforce 100% test coverage based on real business scenarios and requirements._
diff --git a/docs/objective/index.md b/docs/objective/index.md
@@ -8,79 +8,79 @@ The primary reasons for creating a [Use Case Tree](../concept/use-case-tree.md)
 
 <div class="grid cards" markdown>
 
-- :material-cached:{ .lg } __Interoperability Achieved__
+- <span class="objective-badge" data-letter="A"></span> __Interoperability Achieved__
     
     {% include-markdown "objective/interoperability.md"
     start="<!--summary-start-->" end="<!--summary-end-->" %}
     [:octicons-arrow-right-24: Learn more](interoperability.md)
 
-- :material-cached:{ .lg } __Business Composability Improved__
+- <span class="objective-badge" data-letter="B"></span> __Business Composability Improved__
     
     {% include-markdown "objective/composable-business.md"
     start="<!--summary-start-->" end="<!--summary-end-->" %}
     [:octicons-arrow-right-24: Learn more](composable-business.md)
 
-- :material-cached:{ .lg } __Requirements Captured__
+- <span class="objective-badge" data-letter="C"></span> __Requirements Captured__
     
     {% include-markdown "objective/know-what-the-business-wants.md" 
     start="<!--summary-start-->" end="<!--summary-end-->" %}
     [:octicons-arrow-right-24: Learn more](know-what-the-business-wants.md)
 
-- :material-cached:{ .lg } __Knowledge Captured__
+- <span class="objective-badge" data-letter="D"></span> __Knowledge Captured__
     
     {% include-markdown "objective/capture-knowledge.md"
     start="<!--summary-start-->" end="<!--summary-end-->" %}
     [:octicons-arrow-right-24: Learn more](capture-knowledge.md)
 
-- :material-cached:{ .lg } __Gaps Bridged__
+- <span class="objective-badge" data-letter="E"></span> __Gaps Bridged__
     
     {% include-markdown "objective/bridge-the-gap.md"
     start="<!--summary-start-->" end="<!--summary-end-->" %}
     [:octicons-arrow-right-24: Learn more](bridge-the-gap.md)
 
-- :material-cached:{ .lg } __Expectations Managed__
+- <span class="objective-badge" data-letter="F"></span> __Expectations Managed__
     
     {% include-markdown "objective/manage-expectations.md"
     start="<!--summary-start-->" end="<!--summary-end-->" %}
     [:octicons-arrow-right-24: Learn more](manage-expectations.md)
 
-- :material-cached:{ .lg } __Did not boil the ocean__
+- <span class="objective-badge" data-letter="G"></span> __Did not boil the ocean__
     
     {% include-markdown "objective/avoid-boiling-the-ocean.md"
     start="<!--summary-start-->" end="<!--summary-end-->" %}
     [:octicons-arrow-right-24: Learn more](avoid-boiling-the-ocean.md)
 
-- :material-cached:{ .lg } __Disruption Avoided__
+- <span class="objective-badge" data-letter="H"></span> __Disruption Avoided__
     
     {% include-markdown "objective/avoid-disruption.md"
     start="<!--summary-start-->" end="<!--summary-end-->" %}
     [:octicons-arrow-right-24: Learn more](avoid-disruption.md)
 
-- :material-cached:{ .lg } __Quality Increased__
+- <span class="objective-badge" data-letter="I"></span> __Quality Increased__
     
     {% include-markdown "objective/increase-quality.md"
     start="<!--summary-start-->" end="<!--summary-end-->" %}
     [:octicons-arrow-right-24: Learn more](increase-quality.md)
 
-- :material-cached:{ .lg } __Aligned with Strategy__
+- <span class="objective-badge" data-letter="J"></span> __Aligned with Strategy__
     
     {% include-markdown "objective/align-with-business-strategy.md"
     start="<!--summary-start-->" end="<!--summary-end-->" %}
     [:octicons-arrow-right-24: Learn more](align-with-business-strategy.md)
 
-- :material-cached:{ .lg } __Delivered__
+- <span class="objective-badge" data-letter="K"></span> __Delivered__
     
     {% include-markdown "objective/strategic-usecases.md"
     start="<!--summary-start-->" end="<!--summary-end-->" %}
     [:octicons-arrow-right-24: Learn more](strategic-usecases.md)
 
-- :material-cached:{ .lg } __Modularity Managed__
+- <span class="objective-badge" data-letter="L"></span> __Modularity Managed__
     
     {% include-markdown "objective/modularity.md"
     start="<!--summary-start-->" end="<!--summary-end-->" %}
     [:octicons-arrow-right-24: Learn more](modularity.md)
 
-- :material-cached:{ .lg } __Reuse Enabled__
+- <span class="objective-badge" data-letter="M"></span> __Reuse Enabled__
     
     {% include-markdown "objective/enable-reuse.md"
     start="<!--summary-start-->" end="<!--summary-end-->" %}
diff --git a/docs/objective/interoperability.md b/docs/objective/interoperability.md
@@ -1,13 +1,13 @@
 ---
-title: Interoperability
+title: "A: Interoperability"
 summary: Interoperability Achieved
 authors:
 - Carlos Tubbax
 date: 2022-06-23
 some_url: https://method.ekgf.org/objective/interoperability/
 ---
 
-# Interoperability Achieved
+# A: Interoperability Achieved
 
 <!--summary-start-->
 _Enable interoperability across the enterprise at high levels of maturity._
diff --git a/docs/objective/know-what-the-business-wants.md b/docs/objective/know-what-the-business-wants.md
@@ -1,11 +1,11 @@
 ---
-title: Know what the business wants & why
+title: "C: Know what the business wants & why"
 authors:
 - Jacobus Geluk
 hide:
 - toc
 ---
-# Know what the business wants & why
+# C: Know what the business wants & why
 
 <!--summary-start-->
 _Know exactly what the business---the customer or
diff --git a/docs/objective/manage-expectations.md b/docs/objective/manage-expectations.md
@@ -1,11 +1,11 @@
 ---
-title: Best form of ”expectation management”
+title: "F: Best form of \"expectation management\""
 authors:
 - Jacobus Geluk
 hide:
 - toc
 ---
-# Best form of ”expectation management”
+# F: Best form of "expectation management"
 
 <!--summary-start-->
 _Create an agreed and realistic strategic roadmap aligned to business strategy._
diff --git a/docs/objective/modularity.md b/docs/objective/modularity.md
@@ -1,15 +1,15 @@
 ---
-title: Modularity
+title: "L: Modularity"
 summary: Introducing EKG modularity
 authors:
 - Carlos Tubbax
 date: 2022-05-01
 some_url: https://method.ekgf.org/objective/modularity/
 hide:
-  - toc
+- toc
 ---
 
-# Modularity
+# L: Modularity
 
 <!--summary-start-->
 _Build with modular, reusable components instead of monolithic systems._
diff --git a/docs/objective/strategic-usecases.md b/docs/objective/strategic-usecases.md
@@ -1,12 +1,12 @@
 ---
-title: The ability to deliver strategic use cases
+title: "K: The ability to deliver strategic use cases"
 authors:
 - Jacobus Geluk
 hide:
 - toc
 ---
 
-# The ability to deliver strategic use cases
+# K: The ability to deliver strategic use cases
 
 <!--summary-start-->
 _Deliver strategic use cases that cannot realistically be done with other technologies._
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -100,6 +100,49 @@
   opacity: 1;
 }
 
+/* Objective badge styling - circular badges with letters */
+.md-typeset .grid.cards .objective-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem !important;
+  height: 3rem !important;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--md-primary-fg-color) 0%, var(--md-primary-fg-color--dark) 100%);
+  color: white;
+  font-weight: 700;
+  font-size: 1.5rem;
+  line-height: 1;
+  margin-bottom: 1rem;
+  opacity: 0.9;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 8px rgba(74, 35, 217, 0.2);
+  position: relative;
+}
+
+.md-typeset .grid.cards .objective-badge::before {
+  content: attr(data-letter);
+}
+
+/* Dark mode badge styling */
+[data-md-color-scheme="slate"] .md-typeset .grid.cards .objective-badge {
+  background: linear-gradient(135deg, var(--md-primary-fg-color--light) 0%, var(--md-primary-fg-color) 100%);
+  box-shadow: 0 2px 8px rgba(74, 35, 217, 0.3);
+}
+
+/* Badge hover effect */
+.md-typeset .grid.cards > ul > li:hover .objective-badge,
+.md-typeset .grid.cards li:hover .objective-badge {
+  opacity: 1;
+  transform: scale(1.1) rotate(5deg);
+  box-shadow: 0 4px 12px rgba(74, 35, 217, 0.4);
+}
+
+[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover .objective-badge,
+[data-md-color-scheme="slate"] .md-typeset .grid.cards li:hover .objective-badge {
+  box-shadow: 0 4px 12px rgba(74, 35, 217, 0.5);
+}
+
 /* Hide "Learn more" text but keep the link functional */
 .md-typeset .grid.cards > ul > li > p:last-child,
 .md-typeset .grid.cards li > p:last-child {
