replace idler and accidentally fix foreground

src/static/css/App.css

@@ -52,12 +52,32 @@ body {
   cursor: pointer;
 }
 
-#defaultCanvas0 {
+/* #defaultCanvas0 {
   position: fixed;
   top: 0;
   left: 0;
   position: fixed;
   z-index: -69;
+} */
+
+#map {
+  height: 100%;
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -69;
+}
+
+.leaflet-layer,
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out,
+.leaflet-control-attribution {
+  filter: brightness(500%) contrast(130%);
+}
+
+.leaflet-tile-pane {
+  filter: brightness(50%);
 }
 
 h1, h2 {
@@ -192,29 +212,35 @@ a {
 }
 
 .foreground {
-  position: relative;
+  position: fixed;
+  top: 0;
+  left: 0;
+  min-width: 100vw;
+  min-height: 100vh;
+  overflow: hidden;
+  background-color: rgb(24, 24, 24, .85);
+  z-index: -1;
+}
+
+.foregroundContent {
   padding-top: 6rem;
   padding-left: 8rem;
   max-width: calc(100%-8rem);
-  min-height: calc(100vh - 8rem);
-  background-color: rgb(24, 24, 24, .85);
   padding-bottom: 1rem;
-  overflow: hidden;
-  transition: .4s;
 }
 
-.foreground p {
+.foregroundContent p {
   line-height: 1.5em;
   max-width: min(90%, 40rem);
 }
 
 .homeground {
-  position: relative;
+  background-color: rgb(0, 0, 0, .6);
-  padding-top: 7rem;
+}
-  min-height: calc(100vh - 8rem);
+
-  padding-bottom: 1rem;
+.homegroundContent {
-  overflow: hidden;
+  padding-top: 7em;
-  transition: .4s;
+  padding-left: 0em;
 }
 
 .noBackground {
@@ -835,26 +861,16 @@ a {
     background-size: auto 100%;
   }
 
-  .foreground {
+  .foregroundContent {
-    max-width: 100%;
-    padding-left: 2rem;
     /* centered objects will need to remove 1.5 of this to center */
-    padding-right: .5rem;
+    padding-left: 1em;
+    padding-right: 1em;
     padding-bottom: 36px;
     padding-top: 3em;
   }
 
-  .homeground {
+  .homegroundContent {
-    width: 90%;
+    padding-top: 5em;
-    padding-bottom: 36px;
-    display: flex;
-    margin: auto;
-    overflow: visible;
-  }
-
-  .centeredForeground {
-    margin-left: -1.5rem;
-    /* remove .foreground excess margin */
   }
 
   .onRight {
@@ -863,8 +879,12 @@ a {
     margin-right: 0;
   }
 
+  .timeline {
+    padding-left: 1em;
+  }
+
   .col {
-    width: 90%;
+    width: 100%;
     margin-bottom: 3rem;
   }
 

src/templates/about.html

@@ -1,5 +1,6 @@
 {% block content %}
-<div class="foreground">
+<div class="foreground"></div>
+<div class="foregroundContent">
   <div class="relative">
     <div id="aboutGrid">
       <div id="aboutMe" class="col" data-aos="fade-up">
@@ -77,8 +78,8 @@
           <div class="timeline checkbox-client">
             {% from 'partials/timeline.html' import timeitem %} {% for i in
             var["timeline"] %} {{ timeitem(i, var["timeline"][i]["classes"],
-          var["timeline"][i]["date"], var["timeline"][i]["content"])}} {% endfor
+            var["timeline"][i]["date"], var["timeline"][i]["content"])}} {%
-          %}
+            endfor %}
           </div>
           <script>
             toggleCheckbox("up");

src/templates/books.html

@@ -1,5 +1,6 @@
 {% block content %}
-<div class="foreground">
+<div class="foreground"></div>
+<div class="foregroundContent">
   <h2>These are some of the books I've read since 2020, vaguely sorted by topic.</h2>
   <h3>"You can't judge a book by its cover but you can judge a person by their bookshelf" - Me, today.</h3>
   <h4>Hover to reveal review<br />Read to reveal KNOWLEDGE</h4>

src/templates/duck.html

@@ -1,5 +1,6 @@
 {% block content %}
-<div class="foreground">
+<div class="foreground"></div>
+<div class="foregroundContent">
   <h2>What the duck?</h2>
   <img
     alt="mega spinney duck"

src/templates/error.html

@@ -1,4 +1,5 @@
 {% block content %}
+<div class="foreground homeground"></div>
 <div class="fPage">
   <div class="heightBox">
     <div class="neonBox">

src/templates/header.html

@@ -39,6 +39,10 @@
 
       gtag("config", "G-E2V93W9CNV");
     </script>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='css/hotspots.css') }}"
+    />
     <link
       rel="stylesheet"
       href="{{ url_for('static', filename='css/App.css') }}"
@@ -53,8 +57,19 @@
     />
 
     <link rel="canonical" href="https://asimonson.com{{ var['canonical'] }}" />
-    <script defer src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
+    <link defer
-    <script defer src="{{ url_for('static', filename='js/idler.js') }}"></script>
+    rel="stylesheet"
+    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    crossorigin=""
+  />
+  <script defer
+    src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+    crossorigin=""
+  ></script>
+  <script defer src="{{ url_for('static', filename='js/lib/leaflet-providers.js') }}"></script>
+  <script defer src="{{ url_for('static', filename='js/lib/CUSTOM.leaflet.curve.js') }}"></script>
     <script src="{{ url_for('static', filename='js/checkbox.js') }}"></script>
     <script src="{{ url_for('static', filename='js/responsive.js') }}"></script>
     <script src="{{ url_for('static', filename='js/chessbed.js') }}"></script>
@@ -63,6 +78,8 @@
 
   <body onpopstate="backButton()">
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="map"></div>
+    <script defer src="{{ url_for('static', filename='js/hotspots.js') }}"></script>
     <div class="App">
       <div class="header">
         <div id="name-container" onclick="goto('home', {toggle:false})">
@@ -101,8 +118,6 @@
       </div>
     </div>
     <div id="root">{% include var['template'] %}</div>
-    <div class="footer">
+    <div class="footer">{% include 'partials/socials.html' %}</div>
-      {% include 'partials/socials.html' %}
-    </div>
   </body>
 </html>

src/templates/home.html

@@ -1,5 +1,6 @@
 {% block content %}
-<div class="homeground">
+<div class="foreground homeground"></div>
+<div class="foregroundContent homegroundContent">
   <div class="relative">
     <div class="flex">
       <div id="HomeContent" data-aos="fade-up">

src/templates/projects.html

@@ -1,5 +1,6 @@
 {% block content %}
-<div class="foreground">
+<div class="foreground"></div>
+<div class="foregroundContent">
     <div data-aos="fade-up">
       <h2 class="concentratedHead">Projects</h2>
       <p>
@@ -35,7 +36,7 @@
       </label>
       </div>
     </div>
-    <div class="projectList centeredForeground checkbox-client">
+    <div class="projectList checkbox-client">
         {% from 'partials/project.html' import project %} 
         {% for i in var["projects"] %}
         {{ project(i, var["projects"][i]["classes"], var["projects"][i]["status"], var["projects"][i]["bgi"], var["projects"][i]["content"], var["projects"][i]["links"]) }}