mapshaper 0.7.0 → 0.7.2

package/www/page.css

@@ -143,7 +143,7 @@ body.map-view {
 	left: 0;
 	z-index: 40;
 	width: 100%;
-	height: 29px;
+	height: 30px;
 }
 
 .mapshaper-logo {
@@ -170,7 +170,7 @@ body.map-view {
 	position: absolute;
 	top: 0px;
 	right: 0px;
-	margin: 0 6px 3px 0;	
+	margin: 0 3px 3px 0;
 }
 
 .btn.header-btn {
@@ -207,6 +207,63 @@ body.map-view {
 	vertical-align: -1px;
 }
 
+/* --- Hamburger menu (post-edit overflow links) --- */
+
+#header-menu-btn {
+	cursor: pointer;
+	padding: 8px 7px 4px 7px;
+	user-select: none;
+	/* All header buttons are 29px tall, so top-align the hamburger to keep its
+	   row baseline-neutral. Without this, the SVG-only button (no text) makes
+	   its inline-block baseline = bottom edge, which drags the surrounding
+	   text-containing buttons down to match. */
+	vertical-align: top;
+}
+
+#header-menu-btn svg {
+	display: block;
+	fill: currentColor;
+}
+
+#header-menu-dropdown {
+	position: absolute;
+	top: 30px;
+	right: 0;
+	min-width: 180px;
+	background-color: #fff;
+	color: #333;
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+	padding: 4px 0;
+	z-index: 50;
+}
+
+.header-menu-item {
+	display: block;
+	padding: 4px 14px;
+	color: #333;
+	font-size: 14px;
+	line-height: 1.3;
+	text-decoration: none;
+	white-space: nowrap;
+}
+
+.header-menu-item:hover,
+.header-menu-item:focus {
+	background-color: #e6f7ff;
+	color: #1A6A96;
+	outline: none;
+}
+
+.header-menu-item.header-menu-sponsor svg {
+	width: 12px;
+	height: 12px;
+	fill: #d63384;
+	vertical-align: -1px;
+	margin-right: 6px;
+}
+
 .separator {
 	border-left: 1px solid white;
 	height: 10px;
@@ -427,6 +484,14 @@ div.alert-box {
 	margin: 0 0 5px 0;
 }
 
+input[type=text]:focus,
+input[type=number]:focus,
+textarea:focus {
+	outline: none;
+	border-color: #d3aa00;
+	box-shadow: 0 0 0 2px rgba(212, 168, 0, 0.4);
+}
+
 ::placeholder {
 	color: #aaa;
 	opacity: 1;
@@ -495,13 +560,6 @@ div.alert-box {
 	padding-left: 12px;
 }
 
-.info-box,.popup {
-	border-radius: 9px;
-	border: 1px solid #d5d5d5;
-	box-shadow: 0 1px 7px rgba(0,0,0,0.18);
-	background-color: #fff;
-}
-
 .contextmenu {
 	position: absolute;
 	border-radius: 6px;
@@ -518,6 +576,12 @@ div.alert-box {
 	padding: 6px;
 }
 
+.info-box,.popup {
+	border-radius: 11px;
+	border: 1px solid #d5d5d5;
+	box-shadow: 0 1px 7px rgba(0,0,0,0.18);
+	background-color: #fff;
+}
 
 .info-box {
 	min-width: 230px;
@@ -525,7 +589,8 @@ div.alert-box {
 	text-align: left;
 	margin-top: 12px;
 	margin-right: 20px;
-	padding: 12px 16px 12px 18px;
+	/* padding: 12px 16px 12px 18px; */
+	padding: 15px 17px 13px 19px;
 	vertical-align: top;
 	display: inline-block;
 	/* border: 1px solid #aaa; */
@@ -575,7 +640,7 @@ div.alert-box {
 .info-box p {
 	white-space: pre-line;
 	margin: 0 0 6px 0;
-	line-height: 1.2;
+	line-height: 1.25;
 	/* font-size: 90%; */
 }
 
@@ -1552,6 +1617,119 @@ body.pan.panning .map-layers:not(.drawing) {
 	cursor: default;
 }
 
+/* --- FLOATING TOOLBAR --- */
+
+/*
+ * Anchored at bottom-center of the map area. Multiple toolbars stack
+ * vertically (newest on top). Designed to host buttons and other small
+ * controls; the inner content slot leaves room for a future drag handle.
+ */
+
+.floating-toolbar-stack {
+	position: absolute;
+	z-index: 25;
+	bottom: 24px;
+	left: 50%;
+	transform: translateX(-50%);
+	display: flex;
+	flex-direction: column-reverse;
+	align-items: center;
+	gap: 8px;
+	pointer-events: none;
+}
+
+.floating-toolbar {
+	pointer-events: auto;
+	display: flex;
+	align-items: center;
+	background-color: rgba(255, 255, 255, 0.96);
+	border: 1px solid #ddd;
+	border-radius: 8px;
+	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+	padding: 4px;
+	opacity: 0;
+	transform: translateY(6px);
+	transition: opacity 150ms ease, transform 150ms ease;
+}
+
+.floating-toolbar.visible {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+.floating-toolbar-content {
+	display: flex;
+	align-items: center;
+	gap: 0;
+}
+
+.floating-toolbar-separator {
+	width: 1px;
+	height: 18px;
+	margin: 0 4px;
+	background-color: #ddd;
+}
+
+.floating-toolbar-btn {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	border-radius: 5px;
+	cursor: pointer;
+	user-select: none;
+}
+
+.floating-toolbar-btn svg {
+	width: 24px;
+	height: 24px;
+}
+
+.floating-toolbar-btn svg * {
+	fill: #1385B7;
+	transition: fill 100ms ease;
+}
+
+.floating-toolbar-btn:hover:not(.disabled) {
+	background-color: #e6f7ff;
+}
+
+.floating-toolbar-btn:hover:not(.disabled) svg * {
+	fill: #166689;
+}
+
+.floating-toolbar-btn:active:not(.disabled) {
+	background-color: #cdebf9;
+}
+
+.floating-toolbar-btn.disabled {
+	cursor: default;
+}
+
+.floating-toolbar-btn.disabled svg * {
+	fill: #b8c4ca;
+}
+
+/* Tooltip shown above the button on hover */
+.floating-toolbar-btn[data-tooltip]:hover:not(.disabled)::after {
+	content: attr(data-tooltip);
+	position: absolute;
+	bottom: calc(100% + 8px);
+	left: 50%;
+	transform: translateX(-50%);
+	background-color: rgba(40, 40, 40, 0.92);
+	color: #fff;
+	font-size: 11px;
+	line-height: 1;
+	white-space: nowrap;
+	padding: 5px 7px;
+	border-radius: 4px;
+	pointer-events: none;
+	z-index: 1;
+}
+
 .zoom-box {
 	position: absolute;
 	border: 1px solid #cc6acc;

package/www/privacy.html

@@ -6,118 +6,7 @@
 <title>Privacy Policy &mdash; mapshaper</title>
 <meta name="description" content="Privacy policy for mapshaper, free open-source software for editing geographic data.">
 <link rel="icon" type="image/png" href="images/icon.png">
-
-<style>
-  @font-face {
-    font-family: 'SourceSans3';
-    src: url('assets/SourceSans3-VariableFont_wght.ttf') format('truetype');
-    font-display: swap;
-  }
-
-  html, body {
-    margin: 0;
-    padding: 0;
-    background-color: #f8fdff;
-    font: 16px/1.55 'SourceSans3', Arial, sans-serif;
-    color: #333;
-  }
-
-  a { color: #10699b; }
-  a:hover { color: #1A6A96; }
-
-  .page-header {
-    background-color: #1385B7;
-    color: white;
-    padding: 0 11px;
-    height: 29px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .mapshaper-logo,
-  .mapshaper-logo:hover {
-    font-weight: 600;
-    font-size: 17px;
-    color: white;
-    text-decoration: none;
-  }
-
-  .mapshaper-logo .logo-highlight {
-    color: #ffa;
-  }
-
-  .header-back {
-    color: white;
-    text-decoration: none;
-    font-size: 14px;
-    height: 29px;
-    display: inline-flex;
-    align-items: center;
-    padding: 0 10px;
-  }
-
-  .header-back:hover {
-    background-color: #1A6A96;
-    color: white;
-  }
-
-  main {
-    max-width: 640px;
-    margin: 0 auto;
-    padding: 40px 24px 80px;
-  }
-
-  h1 {
-    font-weight: 600;
-    font-size: 32px;
-    margin: 0 0 8px;
-    color: #222;
-  }
-
-  .updated {
-    color: #888;
-    font-size: 14px;
-    margin: 0 0 28px;
-  }
-
-  h2 {
-    font-weight: 600;
-    font-size: 20px;
-    margin: 32px 0 10px;
-    color: #222;
-  }
-
-  p {
-    margin: 0 0 14px;
-  }
-
-  ul {
-    padding-left: 20px;
-    margin: 8px 0 16px;
-  }
-
-  ul li {
-    margin-bottom: 6px;
-  }
-
-  .footer-note {
-    margin-top: 48px;
-    padding-top: 24px;
-    border-top: 1px solid #e0e8ec;
-    font-size: 14px;
-    color: #777;
-  }
-
-  .footer-note a {
-    color: #777;
-  }
-
-  @media (max-width: 480px) {
-    main { padding: 24px 18px 60px; }
-    h1 { font-size: 26px; }
-  }
-</style>
+<link rel="stylesheet" href="assets/static-page.css">
 </head>
 <body>
 

package/www/sponsor.html

@@ -6,167 +6,7 @@
 <title>Support mapshaper</title>
 <meta name="description" content="Support the development of mapshaper, free open-source software for editing geographic data.">
 <link rel="icon" type="image/png" href="images/icon.png">
-
-<style>
-  @font-face {
-    font-family: 'SourceSans3';
-    src: url('assets/SourceSans3-VariableFont_wght.ttf') format('truetype');
-    font-display: swap;
-  }
-
-  html, body {
-    margin: 0;
-    padding: 0;
-    background-color: #f8fdff;
-    font: 16px/1.55 'SourceSans3', Arial, sans-serif;
-    color: #333;
-  }
-
-  a { color: #10699b; }
-  a:hover { color: #1A6A96; }
-
-  .page-header {
-    background-color: #1385B7;
-    color: white;
-    padding: 0 11px;
-    height: 29px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .mapshaper-logo,
-  .mapshaper-logo:hover {
-    font-weight: 600;
-    font-size: 17px;
-    color: white;
-    text-decoration: none;
-  }
-
-  .mapshaper-logo .logo-highlight {
-    color: #ffa;
-  }
-
-  .header-back {
-    color: white;
-    text-decoration: none;
-    font-size: 14px;
-    height: 29px;
-    display: inline-flex;
-    align-items: center;
-    padding: 0 10px;
-  }
-
-  .header-back:hover {
-    background-color: #1A6A96;
-    color: white;
-  }
-
-  main {
-    max-width: 640px;
-    margin: 0 auto;
-    padding: 40px 24px 80px;
-  }
-
-  h1 {
-    font-weight: 600;
-    font-size: 32px;
-    margin: 0 0 12px;
-    color: #222;
-  }
-
-  .tagline {
-    font-size: 17px;
-    color: #555;
-    margin: 0 0 32px;
-  }
-
-  .sponsor-buttons {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-    margin: 24px 0 12px;
-  }
-
-  .btn {
-    display: inline-block;
-    padding: 12px 22px;
-    background-color: #1385B7;
-    color: white;
-    text-decoration: none;
-    font-weight: 600;
-    font-size: 16px;
-    border-radius: 3px;
-    transition: background-color 0.15s;
-  }
-
-  .btn:hover {
-    background-color: #1A6A96;
-    color: white;
-  }
-
-  .btn.btn-secondary {
-    background-color: #444;
-  }
-
-  .btn.btn-secondary:hover {
-    background-color: #222;
-  }
-
-  .sponsor-note {
-    font-size: 14px;
-    color: #666;
-    margin: 0 0 32px;
-  }
-
-  h2 {
-    font-weight: 600;
-    font-size: 20px;
-    margin: 32px 0 12px;
-    color: #222;
-  }
-
-  ul.support-list {
-    padding-left: 20px;
-    margin: 8px 0 24px;
-  }
-
-  ul.support-list li {
-    margin-bottom: 6px;
-  }
-
-  .feedback-cta {
-    background-color: #fff;
-    border-left: 3px solid #1385B7;
-    padding: 14px 18px;
-    margin: 24px 0;
-  }
-
-  .signature {
-    margin-top: 32px;
-    color: #555;
-    font-style: italic;
-  }
-
-  .footer-note {
-    margin-top: 48px;
-    padding-top: 24px;
-    border-top: 1px solid #e0e8ec;
-    font-size: 14px;
-    color: #777;
-  }
-
-  .footer-note a {
-    color: #777;
-  }
-
-  @media (max-width: 480px) {
-    main { padding: 24px 18px 60px; }
-    h1 { font-size: 26px; }
-    .sponsor-buttons { flex-direction: column; align-items: stretch; }
-    .btn { text-align: center; }
-  }
-</style>
+<link rel="stylesheet" href="assets/static-page.css">
 </head>
 <body>
 
@@ -179,14 +19,14 @@
 
 <h1>Support mapshaper</h1>
 
-<p class="tagline">Mapshaper is free, open-source software for editing geographic data &mdash; used worldwide for everything from classroom exercises to professional map work.</p>
+<p class="tagline">Mapshaper is free, open-source software for editing geographic data &mdash; used worldwide for everything from student projects to professional map work.</p>
 
 <div class="sponsor-buttons">
-  <a href="https://ko-fi.com/mapshaper" class="btn">Support via Ko-fi</a>
   <a href="https://github.com/sponsors/mbloch" class="btn btn-secondary">Sponsor on GitHub</a>
+  <a href="https://ko-fi.com/mapshaper" class="btn">Tip the developer</a>
 </div>
 
-<p class="sponsor-note">Ko-fi accepts one-time or recurring contributions &mdash; no account required. GitHub Sponsors offers recurring sponsorship.</p>
+<!-- <p class="sponsor-note">Ko-fi accepts one-time or recurring contributions &mdash; no account required. GitHub Sponsors offers recurring sponsorship.</p> -->
 
 <h2>What your contribution supports</h2>
 <ul class="support-list">

package/www/terms.html

@@ -6,118 +6,7 @@
 <title>Terms of Service &mdash; mapshaper</title>
 <meta name="description" content="Terms of service for mapshaper, free open-source software for editing geographic data.">
 <link rel="icon" type="image/png" href="images/icon.png">
-
-<style>
-  @font-face {
-    font-family: 'SourceSans3';
-    src: url('assets/SourceSans3-VariableFont_wght.ttf') format('truetype');
-    font-display: swap;
-  }
-
-  html, body {
-    margin: 0;
-    padding: 0;
-    background-color: #f8fdff;
-    font: 16px/1.55 'SourceSans3', Arial, sans-serif;
-    color: #333;
-  }
-
-  a { color: #10699b; }
-  a:hover { color: #1A6A96; }
-
-  .page-header {
-    background-color: #1385B7;
-    color: white;
-    padding: 0 11px;
-    height: 29px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .mapshaper-logo,
-  .mapshaper-logo:hover {
-    font-weight: 600;
-    font-size: 17px;
-    color: white;
-    text-decoration: none;
-  }
-
-  .mapshaper-logo .logo-highlight {
-    color: #ffa;
-  }
-
-  .header-back {
-    color: white;
-    text-decoration: none;
-    font-size: 14px;
-    height: 29px;
-    display: inline-flex;
-    align-items: center;
-    padding: 0 10px;
-  }
-
-  .header-back:hover {
-    background-color: #1A6A96;
-    color: white;
-  }
-
-  main {
-    max-width: 640px;
-    margin: 0 auto;
-    padding: 40px 24px 80px;
-  }
-
-  h1 {
-    font-weight: 600;
-    font-size: 32px;
-    margin: 0 0 8px;
-    color: #222;
-  }
-
-  .updated {
-    color: #888;
-    font-size: 14px;
-    margin: 0 0 28px;
-  }
-
-  h2 {
-    font-weight: 600;
-    font-size: 20px;
-    margin: 32px 0 10px;
-    color: #222;
-  }
-
-  p {
-    margin: 0 0 14px;
-  }
-
-  ul {
-    padding-left: 20px;
-    margin: 8px 0 16px;
-  }
-
-  ul li {
-    margin-bottom: 6px;
-  }
-
-  .footer-note {
-    margin-top: 48px;
-    padding-top: 24px;
-    border-top: 1px solid #e0e8ec;
-    font-size: 14px;
-    color: #777;
-  }
-
-  .footer-note a {
-    color: #777;
-  }
-
-  @media (max-width: 480px) {
-    main { padding: 24px 18px 60px; }
-    h1 { font-size: 26px; }
-  }
-</style>
+<link rel="stylesheet" href="assets/static-page.css">
 </head>
 <body>