Skip to content

Commit b107709

Browse files
jgelukjgeluk
committed
feat(docs): enhance card design and update objective summaries
- add hover effects, improved spacing, and responsive grid layout for cards - make entire cards clickable (hide 'learn more' links) - update 6 objective summaries from todo to descriptive italic text: - expectations managed: create strategic roadmap aligned to business strategy - disruption avoided: make changes gradually with clear interdependencies - quality increased: enforce 100% test coverage based on real scenarios - strategic use cases: deliver use cases not possible with other technologies - modularity managed: build with modular, reusable components - reuse enabled: create ecosystem of reusable components for ekg
1 parent 5ea818f commit b107709

File tree

7 files changed

+211
-6
lines changed

7 files changed

+211
-6
lines changed

‎docs/objective/avoid-disruption.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ hide:
88
# Avoid Disruption
99

1010
<!--summary-start-->
11-
_TODO: Summary_
11+
_Make changes gradually with clear interdependencies to avoid disruption across use cases._
1212
<!--summary-end-->
1313

1414
[Capturing all knowledge in the organization](capture-knowledge.md)

‎docs/objective/enable-reuse.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ hide:
88
# Enable Reuse
99

1010
<!--summary-start-->
11-
_TODO: Summary_
11+
_Create an ecosystem of reusable components for the EKG._
1212
<!--summary-end-->
1313

1414
The [Use Case Tree](../concept/use-case-tree.md) is a foundational mechanism to create an ecosystem of

‎docs/objective/increase-quality.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ hide:
88
# Increase Quality
99

1010
<!--summary-start-->
11-
_TODO: Summary_
11+
_Enforce 100% test coverage based on real business scenarios and requirements._
1212
<!--summary-end-->
1313

1414
The [Use Case Tree](../concept/use-case-tree.md) is a foundational structure for quality

‎docs/objective/manage-expectations.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ hide:
88
# Best form of ”expectation management”
99

1010
<!--summary-start-->
11-
_TODO: Summary_
11+
_Create an agreed and realistic strategic roadmap aligned to business strategy._
1212
<!--summary-end-->
1313

1414
Creating an agreed and realistic strategic roadmap that is aligned to business strategy is hard.

‎docs/objective/modularity.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ hide:
1212
# Modularity
1313

1414
<!--summary-start-->
15-
_TODO: Summary_
15+
_Build with modular, reusable components instead of monolithic systems._
1616
<!--summary-end-->
1717

1818
The standard approach for large projects, such as nuclear

‎docs/objective/strategic-usecases.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ hide:
99
# The ability to deliver strategic use cases
1010

1111
<!--summary-start-->
12-
_TODO: Summary_
12+
_Deliver strategic use cases that cannot realistically be done with other technologies._
1313
<!--summary-end-->
1414

1515
TODO: The point to make here is how EKG can deliver use cases that cannot realistically be done today with other technologies

‎docs/stylesheets/extra.css‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,208 @@
33
--md-primary-fg-color--light: #4A23D9;
44
--md-primary-fg-color--dark: #25126A;
55
}
6+
7+
/* Card Design Enhancements */
8+
9+
/* Grid cards container - improved spacing */
10+
.md-typeset .grid.cards {
11+
gap: 1.5rem !important;
12+
margin: 2rem 0;
13+
}
14+
15+
.md-typeset .grid.cards > ul {
16+
gap: 1.5rem !important;
17+
display: grid !important;
18+
/* Responsive grid: 1 column on mobile, 2 on tablet, 3 on desktop */
19+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
20+
}
21+
22+
/* Individual card styling - cards are in ul > li structure */
23+
.md-typeset .grid.cards > ul > li,
24+
.md-typeset .grid.cards li {
25+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
26+
border-radius: 0.5rem !important;
27+
overflow: hidden;
28+
position: relative;
29+
cursor: pointer;
30+
}
31+
32+
/* Card hover effects */
33+
.md-typeset .grid.cards > ul > li:hover,
34+
.md-typeset .grid.cards li:hover {
35+
transform: translateY(-4px) scale(1.01) !important;
36+
box-shadow:
37+
0 8px 16px rgba(0, 0, 0, 0.12),
38+
0 4px 8px rgba(0, 0, 0, 0.08) !important;
39+
}
40+
41+
/* Light mode card hover shadow */
42+
[data-md-color-scheme="default"] .md-typeset .grid.cards > ul > li:hover,
43+
[data-md-color-scheme="default"] .md-typeset .grid.cards li:hover {
44+
box-shadow:
45+
0 8px 16px rgba(74, 35, 217, 0.15),
46+
0 4px 8px rgba(74, 35, 217, 0.1) !important;
47+
}
48+
49+
/* Dark mode card hover shadow */
50+
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover,
51+
[data-md-color-scheme="slate"] .md-typeset .grid.cards li:hover {
52+
box-shadow:
53+
0 8px 16px rgba(0, 0, 0, 0.3),
54+
0 4px 8px rgba(0, 0, 0, 0.2) !important;
55+
}
56+
57+
/* Card content padding */
58+
.md-typeset .grid.cards > ul > li > *,
59+
.md-typeset .grid.cards li > * {
60+
transition: color 0.2s ease;
61+
}
62+
63+
/* Icon styling improvements - target SVG icons in twemoji spans */
64+
.md-typeset .grid.cards .twemoji svg,
65+
.md-typeset .grid.cards img[alt*="material-"],
66+
.md-typeset .grid.cards img[alt*="octicons-"],
67+
.md-typeset .grid.cards .md-typeset img {
68+
transition: transform 0.3s ease, filter 0.3s ease;
69+
filter: brightness(1);
70+
}
71+
72+
/* Icon hover effect */
73+
.md-typeset .grid.cards > ul > li:hover .twemoji svg,
74+
.md-typeset .grid.cards li:hover .twemoji svg,
75+
.md-typeset .grid.cards > ul > li:hover img[alt*="material-"],
76+
.md-typeset .grid.cards li:hover img[alt*="octicons-"],
77+
.md-typeset .grid.cards > ul > li:hover .md-typeset img,
78+
.md-typeset .grid.cards li:hover .md-typeset img {
79+
transform: scale(1.1);
80+
filter: brightness(1.1);
81+
}
82+
83+
/* Large icon styling (.lg class) */
84+
.md-typeset .grid.cards .twemoji.lg svg,
85+
.md-typeset .grid.cards .twemoji.lg {
86+
width: 3rem !important;
87+
height: 3rem !important;
88+
margin-bottom: 1rem;
89+
opacity: 0.9;
90+
display: block;
91+
}
92+
93+
.md-typeset .grid.cards .twemoji.lg svg {
94+
width: 3rem;
95+
height: 3rem;
96+
}
97+
98+
.md-typeset .grid.cards > ul > li:hover .twemoji.lg,
99+
.md-typeset .grid.cards li:hover .twemoji.lg {
100+
opacity: 1;
101+
}
102+
103+
/* Hide "Learn more" text but keep the link functional */
104+
.md-typeset .grid.cards > ul > li > p:last-child,
105+
.md-typeset .grid.cards li > p:last-child {
106+
margin: 0 !important;
107+
padding: 0 !important;
108+
position: absolute;
109+
top: 0;
110+
left: 0;
111+
right: 0;
112+
bottom: 0;
113+
width: 100%;
114+
height: 100%;
115+
z-index: 1;
116+
font-size: 0;
117+
line-height: 0;
118+
overflow: visible;
119+
}
120+
121+
/* Make the "Learn more" link cover the entire card */
122+
.md-typeset .grid.cards > ul > li > p:last-child > a,
123+
.md-typeset .grid.cards li > p:last-child > a {
124+
position: absolute;
125+
top: 0;
126+
left: 0;
127+
right: 0;
128+
bottom: 0;
129+
width: 100%;
130+
height: 100%;
131+
display: block;
132+
text-indent: -9999px;
133+
overflow: hidden;
134+
color: transparent;
135+
font-size: 0;
136+
z-index: 1;
137+
}
138+
139+
/* Ensure card content is above the link overlay for proper stacking and interaction */
140+
.md-typeset .grid.cards > ul > li > *:not(p:last-child),
141+
.md-typeset .grid.cards li > *:not(p:last-child) {
142+
position: relative;
143+
z-index: 2;
144+
pointer-events: none; /* Allow clicks to pass through to the link */
145+
}
146+
147+
/* Re-enable pointer events for nested links (if any) */
148+
.md-typeset .grid.cards > ul > li > *:not(p:last-child) a,
149+
.md-typeset .grid.cards li > *:not(p:last-child) a {
150+
pointer-events: auto;
151+
}
152+
153+
/* Remove link hover transform since whole card is clickable */
154+
.md-typeset .grid.cards a:hover {
155+
transform: none;
156+
}
157+
158+
/* Card title styling */
159+
.md-typeset .grid.cards strong {
160+
font-size: 1.1em !important;
161+
font-weight: 600 !important;
162+
display: block;
163+
margin-bottom: 0.5rem;
164+
color: var(--md-primary-fg-color) !important;
165+
transition: color 0.2s ease;
166+
}
167+
168+
[data-md-color-scheme="slate"] .md-typeset .grid.cards strong {
169+
color: var(--md-primary-fg-color--light) !important;
170+
}
171+
172+
.md-typeset .grid.cards > ul > li:hover strong,
173+
.md-typeset .grid.cards li:hover strong {
174+
color: var(--md-accent-fg-color) !important;
175+
}
176+
177+
/* Card paragraph spacing */
178+
.md-typeset .grid.cards p {
179+
margin: 0.5rem 0;
180+
line-height: 1.6;
181+
}
182+
183+
/* Improve card content readability */
184+
.md-typeset .grid.cards em {
185+
font-style: italic;
186+
opacity: 0.9;
187+
}
188+
189+
/* Card separator (horizontal rule) styling */
190+
.md-typeset .grid.cards hr {
191+
margin: 1rem 0;
192+
border-color: rgba(0, 0, 0, 0.1);
193+
opacity: 0.5;
194+
}
195+
196+
[data-md-color-scheme="slate"] .md-typeset .grid.cards hr {
197+
border-color: rgba(255, 255, 255, 0.1);
198+
}
199+
200+
/* Smooth transitions for all interactive elements */
201+
.md-typeset .grid.cards * {
202+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
203+
}
204+
205+
/* Focus states for accessibility */
206+
.md-typeset .grid.cards a:focus-visible {
207+
outline: 2px solid var(--md-primary-fg-color);
208+
outline-offset: 2px;
209+
border-radius: 0.25rem;
210+
}

0 commit comments

Comments
 (0)