diff options
Diffstat (limited to 'static/style.css')
-rw-r--r-- | static/style.css | 136 |
1 files changed, 24 insertions, 112 deletions
diff --git a/static/style.css b/static/style.css index 2ceee0c..141f3e0 100644 --- a/static/style.css +++ b/static/style.css @@ -27,34 +27,31 @@ */ @font-face { - font-family: 'Ysabeau Office'; - src: url('/fonts/ysabeau-office-regular.otf') format('opentype'); - font-weight: normal; + font-family: 'Source Sans 3'; + src: url('/fonts/source-sans-3-normal.otf') format('opentype'); font-style: normal; } @font-face { - font-family: 'Ysabeau Office'; - src: url('/fonts/ysabeau-office-regular-italic.otf') format('opentype'); - font-weight: normal; + font-family: 'Source Sans 3'; + src: url('/fonts/source-sans-3-italic.otf') format('opentype'); font-style: italic; } @font-face { - font-family: 'Source Sans 3'; - src: url('/fonts/source-sans-3-regular.otf') format('opentype'); + font-family: 'Source Serif 4'; + src: url('/fonts/source-serif-4-normal.otf') format('opentype'); font-style: normal; } @font-face { - font-family: 'Source Sans 3'; - src: url('/fonts/source-sans-3-italic.otf') format('opentype'); + font-family: 'Source Serif 4'; + src: url('/fonts/source-serif-4-italic.otf') format('opentype'); font-style: italic; } :root { - --font-family: 'Source Sans 3', sans-serif, 'Apple Color Emoji', - 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-family: 'Source Sans 3', sans-serif; --line-height: 1.5; --font-weight: 400; --font-size: 16px; @@ -153,6 +150,7 @@ h4, h5, h6 { --font-weight: 500; + --font-family: 'Source Serif 4', serif; } h1 { @@ -464,6 +462,7 @@ main, header { body { width: 100%; margin: 0; + hyphens: auto; } body > header, body > main, @@ -522,10 +521,12 @@ section { figure { display: block; margin: 0; + margin-bottom: var(--typography-spacing-vertical); padding: 0; overflow-x: auto; } figure figcaption { + text-align: center; padding: calc(var(--spacing) * 0.5) 0; color: var(--muted-color); } @@ -557,7 +558,6 @@ sup { address, blockquote, dl, -figure, form, ol, p, @@ -2149,88 +2149,19 @@ textarea, min-width: 0; } -.country-grid, .series-grid { - row-gap: var(--grid-spacing-vertical); -} - -.country-grid:first-of-type, .series-grid:first-of-type { - margin-top: var(--block-spacing-vertical); -} - -.country-grid, .series-grid, .lang-grid { +.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, .lang-grid button { - text-align: left; -} - -.country-grid a::before, .lang-grid span::before { - display: inline-block; - content: attr(data-code); - font-weight: bold; - width: 4ch; -} - -#nav-icon-lang a { - display: flex; - align-items: center; - gap: .5ch; -} - -#nav-icon-lang svg { - stroke: var(--color); - height: 1rem; -} - -#nav-icon-theme button { - background-color: unset; - margin: 0; - display: flex; - justify-content: center; - align-items: center; - height: 1.5rem; -} - -#nav-icon-theme svg { - --size: 1.2rem; - stroke: var(--primary); - stroke-width: .1; - height: var(--size); - width: var(--size); -} - -[data-theme="light"] #nav-icon-theme svg { - fill: var(--primary); -} - :is(td, th)[data-numeric] { text-align: right; } -#article-list td:first-child { - text-align: right; - width: 14ch; -} - -#article-list td { - white-space: nowrap; -} - -.mintage-table .mintage-table-cc { - white-space: nowrap; -} - -.mintage-table tr :is(th, td):not(:first-child), -.mintage-table-cc tr :is(th, td):last-child { - text-align: right; -} - a[role=button].outline { --background-color: transparent; --color: var(--primary); @@ -2241,23 +2172,18 @@ a[role=button].outline:is(:hover, :active, :focus) { --color: var(--primary-hover); } -.bnote-design-container { - gap: 5%; -} - -.bnote-design-container > img { - width: 100%; -} - -.design-container, -.bnote-design-container { +.design-container { display: flex; justify-content: space-around; align-items: center; -} -.design-container + :is(.design-container, p) { - margin-top: var(--block-spacing-vertical); + > * { + width: 30%; + } + + + :is(.design-container, p) { + margin-top: var(--block-spacing-vertical); + } } img.big { @@ -2268,20 +2194,6 @@ div.grid:not(:first-of-type) { margin-top: var(--grid-spacing-vertical); } -dl.unix-style { - display: grid; - grid-template-columns: max-content auto; - row-gap: var(--spacing); -} - -dl.unix-style dt { - grid-column-start: 1; -} - -dl.unix-style dd { - grid-column-start: 2; -} - dl dt:not(:first-child) { margin-top: var(--block-spacing-vertical); } @@ -2297,7 +2209,7 @@ dl dt:not(:first-child) { * </h3> */ -*:has(> .translation) { +:has(> .translation) { line-height: 1.1; } |