Add github and docs links to Explorer nav

site/.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.DS_Store
 
 # Editor directories and files
 .vscode/*

site/src/CustomControls.css

@@ -6,6 +6,10 @@
   color: black;
   margin: 4px;
   outline: none;
+
+  .title {
+    padding: 2px 0;
+  }
 }
 
 div.bug-nub {

site/src/Map.jsx

@@ -15,7 +15,7 @@ import PropTypes from "prop-types";
 import "./CustomControls.css";
 import ThemeSelector from "./ThemeSelector";
 import BugIcon from "./icons/icon-bug.svg?react";
-import Navigator from "./Navigator";
+import Navigator from "./navigator/Navigator";
 import { layers } from "./Layers";
 import ThemeTypeLayer from "./ThemeTypeLayer";
 

site/src/StartupBox.css

@@ -3,8 +3,8 @@ div.startup-box-light {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 450px;
-  height: 200px;
+  width: 80%;
+  max-width: 450px;
   background: white;
   border-radius: 15px;
 }
@@ -15,7 +15,6 @@ div.startup-box-dark {
   left: 50%;
   transform: translate(-50%, -50%);
   width: 450px;
-  height: 200px;
   background: black;
   border-radius: 15px;
   color: whitesmoke;
@@ -49,6 +48,12 @@ button.skip:hover {
   background: var(--ifm-color-info-darkest);
 }
 
+.tool-intro {
+  margin-left: 20px;
+  margin-top: 20px;
+  margin-right: 20px;
+}
+
 p.tour-intro {
   margin-left: 20px;
   margin-top: 20px;
@@ -57,7 +62,8 @@ p.tour-intro {
 }
 
 div.perma-skip {
-  margin-top: 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
   margin-left: 20px;
 }
 
@@ -68,3 +74,8 @@ p.dark-startup {
 p.light-startup {
   color: #213547;
 }
+
+.tour-buttons {
+  display: flex;
+  justify-content: center;
+}

site/src/StartupBox.jsx

@@ -22,19 +22,29 @@ function StartupBox({
           }`}
         >
           <Box>
+            <p
+              className={`tool-intro ${
+                mode === "theme-dark" ? "dark-startup" : "light-startup"
+              }`}
+            >
+              <strong>Overture Maps Explorer</strong> is a tool for inspecting
+              and downloading Overture data.
+            </p>
             <p
               className={`tour-intro ${
                 mode === "theme-dark" ? "dark-startup" : "light-startup"
               }`}
             >
-              First time here? Take the tour to get familiar with our features!
+              New here? Take the tour to get started!
             </p>
-            <button className="button start" onClick={startTour}>
-              Begin
-            </button>
-            <button className="button skip" onClick={handleSkip}>
-              Skip
-            </button>
+            <div className="tour-buttons">
+              <button className="button start" onClick={startTour}>
+                Begin
+              </button>
+              <button className="button skip" onClick={handleSkip}>
+                Skip
+              </button>
+            </div>
             <div className="perma-skip">
               <FormControlLabel
                 control={

site/src/inspector_panel/InspectorPanel.css

@@ -1,4 +1,5 @@
 .inspector-panel {
+  width: 90%;
   max-width: 370px;
   display: flex;
   flex-direction: column;

site/src/inspector_panel/InspectorPanel.jsx

@@ -110,7 +110,7 @@ function InspectorPanel({
   return (
     <div className="inspector-panel">
       <div className="panel-header">
-        <h4>Inspector Panel</h4>
+        <h4 className="title">Inspector Panel</h4>
         <button className="close-panel-button" onClick={() => setEntity({})}>
           <CloseIcon className="close-panel-icon" />
         </button>

site/src/nav/GithubButton.css

@@ -0,0 +1,25 @@
+.github-link {
+  width: 32px;
+  height: 32px;
+  padding: 6px !important; /* override default padding for infima links  */
+  margin-right: 4px;
+  border-radius: 50%;
+  transition: background var(--ifm-transition-fast);
+}
+
+.github-link:hover {
+  background: var(--ifm-color-emphasis-200);
+}
+
+.github-link:before {
+  content: "";
+  height: 100%;
+  display: block;
+  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSIjMWMxZTIxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04IDBDMy41OCAwIDAgMy41OCAwIDhjMCAzLjU0IDIuMjkgNi41MyA1LjQ3IDcuNTkuNC4wNy41NS0uMTcuNTUtLjM4IDAtLjE5LS4wMS0uODItLjAxLTEuNDktMi4wMS4zNy0yLjUzLS40OS0yLjY5LS45NC0uMDktLjIzLS40OC0uOTQtLjgyLTEuMTMtLjI4LS4xNS0uNjgtLjUyLS4wMS0uNTMuNjMtLjAxIDEuMDguNTggMS4yMy44Mi43MiAxLjIxIDEuODcuODcgMi4zMy42Ni4wNy0uNTIuMjgtLjg3LjUxLTEuMDctMS43OC0uMi0zLjY0LS44OS0zLjY0LTMuOTUgMC0uODcuMzEtMS41OS44Mi0yLjE1LS4wOC0uMi0uMzYtMS4wMi4wOC0yLjEyIDAgMCAuNjctLjIxIDIuMi44Mi42NC0uMTggMS4zMi0uMjcgMi0uMjcuNjggMCAxLjM2LjA5IDIgLjI3IDEuNTMtMS4wNCAyLjItLjgyIDIuMi0uODIuNDQgMS4xLjE2IDEuOTIuMDggMi4xMi41MS41Ni44MiAxLjI3LjgyIDIuMTUgMCAzLjA3LTEuODcgMy43NS0zLjY1IDMuOTUuMjkuMjUuNTQuNzMuNTQgMS40OCAwIDEuMDctLjAxIDEuOTMtLjAxIDIuMiAwIC4yMS4xNS40Ni41NS4zOEE4LjAxMyA4LjAxMyAwIDAwMTYgOGMwLTQuNDItMy41OC04LTgtOHoiLz48L3N2Zz4=")
+    0 0 / contain;
+}
+
+[data-theme="dark"] .github-link:before {
+  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSIjZTNlM2UzIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04IDBDMy41OCAwIDAgMy41OCAwIDhjMCAzLjU0IDIuMjkgNi41MyA1LjQ3IDcuNTkuNC4wNy41NS0uMTcuNTUtLjM4IDAtLjE5LS4wMS0uODItLjAxLTEuNDktMi4wMS4zNy0yLjUzLS40OS0yLjY5LS45NC0uMDktLjIzLS40OC0uOTQtLjgyLTEuMTMtLjI4LS4xNS0uNjgtLjUyLS4wMS0uNTMuNjMtLjAxIDEuMDguNTggMS4yMy44Mi43MiAxLjIxIDEuODcuODcgMi4zMy42Ni4wNy0uNTIuMjgtLjg3LjUxLTEuMDctMS43OC0uMi0zLjY0LS44OS0zLjY0LTMuOTUgMC0uODcuMzEtMS41OS44Mi0yLjE1LS4wOC0uMi0uMzYtMS4wMi4wOC0yLjEyIDAgMCAuNjctLjIxIDIuMi44Mi42NC0uMTggMS4zMi0uMjcgMi0uMjcuNjggMCAxLjM2LjA5IDIgLjI3IDEuNTMtMS4wNCAyLjItLjgyIDIuMi0uODIuNDQgMS4xLjE2IDEuOTIuMDggMi4xMi41MS41Ni44MiAxLjI3LjgyIDIuMTUgMCAzLjA3LTEuODcgMy43NS0zLjY1IDMuOTUuMjkuMjUuNTQuNzMuNTQgMS40OCAwIDEuMDctLjAxIDEuOTMtLjAxIDIuMiAwIC4yMS4xNS40Ni41NS4zOEE4LjAxMyA4LjAxMyAwIDAwMTYgOGMwLTQuNDItMy41OC04LTgtOHoiLz48L3N2Zz4=")
+    0 0 / contain;
+}

site/src/nav/GithubButton.jsx

@@ -0,0 +1,13 @@
+import "./GithubButton.css";
+
+export default function GithubButton() {
+  return (
+    <a
+      href="https://github.com/OvertureMaps/io-site"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="navbar__item github-link"
+      aria-label="GitHub repository"
+    ></a>
+  );
+}