dvrpc · mmolta · Dec 20, 2021 · Dec 18, 2021 · Dec 18, 2021 · Dec 18, 2021
diff --git a/analysis/css/mobile.css b/analysis/css/mobile.css
@@ -1,13 +1,30 @@
 h1 {
+    font-size: 0.8em;
     width: 31ch;
     line-height: initial;
 }
-h1, .mapboxgl-ctrl-geocoder, .dropdown-toggle {
+.mapboxgl-ctrl-geocoder, .dropdown-toggle {
     font-size: 0.8rem;
 }
+#dvrpc-logo {
+    width: 50px;
+}
 .nav-header-vr {
     margin: 0 0.5rem;
 }
+.nav-link {
+    width: 97.5px;
+    font-size: 0.8em;
+}
+.nav-bike {
+    width: 25px;
+}
+.wheel-nav {
+    width: 6px;
+    height: 6px;
+    border: 1px solid var(--theme-white);
+    bottom: -5.5px;
+}
 .dropdown-toggle {
     height: 30px;
     padding: 6px 12px;
@@ -28,7 +45,7 @@ h1, .mapboxgl-ctrl-geocoder, .dropdown-toggle {
 .legend-content {
     max-height: 40vh;
     overflow-y: auto;
-    width: calc(100vw - 55px);
+    width: 80vw;
 }
 .legend-section {
     padding: var(--wrapper-padding-half);

diff --git a/analysis/img/analysis-og-img.png b/analysis/img/analysis-og-img.png
diff --git a/analysis/index.html b/analysis/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en-US">
     <head>
         <meta charset="utf-8">
         <title>Bicycle LTS Analysis Map</title>
         <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
-        <meta name="created" content="6/15/2021">
+        <meta name="created" content="12/20/2021">
         <meta name="description" content="Explore and analyze LTS and bicycle network connectivity priorities by interacting with this web map's toggles and various clickable layers.">
-        <meta name="keywords" content="Bicycle Planning, Bike Planning, Level of Traffic Stress, Connectivty Priorities, Bike Connectivity, Bicycle Connectivity Analysis, Safe Cycling, Bicycle Analysis, Bike Analysis, Bicycle Safety, Bike Safety, Urban Bicycling, Urban Biking, Bicycle Lanes, Bike Lanes, Bike Improvements, Philadelphia Biking, Regional Planning, DVRPC, DVRPC Office of Mobility Analysis and Design, DVRPC Bicycle Planning">
+        <meta name="keywords" content="Bicycle Planning, Bike Planning, Level of Traffic Stress, Low Stress Islands, Connectivty Priorities, Bike Connectivity, Bicycle Connectivity Analysis, Safe Cycling, Bicycle Analysis, Bike Analysis, Bicycle Safety, Bike Safety, Urban Bicycling, Urban Biking, Bicycle Lanes, Bike Lanes, Bike Improvements, Philadelphia Biking, Regional Planning, DVRPC, DVRPC Office of Mobility Analysis and Design, DVRPC Bicycle Planning">
         <meta name="author" content="Delaware Valley Regional Planning Commission (DVRPC)">
         <meta name="owner" content="[email protected]">
         <meta name="distribution" content="global">
@@ -16,9 +16,20 @@
 
         <meta property="og:title" content="Bicycle Level of Traffic Stress (LTS) and Connectivity Analysis Web Map">
         <meta propery="og:type" content="website">
-        <!-- <meta property="og:url" content="https://dvrpc.org/review/bike-lts/analysis/"> -->
+        <meta property="og:url" content="https://www.dvrpc.org/webmaps/bike-lts/analysis/">
         <meta property="og:description" content="Explore and analyze Level of Traffic Stress (LTS) and bicycle network connectivity priorities by interacting with this web map's toggles and various clickable layers.">
-        <meta property="og:image" content="https://dvrpc.org/review/bike-lts/analysis/img/analysis-og-img.png">
+        <meta property="og:image" content="https://www.dvrpc.org/webmaps/bike-lts/analysis/img/analysis-og-img.png">
+
+        <!-- Analytics -->
+        <!-- Global site tag (gtag.js) - Google Analytics -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-9825778-1"></script>
+        <script>
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+
+            gtag('config', 'UA-9825778-1');
+        </script>
 
         <link rel="preconnect" href="https://api.mapbox.com/mapbox-gl-js/" crossorigin="">
         <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="">
@@ -42,7 +53,7 @@
                 <h1><b class="font-ultra-heavy">Bicycle Level</b> of <b class="font-ultra-heavy">Traffic Stress (LTS)</b> and <b class="font-ultra-heavy">Connectivity Analysis</b></h1>
             </div>
 
-            <a href="/review/bike-lts/" target="_blank" rel="noreferrer noopener" class="nav-link nav-link-map flex-row flex-justify-center">
+            <a href="/webmaps/bike-lts/" target="_blank" rel="noreferrer noopener" class="nav-link nav-link-map flex-row flex-justify-center">
                 view story
                 <svg class="nav-bike" id="bike_green_homepage" data-name="bike green" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 291.94 172.31"><defs><clipPath id="clip-path" transform="translate(0.12 0.03)"><rect width="292" height="172" fill="none"/></clipPath></defs><title>lts-bike-icon</title><g opacity="1"><g clip-path="url(#clip-path)"><path d="M232.38,172.28a59.45,59.45,0,1,1,59.44-59.44,59.51,59.51,0,0,1-59.44,59.44m0-109.3a49.86,49.86,0,1,0,49.85,49.86A49.92,49.92,0,0,0,232.38,63" transform="translate(0.12 0.03)" fill="#a4bc58"/><path d="M59.32,172.28a59.45,59.45,0,1,1,59.45-59.44,59.51,59.51,0,0,1-59.45,59.44m0-109.3a49.86,49.86,0,1,0,49.86,49.86A49.92,49.92,0,0,0,59.32,63" transform="translate(0.12 0.03)" fill="#a4bc58"/><path d="M228.17,115.13,169.66,8H218.2a18.73,18.73,0,0,1,18.66,15.74A18.51,18.51,0,0,1,218.57,45H214V35h4a8.72,8.72,0,0,0,8.82-8,8.51,8.51,0,0,0-8.48-9H185.8l50.79,92.54Z" transform="translate(0.12 0.03)" fill="#a4bc58"/><path d="M149.36,118H51l50.74-87.44ZM67.65,108h65.58L101.48,49.71Z" transform="translate(0.12 0.03)" fill="#a4bc58"/><rect x="88.33" y="8.72" width="9.59" height="31.15" transform="translate(-0.11 47.74) rotate(-28.71)" fill="#a4bc58"/><polygon points="105.12 18.03 74.56 18.03 63.6 7.06 70.67 0 78.7 8.03 105.12 8.03 105.12 18.03" fill="#a4bc58"/><path d="M140.78,121.73,93.54,35H201.88ZM109.68,45l32.14,59L183.4,45Z" transform="translate(0.12 0.03)" fill="#a4bc58"/><rect x="136.12" y="113.03" width="10" height="27" fill="#a4bc58"/><rect x="132.12" y="135.03" width="18" height="10" fill="#a4bc58"/></g></g></svg>
                 <div class="wheel-green wheel-nav"></div>
@@ -109,7 +120,7 @@ <h2 class="sidebar-header">Explore and analyze LTS and bicycle network connectiv
                     </section>
 
                     <span class="sidebar-learn-more">
-                        <a href="/review/bike-lts/" target="_blank" rel="noreferrer noopener">Learn more</a> about the analysis and how these layers were created.
+                        <a href="/webmaps/bike-lts/" target="_blank" rel="noreferrer noopener">Learn more</a> about the analysis and how these layers were created.
                     </span>
 
                     <details class="sidebar-details">

diff --git a/analysis/js/index.js b/analysis/js/index.js
@@ -30,9 +30,6 @@ const tabLayers = {
 }
 
 map.on('load', () => {
-    // @improvement: get basemap ID to set text-allow-overlap and force labels above all layers by defafult
-    // map.setLayoutProperty('dark-v10', 'text-allow-overlap', true)
-
     const firstSymbolId = mapUtils.getFirstSymbolId(map)
 
     for(const source in sources) map.addSource(source, sources[source])
@@ -88,7 +85,6 @@ tabs.forEach(tab => {
         if(popup) popup.remove()
 
         // update legends 
-        // @TODO update arrow state (down closed, up open)
         clearLegend(legendContainer)
         tabID === 'lts-tab' ? handleLegend('lts', true, 4) : handleLegend('priority', true, 1)
     }

diff --git a/analysis/js/sidebar/legendConfigs.js b/analysis/js/sidebar/legendConfigs.js
@@ -1,5 +1,4 @@
 // objects with info for each legend type
-// @TODO: add "sources" field
 const legendConfigs = {
     lts: {
         title: 'Levels of Traffic Stress',
@@ -50,22 +49,22 @@ const legendConfigs = {
         iconType: 'line',
         text: ['smallest', '.', '.', '.', 'largest']
     },
-    // // @UPDATE handle transit special case - consolidate into here
+    // handle transit special case - consolidate into here
     ['passenger-rail']: {
         title: 'Transit Stops',
         source: 'SEPTA, NJ Transit, DRPA',
         icons: ['#004d6e','#f18541','#ed164b'],
         iconType: 'circle',
         text: ['Bus','Passenger Rail','Trolley']
     },
-    // @UPDATE handle transit special case
+    // handle transit special case
     trolley: {
         title: '',
         icons: [],
         iconType: '',
         text: ['']
     },
-    // @UPDATE handle transit special case
+    // handle transit special case
     bus: {
         title: '',
         icons: [],

diff --git a/css/mobile.css b/css/mobile.css
@@ -0,0 +1,177 @@
+/* General */
+th, td {
+    padding: var(--wrapper-padding-half);
+}
+/* END General */
+
+
+
+/* Nav */
+.nav-logo {
+    width: 70%;
+}
+/* keep consistent w/analysis */
+.nav-bike {
+    width: 25px;
+    margin-left: var(--wrapper-padding-half);
+}
+.wheel-nav {
+    width: 6px;
+    height: 6px;
+    border: 1px solid var(--theme-white);
+    bottom: -5px;
+}
+.nav-link {
+    width: 135px;
+}
+.nav-link-map {
+    margin-left: var(--wrapper-padding-half);
+}
+/* END Nav */
+
+
+
+/* Intro */
+#story-intro:before {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%);
+}
+#story-intro {
+    padding-bottom: var(--wrapper-padding-quad);
+    min-height: 100vh;
+}
+#story-intro-text-content {
+    width: 55ch;
+    padding-left: var(--wrapper-padding-half);
+}
+#story-intro-text {
+    padding-top: var(--wrapper-padding);
+}
+.header-logo {
+    width: 95%;
+    max-width: 250px;
+}
+.intro-bike-yellow, .intro-bike-green {
+    width: 45%;
+}
+.intro-bike-green {
+    left: 15%;
+}
+.story-intro-p {
+    font-size: 1.1em;
+}
+.story-intro-p-large {
+    font-size: 1.3em;
+}
+.story-intro-btns-wrapper {
+    width: unset;
+    padding-left: 0;
+    bottom: 3vh;
+}
+.story-intro-icon-btns-link {
+    font-size: 1.4em;
+    width: 19ch;
+    border-bottom: 3px solid;
+}
+.wheel {
+    width: 10px;
+    height: 10px;
+    bottom: -8px;
+    border: 2px solid var(--theme-white);
+}
+.mini-bike {
+    display: none;
+}
+.story-intro-icon-figure {
+    padding-left: var(--wrapper-padding-half);
+    font-size: unset;
+}
+.story-intro-figcaption {
+    left: var(--wrapper-padding-half);
+}
+#read-story-btn {
+    position: absolute;
+    width: 16ch;
+    right: calc(-50vw + 4ch);
+    color: var(--theme-black);
+}
+/* END Intro */
+
+
+/* Scenes */
+.scroll-story-nav-link {
+    width: 12px;
+    height: 12px;
+}
+.scroll-story-nav-tooltip {
+    margin-top: -32px;
+}
+@-moz-document url-prefix() {
+    .scroll-story-nav-tooltip {
+        /* this aligns on firefix */
+        margin-top: -19.5px;
+    }
+}
+#what-is-LTS-scene:before {
+    clip-path: polygon(50% 0, 100% 0, 100% 100%, 118% 100%);
+}
+#what-is-LTS-scene {
+    flex-direction: column-reverse;
+    padding-top: var(--wrapper-padding-quad);
+}
+.first-scene-text {
+	margin-right: 0;
+	width: calc(85% - var(--wrapper-padding-half));
+	margin-left: calc(12.5% - var(--wrapper-padding-half));
+}
+#regional-lts-table {
+    position: initial;
+    width: 85%;
+    font-size: 1em;
+    margin: var(--wrapper-padding-double) auto 0 12.5%;
+}
+.regional-lts-table-th {
+    font-size: 1.2em;
+}
+.regional-lts-table-cat {
+    font-size: 2em;
+}
+.table-pad-right {
+    padding-right: 30px;
+}
+.scene-header, .flat-scene-header {
+    font-size: 1.5em;
+}
+.scene-header {
+    margin-left: -10px;
+}
+.scene-header, .scene-text {
+    padding: var(--wrapper-padding-half);
+}
+.scene-text {
+    font-size: 1em;
+}
+.buffer-header-wrapper {
+    top: 0;
+    height: 75%;
+}
+.scene-buffer-header {
+    font-size: 4.5em;
+}
+.scene-buffer-subtext {
+    max-width: 20em;
+    font-size: 1.5em;
+    margin-left: 5em;
+}
+/* END Scenes */
+
+
+
+/* Footer */
+.footer-text {
+    padding: var(--wrapper-padding) var(--wrapper-padding-half);
+}
+.footer-lts-logo {
+    width: 90%;
+    padding-bottom: var(--wrapper-padding);
+    margin-bottom: var(--wrapper-padding);
+}
diff --git a/css/narrow.css b/css/narrow.css
@@ -42,4 +42,38 @@ body {
 #regional-lts-table {
     width: 550px;
 }
-/* END Individual Scenes */
+/* END Individual Scenes */
+
+
+
+/* Footer */
+footer {
+    height: unset;
+}
+.footer-text {
+    width: 90%;
+    flex-direction: column;
+    margin: 0 auto;
+    border-radius: 0;
+    padding: var(--wrapper-padding-double) var(--wrapper-padding-half);
+}
+.footer-text, .footer-connect {
+    position: initial;
+}
+.footer-lts-logo {
+    width: 50%;
+    padding-bottom: var(--wrapper-padding-double);
+    margin-bottom: var(--wrapper-padding-double);
+    border-bottom: 1px solid var(--theme-black);
+}
+.footer-list-main {
+    width: 90%;
+}
+.footer-logo-dvrpc {
+    width: 105px;
+}
+.footer-connect-us {
+    font-size: 1.2em;
+}
+
+/* END Footer */