replace idler and accidentally fix foreground

src/templates/about.html

@@ -1,91 +1,92 @@
 {% 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">
-      <h2 class="concentratedHead">About Me</h2>
-      <p>
-        I'm Andrew Simonson, a fourth year student at
-        <strong>Rochester Institute of Technology </strong>
-        in the <b>Computer Science BS</b> program, pursuing a career in data
-        science with a focus on predictive analytics.
-      </p>
-      <p>
-        <br /><br />
-        Ominous positivity is kinda my thing.
-      </p>
-    </div>
-    <div class="col rightCol" data-aos="fade-up">
-      <div id="skills">
-      <!-- <h2>Skills</h2> -->
-      {% from 'partials/skills.html' import skills %} {{ skills([ "Python",
-      "JavaScript", "Java", "C", "C++", "R", "MIPS Assembly", "Processing",
-      "P5.js", "SQL", "SQLite", "PostgreSQL", "SQLAlchemy", "HTML", "CSS",
-      "Docker", "LaTeX", "ArcGIS", "Git", "Github", "Linux", "OKD4",
-      "Kubernetes", "Openshift", "Nginx", "Angular", "Flask", "Jinja", "Web
-      Scraping", "Google API", "React", "Node.js", "ArcGIS", ]) }}
-    </div>
-      <div id="timeline">
-        <h2>Timeline</h2>
-        <div class="checkbox-wrapper">
-          <div class="flex start">
-            <label class="switch" htmlFor="pinned">
-              <input
-                type="checkbox"
-                id="pinned"
-                onClick='toggleCheckbox("up")'
-                checked
-              />
-              <div class="slider round"></div>
-              <strong>Pinned</strong>
-            </label>
-          </div>
-          <div class="flex start">
-            <label class="switch" htmlFor="education">
-              <input
-                type="checkbox"
-                id="education"
-                onClick="toggleCheckbox('up')"
-              />
-              <div class="slider round"></div>
-              <strong>Education</strong>
-            </label>
-          </div>
-          <div class="flex start">
-            <label
-              class="switch"
-              htmlFor="experience"
-              onClick="toggleCheckbox('up')"
-            >
-              <input type="checkbox" id="experience" />
-              <div class="slider round"></div>
-              <strong>Work Experience</strong>
-            </label>
-          </div>
-          <div class="flex start">
-            <label
-              class="switch"
-              htmlFor="technical"
-              onClick="toggleCheckbox('up')"
-            >
-              <input type="checkbox" id="technical" />
-              <div class="slider round"></div>
-              <strong>Technical</strong>
-            </label>
-          </div>
-        </div>
-        <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
-          %}
-        </div>
-        <script>
-          toggleCheckbox("up");
-        </script>
+    <div id="aboutGrid">
+      <div id="aboutMe" class="col" data-aos="fade-up">
+        <h2 class="concentratedHead">About Me</h2>
+        <p>
+          I'm Andrew Simonson, a fourth year student at
+          <strong>Rochester Institute of Technology </strong>
+          in the <b>Computer Science BS</b> program, pursuing a career in data
+          science with a focus on predictive analytics.
+        </p>
+        <p>
+          <br /><br />
+          Ominous positivity is kinda my thing.
+        </p>
       </div>
-    </div>
-    <!-- {/* <div data-aos="fade-up" class="elementBlock">
+      <div class="col rightCol" data-aos="fade-up">
+        <div id="skills">
+          <!-- <h2>Skills</h2> -->
+          {% from 'partials/skills.html' import skills %} {{ skills([ "Python",
+          "JavaScript", "Java", "C", "C++", "R", "MIPS Assembly", "Processing",
+          "P5.js", "SQL", "SQLite", "PostgreSQL", "SQLAlchemy", "HTML", "CSS",
+          "Docker", "LaTeX", "ArcGIS", "Git", "Github", "Linux", "OKD4",
+          "Kubernetes", "Openshift", "Nginx", "Angular", "Flask", "Jinja", "Web
+          Scraping", "Google API", "React", "Node.js", "ArcGIS", ]) }}
+        </div>
+        <div id="timeline">
+          <h2>Timeline</h2>
+          <div class="checkbox-wrapper">
+            <div class="flex start">
+              <label class="switch" htmlFor="pinned">
+                <input
+                  type="checkbox"
+                  id="pinned"
+                  onClick='toggleCheckbox("up")'
+                  checked
+                />
+                <div class="slider round"></div>
+                <strong>Pinned</strong>
+              </label>
+            </div>
+            <div class="flex start">
+              <label class="switch" htmlFor="education">
+                <input
+                  type="checkbox"
+                  id="education"
+                  onClick="toggleCheckbox('up')"
+                />
+                <div class="slider round"></div>
+                <strong>Education</strong>
+              </label>
+            </div>
+            <div class="flex start">
+              <label
+                class="switch"
+                htmlFor="experience"
+                onClick="toggleCheckbox('up')"
+              >
+                <input type="checkbox" id="experience" />
+                <div class="slider round"></div>
+                <strong>Work Experience</strong>
+              </label>
+            </div>
+            <div class="flex start">
+              <label
+                class="switch"
+                htmlFor="technical"
+                onClick="toggleCheckbox('up')"
+              >
+                <input type="checkbox" id="technical" />
+                <div class="slider round"></div>
+                <strong>Technical</strong>
+              </label>
+            </div>
+          </div>
+          <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 %}
+          </div>
+          <script>
+            toggleCheckbox("up");
+          </script>
+        </div>
+      </div>
+      <!-- {/* <div data-aos="fade-up" class="elementBlock">
       <h2>Extracirricular Awards</h2>
       <MyCarousel class="carousel" data-aos="fade-up">
         {[
@@ -115,7 +116,7 @@
         ]}
       </MyCarousel>
     </div> */} -->
-  </div>
+    </div>
   </div>
 </div>
 {% endblock %}

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>
-    <script defer src="{{ url_for('static', filename='js/idler.js') }}"></script>
+    <link defer
+    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,18 +78,20 @@
 
   <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})">
-            <div class="glitch">
-              {% for i in range(9) %}
-              <div class="line name">
-                <span class="textGrad">Andrew Simonson</span>
-              </div>
-              {% endfor %}
+        <div id="name-container" onclick="goto('home', {toggle:false})">
+          <div class="glitch">
+            {% for i in range(9) %}
+            <div class="line name">
+              <span class="textGrad">Andrew Simonson</span>
             </div>
+            {% endfor %}
           </div>
-        
+        </div>
+
         <img
           src="{{ url_for('static', filename='icons/menu.svg')}}"
           alt="menu"
@@ -101,8 +118,6 @@
       </div>
     </div>
     <div id="root">{% include var['template'] %}</div>
-    <div class="footer">
-      {% include 'partials/socials.html' %}
-    </div>
+    <div class="footer">{% 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"]) }}