diff --git a/book/quarto/landing_site/index.qmd b/book/quarto/landing_site/index.qmd index c9eaab697..868842f3a 100644 --- a/book/quarto/landing_site/index.qmd +++ b/book/quarto/landing_site/index.qmd @@ -143,21 +143,61 @@ format:
-
-
-
Compute
-
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Algorithm
-
-
Memory
-
+
+
+ Data
-
-
Latency
-
+
+
+ Machine +
+ + +
+
+ Compute +
+
+
+ Communicate +
+
+
+ Coordinate
-

Hands-on exercises for performance engineering and scaling.

+

The core design space: balancing D·A·M workload characteristics with C³ infrastructure constraints.

diff --git a/book/quarto/landing_site/landing.css b/book/quarto/landing_site/landing.css index 8452d5722..30c6d20c1 100644 --- a/book/quarto/landing_site/landing.css +++ b/book/quarto/landing_site/landing.css @@ -480,75 +480,82 @@ main.content, 50% { opacity: 0; } } -/* Sliders Animation */ -.css-sliders-wrapper { +/* Hexagon/Cube Taxonomy Animation */ +.hex-wrapper { position: relative; - width: 220px; - background: var(--mls-slider-bg); - border-radius: 12px; - padding: 20px; - box-shadow: var(--mls-card-shadow); - border: 1px solid var(--mls-card-border); + width: 320px; + height: 240px; margin: 0 auto 2rem auto; } -.css-slider { - margin-bottom: 15px; -} -.css-slider:last-child { - margin-bottom: 0; -} -.slider-label { - font-size: 0.75rem; - font-weight: 600; +.hex-lines { + position: absolute; + top: 20px; + left: 60px; + width: 200px; + height: 200px; + overflow: visible; color: var(--mls-text-muted); - margin-bottom: 5px; - text-align: left; - text-transform: uppercase; - letter-spacing: 0.05em; + opacity: 0.4; } -.slider-track { - width: 100%; - height: 6px; - background: var(--mls-slider-track); - border-radius: 3px; +.hex-polygon, .hex-line { + stroke-dasharray: 6 6; + animation: hexDash 20s linear infinite; +} +@keyframes hexDash { + to { stroke-dashoffset: 200; } +} +.hex-dot { + filter: drop-shadow(0 0 4px currentColor); +} +.dot-dam { color: var(--mls-accent); fill: var(--mls-accent); } +.dot-c3 { color: #4285F4; fill: #4285F4; } + +.hex-node { + position: absolute; + display: flex; + align-items: center; + gap: 8px; + z-index: 2; +} +/* Center is at (160, 120). Radius is 80. */ +.node-alg { top: 40px; left: 160px; transform: translate(-50%, -100%); flex-direction: column; padding-bottom: 8px;} +.node-comp { top: 80px; left: 229px; transform: translate(0, -50%); padding-left: 8px;} +.node-coord { top: 160px; left: 229px; transform: translate(0, -50%); padding-left: 8px;} +.node-mach { top: 200px; left: 160px; transform: translate(-50%, 0); flex-direction: column; padding-top: 8px;} +.node-comm { top: 160px; left: 91px; transform: translate(-100%, -50%); flex-direction: row-reverse; padding-right: 8px;} +.node-data { top: 80px; left: 91px; transform: translate(-100%, -50%); flex-direction: row-reverse; padding-right: 8px;} + +.node-circle { + width: 12px; + height: 12px; + background: var(--mls-card-bg); + border: 2px solid var(--mls-text); + border-radius: 50%; + flex-shrink: 0; position: relative; } -.slider-fill { +.node-circle::after { + content: ''; position: absolute; - top: 0; left: 0; bottom: 0; - background: var(--mls-accent); - border-radius: 3px; -} -.slider-thumb { - position: absolute; - top: 50%; - width: 14px; - height: 14px; - background: var(--mls-slider-thumb); - border: 2px solid var(--mls-accent); + top: 2px; left: 2px; right: 2px; bottom: 2px; border-radius: 50%; - transform: translate(-50%, -50%); - box-shadow: 0 2px 5px rgba(0,0,0,0.2); + background: currentColor; + opacity: 0.5; +} +.dam-color { border-color: var(--mls-accent); color: var(--mls-accent); box-shadow: 0 0 10px rgba(165,28,48,0.2); } +[data-bs-theme="dark"] .dam-color { box-shadow: 0 0 10px rgba(255,77,109,0.3); } +.c3-color { border-color: #4285F4; color: #4285F4; box-shadow: 0 0 10px rgba(66,133,244,0.2); } + +.node-label { + font-size: 0.7rem; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--mls-text); + white-space: nowrap; } -/* Animations for sliders */ -.fill1 { animation: slideFill1 4s infinite alternate ease-in-out; } -.thumb1 { animation: slideThumb1 4s infinite alternate ease-in-out; } - -.fill2 { animation: slideFill2 5s infinite alternate ease-in-out; background: #4285F4; } -.thumb2 { animation: slideThumb2 5s infinite alternate ease-in-out; border-color: #4285F4; } - -.fill3 { animation: slideFill3 3.5s infinite alternate ease-in-out; background: #34A853; } -.thumb3 { animation: slideThumb3 3.5s infinite alternate ease-in-out; border-color: #34A853; } - -@keyframes slideFill1 { 0% { width: 20%; } 100% { width: 80%; } } -@keyframes slideThumb1 { 0% { left: 20%; } 100% { left: 80%; } } - -@keyframes slideFill2 { 0% { width: 70%; } 100% { width: 30%; } } -@keyframes slideThumb2 { 0% { left: 70%; } 100% { left: 30%; } } - -@keyframes slideFill3 { 0% { width: 40%; } 100% { width: 90%; } } -@keyframes slideThumb3 { 0% { left: 40%; } 100% { left: 90%; } } +.mls-feature-image { .mls-feature-image { max-width: 140px;