happyDomain/website
2
0
Fork 0
Code Issues Pull requests Releases Activity

Redesign breadcrumbs with brand-tinted band and persona pills
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
nemunaire 2026-06-12 12:57:07 +09:00
commit 2272761843
3 changed files with 195 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

18
layouts/partials/breadcrumbs.html
View file

@ -1,6 +1,14 @@
<nav aria-label="breadcrumb" style="background-color: #e9ecef; padding-top: 64px">
<ol class="breadcrumb container">
<li class="breadcrumb-item"><a href="../">{{ i18n "home" }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
</ol>
<nav class="hd-breadcrumb" aria-label="breadcrumb">
<div class="container">
<ol class="hd-breadcrumb__trail">
<li>
<a href="/{{ .Site.Language.Lang }}/">
<i class="bi bi-house-door-fill"></i> {{ i18n "home" }}
</a>
</li>
<li>
<span class="current" aria-current="page">{{ .Title }}</span>
</li>
</ol>
</div>
</nav>

46
layouts/partials/breadcrumbs_usage.html
View file

@ -1,14 +1,36 @@
<nav aria-label="breadcrumb" style="background-color: #e9ecef; padding-top: 64px">
<div class="container d-flex gap-1">
<div class="align-self-center">
{{ i18n "usage-discover-pre" }} <span style="font-family: var(--hd-font-brand)">happy<strong>Domain</strong></span> {{ i18n "usage-discover-post" }}
</div>
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/freelance" }}">{{ i18n "freelance" }}</a></li>
<li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/sysadmin" }}">{{ i18n "sysadmin" }}</a></li>
<li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/devops" }}">{{ i18n "devops" }}</a></li>
<li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/cio" }}">{{ i18n "cio" }}</a></li>
<li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/geek" }}">{{ i18n "geek" }}</a></li>
</ol>
<nav class="hd-breadcrumb hd-breadcrumb--usage" aria-label="breadcrumb">
<div class="hd-breadcrumb__row container">
<p class="hd-breadcrumb__lead">
{{ i18n "usage-discover-pre" }}
<span class="brand">happy<strong>Domain</strong></span>
{{ i18n "usage-discover-post" }}
</p>
<ul class="hd-breadcrumb__personas">
<li>
<a href="{{ ref . "/use-happyDomain/freelance" }}">
<i class="bi bi-person-workspace"></i> {{ i18n "freelance" }}
</a>
</li>
<li>
<a href="{{ ref . "/use-happyDomain/sysadmin" }}">
<i class="bi bi-hdd-rack"></i> {{ i18n "sysadmin" }}
</a>
</li>
<li>
<a href="{{ ref . "/use-happyDomain/devops" }}">
<i class="bi bi-infinity"></i> {{ i18n "devops" }}
</a>
</li>
<li>
<a href="{{ ref . "/use-happyDomain/cio" }}">
<i class="bi bi-building"></i> {{ i18n "cio" }}
</a>
</li>
<li>
<a href="{{ ref . "/use-happyDomain/geek" }}">
<i class="bi bi-controller"></i> {{ i18n "geek" }}
</a>
</li>
</ul>
</div>
</nav>

148
static/css/custom.css
View file

@ -93,6 +93,153 @@ nav.navbar.scrolled {
border-bottom: 1px solid var(--hd-accent);
}
/* ── Page breadcrumb band ──
Sits directly under the fixed navbar (64px tall) and gives pages a proper
header strip: a soft brand-tinted band with a clickable trail. */
.hd-breadcrumb {
position: relative;
padding-top: calc(64px + 30px);
padding-bottom: 26px;
background:
radial-gradient(
120% 160% at 0% 0%,
var(--hd-accent-subtle) 0%,
transparent 52%
),
linear-gradient(
180deg,
var(--hd-bg-subtle) 0%,
var(--hd-bg-canvas) 100%
);
border-bottom: 1px solid var(--hd-border-1);
overflow: hidden;
}
/* Thin accent rule along the bottom edge */
.hd-breadcrumb::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 180px;
height: 2px;
background: linear-gradient(
90deg,
var(--hd-accent) 0%,
var(--hd-brand-dark) 100%
);
}
.hd-breadcrumb__trail {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.8125rem;
line-height: 1;
}
.hd-breadcrumb__trail li {
display: inline-flex;
align-items: center;
}
.hd-breadcrumb__trail li + li::before {
content: "";
width: 6px;
height: 6px;
margin: 0 6px;
border-right: 1.5px solid var(--hd-border-3);
border-bottom: 1.5px solid var(--hd-border-3);
transform: rotate(-45deg);
}
.hd-breadcrumb__trail a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--hd-fg-3);
text-decoration: none;
font-weight: 500;
padding: 4px 9px;
border-radius: var(--hd-radius);
transition:
color 0.15s,
background-color 0.15s;
}
.hd-breadcrumb__trail a:hover {
color: var(--hd-accent);
background: var(--hd-accent-subtle);
}
.hd-breadcrumb__trail .bi {
font-size: 0.875rem;
}
.hd-breadcrumb__trail .current {
color: var(--hd-fg-1);
font-weight: 600;
padding: 4px 2px;
}
/* ── Usage / persona breadcrumb band (row of persona pills) ── */
.hd-breadcrumb--usage .hd-breadcrumb__row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px 18px;
}
.hd-breadcrumb__lead {
font-size: 0.9375rem;
color: var(--hd-fg-2);
margin: 0;
}
.hd-breadcrumb__lead .brand {
font-family: var(--hd-font-brand);
color: var(--hd-fg-1);
}
.hd-breadcrumb__personas {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.hd-breadcrumb__personas a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--hd-fg-2);
text-decoration: none;
padding: 6px 13px;
background: var(--hd-bg-canvas);
border: 1px solid var(--hd-border-1);
border-radius: var(--hd-radius-full);
transition:
color 0.15s,
border-color 0.15s,
background-color 0.15s,
transform 0.15s;
}
.hd-breadcrumb__personas a:hover {
color: var(--hd-accent);
border-color: var(--hd-accent-border);
background: var(--hd-accent-subtle);
transform: translateY(-1px);
}
a.card {
background: var(--hd-bg-subtle);
transition: transform 250ms;
@ -143,6 +290,7 @@ a.card:hover {
.text-hilight {
background-color: yellow;
color: black !important;
}
#voxppl {