aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--src/templates/coins-designs.html.tmpl24
-rw-r--r--src/templates/language.html.tmpl4
-rw-r--r--static/style.css23
3 files changed, 27 insertions, 24 deletions
diff --git a/src/templates/coins-designs.html.tmpl b/src/templates/coins-designs.html.tmpl
index def1e98..83164f3 100644
--- a/src/templates/coins-designs.html.tmpl
+++ b/src/templates/coins-designs.html.tmpl
@@ -1,3 +1,24 @@
+{{ define "header" }}
+<style>
+ .country-grid {
+ --button-min-width: 20ch;
+
+ row-gap: var(--spacing);
+
+ a {
+ display: flex;
+ padding-left: 0;
+ padding-block: 1ch;
+
+ > :first-child {
+ font-weight: bold;
+ width: calc(var(--form-element-spacing-horizontal) * 2 + 2ch);
+ }
+ }
+ }
+</style>
+{{ end }}
+
{{ define "content" }}
<header>
{{ template "navbar" . }}
@@ -17,7 +38,8 @@
role="button"
href="/coins/designs/{{ .Code }}"
>
- {{ .Name }}
+ <span>{{ .Code | toUpper }}</span>
+ <span>{{ .Name }}</span>
</a>
{{ end }}
</div>
diff --git a/src/templates/language.html.tmpl b/src/templates/language.html.tmpl
index c67ca11..e8d8863 100644
--- a/src/templates/language.html.tmpl
+++ b/src/templates/language.html.tmpl
@@ -9,6 +9,8 @@
}
.lang-grid {
+ --button-min-width: 22ch;
+
button {
display: flex;
align-items: center;
@@ -18,7 +20,7 @@
> :first-child {
font-size: 2em;
font-weight: 600; /* Between normal and bold */
- width: calc(var(--form-element-spacing-horizontal) * 2 + 2ch);
+ min-width: calc(var(--form-element-spacing-horizontal) * 2 + 2ch);
}
> :nth-child(2) {
text-align: left;
diff --git a/static/style.css b/static/style.css
index 0834d0e..e478306 100644
--- a/static/style.css
+++ b/static/style.css
@@ -2147,36 +2147,15 @@ textarea,
min-width: 0;
}
-.country-grid {
- row-gap: var(--grid-spacing-vertical);
-}
-
-.country-grid:first-of-type {
- margin-top: var(--block-spacing-vertical);
-}
-
.button-grid {
display: grid;
grid-template-columns: repeat(
auto-fit,
- minmax(min(220px, 100%), 1fr)
+ minmax(min(var(--button-min-width), 100%), 1fr)
);
column-gap: var(--grid-spacing-horizontal);
}
-.country-grid a {
- display: flex;
- align-items: center;
- padding-left: 0;
-}
-
-.country-grid a::before {
- content: attr(data-code);
- font-weight: bold;
- width: 2ch;
- width: calc(var(--form-element-spacing-horizontal) * 2 + 2ch);
-}
-
#nav-icon-lang a {
display: flex;
align-items: center;