diff options
| -rw-r--r-- | static/style.css | 37 | ||||
| -rw-r--r-- | templates/_header.tmpl | 8 |
2 files changed, 41 insertions, 4 deletions
diff --git a/static/style.css b/static/style.css index 4f84182..6645af4 100644 --- a/static/style.css +++ b/static/style.css @@ -386,16 +386,45 @@ a.btn, a.btn-white, a.btn-danger, a.btn-normal, a.btn-primary { header#main-header { background-color: var(--lighter-box-background-color); display: flex; + flex-direction: row; + align-items: center; justify-content: space-between; + flex-wrap: wrap; + padding: 0.625rem 1rem; + gap: 0.5rem; +} +#main-header-forge-title { + white-space: nowrap; +} +#breadcrumb-nav { + display: flex; align-items: center; - padding: 10px; + flex: 1 1 auto; + min-width: 0; + overflow-x: auto; + font-size: 0.9rem; + gap: 0.25rem; + white-space: nowrap; } -header#main-header > div#main-header-forge-title { - flex-grow: 1; +.breadcrumb-separator { + margin: 0 0.25rem; } -header#main-header > div#main-header-user { +#main-header-user { display: flex; align-items: center; + white-space: nowrap; + font-size: 0.95rem; +} +@media (max-width: 37.5rem) { + header#main-header { + flex-direction: column; + align-items: flex-start; + } + + #breadcrumb-nav { + width: 100%; + overflow-x: auto; + } } /* Uncategorized */ diff --git a/templates/_header.tmpl b/templates/_header.tmpl index 6a20f55..8265422 100644 --- a/templates/_header.tmpl +++ b/templates/_header.tmpl @@ -7,6 +7,14 @@ <div id="main-header-forge-title"> <a href="/">{{- .global.forge_title -}}</a> </div> + <nav id="breadcrumb-nav"> + {{- $path := "" -}} + {{- range $i, $segment := .url_segments -}} + {{- $path = printf "%s/%s" $path $segment -}} + <span class="breadcrumb-separator">/</span> + <a href="{{ $path }}">{{ $segment }}</a> + {{- end -}} + </nav> <div id="main-header-user"> {{- if ne .user_id_string "" -}} <a href="/:/users/{{- .user_id_string -}}">{{- .username -}}</a> |