/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ /* ============================================================ tourblog logbook design (serif body, mono only for chrome). Palettes are CSS custom properties switched by data-palette on (see palette.js). Manila is the default. Which palettes are offered + the default come from the config; the colours live here. ============================================================ */ /* ---- palette tokens (Manila is the default) ---- */ :root { --page: #c9c1a6; --card: #f4f0e3; --ink: #332d27; --muted: #6f6857; --accent: #8a3526; --link: #7a2d23; --rule: #cabf9f; --line: #5e5135; --sect: #ddd1ae; --rowodd: #f7f3e7; --roweven: #efe9d8; --box: #f0ead8; --headrow: #e3dac2; /* freshness badges: semantic colours, shared across all palettes (the palette blocks below deliberately don't re-theme these) */ --new: #cf2a2a; --updated: #2d54a8; /* fonts: serif everywhere, mono ONLY for techy chrome (palette bar, map caption + [map] tab, footer, figure captions) */ --ff: Georgia, "Palatino Linotype", Palatino, serif; --mf: "Courier New", ui-monospace, monospace; } :root[data-palette="silver"] { --page: #c4c5c9; --card: #f3f3f4; --ink: #2a2b2e; --muted: #63646a; --accent: #3f4a63; --link: #2a3f7a; --rule: #cfcfd3; --line: #6b6c74; --sect: #d1d2db; --rowodd: #f7f7f8; --roweven: #ecedf0; --box: #eceef1; --headrow: #dddee3; } :root[data-palette="ledger"] { --page: #c4cfb9; --card: #eef3e6; --ink: #26302a; --muted: #5a6655; --accent: #3a5a3c; --link: #2f5d3a; --rule: #c2cdb4; --line: #4e5a48; --sect: #cddabd; --rowodd: #f1f5ec; --roweven: #e6eddd; --box: #e6ecdb; --headrow: #d6e0c9; } :root[data-palette="newsprint"] { --page: #d4d2cb; --card: #faf9f5; --ink: #1a1a1a; --muted: #565651; --accent: #1a1a1a; --link: #15389c; --rule: #bdbcb4; --line: #2b2b27; --sect: #d7d5c8; --rowodd: #fbfaf6; --roweven: #f0eee7; --box: #efeee7; --headrow: #e2e0d7; } /* ---- page ---- */ * { box-sizing: border-box; } body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--ff); padding: 26px 18px; } a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } /* ---- palette switcher (mono) ---- */ .toolbar { max-width: 880px; margin: 0 auto 14px; display: flex; align-items: center; gap: 8px; font-family: var(--mf); font-size: 12px; color: var(--muted); } .toolbar button { font-family: var(--mf); font-size: 12px; padding: 3px 11px; background: var(--box); color: var(--ink); border: 2px outset var(--rule); cursor: pointer; } .toolbar button[aria-pressed="true"] { background: var(--line); color: var(--card); border-style: inset; font-weight: 700; } /* ---- card shell ---- */ .card { max-width: 880px; margin: 0 auto; background: var(--card); border: 1px solid var(--rule); box-shadow: 4px 4px rgba(0, 0, 0, 0.1); padding: 30px 36px 26px; } /* ---- masthead (centered, serif) ---- */ .masthead { text-align: center; border-bottom: 1px solid var(--rule); padding-bottom: 18px; } .masthead .marks { color: var(--accent); letter-spacing: 0.45em; font-size: 13px; } .masthead h1 { font-size: 36px; font-weight: 700; letter-spacing: 0.01em; margin: 5px 0 0; } .masthead h1 a { color: var(--ink); text-decoration: none; } .masthead .subtitle { color: var(--muted); font-size: 16px; margin-top: 5px; } .masthead .nav { margin-top: 13px; font-size: 14px; } .masthead .nav .sep { color: var(--rule); margin: 0 6px; } /* unused until the nav gains a 2nd link (About) */ /* ---- marquee ticker (decorative; serif here) ---- */ .marquee { overflow: hidden; border: 2px solid var(--rule); background: var(--box); padding: 3px 0; margin-top: 16px; } /* padding-left: 100% is container-relative (unlike translateX %), so the text starts at the far-right edge whatever its length; translateX(-100%) then carries the whole span (container width + text) fully off the left. */ .marquee span { display: inline-block; white-space: nowrap; padding-left: 100%; color: var(--accent); font-size: 12px; animation: marq 25s linear infinite; } @keyframes marq { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* Respect a reader's reduced-motion preference: stop the scroll and pin the text to the left so it stays readable. */ @media (prefers-reduced-motion: reduce) { .marquee span { animation: none; padding-left: 0; } } /* ---- map: a semantic
wrapping the framed Leaflet #map.world-map div and its
. The [map] tab is a sibling overlay kept out of Leaflet's container (so Leaflet can own #map cleanly); its z-index sits above Leaflet's panes and controls. ---- */ figure.mapfig { margin: 20px 0 0; /* reset the browser default figure margin; space above */ } .map { position: relative; border: 1px solid var(--rule); background: var(--box); } .map .world-map { height: 350px; } /* Leaflet needs an explicit height */ .map .tab { position: absolute; top: 0; left: 0; z-index: 1100; font-family: var(--mf); font-size: 11px; color: var(--muted); background: var(--card); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 2px 9px; } .mapcaption { margin-top: 7px; text-align: center; } .mapcaption .hint { display: block; text-align: right; font-family: var(--mf); font-size: 11px; color: var(--muted); } .mapcaption .text { display: block; font-family: var(--ff); font-size: 16px; color: var(--muted); margin-top: 4px; } /* ---- distance so far (one line, under the map, serif) ---- */ .distance { text-align: center; margin-top: 12px; font-size: 14px; } .distance .label { font-size: 12px; letter-spacing: 0.1em; color: var(--accent); margin-right: 8px; } .distance .total { font-weight: 700; } .distance .mi { color: var(--muted); } /* ---- POSTS heading ---- */ .posts-head { margin: 16px 0 16px; } .posts-head span { font-size: 13px; letter-spacing: 0.16em; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 4px; } /* ---- posts / itinerary table ---- */ table.posts { width: 100%; border-collapse: collapse; font-size: 14px; border: 1px solid var(--line); } .posts thead th { background: var(--headrow); font-weight: 400; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); border-bottom: 2px solid var(--line); padding: 6px 10px; text-align: left; } .posts th.num, .posts th.km, .posts th.total { text-align: right; } .posts td { padding: 5px 10px; border-bottom: 1px solid var(--line); } .posts td.num { text-align: right; font-size: 13px; color: var(--muted); } .posts td.date { font-size: 13px; } .posts td.km, .posts td.total { text-align: right; } .posts tr.rowA td { background: var(--rowodd); } .posts tr.rowB td { background: var(--roweven); } /* country / section divider rows */ .posts tr.section td { background: var(--sect); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 7px 10px; } .posts tr.section .name { font-weight: 700; font-size: 15px; letter-spacing: 0.04em; } .posts tr.section a.name { color: var(--ink); text-underline-offset: 3px; } .posts tr.section .km { text-align: right; font-size: 12px; letter-spacing: 0.04em; color: var(--accent); } /* freshness badges: hidden by default, revealed by tags.js only when the reader's date is within the window of the badge's date (keeps the page static, since the HTML always carries them). */ .tag { display: none; font-family: var(--mf); font-size: 10px; font-weight: 700; margin-left: 6px; } .tag[data-show="1"] { display: inline; } .tag.new { color: var(--new); } .tag.updated { color: var(--updated); } /* ---- footer (mono) ---- */ .footer { border-top: 1px solid var(--rule); margin-top: 22px; padding-top: 13px; } .footer .marks { text-align: center; color: var(--accent); font-size: 12px; letter-spacing: 0.3em; } .footer .meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-family: var(--mf); font-size: 11px; color: var(--muted); margin-top: 9px; } /* ---- post & section article pages ---- */ /* TODO: style the Markdown body elements. Only `p` and `figure` are styled here, so post bodies with h2/h3, ul/ol, blockquote, code/pre or tables fall back to browser defaults. Needs a typography pass. */ .crumbs { font-family: var(--mf); font-size: 11px; color: var(--muted); margin-top: 10px; } article h1 { font-size: 33px; line-height: 1.12; margin: 14px 0 0; } article .subtitle { font-style: italic; color: var(--muted); font-size: 17px; margin: 6px 0 0; } article .meta { font-size: 13px; color: var(--accent); margin: 12px 0 0; } article p { font-size: 17px; line-height: 1.62; } article figure img, article figure video { max-width: 100%; height: auto; } article figure { background: var(--box); border: 1px solid var(--rule); padding: 10px 10px 6px; margin: 18px 0; } article figure figcaption { font-family: var(--ff); font-size: 16px; color: var(--muted); margin-top: 8px; text-align: center; } nav.post-nav { display: flex; justify-content: space-between; font-size: 16px; border-top: 1px solid var(--rule); margin-top: 24px; padding-top: 16px; } /* ---- mobile ---- */ @media (max-width: 600px) { body { padding: 16px 8px; } .card { padding: 24px 18px 26px; } table.posts { font-size: 13px; } .posts th, .posts td { padding: 5px 8px; } .posts th.date, .posts td.date { font-size: 12px; } }