mapshaper 0.7.0 → 0.7.2

package/www/docs/_assets/docs.css

@@ -0,0 +1,722 @@
+/* Mapshaper docs site
+ * Reuses the look-and-feel of mapshaper.org (page.css):
+ *   primary blue: #1385B7   accent: #10699b   bg: #f8fdff
+ */
+
+@font-face {
+  font-family: 'SourceSans3';
+  src: url('/assets/SourceSans3-VariableFont_wght.ttf') format('truetype');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/assets/jetbrains-mono-regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background-color: #f8fdff;
+  color: #333;
+  font: 16px/1.55 'SourceSans3', Arial, sans-serif;
+}
+
+a { color: #10699b; text-decoration: none; }
+a:hover { color: #1A6A96; text-decoration: underline; }
+
+code, pre, .mono {
+  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.88em;
+}
+
+/* --- Header ---------------------------------------------------------- */
+
+.page-header {
+  background-color: #1385B7;
+  color: white;
+  /* Asymmetric vertical padding (4px top, 8px bottom) optically centers the
+     baseline-aligned row: ascenders are taller than descenders, so equal
+     padding makes the text look ~2px low. */
+  padding: 2px 14px 8px;
+  height: 32px;
+  display: flex;
+  /* baseline-align so the 18px logo and the 14px nav text share a baseline,
+     not just a vertical center */
+  align-items: baseline;
+  gap: 14px;
+}
+
+.mapshaper-logo,
+.mapshaper-logo:hover {
+  font-weight: 600;
+  font-size: 18px;
+  color: white;
+  text-decoration: none;
+}
+
+.mapshaper-logo .logo-highlight { color: #ffa; }
+
+.header-section-label {
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(255,255,255,0.85);
+  border-left: 1px solid rgba(255,255,255,0.3);
+  padding-left: 14px;
+}
+
+.header-nav {
+  margin-left: auto;
+  display: flex;
+  gap: 4px;
+}
+
+.header-nav a,
+.header-nav a:hover {
+  color: white;
+  text-decoration: none;
+  font-size: 14px;
+  /* line-height: 1 keeps each anchor's hover background tight enough to fit
+     inside the 36px header once the row is baseline-aligned. */
+  line-height: 1;
+  padding: 6px 6px;
+  border-radius: 3px;
+}
+
+.header-nav a:hover { background-color: rgba(255,255,255,0.15); }
+
+.header-nav a.sponsor-link,
+.header-nav a.sponsor-link:hover { color: #ffa; }
+
+.header-nav a.sponsor-link svg {
+  width: 12px;
+  height: 12px;
+  fill: currentColor;
+  vertical-align: -1px;
+  margin-right: 2px;
+}
+
+/* --- Layout ---------------------------------------------------------- */
+
+.docs-layout {
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr) 220px;
+  gap: 32px;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 24px;
+  align-items: start;
+}
+
+.docs-sidebar {
+  position: sticky;
+  top: 24px;
+  align-self: start;
+  max-height: calc(100vh - 48px);
+  overflow-y: auto;
+}
+
+.sidebar-inner { padding-right: 8px; }
+
+.docs-main { min-width: 0; }
+
+.docs-article {
+  background: #fff;
+  border: 1px solid #e0e8ec;
+  border-radius: 4px;
+  padding: 28px 36px 36px;
+}
+
+.docs-toc {
+  position: sticky;
+  top: 24px;
+  align-self: start;
+  max-height: calc(100vh - 48px);
+  overflow-y: auto;
+  font-size: 14px;
+}
+
+@media (max-width: 1080px) {
+  .docs-layout { grid-template-columns: 220px minmax(0, 1fr); }
+  .docs-toc { display: none; }
+}
+
+@media (max-width: 720px) {
+  .docs-layout {
+    grid-template-columns: 1fr;
+    padding: 16px;
+    gap: 16px;
+  }
+  .docs-sidebar { position: static; max-height: none; }
+  .docs-article { padding: 20px; }
+}
+
+/* --- Sidebar nav ----------------------------------------------------- */
+
+.docs-nav h2 {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #888;
+  margin: 18px 0 6px;
+  font-weight: 600;
+}
+
+.docs-nav ul { list-style: none; padding: 0; margin: 0; }
+
+.docs-nav li { margin: 0; }
+
+.docs-nav a {
+  display: block;
+  /* Asymmetric vertical padding (6px top, 2px bottom) optically centers
+     the text inside the active/hover background. */
+  padding: 5px 8px 2px;
+  border-radius: 3px;
+  color: #333;
+  font-size: 14px;
+}
+
+.docs-nav a:hover {
+  background-color: #eaf3f7;
+  color: #10699b;
+  text-decoration: none;
+}
+
+.docs-nav a.is-active {
+  background-color: #1385B7;
+  color: white;
+  font-weight: 600;
+}
+
+.docs-nav .top-links { margin-bottom: 18px; }
+.docs-nav .top-links a { font-weight: 600; }
+
+/* --- TOC ------------------------------------------------------------- */
+
+.docs-toc-title {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #888;
+  margin: 0 0 8px;
+  font-weight: 600;
+}
+
+.docs-toc ul { list-style: none; padding: 0; margin: 0; }
+
+.docs-toc li { margin: 2px 0; }
+
+.docs-toc a {
+  color: #555;
+  display: block;
+  padding: 2px 6px;
+  border-left: 2px solid transparent;
+  line-height: 1.35;
+}
+
+.docs-toc a:hover {
+  color: #10699b;
+  border-left-color: #10699b;
+  text-decoration: none;
+}
+
+.docs-toc .lvl-3 { padding-left: 14px; font-size: 13px; }
+
+/* --- Article content ------------------------------------------------- */
+
+.docs-article h1 {
+  font-size: 32px;
+  font-weight: 600;
+  margin: 0 0 6px;
+  color: #1f2d33;
+  line-height: 1.2;
+}
+
+.docs-article > .lead {
+  font-size: 17px;
+  color: #555;
+  margin: 0 0 24px;
+}
+
+.docs-article h2 {
+  font-size: 22px;
+  font-weight: 600;
+  margin: 32px 0 10px;
+  padding-top: 8px;
+  color: #1f2d33;
+  border-top: 1px solid #eaeef0;
+  scroll-margin-top: 24px;
+}
+
+.docs-article h2:first-child,
+.docs-article h2:first-of-type:not(:first-child) { /* keep simple */ }
+
+.docs-article h3 {
+  font-size: 17px;
+  font-weight: 600;
+  margin: 22px 0 8px;
+  color: #1f2d33;
+  scroll-margin-top: 24px;
+}
+
+.docs-article h4 {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 18px 0 6px;
+  color: #1f2d33;
+}
+
+.docs-article p { margin: 10px 0; }
+
+.docs-article ul,
+.docs-article ol { margin: 10px 0; padding-left: 22px; }
+
+.docs-article li { margin: 4px 0; }
+
+.docs-article code {
+  background-color: #f3f6f8;
+  padding: 1px 5px;
+  border-radius: 3px;
+  border: 1px solid #e6ecef;
+  white-space: nowrap;
+}
+
+.docs-article pre {
+  background-color: #1e2a30;
+  color: #e9eef1;
+  padding: 14px 16px;
+  border-radius: 4px;
+  overflow-x: auto;
+  line-height: 1.5;
+}
+
+/* --- Copy-to-clipboard button on code blocks ------------------------- */
+
+.docs-article pre.has-copy-btn { position: relative; }
+
+.copy-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  padding: 3px 8px;
+  font: inherit;
+  font-size: 11px;
+  line-height: 1.2;
+  color: #cdd6da;
+  background-color: rgba(255,255,255,0.08);
+  border: 1px solid rgba(255,255,255,0.18);
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+.copy-btn:hover,
+.copy-btn:focus {
+  background-color: rgba(255,255,255,0.18);
+  color: #fff;
+  outline: none;
+}
+
+.copy-btn.is-flashing {
+  color: #cdeac8;
+  border-color: rgba(180, 230, 160, 0.4);
+}
+
+.docs-article pre code {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  white-space: pre;
+  color: inherit;
+}
+
+/* highlight.js theme overrides:
+ * Use the theme's per-token colors but keep our own pre/code background and
+ * padding (the theme would otherwise paint a different shade of dark behind
+ * the code and add inconsistent padding). */
+.docs-article pre code.hljs,
+.docs-article code.hljs {
+  background: transparent;
+  padding: 0;
+  color: inherit;
+}
+
+.docs-article blockquote {
+  border-left: 3px solid #1385B7;
+  margin: 14px 0;
+  padding: 4px 14px;
+  color: #444;
+  background-color: #f3f8fb;
+}
+
+.docs-article table {
+  border-collapse: collapse;
+  margin: 14px 0;
+  font-size: 14px;
+}
+
+.docs-article th,
+.docs-article td {
+  border: 1px solid #e0e8ec;
+  padding: 6px 10px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.docs-article th { background-color: #f3f6f8; font-weight: 600; }
+
+/* Wrapper for wide tables (e.g. the formats comparison matrix) so they
+ * scroll horizontally instead of overflowing the article on narrow screens. */
+.formats-table-wrap { overflow-x: auto; }
+.formats-table-wrap table { margin: 14px 0; }
+
+.docs-article hr {
+  border: 0;
+  border-top: 1px solid #e0e8ec;
+  margin: 28px 0;
+}
+
+/* Breadcrumbs */
+.docs-breadcrumbs {
+  font-size: 13px;
+  color: #888;
+  margin: 0 0 14px;
+}
+
+.docs-breadcrumbs a { color: #10699b; }
+
+/* Edit link footer */
+.edit-link {
+  margin-top: 36px;
+  padding-top: 14px;
+  border-top: 1px solid #eaeef0;
+  font-size: 13px;
+  color: #888;
+}
+
+/* --- Home page ------------------------------------------------------- */
+
+body.is-home .docs-article { padding: 32px 40px 40px; }
+
+.section-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 14px;
+  margin: 24px 0 12px;
+}
+
+.section-card {
+  display: block;
+  border: 1px solid #d9e3e8;
+  border-radius: 4px;
+  padding: 16px 18px;
+  background-color: #fff;
+  color: inherit;
+  transition: border-color 0.1s, box-shadow 0.1s;
+}
+
+.section-card:hover {
+  border-color: #1385B7;
+  box-shadow: 0 1px 4px rgba(19, 133, 183, 0.12);
+  text-decoration: none;
+  color: inherit;
+}
+
+.section-card .card-title {
+  font-weight: 600;
+  font-size: 16px;
+  color: #1f2d33;
+  margin: 0 0 4px;
+}
+
+.section-card .card-desc {
+  font-size: 14px;
+  color: #555;
+  margin: 0;
+}
+
+.quickstart {
+  background-color: #1e2a30;
+  color: #e9eef1;
+  border-radius: 4px;
+  padding: 18px 20px;
+  margin: 24px 0;
+}
+
+.quickstart h3 {
+  margin: 0 0 8px;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #9ec3d4;
+  font-weight: 600;
+}
+
+.quickstart pre {
+  margin: 0;
+  background: transparent;
+  padding: 0;
+}
+
+/* --- Command-reference search ---------------------------------------- */
+
+.cmd-search-wrap {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: #fff;
+  /* break out of the article's padding so the bottom border spans full width */
+  margin: 0 -36px 18px;
+  padding: 12px 36px 10px;
+  border-bottom: 1px solid #eaeef0;
+}
+
+.cmd-search-input {
+  width: 100%;
+  padding: 8px 12px;
+  font-family: inherit;
+  font-size: 15px;
+  color: inherit;
+  background-color: #fff;
+  border: 1px solid #c8d4d9;
+  border-radius: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.cmd-search-input:focus {
+  outline: none;
+  border-color: #1385B7;
+  box-shadow: 0 0 0 3px rgba(19, 133, 183, 0.2);
+}
+
+/* Floating dropdown of matching commands. Positioned just below the input
+ * within the sticky wrap, so it overlays page content rather than pushing
+ * sections out of the way. */
+.cmd-search-results {
+  position: absolute;
+  left: 36px;
+  right: 36px;
+  top: 100%;
+  margin-top: 4px;
+  background-color: #fff;
+  border: 1px solid #c8d4d9;
+  border-radius: 4px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+
+.cmd-search-status {
+  font-size: 13px;
+  color: #6a7a82;
+  padding: 6px 12px;
+  background-color: #f4f8fa;
+  border-bottom: 1px solid #eaeef0;
+}
+
+.cmd-search-list {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+  max-height: 360px;
+  overflow-y: auto;
+}
+
+.cmd-result {
+  margin: 0;
+}
+
+.cmd-result-link {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 6px 12px;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.cmd-result-link:hover {
+  text-decoration: none;
+}
+
+.cmd-result.is-active .cmd-result-link {
+  background-color: #e8f3f9;
+  color: #10699b;
+}
+
+.cmd-result-name {
+  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.92em;
+  color: #10699b;
+  white-space: nowrap;
+}
+
+.cmd-result.is-active .cmd-result-name {
+  color: inherit;
+}
+
+.cmd-result-cat {
+  margin-left: auto;
+  font-size: 12px;
+  color: #8a9aa3;
+  white-space: nowrap;
+}
+
+/* When the user clicks an anchor on the command reference page, leave room
+ * for the sticky search bar above the target heading so it doesn't end up
+ * hidden behind the bar. The :has() selector scopes the rule to the
+ * command reference article (the only one with a .cmd-search-wrap), so
+ * every id'd heading in that article -- including the prose headings
+ * above the first command (Conventions, Common options, Command files,
+ * Variable interpolation, Index of commands) -- gets the offset.
+ * scroll-margin-top has to live on the actual scroll target, which is the
+ * heading itself (the id is on the h2/h3/h4, not the wrapping section). */
+.docs-article:has(.cmd-search-wrap) :is(h2, h3, h4)[id],
+.docs-article:has(.cmd-search-wrap) .cmd-section {
+  scroll-margin-top: 76px;
+}
+
+@media (max-width: 720px) {
+  .cmd-search-wrap { margin: 0 -20px 14px; padding: 10px 20px 8px; }
+  .cmd-search-results { left: 20px; right: 20px; }
+  .docs-article:has(.cmd-search-wrap) :is(h2, h3, h4)[id],
+  .docs-article:has(.cmd-search-wrap) .cmd-section {
+    scroll-margin-top: 64px;
+  }
+}
+
+/* --- Gallery -------------------------------------------------------- */
+
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 18px;
+  margin: 20px 0 28px;
+}
+
+.gallery-tile {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #d9e3e8;
+  border-radius: 4px;
+  background-color: #fff;
+  color: inherit;
+  overflow: hidden;
+  transition: border-color 0.1s, box-shadow 0.1s;
+}
+
+.gallery-tile:hover {
+  border-color: #1385B7;
+  box-shadow: 0 2px 8px rgba(19, 133, 183, 0.15);
+  text-decoration: none;
+  color: inherit;
+}
+
+.gallery-tile-image {
+  background-color: #f3f6f8;
+  aspect-ratio: 3 / 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.gallery-tile-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+
+.gallery-tile-caption {
+  padding: 12px 14px 14px;
+}
+
+.gallery-tile-title {
+  font-weight: 600;
+  font-size: 15px;
+  color: #1f2d33;
+  margin: 0 0 4px;
+}
+
+.gallery-tile-desc {
+  font-size: 13px;
+  color: #555;
+  line-height: 1.4;
+}
+
+/* Home-page featured strip: same tile look, smaller grid, no descriptions. */
+.featured-maps {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 14px;
+  margin: 16px 0 8px;
+}
+
+.featured-maps .gallery-tile-image { aspect-ratio: 3 / 2; }
+.featured-maps .gallery-tile-caption { padding: 10px 12px 12px; }
+.featured-maps .gallery-tile-title { font-size: 14px; }
+
+.featured-maps-link {
+  margin: 0 0 16px;
+  font-size: 14px;
+}
+
+/* Example-page hero image: the <img> emitted by <!-- mapshaper:image -->.
+ * Targets the first paragraph that contains a single image inside an article.
+ * Keeps the image full-width but capped, with a subtle frame to match tiles. */
+.docs-article .example-hero,
+.docs-article p > img:only-child {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 16px auto;
+  background-color: #f3f6f8;
+  border: 1px solid #e0e8ec;
+  border-radius: 4px;
+}
+
+/* What's-new entries */
+.whats-new-entry {
+  border-left: 3px solid #1385B7;
+  padding: 4px 14px;
+  margin: 18px 0;
+  background-color: #f3f8fb;
+}
+
+.whats-new-entry .date {
+  font-size: 13px;
+  color: #777;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* --- Footer ---------------------------------------------------------- */
+
+.docs-footer {
+  border-top: 1px solid #e0e8ec;
+  margin-top: 24px;
+  padding: 16px 0;
+  background-color: #fff;
+}
+
+.docs-footer-inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 13px;
+  color: #777;
+}
+
+.docs-footer a { color: #777; }