From 6469099278e2585b26eb19f800f922e5a07c795b Mon Sep 17 00:00:00 2001
From: Hugh Rundle <hugh@hughrundle.net>
Date: Mon, 18 Jan 2021 10:46:01 +1100
Subject: [PATCH] move WFM button to top of map

Fixes #6
---
 website/index.html |  9 +++++----
 website/style.css  | 16 ++++++++++------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/website/index.html b/website/index.html
index 1cd9797..591d332 100644
--- a/website/index.html
+++ b/website/index.html
@@ -36,10 +36,6 @@
         <h2>Library Map</h2>
         <p id="beta">Beta!</p>
       </section>
-      <div></div>
-      <div id="mode-switch">
-        <button id="mode-button" name="mode-button">View in White Fragility Mode</button>
-      </div>
     </header>
     <nav>
       <ul>
@@ -55,6 +51,11 @@
       <p>You need a <b>modern browser</b> with JavaScript turned on to use Library Map. Internet Explorer probably won't work properly.</p>
     </section>
 
+    
+    <div id="mode-switch">
+      <div></div>
+      <button id="mode-button" name="mode-button">View in White Fragility Mode</button>
+    </div>
     <!-- div to attach everything to -->
     <div id="mapid"></div>
     <!-- this is the guts of it -->
diff --git a/website/style.css b/website/style.css
index d3c9895..cc1438b 100644
--- a/website/style.css
+++ b/website/style.css
@@ -131,21 +131,25 @@ header {
 
 #mode-switch {
   display: grid;
-  align-items: center;
+  grid-template-columns: 1fr auto;
+  width: 90vw;
+  min-width: 90vw;
+  margin: auto;
+  background-color: #000;
 }
 
 #mode-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  border: 1;
+  border: 0;
   border-radius: 0;
-  border-color: #FF3961;
-  padding: 1em;
-  color: #FF3961;
+  color: #000;
   background-color: #fff;
   font-family: Tahoma, sans-serif;
-  border-radius: 10px;
+  width: fit-content;
+  margin: 5px 1em;
+  padding: 0.5em;
 }
 
 .info-page,