diff options
| author | Anton Medvedev <anton@medv.io> | 2025-12-07 20:46:59 +0100 |
|---|---|---|
| committer | Anton Medvedev <anton@medv.io> | 2025-12-07 20:46:59 +0100 |
| commit | 2943298cbb12fca5b720c877fcdfcde08e65c8d8 (patch) | |
| tree | 3e180b1c0d486c6e6e4ebad7d90ea9c11d51e052 | |
| parent | fab08ab9b0b1f159515290080b24d9dad6c6666f (diff) | |
Refactor menu layout: restructure `.menu` and `.menu-content`, enhance styling with better alignment and max-width constraint.
| -rw-r--r-- | pkg/templates/layout.gohtml | 77 |
1 files changed, 42 insertions, 35 deletions
diff --git a/pkg/templates/layout.gohtml b/pkg/templates/layout.gohtml index 9712577..cefc24d 100644 --- a/pkg/templates/layout.gohtml +++ b/pkg/templates/layout.gohtml @@ -114,14 +114,19 @@ } .menu { + background-color: var(--c-bg-alt); + border-bottom: 1px solid var(--c-divider); + overflow-x: auto; + } + + .menu-content { display: flex; flex-direction: row; align-items: center; gap: 16px; - background-color: var(--c-bg-alt); - border-bottom: 1px solid var(--c-divider); padding-inline: 16px; - overflow-x: auto; + max-width: var(--max-content-width); + margin-inline: auto; } .menu-item { @@ -266,38 +271,40 @@ <body> {{ template "svg" . }} <div class="menu"> - <a href="{{ .RootHref }}index.html" class="project-name">{{ .Name }}</a> - <div class="menu-item {{ if eq .Selected "code" }}selected{{ end }}"> - <a href="{{ .RootHref }}blob/{{ .CurrentRefDir }}/index.html"> - <svg aria-hidden="true" width="16" height="16"> - <use xlink:href="#code"></use> - </svg> - Code - </a> - </div> - <div class="menu-item {{ if eq .Selected "branches" }}selected{{ end }}"> - <a href="{{ .RootHref }}branches.html"> - <svg aria-hidden="true" focusable="false" width="16" height="16"> - <use xlink:href="#branch"></use> - </svg> - Branches - </a> - </div> - <div class="menu-item {{ if eq .Selected "tags" }}selected{{ end }}"> - <a href="{{ .RootHref }}tags.html"> - <svg aria-hidden="true" focusable="false" width="16" height="16"> - <use xlink:href="#tag"></use> - </svg> - Tags - </a> - </div> - <div class="menu-item {{ if eq .Selected "commits" }}selected{{ end }}"> - <a href="{{ .RootHref }}commits/{{ .CurrentRefDir }}/index.html"> - <svg aria-hidden="true" focusable="false" width="16" height="16"> - <use xlink:href="#commit"></use> - </svg> - Commits - </a> + <div class="menu-content"> + <a href="{{ .RootHref }}index.html" class="project-name">{{ .Name }}</a> + <div class="menu-item {{ if eq .Selected "code" }}selected{{ end }}"> + <a href="{{ .RootHref }}blob/{{ .CurrentRefDir }}/index.html"> + <svg aria-hidden="true" width="16" height="16"> + <use xlink:href="#code"></use> + </svg> + Code + </a> + </div> + <div class="menu-item {{ if eq .Selected "branches" }}selected{{ end }}"> + <a href="{{ .RootHref }}branches.html"> + <svg aria-hidden="true" focusable="false" width="16" height="16"> + <use xlink:href="#branch"></use> + </svg> + Branches + </a> + </div> + <div class="menu-item {{ if eq .Selected "tags" }}selected{{ end }}"> + <a href="{{ .RootHref }}tags.html"> + <svg aria-hidden="true" focusable="false" width="16" height="16"> + <use xlink:href="#tag"></use> + </svg> + Tags + </a> + </div> + <div class="menu-item {{ if eq .Selected "commits" }}selected{{ end }}"> + <a href="{{ .RootHref }}commits/{{ .CurrentRefDir }}/index.html"> + <svg aria-hidden="true" focusable="false" width="16" height="16"> + <use xlink:href="#commit"></use> + </svg> + Commits + </a> + </div> </div> </div> <main> |