diff --git a/apps/website/src/App.tsx b/apps/website/src/App.tsx index 05079dc..49b001e 100644 --- a/apps/website/src/App.tsx +++ b/apps/website/src/App.tsx @@ -3,13 +3,17 @@ import Footer from "./components/Footer.js"; import Packages from "./components/Packages.js"; import Pipeline from "./components/Pipeline.js"; import SpecGraphSection from "./components/SpecGraphSection.js"; +import StatusBar from "./components/StatusBar.js"; import Studio from "./components/Studio.js"; import Topbar from "./components/Topbar.js"; export default function App() { return (
- +
+ + +
diff --git a/apps/website/src/components/StatusBar.tsx b/apps/website/src/components/StatusBar.tsx new file mode 100644 index 0000000..aec4a33 --- /dev/null +++ b/apps/website/src/components/StatusBar.tsx @@ -0,0 +1,31 @@ +export default function StatusBar() { + return ( +
+ + + + + + + + + + roberto@thesolidchain: ~ + + online + + uptime: 20y+ + + + region: es-remote-1 + + +
+ ); +} diff --git a/apps/website/src/styles.css b/apps/website/src/styles.css index e23ee86..16a31be 100644 --- a/apps/website/src/styles.css +++ b/apps/website/src/styles.css @@ -40,6 +40,88 @@ body { color: var(--lime); } +/* shared sticky header: corporate statusbar + product topbar */ +.hdr { + position: sticky; + top: 0; + z-index: 5; +} + +.statusbar { + display: flex; + gap: 18px; + flex-wrap: wrap; + align-items: center; + padding: 6px 18px; + background: var(--panel); + border-bottom: 1px solid var(--edge); + font-size: 11.5px; + color: var(--dim); +} + +.statusbar .brand { + display: inline-flex; + align-items: center; +} + +.statusbar .dots { + display: inline-flex; + gap: 6px; + margin-right: 4px; +} + +.statusbar .dot { + width: 10px; + height: 10px; + border-radius: 50%; +} + +.dot.r { + background: #e5534b; +} + +.dot.y { + background: #d4a72c; +} + +.dot.g { + background: #3fb950; +} + +.statusbar b { + color: var(--ink); + font-weight: 600; +} + +.statusbar .led { + color: var(--ok); +} + +.statusbar .led::before { + content: "\25cf "; +} + +.statusbar .cursor { + display: inline-block; + width: 8px; + height: 14px; + margin-left: auto; + background: var(--accent); + animation: blink 1.1s steps(1) infinite; +} + +@keyframes blink { + 50% { + opacity: 0; + } +} + +@media (prefers-reduced-motion: reduce) { + .statusbar .cursor { + animation: none; + } +} + /* topbar */ .topbar { display: flex; @@ -48,9 +130,6 @@ body { padding: 12px 18px; border-bottom: 1px solid var(--edge); background: var(--panel); - position: sticky; - top: 0; - z-index: 5; font-size: 12px; }