diff options
Diffstat (limited to 'src/templates/coins-designs.html.tmpl')
| -rw-r--r-- | src/templates/coins-designs.html.tmpl | 48 |
1 files changed, 32 insertions, 16 deletions
diff --git a/src/templates/coins-designs.html.tmpl b/src/templates/coins-designs.html.tmpl index 05ff440..33b0841 100644 --- a/src/templates/coins-designs.html.tmpl +++ b/src/templates/coins-designs.html.tmpl @@ -1,31 +1,47 @@ +{{ define "header" }} +{{ template "header-navbar" . }} + +<style> + .country-grid { + --button-min-width: 20ch; + + a { + display: flex; + padding-block: 1ch; + + > :first-child { + text-align: left; + font-weight: bold; + width: calc(var(--pico-form-element-spacing-horizontal) + 2ch); + } + } + } +</style> +{{ end }} + {{ define "content" }} -<header> +<header class="container"> {{ template "navbar" . }} - <h1>{{ .T "Euro Coin Designs" }}</h1> + <h1>{{ .Get "Euro Coin Designs" }}</h1> </header> -<main> +<main class="container"> <p> - {{ .T ` - Here you’ll be able to view all the coin designs for each country - in the Eurozone. This section of the site doesn’t include minor - varieties such as different mintmarks or errors; those are on the - %svarieties%s page.` - `<a href="/coins/varieties">` `</a>` | safe - }} + {{ .Get "Here you’ll be able to view all the coin designs for each country in the Eurozone. This section of the site doesn’t include minor varieties such as different mintmarks or errors; those are on the {Link:l}varieties{-:E} page." + (map "Link" "/coins/varieties") }} </p> <hr /> - <div class="country-grid"> - {{ $p := .Printer }} + <div class="button-grid country-grid"> {{ range .Countries }} <a class="outline" - data-code={{ toUpper .Code }} + data-code="{{ toUpper .Code }}" role="button" - href=/coins/designs/{{ .Code }} + href="/coins/designs/{{ .Code }}" > - {{ $p.T .Name }} + <span>{{ .Code | toUpper }}</span> + <span>{{ .Name }}</span> </a> {{ end }} </div> </main> -{{ end }}
\ No newline at end of file +{{ end }} |