update syles

xycarto · Jan 15, 2024 · 8680832 · 8680832
1 parent 0da7333
commit 8680832
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 16 deletions.
diff --git a/site-dev/index.html b/site-dev/index.html
@@ -15,7 +15,6 @@
       </div>
 
       <div id="mySidebar" class="sidebar">
-        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
         <img class="banner" src="img/wairarapa.jpg" alt="Wairarapa">
         <div class="title-ribbon">
             <h1>CA_NoCAL_Wildfires_B1_2018</h1>
@@ -49,11 +48,11 @@ <h1>CA_NoCAL_Wildfires_B1_2018</h1>
           <p>
             <ul>
               <li>Select a layer from the control in the top right of the map window</li>
-              <li>Click on the layers to obtain information</li>
+              <li>Click on the layers in the map to obtain information</li>
             </ul>
           </p>
           <p>
-            Information is dispalyed for the layers active in the viewer.
+            Information is dispalyed for the layers active in the viewer. 
           </p>          
           <hr>
           <div>
@@ -112,16 +111,26 @@ <h3>Hillshades</h3>
           <hr>
           <div>
             <h2>Connection Help</h2>
-              <h3>How to Set Up S3 COG and Vector Tile Connections in GIS editor</h3>
-                <p><a href="https://www.cogeo.org/qgis-tutorial.html" target="_blank">COGs in QGIS</a></p>
-                <p><a href="https://www.lutraconsulting.co.uk/blog/2020/06/10/vectortiles-part1/" target="_blank">Vector Tiles in QGIS</a></p>
+            <p>Useful tutorials for setting up and using data hosted on this site in QGIS and on the web</p>
+              <h3>S3 COG and Vector Tile Connections in GIS editor</h3>
+                <p><a href="https://www.cogeo.org/qgis-tutorial.html" target="_blank">COGs in QGIS</a><a href="https://www.lutraconsulting.co.uk/blog/2020/06/10/vectortiles-part1/" target="_blank">Vector Tiles in QGIS</a></p>
 
-            <h3>How to Set Up S3 COG and Vector Tile Connections in Web Application</h3>
-              <p><a href="https://xycarto.com/2022/11/10/basic-cog-in-openlayers-single-band-tif/" target="_blank">COGs</a></p>
-              <p><a href="https://openlayers.org/en/latest/examples/osm-vector-tiles.html" target="_blank">Vector Tiles</a></p>
+            <h3>S3 COG and Vector Tile Connections in Web Application</h3>
+              <p><a href="https://xycarto.com/2022/11/10/basic-cog-in-openlayers-single-band-tif/" target="_blank">COGs</a><a href="https://openlayers.org/en/latest/examples/osm-vector-tiles.html" target="_blank">Vector Tiles</a></p>
           </div>
           <hr>
-          <p>Contact: info here</p>
+          <div>
+            <h2>Github</h2>
+            <p> Repository for WESM Surface Production
+              <a href="https://github.com/xycarto/wesm-surfaces" target="_blank">WESM Surfaces</a>
+            </p>
+            <p> Repository for WESM Grid Production
+              <a href="https://github.com/xycarto/wesm-grids" target="_blank">WESM Grids</a>
+            </p>
+          </div>
+          <hr>
+          <p>For further information: </p>
+          <p>Contact: ian at xycarto.com</p>
         </div>
       </div>
 

diff --git a/site-dev/main.js b/site-dev/main.js
@@ -224,7 +224,8 @@ const map = new Map({
 // Build layer switcher
 const layerSwitcher = new LayerSwitcher({
   reverse: true,
-  groupSelectStyle: 'group'
+  groupSelectStyle: 'group',
+  startActive: true
 });
 map.addControl(layerSwitcher);
 
@@ -243,7 +244,7 @@ const overlay = new Overlay({
     },
   });
 
-container.style.width = '40vw';
+container.style.maxWidth = '50vw';
 
 closer.onclick = function () {
   overlay.setPosition(undefined);

diff --git a/site-dev/style.css b/site-dev/style.css
@@ -26,6 +26,7 @@ body {
   left: -50px;
   min-width: 280px;
 }
+
 .ol-popup:after, .ol-popup:before {
   top: 100%;
   border: solid transparent;
@@ -67,7 +68,7 @@ body {
   left: 0;
   background-color: #ffffff; /* Black*/
   overflow-x: hidden; /* Disable horizontal scroll */
-  padding-top: 60px; /* Place content 60px from the top */
+  padding-top: 0px; /* Place content 60px from the top */
   transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
 }
 
@@ -119,7 +120,7 @@ body {
 
 /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
 @media screen and (max-height: 450px) {
-  .sidebar {padding-top: 15px;}
+  .sidebar {padding-top: 0px;}
   .sidebar a {font-size: 18px;}
 } 
 
@@ -176,7 +177,7 @@ margin: 0;
 text-align: center; }
 
 h2 {
-color: #333333;
+color: #555555;
 font-size: 14pt;
 margin-bottom: 7px;
 margin-top: 10px; }
@@ -224,4 +225,12 @@ height: 14px;
 display: inline-block;
 border-radius: 50%;
 margin-right: 5px;
-vertical-align: middle; }
+vertical-align: middle; }
+
+
+.layer-switcher {
+  position: relative;
+  top: 3.5em;
+  right: 0.5em;
+  text-align: right;
+}