landings: blue technical stack bar with package versions

Bank, merchant, and exchange intros show a small monospace blue bar
at the top listing installed software and versions (libeufin-bank /
taler-merchant / taler-exchange, nginx, trixie).
This commit is contained in:
Hernâni Marques 2026-07-10 22:48:00 +02:00
parent 2e088f95cd
commit 4638f932f1
No known key found for this signature in database
3 changed files with 69 additions and 0 deletions

View file

@ -69,6 +69,25 @@
margin: 0 auto;
padding: 2.25rem 1.25rem 3.5rem;
}
/* Technical stack strip (software + versions) — top of page */
.stack-bar {
margin: 0;
padding: 0.35rem 0.75rem;
background: #0042b3;
color: #d6e4ff;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.35;
text-align: center;
border-bottom: 1px solid rgba(164, 201, 255, 0.35);
}
.stack-bar strong {
color: #fff;
font-weight: 650;
}
.stack-bar .sep { color: rgba(164, 201, 255, 0.55); margin: 0 0.2rem; }
.hero {
text-align: center;
margin: 0 0 1.75rem;
@ -984,6 +1003,18 @@
<script src="/intro/qrcode.min.js"></script>
</head>
<body data-shop-theme="bank">
<p class="stack-bar" role="note" title="Software running this bank service">
<strong>stack</strong><span class="sep">·</span>
libeufin-bank&nbsp;1.6.6
<span class="sep">·</span>
libeufin-common&nbsp;1.6.6
<span class="sep">·</span>
nginx&nbsp;1.26.3
<span class="sep">·</span>
debian&nbsp;trixie
<span class="sep">·</span>
landing&nbsp;/intro
</p>
<main>
<header class="hero">
<span class="badge">Intergalactic · GOA · no IBAN</span>

View file

@ -44,6 +44,14 @@
background-attachment: fixed;
}
main { max-width: 42rem; margin: 0 auto; padding: 2.25rem 1.25rem 3.5rem; }
.stack-bar {
margin: 0; padding: 0.35rem 0.75rem; background: #0042b3; color: #d6e4ff;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.62rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.35;
text-align: center; border-bottom: 1px solid rgba(164, 201, 255, 0.35);
}
.stack-bar strong { color: #fff; font-weight: 650; }
.stack-bar .sep { color: rgba(164, 201, 255, 0.55); margin: 0 0.2rem; }
.hero { text-align: center; margin: 0 0 1.25rem; }
h1 {
font-size: 1.85rem; font-weight: 750; margin: 0 0 0.45rem;
@ -229,6 +237,16 @@
<script src="/intro/qrcode.min.js"></script>
</head>
<body>
<p class="stack-bar" role="note" title="Software running this exchange service">
<strong>stack</strong><span class="sep">·</span>
taler-exchange&nbsp;1.6.6
<span class="sep">·</span>
nginx&nbsp;1.26.3
<span class="sep">·</span>
debian&nbsp;trixie
<span class="sep">·</span>
landing&nbsp;/intro
</p>
<main>
<header class="hero">
<span class="badge">GOA · Exchange</span>

View file

@ -58,6 +58,14 @@
background-attachment: fixed;
}
main { position: relative; z-index: 1; max-width: 42rem; margin: 0 auto; padding: 2.25rem 1.25rem 3.5rem; }
.stack-bar {
margin: 0; padding: 0.35rem 0.75rem; background: #0042b3; color: #d6e4ff;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.62rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.35;
text-align: center; border-bottom: 1px solid rgba(164, 201, 255, 0.35);
}
.stack-bar strong { color: #fff; font-weight: 650; }
.stack-bar .sep { color: rgba(164, 201, 255, 0.55); margin: 0 0.2rem; }
.hero { text-align: center; margin: 0 0 1.25rem; }
h1 {
font-size: 1.85rem; font-weight: 750; margin: 0 0 0.45rem; letter-spacing: -0.02em;
@ -508,6 +516,18 @@
</style>
</head>
<body>
<p class="stack-bar" role="note" title="Software running this merchant service">
<strong>stack</strong><span class="sep">·</span>
taler-merchant&nbsp;1.6.9
<span class="sep">·</span>
taler-merchant-webui&nbsp;1.6.8~dev6
<span class="sep">·</span>
nginx&nbsp;1.26.3
<span class="sep">·</span>
debian&nbsp;trixie
<span class="sep">·</span>
landing&nbsp;/intro
</p>
<main>
<header class="hero">
<span class="badge">Merchant · dual currency</span>