diff --git a/index.html b/index.html index 7a0feae..fa57737 100644 --- a/index.html +++ b/index.html @@ -56,6 +56,10 @@
04Documented recoverytested restore procedures
+ +

01 / Architecture

@@ -117,8 +121,18 @@
- Grafana infrastructure metrics dashboard - Centralized container logs in Grafana +
+
Infrastructure monitoringGrafana operations dashboard
+ + Grafana infrastructure metrics dashboard + +
+
+
Centralized loggingContainer logs collected in Loki
+ + Centralized container logs in Grafana + +
@@ -137,8 +151,18 @@
- Applications protected by Authentik - CrowdSec security decisions +
+
Identity portalApplications protected by Authentik
+ + Applications protected by Authentik + +
+
+
Active firewall decisionsCrowdSec command-line output
+ + CrowdSec security decisions + +
@@ -156,8 +180,18 @@
- Self-hosted Gitea dashboard - Successful Woodpecker CI pipeline +
+
Source controlSelf-hosted repositories in Gitea
+ + Self-hosted Gitea dashboard + +
+
+
Continuous deliverySuccessful Woodpecker pipeline
+ + Successful Woodpecker CI pipeline + +
@@ -175,8 +209,18 @@
- ByteGeist internal service portal - ByteGeist disaster recovery runbook +
+
Service portalInternal tools organized in Dashy
+ + ByteGeist internal service portal + +
+
+
Recovery runbookDocumented rebuild and restore process
+ + ByteGeist disaster recovery runbook + +
diff --git a/style.css b/style.css index 39e0cf4..4ec7b81 100644 --- a/style.css +++ b/style.css @@ -391,6 +391,28 @@ h1 { border-radius: 3px; } +.logo-divider { + width: min(calc(100% - 48px), var(--max)); + height: 280px; + margin: 0 auto; + overflow: hidden; + display: grid; + place-items: center; + border-bottom: 1px solid var(--line); + background: + radial-gradient(circle, rgba(88, 166, 255, 0.08), transparent 45%), + #080a0d; +} + +.logo-divider img { + width: 420px; + height: 420px; + object-fit: cover; + object-position: center 28%; + opacity: 0.72; + mix-blend-mode: screen; +} + .principles { display: grid; grid-template-columns: repeat(3, 1fr); @@ -516,13 +538,42 @@ footer p { .story-images { grid-column: 1 / -1; display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 24px; + grid-template-columns: 1fr; + gap: 64px; min-width: 0; align-items: start; } -.story-images img:hover { +.screenshot-exhibit { + margin: 0; + padding-top: 24px; + border-top: 1px solid var(--line); +} + +.screenshot-exhibit figcaption { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 24px; + margin-bottom: 16px; +} + +.screenshot-exhibit figcaption span { + font-size: 1.18rem; + font-weight: 600; + color: var(--text); +} + +.screenshot-exhibit figcaption small { + color: var(--muted); + font-size: 0.95rem; +} + +.screenshot-exhibit a { + display: block; +} + +.screenshot-exhibit a:hover img { box-shadow: 0 8px 24px rgba(88, 166, 255, 0.1); } @@ -538,8 +589,8 @@ footer p { transition: box-shadow 300ms ease; } -.story-images img:only-child { - grid-column: auto; +.story-images .crowdsec-capture { + filter: none; } .lesson-list { @@ -771,18 +822,38 @@ footer p { margin-top: 38px; } + .logo-divider { + width: calc(100% - 32px); + height: 210px; + } + + .logo-divider img { + width: 300px; + height: 300px; + } + .system-story { padding: 54px 0; } .story-images { grid-template-columns: 1fr; + gap: 44px; } .story-images img { height: auto; } + .screenshot-exhibit figcaption { + display: block; + } + + .screenshot-exhibit figcaption small { + display: block; + margin-top: 4px; + } + .lesson-list article { grid-template-columns: 40px 1fr; gap: 14px;