diff --git a/static/css/library.css b/static/css/library.css index 55a835e..f3b6fcf 100644 --- a/static/css/library.css +++ b/static/css/library.css @@ -164,6 +164,109 @@ margin-bottom: 0.5rem; } +/* Per-shelf ornament sitting before the heading text. SVGs in + /images/dingbats/ painted via mask-image so they inherit + currentColor (→ the same muted tone as the heading). */ +.library-section-ornament { + display: inline-block; + width: 1em; + height: 1em; + margin-right: 0.5em; + background-color: currentColor; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; + vertical-align: -0.12em; +} + +.library-section-ornament[data-ornament="research"] { + mask-image: url('/images/dingbats/research.svg'); + -webkit-mask-image: url('/images/dingbats/research.svg'); +} +.library-section-ornament[data-ornament="nonfiction"] { + mask-image: url('/images/dingbats/nonfiction.svg'); + -webkit-mask-image: url('/images/dingbats/nonfiction.svg'); +} +.library-section-ornament[data-ornament="fiction"] { + mask-image: url('/images/dingbats/fiction.svg'); + -webkit-mask-image: url('/images/dingbats/fiction.svg'); +} +.library-section-ornament[data-ornament="poetry"] { + mask-image: url('/images/dingbats/poetry.svg'); + -webkit-mask-image: url('/images/dingbats/poetry.svg'); +} +.library-section-ornament[data-ornament="music"] { + mask-image: url('/images/dingbats/clef.svg'); + -webkit-mask-image: url('/images/dingbats/clef.svg'); +} +.library-section-ornament[data-ornament="ai"] { + mask-image: url('/images/dingbats/ai.svg'); + -webkit-mask-image: url('/images/dingbats/ai.svg'); +} +.library-section-ornament[data-ornament="tech"] { + mask-image: url('/images/dingbats/tech.svg'); + -webkit-mask-image: url('/images/dingbats/tech.svg'); +} +.library-section-ornament[data-ornament="miscellany"] { + mask-image: url('/images/dingbats/trefoil.svg'); + -webkit-mask-image: url('/images/dingbats/trefoil.svg'); +} + +/* Inter-shelf divider. Adjacent-sibling selector renders between + actually-emitted sections — a section hidden by its $if$ gate + leaves no orphan divider because it never hits the DOM. */ +.library-section + .library-section::before { + content: ""; + display: block; + width: 240px; + max-width: 60%; + height: 24px; + margin: 2.5rem auto; + color: var(--text-faint); + background-color: currentColor; + mask-image: url('/images/dingbats/library-divider.svg'); + -webkit-mask-image: url('/images/dingbats/library-divider.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; +} + +/* "More on this shelf →" link, shown when the portal has more + items than the shelf's cap. Right-aligned, italic, subdued. */ +.library-more { + text-align: right; + font-family: var(--font-serif); + font-style: italic; + font-size: 0.9rem; + color: var(--text-muted); + margin: 0.65rem 0 0; +} + +.library-more a { + color: inherit; + text-decoration: underline; + text-decoration-color: var(--border); + text-decoration-thickness: 0.08em; + text-underline-offset: 0.2em; + transition: color var(--transition-fast), text-decoration-color var(--transition-fast); +} + +.library-more a:hover { + color: var(--text); + text-decoration-color: var(--border-muted); +} + +/* Leading blockquote above the shelves, lifted from content/library.md. */ +.library-intro { + margin: 0.5rem 0 2rem; +} + .library-section h2 a { color: inherit; text-decoration: none; diff --git a/static/images/dingbats/fiction.svg b/static/images/dingbats/fiction.svg new file mode 100644 index 0000000..44a3fee --- /dev/null +++ b/static/images/dingbats/fiction.svg @@ -0,0 +1,5 @@ + diff --git a/static/images/dingbats/library-divider.svg b/static/images/dingbats/library-divider.svg new file mode 100644 index 0000000..f5c3076 --- /dev/null +++ b/static/images/dingbats/library-divider.svg @@ -0,0 +1,7 @@ + diff --git a/static/images/dingbats/nonfiction.svg b/static/images/dingbats/nonfiction.svg new file mode 100644 index 0000000..e31b6f3 --- /dev/null +++ b/static/images/dingbats/nonfiction.svg @@ -0,0 +1,6 @@ + diff --git a/static/images/dingbats/poetry.svg b/static/images/dingbats/poetry.svg new file mode 100644 index 0000000..3c9f580 --- /dev/null +++ b/static/images/dingbats/poetry.svg @@ -0,0 +1,8 @@ + diff --git a/static/images/dingbats/research.svg b/static/images/dingbats/research.svg new file mode 100644 index 0000000..7695c1e --- /dev/null +++ b/static/images/dingbats/research.svg @@ -0,0 +1,6 @@ + diff --git a/templates/library.html b/templates/library.html index 2eb008d..13a06c9 100644 --- a/templates/library.html +++ b/templates/library.html @@ -1,95 +1,125 @@