From 67a9c921470821a5de29859fc92e877b18dd2d5d Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Wed, 3 Jul 2024 18:16:17 -0400
Subject: [PATCH 01/28] started some cards

---
 src/pages/dev/test-site/main-page/+Page.mdx | 14 ++++-----
 src/pages/dev/test-site/main-page/main.styl | 33 ++++++++++++++++-----
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/pages/dev/test-site/main-page/+Page.mdx b/src/pages/dev/test-site/main-page/+Page.mdx
index fe1fad95..6bd72a18 100644
--- a/src/pages/dev/test-site/main-page/+Page.mdx
+++ b/src/pages/dev/test-site/main-page/+Page.mdx
@@ -1,5 +1,4 @@
 import { PageHeader } from "~/components";
-import { LinkCard } from "~/components/cards";
 import { Image, Navbar, Footer } from "../index";
 import "./main.styl";
 import "../main.styl";
@@ -49,7 +48,6 @@ import { MacrostratIcon } from "~/components";
     </div>
 </div>
 
-
 [//]: # "Locations"
 <div id="locations">
   <div class="location">
@@ -79,7 +77,7 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Map Interface"
-<div class="temp-class" id="map">
+<div class="card basic-card">
   <div class="link-title">
     <a href="/map"><h1>Map Interface</h1></a>
   </div>
@@ -93,7 +91,7 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Maps"
-<div class="temp-class" id="maps">
+<div class="card basic-card">
   <div class="link-title">
     <a href="/maps"><h1>Maps</h1></a>
   </div>
@@ -103,7 +101,7 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Columns"
-<div class="temp-class" id="columns">
+<div class="card basic-card">
   <div class="link-title">
     <a href="/columns"><h1>Columns</h1></a>
   </div>
@@ -113,7 +111,7 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Geologic Lexicon"
-<div class="temp-class" id="lexicon">
+<div class="card basic-card">
   <div class="link-title">
     <a href="/lex"><h1>Geologic Lexicon</h1></a>
   </div>
@@ -123,7 +121,7 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Projects"
-<div class="temp-class" id="project">
+<div class="card basic-card">
   <div class="link-title">
     <a href="/projects"><h1>Projects</h1></a>
   </div>
@@ -134,7 +132,7 @@ import { MacrostratIcon } from "~/components";
 
 
 [//]: # "Donate"
-<div class="donate-container" id="donate">
+<div class="card donate-container" id="donate">
   <Image className="back-img donate-img" src="donate_medium.jpg"></Image>
   <div class="text-donate">
     <div class="donate-left">
diff --git a/src/pages/dev/test-site/main-page/main.styl b/src/pages/dev/test-site/main-page/main.styl
index 1620dea6..375c3235 100644
--- a/src/pages/dev/test-site/main-page/main.styl
+++ b/src/pages/dev/test-site/main-page/main.styl
@@ -195,7 +195,7 @@ a:hover
   height: 100vh
 
 .donate-container
-  height: 80vh
+  height: 30vh
 
 .donate-title
   a 
@@ -211,7 +211,7 @@ a:hover
 .donate-left
   float: left
   width: 50%
-  height: 80vh
+  height: 30vh
   display: flex;
   justify-content: center;
   align-items: center;
@@ -219,7 +219,7 @@ a:hover
 .donate-right
   float: right
   width: 50%
-  height: 80vh
+  height: 30vh
   display: flex;
   justify-content: center;
   align-items: center;
@@ -239,9 +239,10 @@ a:hover
 .donate-img
   position:absolute
   z-index:5
-  height: 80vh
-  width: 100%
+  height: 30vh
+  width: 60%
   object-fit: cover
+  border-radius: 10px
 
 .app-header
   margin: 0
@@ -390,6 +391,7 @@ a:hover
   position:absolute
   z-index: 100
   padding: 0 20px
+  width: 60%
 
 
 .location
@@ -428,7 +430,7 @@ a:hover
   display: grid
   margin: auto
 
-.temp-class
+.basic-card
   display: grid
   grid-template-columns: 40% 60%
   grid-template-rows: 30vh
@@ -437,7 +439,7 @@ a:hover
   .link-title
     display: grid
     margin: auto
-    margin-left: 20%  
+    margin-left: 10%
     font-size: 35px
     
     a
@@ -452,5 +454,22 @@ a:hover
     font-size: 16px
 
 
+.card
+  padding: 0
+  margin: 2% 20%
+  width: 60%
+
+  .link-title 
+    font-size: 35px
+    
+    a
+      color: black
+
+  p
+    color: black
+    font-size: 16px
+
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
 
   
\ No newline at end of file

From 81d58dd54afce5a5ebad584727f8a6c82ee0ef06 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Wed, 3 Jul 2024 18:59:47 -0400
Subject: [PATCH 02/28] everything is a card

---
 src/pages/dev/test-site/main-page/+Page.mdx | 47 ++++++++-------
 src/pages/dev/test-site/main-page/main.styl | 66 ++++++++++++++++++---
 src/pages/dev/test-site/main.styl           |  2 +
 3 files changed, 83 insertions(+), 32 deletions(-)

diff --git a/src/pages/dev/test-site/main-page/+Page.mdx b/src/pages/dev/test-site/main-page/+Page.mdx
index 6bd72a18..ddab4144 100644
--- a/src/pages/dev/test-site/main-page/+Page.mdx
+++ b/src/pages/dev/test-site/main-page/+Page.mdx
@@ -10,6 +10,7 @@ import { MacrostratIcon } from "~/components";
 <Navbar></Navbar>
 
 [//]: # "Start Page"
+<div class="card">
 <div class="start">
     <Image className="back-img cover-image" src="cover_large.jpg"></Image>
     <div class="text">
@@ -47,33 +48,33 @@ import { MacrostratIcon } from "~/components";
       </div>
     </div>
 </div>
+</div>
 
 [//]: # "Locations"
-<div id="locations">
-  <div class="location">
-    <Image className="location-img t1" src="north_america_med.jpg"></Image>
-    <div class="location-text">
-      <h1>North America</h1>
-      <div class="caption">243 packages. 798 units. 897 collections.</div>
-    </div>
-    <Image className="location-img t2" src="caribbean_new_medium.jpg"></Image>
-    <div class="location-text">
-      <h1>Carribean</h1>
-      <div class="caption">243 packages. 798 units. 897 collections.</div>
-    </div>
+<div class="card location-card">
+  <Image className="card-image top" src="north_america_med.jpg"></Image>
+  <div class="location-text">
+    <h1>North America</h1>
+    <p>243 packages. 798 units. 897 collections.</p>
   </div>
-  <div class="location">
-    <div class="location-text">
-      <h1>New Zealand</h1>
-      <div class="caption">828 packages. 2,168 units. 328 collections.</div>
-    </div>
-    <Image className="location-img t1" src="new_zealand_new_medium.jpg"></Image>
-    <div class="location-text">
-      <h1>Deep Sea</h1>
-      <div class="caption">388 packages. 7,124 units. 0 collections.</div>
-    </div>
-    <Image className="location-img t2" src="deep_sea_new_medium.jpg"></Image>
+
+  <div class="location-text">
+    <h1>Carribean</h1>
+    <p>243 packages. 798 units. 897 collections.</p>
+  </div>
+  <Image className="card-image" src="caribbean_new_medium.jpg"></Image>
+
+  <Image className="card-image" src="new_zealand_new_medium.jpg"></Image>
+  <div class="location-text">
+    <h1>New Zealand</h1>
+    <p>828 packages. 2,168 units. 328 collections.</p>
+  </div>
+
+  <div class="location-text">
+    <h1>Deep Sea</h1>
+    <p>388 packages. 7,124 units. 0 collections.</p>
   </div>
+  <Image className="card-image bottom" src="deep_sea_new_medium.jpg"></Image>
 </div>
 
 [//]: # "Map Interface"
diff --git a/src/pages/dev/test-site/main-page/main.styl b/src/pages/dev/test-site/main-page/main.styl
index 375c3235..fe6202c1 100644
--- a/src/pages/dev/test-site/main-page/main.styl
+++ b/src/pages/dev/test-site/main-page/main.styl
@@ -1,6 +1,6 @@
 html, body
   color: #E0E1E6
-  background-color: white
+  background-color: white 
   margin: 0
 
 #total
@@ -16,11 +16,12 @@ a:hover
   color: white
 
 .start
+  margin-top: 5%
   width: 100%
   display: flex;
   justify-content: center;
   align-items: center;  
-  height: 95vh
+  height: 80vh
   color: white
 
   li
@@ -37,16 +38,16 @@ a:hover
   z-index: 100
   padding: 0 20px
   display: grid
+  width: 50%
   margin: auto
 
 .cover-image
   position:absolute
   z-index:5
-  left:0px
-  top:0px
-  height: 100vh
-  width: 100%
+  height: 80vh
+  width: 60%
   object-fit: cover
+  border-radius: 10px
 
 .sea-image
   position:absolute
@@ -65,10 +66,13 @@ a:hover
   text-align: center
 
 .big-text
+  display: grid
+  margin: auto
   font-family: Helvetica, sans-serif
   font-weight: 900
   font-size: 20px
   text-shadow: black 1px 0 10px
+  color: white
 
 .top-stat, .top-stat-label
   display: grid
@@ -169,7 +173,8 @@ a:hover
   text-align: center
 
 .header 
-  margin: 0 20%
+  display: grid
+  margin: auto
   text-shadow: black 1px 0 10px
 
 #main-title
@@ -455,6 +460,7 @@ a:hover
 
 
 .card
+  background-color: white
   padding: 0
   margin: 2% 20%
   width: 60%
@@ -466,10 +472,52 @@ a:hover
       color: black
 
   p
-    color: black
     font-size: 16px
 
   border-radius: 10px
   box-shadow: black 1px 0 10px
 
-  
\ No newline at end of file
+.location-card
+  display: grid
+  grid-template-columns: 50% 50%
+  grid-template-rows: 30vh
+  
+  .link-title
+    display: grid
+    margin: auto
+    margin-left: 10%
+    font-size: 35px
+    
+    a
+      color: black
+
+  p
+    color: black
+    font-size: 16px
+
+  h1
+    color: black
+  
+  .card-image
+    height: 30vh
+    width: 100%
+
+  .top
+    border-radius: 10px 0 0 0
+  
+  .bottom
+    border-radius: 0 0 10px 0
+
+.location-text 
+  h1
+    diplay: grid
+    margin: auto
+    margin-bottom: 1%
+  p
+    display: grid
+    margin: auto
+    margin-top: 1%
+
+.long
+  a 
+    color: blue
\ No newline at end of file
diff --git a/src/pages/dev/test-site/main.styl b/src/pages/dev/test-site/main.styl
index 67dc178e..3c0d8fbb 100644
--- a/src/pages/dev/test-site/main.styl
+++ b/src/pages/dev/test-site/main.styl
@@ -2,6 +2,8 @@
   position: fixed
   width: 100%
   z-index: 10000
+  top: 0px
+  left: 0px
 
   ul 
     list-style-type: none;

From 477323ebcda4f90dc114d1807fe1a481c4bfdf35 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Wed, 3 Jul 2024 20:35:56 -0400
Subject: [PATCH 03/28] move nav bar over

---
 src/pages/dev/test-site/main.styl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/dev/test-site/main.styl b/src/pages/dev/test-site/main.styl
index 67dc178e..e75908ff 100644
--- a/src/pages/dev/test-site/main.styl
+++ b/src/pages/dev/test-site/main.styl
@@ -7,6 +7,7 @@
     list-style-type: none;
     margin: 0;
     padding: 0;
+    padding-left: 20%
     overflow: hidden;
     background-color: #015eab;
 

From 85aa2bc4ebb15e24bb20982983b0fbe1f917a251 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Wed, 3 Jul 2024 20:37:25 -0400
Subject: [PATCH 04/28] move nav bar over

---
 src/pages/dev/test-site/main.styl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/dev/test-site/main.styl b/src/pages/dev/test-site/main.styl
index 3c0d8fbb..8660470c 100644
--- a/src/pages/dev/test-site/main.styl
+++ b/src/pages/dev/test-site/main.styl
@@ -9,6 +9,7 @@
     list-style-type: none;
     margin: 0;
     padding: 0;
+    padding-left: 20%
     overflow: hidden;
     background-color: #015eab;
 

From 617ffa642f913de52f4f6fcd96fd73c44cb82eb2 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Wed, 3 Jul 2024 21:29:17 -0400
Subject: [PATCH 05/28] split up start card

---
 src/pages/dev/test-site/main-page/+Page.mdx | 47 +++++++-------
 src/pages/dev/test-site/main-page/main.styl | 69 ++++++++++++++++++---
 2 files changed, 83 insertions(+), 33 deletions(-)

diff --git a/src/pages/dev/test-site/main-page/+Page.mdx b/src/pages/dev/test-site/main-page/+Page.mdx
index ddab4144..98b506ec 100644
--- a/src/pages/dev/test-site/main-page/+Page.mdx
+++ b/src/pages/dev/test-site/main-page/+Page.mdx
@@ -17,6 +17,7 @@ import { MacrostratIcon } from "~/components";
       <span class="header">
         <h1 id="main-title" class="big">Macrostrat<h2 class="version">v2</h2></h1>
       </span>
+      <p class="big-text">A platform for geological data exploration, integration, and analysis</p>
       <div class="stats">
         <div class="stat">
           <span class="top-stat" id="n_columns">1,400</span>
@@ -35,21 +36,31 @@ import { MacrostratIcon } from "~/components";
           <span class="top-stat-label"><a href="Macrostrat_strat_names.html" target="_blank">Stratigraphic Names</a></span>
         </div>
       </div>
-      <p class="big-text">A platform for geological data exploration, integration, and analysis</p>
-      <div class="buttons1">
-        <a type="button" class="btn" href="/sift/#/">Search</a>
-        <a type="button" class="btn" href="/map/#3/40.78/-94.13">Geologic Map</a>
-        <div type="button" class="btn rockd" onclick="window.location='https://rockd.org'">
-          <div class="rockd-button-container">
-            <Image src="rockd.jpg" width="22px" className="rockd-png"></Image>
-            <a href="https://rockd.org" target="_blank">Go mobile</a>
-          </div>
-        </div>
-      </div>
     </div>
 </div>
 </div>
 
+[//]: # "Map Interface"
+<div class="card map-card">
+  <p>
+    <div class="temp">With over 225 maps from data providers around the world across every scale, Macrostrat is the world's largest homogenized geologic map database. Our data processing pipeline links geologic map polygons to Macrostrat column polygons, external stratigraphic name lexicons, and geochronological intervals, enabling the enhancement of the original map data and allowing for direct links into <a href="https://xdd.wisc.edu" target="_blank">xDD</a> (formly GeoDeepDive).</div>
+    \
+    <div class="temp">Are you affiliated with a state or national geologic survey? <a href="mailto:contact@macrostrat.org?Subject=Geologic%20Map%20Collaboration">Get in touch</a> with us - we'd love to collaborate and help publicize your maps!</div>
+    \
+    <div class="temp"> Get started by <a href="/map">exploring the map</a> or <a href="/map/sources">taking a look at</a> which maps are currently a part of Macrostrat.</div>
+    <div class="buttons1">
+      <a type="button" class="btn" href="/map/#3/40.78/-94.13">Geologic Map</a>
+      <a type="button" class="btn" href="/sift/#/">Search</a>
+    </div>
+  </p>
+</div>
+
+[//]: # "Mobile"
+<div class="card mobile-card">
+  <Image src="rockd.jpg" width="22px" className="rockd-png"></Image>
+  <h1><a href="https://rockd.org" target="_blank">Go mobile!</a></h1>
+</div>
+
 [//]: # "Locations"
 <div class="card location-card">
   <Image className="card-image top" src="north_america_med.jpg"></Image>
@@ -77,20 +88,6 @@ import { MacrostratIcon } from "~/components";
   <Image className="card-image bottom" src="deep_sea_new_medium.jpg"></Image>
 </div>
 
-[//]: # "Map Interface"
-<div class="card basic-card">
-  <div class="link-title">
-    <a href="/map"><h1>Map Interface</h1></a>
-  </div>
-  <p class="long">
-    <div class="temp">With over 225 maps from data providers around the world across every scale, Macrostrat is the world's largest homogenized geologic map database. Our data processing pipeline links geologic map polygons to Macrostrat column polygons, external stratigraphic name lexicons, and geochronological intervals, enabling the enhancement of the original map data and allowing for direct links into <a href="https://xdd.wisc.edu" target="_blank">xDD</a> (formly GeoDeepDive).</div>
-    \
-    <div class="temp">Are you affiliated with a state or national geologic survey? <a href="mailto:contact@macrostrat.org?Subject=Geologic%20Map%20Collaboration">Get in touch</a> with us - we'd love to collaborate and help publicize your maps!</div>
-    \
-    <div class="temp"> Get started by <a href="/map">exploring the map</a> or <a href="/map/sources">taking a look at</a> which maps are currently a part of Macrostrat.</div>
-  </p>
-</div>
-
 [//]: # "Maps"
 <div class="card basic-card">
   <div class="link-title">
diff --git a/src/pages/dev/test-site/main-page/main.styl b/src/pages/dev/test-site/main-page/main.styl
index fe6202c1..8c7cf7f0 100644
--- a/src/pages/dev/test-site/main-page/main.styl
+++ b/src/pages/dev/test-site/main-page/main.styl
@@ -21,7 +21,7 @@ a:hover
   display: flex;
   justify-content: center;
   align-items: center;  
-  height: 80vh
+  height: 35vh
   color: white
 
   li
@@ -44,7 +44,7 @@ a:hover
 .cover-image
   position:absolute
   z-index:5
-  height: 80vh
+  height: 35vh
   width: 60%
   object-fit: cover
   border-radius: 10px
@@ -87,6 +87,7 @@ a:hover
   display: grid
   grid-template-columns: 25% 25% 25% 25%
   margin-bottom: 3%
+  margin-top: 30px
   text-shadow: black 1px 0 10px;
 
   .stat
@@ -109,6 +110,9 @@ a:hover
   text-decoration: none;
   border-radius: 12px;
 
+  a 
+    color: white
+
 .btn:hover 
   background-color: #545151 
 
@@ -116,7 +120,7 @@ a:hover
   font-size: 20px
   padding: 0px
   display: grid
-  grid-template-columns: 33.33% 33.33% 33.33%
+  grid-template-columns: 50% 50%
 
   a 
     color: white
@@ -175,10 +179,13 @@ a:hover
 .header 
   display: grid
   margin: auto
+  margin-bottom: 0
   text-shadow: black 1px 0 10px
 
 #main-title
   display: inline-block
+  margin-bottom: 0
+  padding-bottom: 10px
 
 .version
   display: inline-block
@@ -437,8 +444,8 @@ a:hover
 
 .basic-card
   display: grid
-  grid-template-columns: 40% 60%
-  grid-template-rows: 30vh
+  grid-template-columns: 60% 40%
+  grid-template-rows: 18vh
 
   
   .link-title
@@ -518,6 +525,52 @@ a:hover
     margin: auto
     margin-top: 1%
 
-.long
-  a 
-    color: blue
\ No newline at end of file
+.map-card
+  p
+    color: black
+    border-radius: 10px
+    padding: 30px
+
+    a 
+      color: #015eab;
+
+    .btn
+      p 
+        a 
+          color: white
+
+.temp
+  font-size: 20px
+
+.search-card
+  height: 10vh
+  display:grid
+  margin: auto
+
+  a
+    color:black
+
+.mobile-card
+  height: 10vh
+  display: grid
+  grid-template-columns: 10vh 80%
+
+  a
+    color: black
+
+  h1
+    display: grid
+    margin: auto
+    font-size: 50px
+
+.rockd-png
+  height: 10vh
+  width: 10vh
+  padding-top: 0
+  border-radius: 10px 0 0 10px
+
+.search-card
+  h1 
+    display: grid
+    margin: auto
+    font-size: 50px
\ No newline at end of file

From 9f8d5b5a71a1a961d1f4a5ff33eb45c672d02f7b Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Fri, 5 Jul 2024 13:47:58 -0400
Subject: [PATCH 06/28] start

---
 src/pages/dev/test-site/people/+Page.mdx | 32 ++++++++++++------------
 src/pages/dev/test-site/people/main.styl | 20 +++++++++++++++
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/pages/dev/test-site/people/+Page.mdx b/src/pages/dev/test-site/people/+Page.mdx
index d7625a5f..7c17a294 100644
--- a/src/pages/dev/test-site/people/+Page.mdx
+++ b/src/pages/dev/test-site/people/+Page.mdx
@@ -16,7 +16,7 @@ import { MacrostratIcon } from "~/components";
 
 <div class="people" id="people">
     <div class="left">
-        <div class="person-info" id="shanan">
+        <div class="person-info card" id="shanan">
             <Image className="back-img" src="shanan.jpg"></Image>
             <div class="text">
                 <n><a href="http://strata.geology.wisc.edu" target="_blank">Shanan Peters</a></n>\
@@ -25,7 +25,7 @@ import { MacrostratIcon } from "~/components";
             </div>
         </div>
 
-        <div class="person-info" id="daven">
+        <div class="person-info card" id="daven">
             <Image className="back-img" src="daven.jpg"></Image>
             <div class="text">
                 <n><a href="https://davenquinn.com" target="_blank">Daven Quinn</a></n> \
@@ -34,7 +34,7 @@ import { MacrostratIcon } from "~/components";
             </div>
         </div>
 
-        <div class="person-info" id="evgeny">
+        <div class="person-info card" id="evgeny">
             <Image className="back-img" src="evgeny.jpg"></Image>
             <div class="text">
                 <n>Evgeny Mazko</n> \
@@ -43,7 +43,7 @@ import { MacrostratIcon } from "~/components";
             </div>
         </div>
             
-        <div class="person-info" id="michael">
+        <div class="person-info card" id="michael">
             <Image className="back-img" src="michael.jpg"></Image>
             <div class="text">
                 <n><a href="https://geoscience.wisc.edu/geoscience/people/staff/name/michael-mcclennen/" target="_blank">Michael McClennen</a></n> \
@@ -52,7 +52,7 @@ import { MacrostratIcon } from "~/components";
             </div>
         </div>
 
-        <div class="person-info" id="casey">
+        <div class="person-info card" id="casey">
         <Image className="back-img" src="casey.jpg"></Image>
             <div class="text">
                 <n><a href="https://idzikowski-casey.github.io/personal-site/" target="_blank">Casey Idzikowski</a></n> \
@@ -60,7 +60,7 @@ import { MacrostratIcon } from "~/components";
             </div>
         </div>
 
-        <div class="person-info" id="daniel">
+        <div class="person-info card" id="daniel">
         <Image className="back-img" src="daniel.jpg"></Image>
             <div class="text">
                 <n><a href="http://strata.geology.wisc.edu" target="_blank">Daniel Segessenmen</a></n> \
@@ -68,7 +68,7 @@ import { MacrostratIcon } from "~/components";
             </div>
         </div>
 
-        <div class="person-info" id="shan">
+        <div class="person-info card" id="shan">
         <Image className="back-img" src="shan.jpg"></Image>
             <div class="text">
                 <n><a href="https://www.wisc.edu/directories/person.php?name=Victoria+Khoo&email=vkhoo%40wisc.edu&query=victoria%20khoo" target="_blank">Shan Ye</a></n> \
@@ -76,7 +76,7 @@ import { MacrostratIcon } from "~/components";
             </div>
         </div>
 
-        <div class="person-info" id="ben">
+        <div class="person-info card" id="ben">
         <Image className="back-img" src="ben.jpg"></Image>
             <div class="text">
                 <n><a href="http://strata.geology.wisc.edu" target="_blank">Ben Linzmeier</a></n> \
@@ -86,7 +86,7 @@ import { MacrostratIcon } from "~/components";
     </div>
 
     <div class="right">
-        <div class="person-info" id="afiqah">
+        <div class="person-info card" id="afiqah">
         <Image className="back-img" src="afiqah.jpg"></Image>
             <div class="text">
                 <n><a href="https://www.wisc.edu/directories/person.php?name=Victoria+Khoo&email=vkhoo%40wisc.edu&query=victoria%20khoo" target="_blank">Afiqah Rafi</a></n> \
@@ -94,7 +94,7 @@ import { MacrostratIcon } from "~/components";
             </div>
         </div>
 
-        <div class="person-info" id="sharon">
+        <div class="person-info card" id="sharon">
         <Image className="back-img" src="sharon.jpg"></Image>
             <div class="text">
                 <n><a href="http://geoscience.wisc.edu/geoscience/people/student/?id=1007" target="_blank">Sharon McMullen</a></n> \
@@ -102,7 +102,7 @@ import { MacrostratIcon } from "~/components";
             </div>
         </div>
 
-        <div class="person-info" id="andrew">
+        <div class="person-info card" id="andrew">
         <Image className="back-img" src="andrew.jpg"></Image>
             <div class="text">
                 <n><a href="http://www.azstrata.org" target="_blank">Andrew Zaffos</a></n> \
@@ -111,7 +111,7 @@ import { MacrostratIcon } from "~/components";
             </div>
         </div>
 
-        <div class="person-info" id="jon">
+        <div class="person-info card" id="jon">
         <Image className="back-img" src="jon.jpg"></Image>
             <div class="text">
                 <n><a href="http://www.jonhusson.com" target="_blank">Jon Husson</a></n> \
@@ -120,7 +120,7 @@ import { MacrostratIcon } from "~/components";
             </div>
         </div>
 
-        <div class="person-info" id="erika">
+        <div class="person-info card" id="erika">
         <Image className="back-img" src="erika.jpg"></Image>
             <div class="text">
                 <n><a href="https://github.com/ItoErika" target="_blank">Erika Ito</a></n> \
@@ -128,7 +128,7 @@ import { MacrostratIcon } from "~/components";
             </div>
         </div>
 
-        <div class="person-info" id="noel">
+        <div class="person-info card" id="noel">
         <Image className="back-img" src="noel.jpg"></Image>
             <div class="text">
                 <n><a href="http://sedpaleo.org" target="_blank">Noel Heim</a></n> \
@@ -136,7 +136,7 @@ import { MacrostratIcon } from "~/components";
             </div>
         </div>
 
-        <div class="person-info" id="john">
+        <div class="person-info card" id="john">
         <Image className="back-img" src="john.jpg"></Image>
             <div class="text">
                 <n><a href="http://www.johnjcz.com" target="_blank">John Czaplewski</a></n> \
@@ -144,7 +144,7 @@ import { MacrostratIcon } from "~/components";
             </div>
         </div>
 
-        <div class="person-info" id="puneet">
+        <div class="person-info card" id="puneet">
         <Image className="back-img" src="puneet.jpg"></Image>
             <div class="text">
                 <n><a href="http://punkish.org" target="_blank">Puneet Kishor</a></n> \
diff --git a/src/pages/dev/test-site/people/main.styl b/src/pages/dev/test-site/people/main.styl
index b83cc223..48b0cdfe 100644
--- a/src/pages/dev/test-site/people/main.styl
+++ b/src/pages/dev/test-site/people/main.styl
@@ -20,6 +20,24 @@ a:hover
   margin: 0 20% 
 
 
+.card
+  background-color: white
+  padding: 0
+  margin: 2% 20%
+  width: 60%
+
+  .link-title 
+    font-size: 35px
+    
+    a
+      color: black
+
+  p
+    font-size: 16px
+
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
+
 .people
     color: white
 
@@ -47,6 +65,7 @@ a:hover
     background-color: rgba(0, 0, 0, 0.2)
     bottom:0
     right: 0
+    border-radius: 0 0 10px 0
 
     a
         color: white
@@ -60,6 +79,7 @@ a:hover
     height: 30vh
     object-fit: cover
     width: 100%
+    border-radius: 10px
 
 n
     font-size: 25px

From 59a3aa4e0c4eb4830c8dce599585833b8c165635 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Fri, 5 Jul 2024 13:54:15 -0400
Subject: [PATCH 07/28] start

---
 src/pages/dev/test-site/donate/+Page.mdx |  2 +-
 src/pages/dev/test-site/donate/main.styl | 25 ++++++++++++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/pages/dev/test-site/donate/+Page.mdx b/src/pages/dev/test-site/donate/+Page.mdx
index 83e71dbb..83c02947 100644
--- a/src/pages/dev/test-site/donate/+Page.mdx
+++ b/src/pages/dev/test-site/donate/+Page.mdx
@@ -9,7 +9,7 @@ import { MacrostratIcon } from "~/components";
 <Navbar></Navbar>
 
 [//]: # "Donate"
-<div class="donate-container" id="donate">
+<div class="donate-container card" id="donate">
   <Image className="back-img donate-img" src="donate_medium.jpg"></Image>
   <div class="text">
     <div class="donate-left">
diff --git a/src/pages/dev/test-site/donate/main.styl b/src/pages/dev/test-site/donate/main.styl
index f2d090bf..e199d3a1 100644
--- a/src/pages/dev/test-site/donate/main.styl
+++ b/src/pages/dev/test-site/donate/main.styl
@@ -67,10 +67,31 @@ p
   position:absolute
   z-index:5
   height: 80vh
-  width: 100%
+  width: 60%
   object-fit: cover
+  border-radius: 10px
 
 .text
   position:absolute
   z-index: 100
-  padding: 0 20px
\ No newline at end of file
+  padding: 0 20px
+  width: 60%
+
+.card
+  background-color: white
+  padding: 0
+  margin: 2% 20%
+  margin-top: 100px
+  width: 60%
+
+  .link-title 
+    font-size: 35px
+    
+    a
+      color: black
+
+  p
+    font-size: 16px
+
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
\ No newline at end of file

From 21069e5a58f4e517894ce3f31cb2bd0829d5b3cf Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Mon, 8 Jul 2024 09:20:59 -0400
Subject: [PATCH 08/28] added card

---
 .../dev/test-site/publications/+Page.mdx      |  2 +-
 .../dev/test-site/publications/main.styl      | 27 ++++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/pages/dev/test-site/publications/+Page.mdx b/src/pages/dev/test-site/publications/+Page.mdx
index f5bcab55..62f0375f 100644
--- a/src/pages/dev/test-site/publications/+Page.mdx
+++ b/src/pages/dev/test-site/publications/+Page.mdx
@@ -11,7 +11,7 @@ import { MacrostratIcon } from "~/components";
 <Navbar></Navbar>
 
 [//]: # "Publications"
-<div id="publications">
+<div class="card" id="publications">
   <h1 id="pub-title" class="big">Publications</h1>
   <p class="blurb">literature utilizing Macrostrat</p>
   <div class="pub-line"></div>
diff --git a/src/pages/dev/test-site/publications/main.styl b/src/pages/dev/test-site/publications/main.styl
index 7f2d8942..6e87a368 100644
--- a/src/pages/dev/test-site/publications/main.styl
+++ b/src/pages/dev/test-site/publications/main.styl
@@ -19,12 +19,13 @@ p
     color: #E0E1E6
 
 .pub-line
-  width: 60%;
+  width: 55%;
   border-bottom: 1px solid #E0E1E6;
   position: absolute;
 
 #publications 
-  padding: 50px 20%
+  padding: 0 2.5%
+  padding-bottom: 35px
 
 #pub-title 
   text-align: left
@@ -32,6 +33,7 @@ p
   position: relative
   padding-bottom: 0
   margin-bottom: 0
+  padding-top: 25px
 
 .pub-list
   padding-top: 10px
@@ -49,4 +51,23 @@ p
     counter-increment: pub-counter
 
 .blurb
-  font-size: 15px
\ No newline at end of file
+  font-size: 15px
+
+.card
+  background-color: white
+  padding: 0
+  margin: 2% 20%
+  width: 60%
+  margin-top: 100px
+
+  .link-title 
+    font-size: 35px
+    
+    a
+      color: black
+
+  p
+    font-size: 16px
+
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
\ No newline at end of file

From 5085fed5409e1305762f5537af9c812844e6bd28 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Mon, 8 Jul 2024 09:25:34 -0400
Subject: [PATCH 09/28] changes spacing of start

---
 src/pages/dev/test-site/main-page/+Page.mdx | 2 +-
 src/pages/dev/test-site/main-page/main.styl | 3 +--
 src/pages/dev/test-site/main.styl           | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/pages/dev/test-site/main-page/+Page.mdx b/src/pages/dev/test-site/main-page/+Page.mdx
index ddab4144..2067d339 100644
--- a/src/pages/dev/test-site/main-page/+Page.mdx
+++ b/src/pages/dev/test-site/main-page/+Page.mdx
@@ -10,7 +10,7 @@ import { MacrostratIcon } from "~/components";
 <Navbar></Navbar>
 
 [//]: # "Start Page"
-<div class="card">
+<div class="card start-card">
 <div class="start">
     <Image className="back-img cover-image" src="cover_large.jpg"></Image>
     <div class="text">
diff --git a/src/pages/dev/test-site/main-page/main.styl b/src/pages/dev/test-site/main-page/main.styl
index fe6202c1..ad166cd9 100644
--- a/src/pages/dev/test-site/main-page/main.styl
+++ b/src/pages/dev/test-site/main-page/main.styl
@@ -16,7 +16,7 @@ a:hover
   color: white
 
 .start
-  margin-top: 5%
+  margin-top: 75px
   width: 100%
   display: flex;
   justify-content: center;
@@ -458,7 +458,6 @@ a:hover
     color: black
     font-size: 16px
 
-
 .card
   background-color: white
   padding: 0
diff --git a/src/pages/dev/test-site/main.styl b/src/pages/dev/test-site/main.styl
index 8660470c..09b19f51 100644
--- a/src/pages/dev/test-site/main.styl
+++ b/src/pages/dev/test-site/main.styl
@@ -4,7 +4,7 @@
   z-index: 10000
   top: 0px
   left: 0px
-
+  
   ul 
     list-style-type: none;
     margin: 0;

From 460c5055e71e783069779824e86bb16b69dc8358 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Mon, 8 Jul 2024 09:39:02 -0400
Subject: [PATCH 10/28] fix donate card spacing

---
 src/pages/dev/test-site/main-page/+Page.mdx | 14 ++--
 src/pages/dev/test-site/main-page/main.styl | 92 ++++++++++-----------
 2 files changed, 47 insertions(+), 59 deletions(-)

diff --git a/src/pages/dev/test-site/main-page/+Page.mdx b/src/pages/dev/test-site/main-page/+Page.mdx
index 2067d339..c0425323 100644
--- a/src/pages/dev/test-site/main-page/+Page.mdx
+++ b/src/pages/dev/test-site/main-page/+Page.mdx
@@ -133,16 +133,12 @@ import { MacrostratIcon } from "~/components";
 
 
 [//]: # "Donate"
-<div class="card donate-container" id="donate">
+<div class="card donate-card">
   <Image className="back-img donate-img" src="donate_medium.jpg"></Image>
-  <div class="text-donate">
-    <div class="donate-left">
-      <h1 class="title donate-title"><a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank">Donate Now</a></h1>
-    </div>
-    <div class="donate-right">
-      <div class="donate-info">
-          Grant funding, principally from the <a href="http://www.nsf.gov" target="_blank">U.S. National Science Foundation</a>, got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!
-      </div>
+  <div class="donate-text">
+    <h1 class="donate-title"><a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank">Donate Now</a></h1>
+    <div class="caption-donate">
+        Grant funding, principally from the <a href="http://www.nsf.gov" target="_blank">U.S. National Science Foundation</a>, got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!
     </div>
   </div>
 </div>
diff --git a/src/pages/dev/test-site/main-page/main.styl b/src/pages/dev/test-site/main-page/main.styl
index ad166cd9..e6e7dc0f 100644
--- a/src/pages/dev/test-site/main-page/main.styl
+++ b/src/pages/dev/test-site/main-page/main.styl
@@ -199,48 +199,6 @@ a:hover
 #api
   height: 100vh
 
-.donate-container
-  height: 30vh
-
-.donate-title
-  a 
-    color:white
-  a:hover
-    text-decoration: none
-
-  color: white
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-  font-family: "Maven Pro", sans-serif;
-  padding: 0
-
-.donate-left
-  float: left
-  width: 50%
-  height: 30vh
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-.donate-right
-  float: right
-  width: 50%
-  height: 30vh
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-.donate-info
-  background: rgba(255,255,255,0.6);
-  padding: 25px
-  color: black
-  width: 80%
-  font-size: 18px
-
-  a
-    color: black
-    font-weight: bold
-    text-decoration: none
-
 .donate-img
   position:absolute
   z-index:5
@@ -392,13 +350,6 @@ a:hover
   border-bottom: 1px solid #E0E1E6;
   position: absolute;
 
-.text-donate
-  position:absolute
-  z-index: 100
-  padding: 0 20px
-  width: 60%
-
-
 .location
   display: grid;
   grid-template-columns: 25% 25% 25% 25%;
@@ -519,4 +470,45 @@ a:hover
 
 .long
   a 
-    color: blue
\ No newline at end of file
+    color: blue
+
+.donate-card
+  height: 30vh
+
+.donate-text
+  position:absolute
+  z-index: 100
+  width: 60%
+  display: grid
+  grid-template-columns: 40% 60%;
+  height: 30vh
+
+.donate-title
+  a 
+    color:white
+  a:hover
+    text-decoration: none
+
+  display: grid
+  margin: auto
+  color: white
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+  font-family: "Maven Pro", sans-serif;
+  font-size: 50px
+
+.caption-donate
+  display: grid
+  margin: auto
+  padding: 25px
+  margin-right: 25px
+  background: rgba(255,255,255,0.6);
+  color: black
+  font-size: 18px
+
+  a
+    color: black
+    font-weight: bold
+    text-decoration: none
+
+  p
+    margin-bottom: 0
\ No newline at end of file

From 789aedc72bbcc78c25a11d205185d725667df50d Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Mon, 8 Jul 2024 09:57:25 -0400
Subject: [PATCH 11/28] fix donate card with link and spacing

---
 src/pages/dev/test-site/donate/+Page.mdx | 16 ++---
 src/pages/dev/test-site/donate/main.styl | 87 ++++++++++++------------
 2 files changed, 51 insertions(+), 52 deletions(-)

diff --git a/src/pages/dev/test-site/donate/+Page.mdx b/src/pages/dev/test-site/donate/+Page.mdx
index 83c02947..61f227bc 100644
--- a/src/pages/dev/test-site/donate/+Page.mdx
+++ b/src/pages/dev/test-site/donate/+Page.mdx
@@ -9,18 +9,16 @@ import { MacrostratIcon } from "~/components";
 <Navbar></Navbar>
 
 [//]: # "Donate"
-<div class="donate-container card" id="donate">
+<div class="card donate-card">
+  <a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank">
   <Image className="back-img donate-img" src="donate_medium.jpg"></Image>
-  <div class="text">
-    <div class="donate-left">
-      <h1 class="title donate-title"><a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank">Donate Now</a></h1>
-    </div>
-    <div class="donate-right">
-      <div class="donate-info">
-          Grant funding, principally from the <a href="http://www.nsf.gov" target="_blank">U.S. National Science Foundation</a>, got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!
-      </div>
+  <div class="donate-text">
+    <h1 class="donate-title">Donate Now</h1>
+    <div class="caption-donate">
+        Grant funding, principally from the <a href="http://www.nsf.gov" target="_blank">U.S. National Science Foundation</a>, got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!
     </div>
   </div>
+  </a>
 </div>
 
 [//]: # "Footer"
diff --git a/src/pages/dev/test-site/donate/main.styl b/src/pages/dev/test-site/donate/main.styl
index e199d3a1..9976986e 100644
--- a/src/pages/dev/test-site/donate/main.styl
+++ b/src/pages/dev/test-site/donate/main.styl
@@ -14,54 +14,12 @@ p
   margin-bottom: 10px;
   margin-top: 0;
 
-.donate-container
-  height: 80vh
-
 .title
   margin: 0
   font-size: 72px
   font-family: "Maven Pro", sans-serif;
   padding: 20vh 0
   text-align: center
-  
-.donate-title
-  a 
-    color:white
-  a:hover
-    text-decoration: none
-
-  color: white
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-  font-family: "Maven Pro", sans-serif;
-  padding: 0
-
-.donate-left
-  float: left
-  width: 50%
-  height: 80vh
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-.donate-right
-  float: right
-  width: 50%
-  height: 80vh
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-.donate-info
-  background: rgba(255,255,255,0.6);
-  padding: 25px
-  color: black
-  width: 80%
-  font-size: 18px
-
-  a
-    color: black
-    font-weight: bold
-    text-decoration: none
 
 .donate-img
   position:absolute
@@ -94,4 +52,47 @@ p
     font-size: 16px
 
   border-radius: 10px
-  box-shadow: black 1px 0 10px
\ No newline at end of file
+  box-shadow: black 1px 0 10px
+
+.donate-card
+  height: 80vh
+
+.donate-text
+  position:absolute
+  z-index: 100
+  width: 60%
+  display: grid
+  margin:auto
+  grid-template-rows: 20vh 60vh;
+  height: 80vh
+
+.donate-title
+  a 
+    color:white
+  a:hover
+    text-decoration: none
+
+  display: grid
+  margin: auto
+  color: white
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+  font-family: "Maven Pro", sans-serif;
+  font-size: 100px
+
+.caption-donate
+  display: grid
+  margin: auto
+  padding: 25px
+  margin-right: 20%
+  margin-left: 20%
+  background: rgba(255,255,255,0.6);
+  color: black
+
+  a
+    color: black
+    font-weight: bold
+    text-decoration: none
+
+  p
+    margin-bottom: 0
+    font-size: 175%

From 513a28867fa6d549e647c3679adfce40a4a93c75 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Mon, 8 Jul 2024 09:59:49 -0400
Subject: [PATCH 12/28] donate card link

---
 src/pages/dev/test-site/donate/+Page.mdx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/dev/test-site/donate/+Page.mdx b/src/pages/dev/test-site/donate/+Page.mdx
index 83e71dbb..7ce66d0b 100644
--- a/src/pages/dev/test-site/donate/+Page.mdx
+++ b/src/pages/dev/test-site/donate/+Page.mdx
@@ -11,9 +11,10 @@ import { MacrostratIcon } from "~/components";
 [//]: # "Donate"
 <div class="donate-container" id="donate">
   <Image className="back-img donate-img" src="donate_medium.jpg"></Image>
+  <a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank">
   <div class="text">
     <div class="donate-left">
-      <h1 class="title donate-title"><a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank">Donate Now</a></h1>
+      <h1 class="title donate-title">Donate Now</h1>
     </div>
     <div class="donate-right">
       <div class="donate-info">
@@ -21,6 +22,7 @@ import { MacrostratIcon } from "~/components";
       </div>
     </div>
   </div>
+  </a>
 </div>
 
 [//]: # "Footer"

From 9e8f0e0abfbf04348b2f0e5bf905a3c739beb813 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Mon, 8 Jul 2024 10:10:46 -0400
Subject: [PATCH 13/28] fix coloring of buttons

---
 src/pages/dev/test-site/main-page/main.styl | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/pages/dev/test-site/main-page/main.styl b/src/pages/dev/test-site/main-page/main.styl
index 8c7cf7f0..22fde902 100644
--- a/src/pages/dev/test-site/main-page/main.styl
+++ b/src/pages/dev/test-site/main-page/main.styl
@@ -16,7 +16,7 @@ a:hover
   color: white
 
 .start
-  margin-top: 5%
+  margin-top: 75px
   width: 100%
   display: flex;
   justify-content: center;
@@ -531,17 +531,15 @@ a:hover
     border-radius: 10px
     padding: 30px
 
-    a 
-      color: #015eab;
-
-    .btn
-      p 
-        a 
-          color: white
+  a 
+    color: white;
 
 .temp
   font-size: 20px
 
+  a 
+    color: #015eab
+
 .search-card
   height: 10vh
   display:grid

From 38f052c61ca68496db0fb2695e7f98cc9de5d1bf Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Tue, 9 Jul 2024 11:49:46 -0400
Subject: [PATCH 14/28] section headers

---
 src/pages/dev/test-site/main-page/+Page.mdx |  9 +++++++++
 src/pages/dev/test-site/main-page/main.styl | 14 +++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/pages/dev/test-site/main-page/+Page.mdx b/src/pages/dev/test-site/main-page/+Page.mdx
index c0425323..6758c8ae 100644
--- a/src/pages/dev/test-site/main-page/+Page.mdx
+++ b/src/pages/dev/test-site/main-page/+Page.mdx
@@ -51,6 +51,9 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Locations"
+<div class="section">
+  <h1>Locations</h1>
+</div>
 <div class="card location-card">
   <Image className="card-image top" src="north_america_med.jpg"></Image>
   <div class="location-text">
@@ -77,6 +80,12 @@ import { MacrostratIcon } from "~/components";
   <Image className="card-image bottom" src="deep_sea_new_medium.jpg"></Image>
 </div>
 
+[//]: # "Data Products"
+<div class="section">
+  <h1>Data products</h1>
+  <h2>Macrostrat integrates a variety of geological data products into a community-accessibe, space-time model of the Earth's crust. These products come from a variety of sources throughout the geosciences.</h2>
+</div>
+
 [//]: # "Map Interface"
 <div class="card basic-card">
   <div class="link-title">
diff --git a/src/pages/dev/test-site/main-page/main.styl b/src/pages/dev/test-site/main-page/main.styl
index e6e7dc0f..ee7a4201 100644
--- a/src/pages/dev/test-site/main-page/main.styl
+++ b/src/pages/dev/test-site/main-page/main.styl
@@ -511,4 +511,16 @@ a:hover
     text-decoration: none
 
   p
-    margin-bottom: 0
\ No newline at end of file
+    margin-bottom: 0
+
+.section
+  width: 60%
+  margin-left: 20%
+
+  h1
+    color: black
+    font-size: 60px
+    margin-bottom: 0
+
+  h2
+    color: black

From 0940d8d74c8d4298936435b7e623b05ad8db54fe Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Tue, 9 Jul 2024 12:07:38 -0400
Subject: [PATCH 15/28] fix donate card

---
 src/pages/dev/test-site/main-page/+Page.mdx | 12 +++----
 src/pages/dev/test-site/main-page/main.styl | 35 +++++++++++----------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/pages/dev/test-site/main-page/+Page.mdx b/src/pages/dev/test-site/main-page/+Page.mdx
index 6758c8ae..de8844a7 100644
--- a/src/pages/dev/test-site/main-page/+Page.mdx
+++ b/src/pages/dev/test-site/main-page/+Page.mdx
@@ -142,14 +142,14 @@ import { MacrostratIcon } from "~/components";
 
 
 [//]: # "Donate"
+<div class="section">
+  <a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank"><h1>Donate Now</h1></a>
+</div>
 <div class="card donate-card">
   <Image className="back-img donate-img" src="donate_medium.jpg"></Image>
-  <div class="donate-text">
-    <h1 class="donate-title"><a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank">Donate Now</a></h1>
-    <div class="caption-donate">
-        Grant funding, principally from the <a href="http://www.nsf.gov" target="_blank">U.S. National Science Foundation</a>, got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!
-    </div>
-  </div>
+  <p class="donate-text">
+    Grant funding, principally from the <a href="http://www.nsf.gov" target="_blank">U.S. National Science Foundation</a>, got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!
+  </p>
 </div>
 
 [//]: # "Footer"
diff --git a/src/pages/dev/test-site/main-page/main.styl b/src/pages/dev/test-site/main-page/main.styl
index ee7a4201..40d0ed5e 100644
--- a/src/pages/dev/test-site/main-page/main.styl
+++ b/src/pages/dev/test-site/main-page/main.styl
@@ -203,7 +203,7 @@ a:hover
   position:absolute
   z-index:5
   height: 30vh
-  width: 60%
+  width: 100%
   object-fit: cover
   border-radius: 10px
 
@@ -474,27 +474,30 @@ a:hover
 
 .donate-card
   height: 30vh
+  position:relative
+
+  display: grid
+  margin: auto
+  margin-bottom: 50px
 
 .donate-text
-  position:absolute
+  position:relative
   z-index: 100
-  width: 60%
+  width: 80%
   display: grid
-  grid-template-columns: 40% 60%;
-  height: 30vh
+  margin: auto
+  padding: 25px
+  background: rgba(255,255,255,0.6);
+  color: black
+  font-size: 18px
 
-.donate-title
-  a 
-    color:white
-  a:hover
+  a
+    color: black
+    font-weight: bold
     text-decoration: none
 
-  display: grid
-  margin: auto
-  color: white
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-  font-family: "Maven Pro", sans-serif;
-  font-size: 50px
+  p
+    margin-bottom: 0
 
 .caption-donate
   display: grid
@@ -520,7 +523,7 @@ a:hover
   h1
     color: black
     font-size: 60px
-    margin-bottom: 0
 
   h2
     color: black
+    margin-top: 0

From 4304b21d56d89471e9af7b0a6c9a69ff92b656d5 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Tue, 9 Jul 2024 12:08:34 -0400
Subject: [PATCH 16/28] donate background round edges

---
 src/pages/dev/test-site/main-page/main.styl | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/dev/test-site/main-page/main.styl b/src/pages/dev/test-site/main-page/main.styl
index 40d0ed5e..85a621d4 100644
--- a/src/pages/dev/test-site/main-page/main.styl
+++ b/src/pages/dev/test-site/main-page/main.styl
@@ -487,9 +487,10 @@ a:hover
   display: grid
   margin: auto
   padding: 25px
-  background: rgba(255,255,255,0.6);
+  background: rgba(255,255,255,0.7);
   color: black
   font-size: 18px
+  border-radius: 10px
 
   a
     color: black

From dbafe774d9623ccda6493ba6aa6e034d40177fd8 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Tue, 9 Jul 2024 12:32:33 -0400
Subject: [PATCH 17/28] reorder dataproducts

---
 src/pages/dev/test-site/main-page/+Page.mdx | 24 ++++++-----
 src/pages/dev/test-site/main-page/main.styl | 47 ++++++++++++++++-----
 2 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/pages/dev/test-site/main-page/+Page.mdx b/src/pages/dev/test-site/main-page/+Page.mdx
index de8844a7..834632e9 100644
--- a/src/pages/dev/test-site/main-page/+Page.mdx
+++ b/src/pages/dev/test-site/main-page/+Page.mdx
@@ -80,12 +80,6 @@ import { MacrostratIcon } from "~/components";
   <Image className="card-image bottom" src="deep_sea_new_medium.jpg"></Image>
 </div>
 
-[//]: # "Data Products"
-<div class="section">
-  <h1>Data products</h1>
-  <h2>Macrostrat integrates a variety of geological data products into a community-accessibe, space-time model of the Earth's crust. These products come from a variety of sources throughout the geosciences.</h2>
-</div>
-
 [//]: # "Map Interface"
 <div class="card basic-card">
   <div class="link-title">
@@ -100,8 +94,16 @@ import { MacrostratIcon } from "~/components";
   </p>
 </div>
 
+[//]: # "Data Products"
+<div class="section">
+  <h1>Data products</h1>
+  <h2>Macrostrat integrates a variety of geological data products into a community-accessibe, space-time model of the Earth's crust. These products come from a variety of sources throughout the geosciences.</h2>
+</div>
+
+<div class="card-set">
+
 [//]: # "Maps"
-<div class="card basic-card">
+<div class="basic-card left-card">
   <div class="link-title">
     <a href="/maps"><h1>Maps</h1></a>
   </div>
@@ -111,7 +113,7 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Columns"
-<div class="card basic-card">
+<div class="basic-card right-card">
   <div class="link-title">
     <a href="/columns"><h1>Columns</h1></a>
   </div>
@@ -121,7 +123,7 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Geologic Lexicon"
-<div class="card basic-card">
+<div class="basic-card left-card">
   <div class="link-title">
     <a href="/lex"><h1>Geologic Lexicon</h1></a>
   </div>
@@ -131,7 +133,7 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Projects"
-<div class="card basic-card">
+<div class="basic-card right-card">
   <div class="link-title">
     <a href="/projects"><h1>Projects</h1></a>
   </div>
@@ -140,6 +142,8 @@ import { MacrostratIcon } from "~/components";
   </p>
 </div>
 
+</div>
+
 
 [//]: # "Donate"
 <div class="section">
diff --git a/src/pages/dev/test-site/main-page/main.styl b/src/pages/dev/test-site/main-page/main.styl
index 85a621d4..202a003f 100644
--- a/src/pages/dev/test-site/main-page/main.styl
+++ b/src/pages/dev/test-site/main-page/main.styl
@@ -386,26 +386,51 @@ a:hover
   display: grid
   margin: auto
 
-.basic-card
+.card-set
   display: grid
-  grid-template-columns: 40% 60%
+  grid-template-columns: 50% 50%
   grid-template-rows: 30vh
+  width: 60%
+  margin: 0 20%
 
-  
+.basic-card
+  background-color: white
+  width: 90%
+  margin: 2% 0
+  text-align: center
+  padding: 0 10px
+  padding-bottom: 30px
+  height: 25vh
+
+  .link-title 
+    font-size: 25px
+    
+    a
+      color: black
+
+  p
+    color: black
+    font-size: 16px
+
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
+
+.right-card
+  margin-left: 10%
+
+.basic-card2
+  margin: 0
   .link-title
-    display: grid
-    margin: auto
-    margin-left: 10%
+    padding-left: 10%
+
     font-size: 35px
-    
+
     a
       color: black
 
   p
-    display: grid
-    margin: auto
-    margin-left: 10% 
-    margin-right: 10%
+    padding-left: 5%
+
     color: black
     font-size: 16px
 

From 0590dc4f39877d947094e0d29855366639227c05 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Tue, 9 Jul 2024 12:36:51 -0400
Subject: [PATCH 18/28] fix boxes spacing

---
 src/pages/dev/test-site/main-page/main.styl | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/dev/test-site/main-page/main.styl b/src/pages/dev/test-site/main-page/main.styl
index 202a003f..f9ea6f1a 100644
--- a/src/pages/dev/test-site/main-page/main.styl
+++ b/src/pages/dev/test-site/main-page/main.styl
@@ -395,10 +395,10 @@ a:hover
 
 .basic-card
   background-color: white
-  width: 90%
+  width: 95%
   margin: 2% 0
   text-align: center
-  padding: 0 10px
+  padding: 0 25px
   padding-bottom: 30px
   height: 25vh
 
@@ -416,7 +416,7 @@ a:hover
   box-shadow: black 1px 0 10px
 
 .right-card
-  margin-left: 10%
+  margin-left: 5%
 
 .basic-card2
   margin: 0

From 62880ae3399ac62d0fefdb039be60134df6c2354 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Mon, 15 Jul 2024 18:09:50 -0400
Subject: [PATCH 19/28] fix api section and made cards

---
 src/pages/dev/test-site/about/+Page.mdx | 12 +++---
 src/pages/dev/test-site/about/main.styl | 50 +++++++++++--------------
 2 files changed, 28 insertions(+), 34 deletions(-)

diff --git a/src/pages/dev/test-site/about/+Page.mdx b/src/pages/dev/test-site/about/+Page.mdx
index a00f9e88..ee7d1451 100644
--- a/src/pages/dev/test-site/about/+Page.mdx
+++ b/src/pages/dev/test-site/about/+Page.mdx
@@ -11,12 +11,11 @@ import { MacrostratIcon } from "~/components";
 <div id="body">
   
 [//]: # "About"
-<div id="about">
-  <h1 class="big" id="about-title">
+<h1 class="big" id="about-title">
     About
     <div class="line"></div>
-  </h1>
-  
+</h1>
+<div id="about">
   <div class="about-row">
     <div class="about-body-subtitle">
       Summary
@@ -66,9 +65,12 @@ import { MacrostratIcon } from "~/components";
   </div>
 </div>
 
+<Image className="rock-border" src="rocks-border.jpg"></Image>
+
+
 [//]: # "API"
 <div id="api">
-  <div class="api-circle"><div id="api-circle-text">API</div></div>
+  <Image src="api2.png" className="api-image"></Image>
   <div id="api-text">All data contained in the Macrostrat database are freely available via our Application Programming Interface (API), which provides a convinient way to retrieve data for analysis or application creation. For more information head over to the <a href="/api">API root</a> to explore available routes.</div>
 </div>
 
diff --git a/src/pages/dev/test-site/about/main.styl b/src/pages/dev/test-site/about/main.styl
index f0d36dff..516e9f42 100644
--- a/src/pages/dev/test-site/about/main.styl
+++ b/src/pages/dev/test-site/about/main.styl
@@ -7,7 +7,10 @@
   padding: 0 20%
 
 #apps
-  padding: 75px 0    
+  margin-top: 10px
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
+  margin-bottom: 80px
 
 a:hover
   text-decoration: none
@@ -20,8 +23,7 @@ a:hover
 .app-box 
   height: 15vh
   display: flex
-  width: 60%
-  margin: 0 20%
+  margin-right: 5%
   position: relative
   color: black
 
@@ -46,8 +48,7 @@ a:hover
   font-family: "Maven Pro", sans-serif
   text-align: center  
   background-color: #4BABBf
-  width: 60%
-  margin: 0 20%
+  border-radius: 10px 10px 0 0
   color: white
 
 
@@ -60,38 +61,28 @@ a:hover
   position: relative
   height: 30vh
   background-color: white
+  display: grid
+  grid-template-columns: 30% 70%
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
 
-#api-circle-text
-  display: table-cell;
-  vertical-align: middle;
-  color: #6bbe98;
-  font-size: 72px
-  font-weight: 500
-
-.api-circle
-  float: left
-  margin-left: 15%
-  margin-right: 50px
-  background-color: #fff;
-  height: 200px;
-  width: 200px;
-  border-radius: 50%;
-  text-align: center;
-  display: table;
-  border: 11px solid #6bbe98;
-  color: #4BABBf;
+.api-image
+  margin:auto
 
 #api-text
-  padding-top: 50px
-  margin-right: 15%
   color: #4bab7f;
   font-size: 20px;
   line-height: 28px;
   font-weight: 400;
+  margin: auto
+  padding: 0 30px
 
 
 #about  
   padding: 50px 0
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
+  margin-bottom: 10px
 
 .about-row
   margin: 4%
@@ -109,16 +100,17 @@ a:hover
 
 #about-title
   text-align: left
-  color: #E0E1E6
   position: relative
   padding-bottom: 0
+  margin-top: 75px
+  color: black
 
 .line
   width: 100%;
-  border-bottom: 1px solid #E0E1E6;
+  border-bottom: 1px solid black;
   position: absolute;
 
 .rock-border
   width: 100%
   margin: 0
-  padding: 0
+  padding: 0
\ No newline at end of file

From d920e01c7742a106afec8152104e3374d7ac9682 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Mon, 15 Jul 2024 18:13:37 -0400
Subject: [PATCH 20/28] change header color

---
 src/pages/dev/test-site/people/main.styl | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/dev/test-site/people/main.styl b/src/pages/dev/test-site/people/main.styl
index 48b0cdfe..df81e074 100644
--- a/src/pages/dev/test-site/people/main.styl
+++ b/src/pages/dev/test-site/people/main.styl
@@ -6,7 +6,7 @@ a:hover
     text-decoration: none
 
 .big
-    color: #E0E1E6
+    color: black
     text-align: left
     font-size: 75px
     font-family: "Maven Pro", sans-serif
@@ -15,7 +15,7 @@ a:hover
     padding-top: 100px
 
 .line
-  border-bottom: 1px solid #E0E1E6;
+  border-bottom: 1px solid black
   width: 60%
   margin: 0 20% 
 
@@ -97,4 +97,4 @@ e
 
 .subtitle
   margin-left: 20%
-  color: #E0E1E6;
\ No newline at end of file
+  color: black;
\ No newline at end of file

From 63d71375eb0ee31105e9acc5b752b3cb7f5bb987 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Tue, 16 Jul 2024 14:56:00 -0400
Subject: [PATCH 21/28] wrapper location classes

---
 src/pages/dev/test-site/main-page/+Page.mdx | 43 ++++++++++++---------
 src/pages/dev/test-site/main-page/main.styl |  3 +-
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/pages/dev/test-site/main-page/+Page.mdx b/src/pages/dev/test-site/main-page/+Page.mdx
index 834632e9..f18d4d16 100644
--- a/src/pages/dev/test-site/main-page/+Page.mdx
+++ b/src/pages/dev/test-site/main-page/+Page.mdx
@@ -55,29 +55,34 @@ import { MacrostratIcon } from "~/components";
   <h1>Locations</h1>
 </div>
 <div class="card location-card">
-  <Image className="card-image top" src="north_america_med.jpg"></Image>
-  <div class="location-text">
-    <h1>North America</h1>
-    <p>243 packages. 798 units. 897 collections.</p>
+  <div class="location">
+    <Image className="card-image top" src="north_america_med.jpg"></Image>
+    <div class="location-text">
+      <h1>North America</h1>
+      <p>243 packages. 798 units. 897 collections.</p>
+    </div>
   </div>
-
-  <div class="location-text">
-    <h1>Carribean</h1>
-    <p>243 packages. 798 units. 897 collections.</p>
+  <div class="location">
+    <div class="location-text">
+      <h1>Carribean</h1>
+      <p>243 packages. 798 units. 897 collections.</p>
+    </div>
+    <Image className="card-image" src="caribbean_new_medium.jpg"></Image>
   </div>
-  <Image className="card-image" src="caribbean_new_medium.jpg"></Image>
-
-  <Image className="card-image" src="new_zealand_new_medium.jpg"></Image>
-  <div class="location-text">
-    <h1>New Zealand</h1>
-    <p>828 packages. 2,168 units. 328 collections.</p>
+  <div class="location">
+    <Image className="card-image" src="new_zealand_new_medium.jpg"></Image>
+    <div class="location-text">
+      <h1>New Zealand</h1>
+      <p>828 packages. 2,168 units. 328 collections.</p>
+    </div>
   </div>
-
-  <div class="location-text">
-    <h1>Deep Sea</h1>
-    <p>388 packages. 7,124 units. 0 collections.</p>
+  <div class="location">
+    <div class="location-text">
+      <h1>Deep Sea</h1>
+      <p>388 packages. 7,124 units. 0 collections.</p>
+    </div>
+    <Image className="card-image bottom" src="deep_sea_new_medium.jpg"></Image>
   </div>
-  <Image className="card-image bottom" src="deep_sea_new_medium.jpg"></Image>
 </div>
 
 [//]: # "Map Interface"
diff --git a/src/pages/dev/test-site/main-page/main.styl b/src/pages/dev/test-site/main-page/main.styl
index f9ea6f1a..7e79fc36 100644
--- a/src/pages/dev/test-site/main-page/main.styl
+++ b/src/pages/dev/test-site/main-page/main.styl
@@ -352,7 +352,7 @@ a:hover
 
 .location
   display: grid;
-  grid-template-columns: 25% 25% 25% 25%;
+  grid-template-columns: 50% 50%;
   grid-template-rows: 40vh;
 
 .t1
@@ -454,7 +454,6 @@ a:hover
 
 .location-card
   display: grid
-  grid-template-columns: 50% 50%
   grid-template-rows: 30vh
   
   .link-title

From 38278382189bb36c967ad745a240968f96ba00e7 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Wed, 17 Jul 2024 08:46:34 -0400
Subject: [PATCH 22/28] merge

---
 src/pages/dev/test-site/main-page/main.styl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/dev/test-site/main-page/main.styl b/src/pages/dev/test-site/main-page/main.styl
index 4b4972cf..bef3b392 100644
--- a/src/pages/dev/test-site/main-page/main.styl
+++ b/src/pages/dev/test-site/main-page/main.styl
@@ -507,7 +507,7 @@ a:hover
     padding: 30px
 
   a 
-    color: blue
+    color: white
 
 .donate-card
   height: 30vh

From 14af4671133c0f25ba92e8cbc8ca081f0d0efa9d Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Wed, 17 Jul 2024 08:57:53 -0400
Subject: [PATCH 23/28] pre upstream merge

---
 src/pages/dev/test-site/main-page/+Page.mdx |  2 +-
 src/pages/dev/test-site/main-page/main.styl | 50 ++++++++++++++-------
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/pages/dev/test-site/main-page/+Page.mdx b/src/pages/dev/test-site/main-page/+Page.mdx
index da709aad..afd480b7 100644
--- a/src/pages/dev/test-site/main-page/+Page.mdx
+++ b/src/pages/dev/test-site/main-page/+Page.mdx
@@ -75,7 +75,7 @@ import { MacrostratIcon } from "~/components";
   </div>
   <div class="location">
     <div class="location-text">
-      <h1>Carribean</h1>
+      <h1>Caribbean</h1>
       <p>243 packages. 798 units. 897 collections.</p>
     </div>
     <Image className="card-image" src="caribbean_new_medium.jpg"></Image>
diff --git a/src/pages/dev/test-site/main-page/main.styl b/src/pages/dev/test-site/main-page/main.styl
index bef3b392..5291992c 100644
--- a/src/pages/dev/test-site/main-page/main.styl
+++ b/src/pages/dev/test-site/main-page/main.styl
@@ -130,12 +130,6 @@ a:hover
   a:hover
     color: white
 
-.rockd-png
-  width: 22px
-  padding-right: 4px
-  float: left
-  padding-top: 5px
-
 .country_container 
   height: 100vh
 
@@ -361,7 +355,7 @@ a:hover
 .location
   display: grid;
   grid-template-columns: 50% 50%;
-  grid-template-rows: 40vh;
+  grid-template-rows: 30vh;
 
 .t1
   margin-left: 10%
@@ -464,15 +458,6 @@ a:hover
   display: grid
   grid-template-rows: 30vh
   
-  .link-title
-    display: grid
-    margin: auto
-    margin-left: 10%
-    font-size: 35px
-    
-    a
-      color: black
-
   p
     color: black
     font-size: 16px
@@ -500,6 +485,8 @@ a:hover
     margin: auto
     margin-top: 1%
 
+  height: 30vh
+
 .map-card
   p
     color: black
@@ -565,3 +552,34 @@ a:hover
   h2
     color: black
     margin-top: 0
+
+.temp
+  font-size: 20px
+
+  a 
+    color: #015eab
+
+.mobile-card
+  height: 10vh
+  display: grid
+  grid-template-columns: 10vh 80%
+
+  a
+    color: black
+
+  h1
+    display: grid
+    margin: auto
+    font-size: 50px
+
+.rockd-png
+  height: 10vh
+  width: 10vh
+  padding-top: 0
+  border-radius: 10px 0 0 10px
+
+.search-card
+  h1 
+    display: grid
+    margin: auto
+    font-size: 50px
\ No newline at end of file

From 5668e6bac7fd216b16d55d06015490e776588c8a Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Wed, 17 Jul 2024 08:59:19 -0400
Subject: [PATCH 24/28] merge with upstream

---
 deps/web-components | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/deps/web-components b/deps/web-components
index 27672273..5c409881 160000
--- a/deps/web-components
+++ b/deps/web-components
@@ -1 +1 @@
-Subproject commit 2767227392e3c853d6ae0ddb356c4086d33f2a16
+Subproject commit 5c409881df9a53c68d5e7696d45f89baac3ddf06

From e6c1c37990cb22c0bd2707dfe925624c29e17454 Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Tue, 23 Jul 2024 20:57:48 -0400
Subject: [PATCH 25/28] added new formatted page file

---
 src/pages/dev/main-page/sum.js                |   3 -
 src/pages/dev/main-page/sum.test.js           |   7 -
 src/pages/dev/test-site/main-page/+Page.mdx   |   4 +-
 .../test-site/main-page/new file/+Page.mdx    | 248 ++++++++++++++++++
 4 files changed, 250 insertions(+), 12 deletions(-)
 delete mode 100644 src/pages/dev/main-page/sum.js
 delete mode 100644 src/pages/dev/main-page/sum.test.js
 create mode 100644 src/pages/dev/test-site/main-page/new file/+Page.mdx

diff --git a/src/pages/dev/main-page/sum.js b/src/pages/dev/main-page/sum.js
deleted file mode 100644
index 118bc983..00000000
--- a/src/pages/dev/main-page/sum.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function sum(a, b) {
-    return a + b;
-  }
\ No newline at end of file
diff --git a/src/pages/dev/main-page/sum.test.js b/src/pages/dev/main-page/sum.test.js
deleted file mode 100644
index 421674c8..00000000
--- a/src/pages/dev/main-page/sum.test.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// sum.test.js
-import { expect, test } from 'vitest'
-import { sum } from './sum'
-
-test('file works', () => {
-  expect(sum(1, 2)).toBe(3)
-})
\ No newline at end of file
diff --git a/src/pages/dev/test-site/main-page/+Page.mdx b/src/pages/dev/test-site/main-page/+Page.mdx
index afd480b7..61873a18 100644
--- a/src/pages/dev/test-site/main-page/+Page.mdx
+++ b/src/pages/dev/test-site/main-page/+Page.mdx
@@ -9,7 +9,7 @@ import { MacrostratIcon } from "~/components";
 [//]: # "Nav Bar"
 <Navbar></Navbar>
 
-[//]: # "Start Page"
+[//]: # "Start Page" 
 <div class="card start-card">
 <div class="start">
     <Image className="back-img cover-image" src="cover_large.jpg"></Image>
@@ -56,7 +56,7 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Mobile"
-<div class="card mobile-card">
+<div class="mobile-card card">
   <Image src="rockd.jpg" width="22px" className="rockd-png"></Image>
   <h1><a href="https://rockd.org" target="_blank">Go mobile!</a></h1>
 </div>
diff --git a/src/pages/dev/test-site/main-page/new file/+Page.mdx b/src/pages/dev/test-site/main-page/new file/+Page.mdx
new file mode 100644
index 00000000..cbee6ea7
--- /dev/null
+++ b/src/pages/dev/test-site/main-page/new file/+Page.mdx	
@@ -0,0 +1,248 @@
+import { PageHeader } from "~/components";
+import { Image, Navbar, Footer } from "../index";
+import "./main.styl";
+import "../main.styl";
+import { MacrostratIcon } from "~/components";
+
+<div id="total">
+
+[//]: # "Nav Bar"
+<Navbar></Navbar>
+
+<div class="body">
+
+
+[//]: # "Start Page" 
+<div class="start-card card">
+    <Image className="cover-img back-img" src="cover_large.jpg"></Image>
+    <div class="text">
+      <span class="header">
+        <h1 id="main-title" class="big">Macrostrat<h2 class="version">v2</h2></h1>
+      </span>
+      <p class="big-text">A platform for geological data exploration, integration, and analysis</p>
+      <div class="stats">
+        <div class="stat">
+          <span class="top-stat" id="n_columns">1,400</span>
+          <span class="top-stat-label">Regional Rock Columns</span>
+        </div>
+        <div class="stat">
+          <span class="top-stat" id="n_units">33,903</span>
+          <span class="top-stat-label">Rock Units</span>
+        </div>
+        <div class="stat">
+          <span class="top-stat" id="n_polys">2,500,000</span>
+          <span class="top-stat-label">Geologic Map Polygons</span>
+        </div>
+        <div class="stat">
+          <span class="top-stat" id="n_names">51,212</span>
+          <span class="top-stat-label"><a href="Macrostrat_strat_names.html" target="_blank">Stratigraphic Names</a></span>
+        </div>
+      </div>
+    </div>
+</div>
+
+[//]: # "Start Page (OLD)" 
+<div class="card start-card">
+<div class="start">
+    <Image className="back-img cover-image" src="cover_large.jpg"></Image>
+    <div class="text">
+      <span class="header">
+        <h1 id="main-title" class="big">Macrostrat<h2 class="version">v2</h2></h1>
+      </span>
+      <p class="big-text">A platform for geological data exploration, integration, and analysis</p>
+      <div class="stats">
+        <div class="stat">
+          <span class="top-stat" id="n_columns">1,400</span>
+          <span class="top-stat-label">Regional Rock Columns</span>
+        </div>
+        <div class="stat">
+          <span class="top-stat" id="n_units">33,903</span>
+          <span class="top-stat-label">Rock Units</span>
+        </div>
+        <div class="stat">
+          <span class="top-stat" id="n_polys">2,500,000</span>
+          <span class="top-stat-label">Geologic Map Polygons</span>
+        </div>
+        <div class="stat">
+          <span class="top-stat" id="n_names">51,212</span>
+          <span class="top-stat-label"><a href="Macrostrat_strat_names.html" target="_blank">Stratigraphic Names</a></span>
+        </div>
+      </div>
+    </div>
+</div>
+</div>
+
+[//]: # "Map Interface (OLD)"
+<div class="map-card card">
+  <p>
+    <div class="map-element">With over 225 maps from data providers around the world across every scale, Macrostrat is the world's largest homogenized geologic map database. Our data processing pipeline links geologic map polygons to Macrostrat column polygons, external stratigraphic name lexicons, and geochronological intervals, enabling the enhancement of the original map data and allowing for direct links into <a href="https://xdd.wisc.edu" target="_blank">xDD</a> (formly GeoDeepDive).</div>
+    \
+    <div class="map-element">Are you affiliated with a state or national geologic survey? <a href="mailto:contact@macrostrat.org?Subject=Geologic%20Map%20Collaboration">Get in touch</a> with us - we'd love to collaborate and help publicize your maps!</div>
+    \
+    <div class="map-element"> Get started by <a href="/map">exploring the map</a> or <a href="/map/sources">taking a look at</a> which maps are currently a part of Macrostrat.</div>
+    <div class="buttons1">
+      <a type="button" class="btn" href="/map/#3/40.78/-94.13">Geologic Map</a>
+      <a type="button" class="btn" href="/sift/#/">Search</a>
+    </div>
+  </p>
+</div>
+
+[//]: # "Map Interface (OLD)"
+<div class="card map-card">
+  <p>
+    <div class="temp">With over 225 maps from data providers around the world across every scale, Macrostrat is the world's largest homogenized geologic map database. Our data processing pipeline links geologic map polygons to Macrostrat column polygons, external stratigraphic name lexicons, and geochronological intervals, enabling the enhancement of the original map data and allowing for direct links into <a href="https://xdd.wisc.edu" target="_blank">xDD</a> (formly GeoDeepDive).</div>
+    \
+    <div class="temp">Are you affiliated with a state or national geologic survey? <a href="mailto:contact@macrostrat.org?Subject=Geologic%20Map%20Collaboration">Get in touch</a> with us - we'd love to collaborate and help publicize your maps!</div>
+    \
+    <div class="temp"> Get started by <a href="/map">exploring the map</a> or <a href="/map/sources">taking a look at</a> which maps are currently a part of Macrostrat.</div>
+    <div class="buttons1">
+      <a type="button" class="btn" href="/map/#3/40.78/-94.13">Geologic Map</a>
+      <a type="button" class="btn" href="/sift/#/">Search</a>
+    </div>
+  </p>
+</div>
+
+[//]: # "Mobile"
+<div class="mobile-card card">
+  <Image src="rockd.jpg" width="22px" className="rockd-png"></Image>
+  <h1><a href="https://rockd.org" target="_blank">Go mobile!</a></h1>
+</div>
+
+[//]: # "Locations"
+<div class="header">
+  <h1>Locations</h1>
+</div>
+<div class="locations-card card">
+  <div class="location">
+    <Image className="card-image top" src="north_america_med.jpg"></Image>
+    <div class="location-text">
+      <h1>North America</h1>
+      <p>243 packages. 798 units. 897 collections.</p>
+    </div>
+  </div>
+  <div class="location">
+    <div class="location-text">
+      <h1>Caribbean</h1>
+      <p>243 packages. 798 units. 897 collections.</p>
+    </div>
+    <Image className="card-image" src="caribbean_new_medium.jpg"></Image>
+  </div>
+  <div class="location">
+    <Image className="card-image" src="new_zealand_new_medium.jpg"></Image>
+    <div class="location-text">
+      <h1>New Zealand</h1>
+      <p>828 packages. 2,168 units. 328 collections.</p>
+    </div>
+  </div>
+  <div class="location">
+    <div class="location-text">
+      <h1>Deep Sea</h1>
+      <p>388 packages. 7,124 units. 0 collections.</p>
+    </div>
+    <Image className="card-image bottom" src="deep_sea_new_medium.jpg"></Image>
+  </div>
+</div>
+
+[//]: # "Locations (OLD)"
+<div class="section">
+  <h1>Locations</h1>
+</div>
+<div class="card location-card">
+  <div class="location">
+    <Image className="card-image top" src="north_america_med.jpg"></Image>
+    <div class="location-text">
+      <h1>North America</h1>
+      <p>243 packages. 798 units. 897 collections.</p>
+    </div>
+  </div>
+  <div class="location">
+    <div class="location-text">
+      <h1>Caribbean</h1>
+      <p>243 packages. 798 units. 897 collections.</p>
+    </div>
+    <Image className="card-image" src="caribbean_new_medium.jpg"></Image>
+  </div>
+  <div class="location">
+    <Image className="card-image" src="new_zealand_new_medium.jpg"></Image>
+    <div class="location-text">
+      <h1>New Zealand</h1>
+      <p>828 packages. 2,168 units. 328 collections.</p>
+    </div>
+  </div>
+  <div class="location">
+    <div class="location-text">
+      <h1>Deep Sea</h1>
+      <p>388 packages. 7,124 units. 0 collections.</p>
+    </div>
+    <Image className="card-image bottom" src="deep_sea_new_medium.jpg"></Image>
+  </div>
+</div>
+
+[//]: # "Data Products"
+<div class="section">
+  <h1>Data products</h1>
+  <h2>Macrostrat integrates a variety of geological data products into a community-accessibe, space-time model of the Earth's crust. These products come from a variety of sources throughout the geosciences.</h2>
+</div>
+
+<div class="card-set">
+
+[//]: # "Maps"
+<div class="basic-card left-card">
+  <div class="link-title">
+    <a href="/maps"><h1>Maps</h1></a>
+  </div>
+  <p>
+    The spatial footprint of rocks on the Earth's surface
+  </p>
+</div>
+
+[//]: # "Columns"
+<div class="basic-card right-card">
+  <div class="link-title">
+    <a href="/columns"><h1>Columns</h1></a>
+  </div>
+  <p>
+    Stratigraphic and geological columns showing the organization of rocks in time
+  </p>
+</div>
+
+[//]: # "Geologic Lexicon"
+<div class="basic-card left-card">
+  <div class="link-title">
+    <a href="/lex"><h1>Geologic Lexicon</h1></a>
+  </div>
+  <p>
+    Geologic units and data dictionaries
+  </p>
+</div>
+
+[//]: # "Projects"
+<div class="basic-card right-card">
+  <div class="link-title">
+    <a href="/projects"><h1>Projects</h1></a>
+  </div>
+  <p>
+    Projects for specific regions or geological problems
+  </p>
+</div>
+
+</div>
+
+
+[//]: # "Donate"
+<div class="section">
+  <a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank"><h1>Donate Now</h1></a>
+</div>
+<div class="card donate-card">
+  <Image className="back-img donate-img" src="donate_medium.jpg"></Image>
+  <p class="donate-text">
+    Grant funding, principally from the <a href="http://www.nsf.gov" target="_blank">U.S. National Science Foundation</a>, got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!
+  </p>
+</div>
+
+</div>
+
+[//]: # "Footer"
+<Footer></Footer>
+
+</div>
\ No newline at end of file

From df45ce5a26dab3a21026ac50b47f1ef7f0411b3c Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Tue, 23 Jul 2024 21:03:20 -0400
Subject: [PATCH 26/28] fixed html

---
 .../{new file => new-home}/+Page.mdx          |  93 +--
 .../test-site/main-page/new-home/main.styl    | 585 ++++++++++++++++++
 2 files changed, 591 insertions(+), 87 deletions(-)
 rename src/pages/dev/test-site/main-page/{new file => new-home}/+Page.mdx (62%)
 create mode 100644 src/pages/dev/test-site/main-page/new-home/main.styl

diff --git a/src/pages/dev/test-site/main-page/new file/+Page.mdx b/src/pages/dev/test-site/main-page/new-home/+Page.mdx
similarity index 62%
rename from src/pages/dev/test-site/main-page/new file/+Page.mdx
rename to src/pages/dev/test-site/main-page/new-home/+Page.mdx
index cbee6ea7..74ed2b94 100644
--- a/src/pages/dev/test-site/main-page/new file/+Page.mdx	
+++ b/src/pages/dev/test-site/main-page/new-home/+Page.mdx
@@ -1,7 +1,7 @@
 import { PageHeader } from "~/components";
-import { Image, Navbar, Footer } from "../index";
+import { Image, Navbar, Footer } from "../../index";
 import "./main.styl";
-import "../main.styl";
+import "../../main.styl";
 import { MacrostratIcon } from "~/components";
 
 <div id="total">
@@ -41,38 +41,7 @@ import { MacrostratIcon } from "~/components";
     </div>
 </div>
 
-[//]: # "Start Page (OLD)" 
-<div class="card start-card">
-<div class="start">
-    <Image className="back-img cover-image" src="cover_large.jpg"></Image>
-    <div class="text">
-      <span class="header">
-        <h1 id="main-title" class="big">Macrostrat<h2 class="version">v2</h2></h1>
-      </span>
-      <p class="big-text">A platform for geological data exploration, integration, and analysis</p>
-      <div class="stats">
-        <div class="stat">
-          <span class="top-stat" id="n_columns">1,400</span>
-          <span class="top-stat-label">Regional Rock Columns</span>
-        </div>
-        <div class="stat">
-          <span class="top-stat" id="n_units">33,903</span>
-          <span class="top-stat-label">Rock Units</span>
-        </div>
-        <div class="stat">
-          <span class="top-stat" id="n_polys">2,500,000</span>
-          <span class="top-stat-label">Geologic Map Polygons</span>
-        </div>
-        <div class="stat">
-          <span class="top-stat" id="n_names">51,212</span>
-          <span class="top-stat-label"><a href="Macrostrat_strat_names.html" target="_blank">Stratigraphic Names</a></span>
-        </div>
-      </div>
-    </div>
-</div>
-</div>
-
-[//]: # "Map Interface (OLD)"
+[//]: # "Map Interface"
 <div class="map-card card">
   <p>
     <div class="map-element">With over 225 maps from data providers around the world across every scale, Macrostrat is the world's largest homogenized geologic map database. Our data processing pipeline links geologic map polygons to Macrostrat column polygons, external stratigraphic name lexicons, and geochronological intervals, enabling the enhancement of the original map data and allowing for direct links into <a href="https://xdd.wisc.edu" target="_blank">xDD</a> (formly GeoDeepDive).</div>
@@ -87,21 +56,6 @@ import { MacrostratIcon } from "~/components";
   </p>
 </div>
 
-[//]: # "Map Interface (OLD)"
-<div class="card map-card">
-  <p>
-    <div class="temp">With over 225 maps from data providers around the world across every scale, Macrostrat is the world's largest homogenized geologic map database. Our data processing pipeline links geologic map polygons to Macrostrat column polygons, external stratigraphic name lexicons, and geochronological intervals, enabling the enhancement of the original map data and allowing for direct links into <a href="https://xdd.wisc.edu" target="_blank">xDD</a> (formly GeoDeepDive).</div>
-    \
-    <div class="temp">Are you affiliated with a state or national geologic survey? <a href="mailto:contact@macrostrat.org?Subject=Geologic%20Map%20Collaboration">Get in touch</a> with us - we'd love to collaborate and help publicize your maps!</div>
-    \
-    <div class="temp"> Get started by <a href="/map">exploring the map</a> or <a href="/map/sources">taking a look at</a> which maps are currently a part of Macrostrat.</div>
-    <div class="buttons1">
-      <a type="button" class="btn" href="/map/#3/40.78/-94.13">Geologic Map</a>
-      <a type="button" class="btn" href="/sift/#/">Search</a>
-    </div>
-  </p>
-</div>
-
 [//]: # "Mobile"
 <div class="mobile-card card">
   <Image src="rockd.jpg" width="22px" className="rockd-png"></Image>
@@ -143,43 +97,8 @@ import { MacrostratIcon } from "~/components";
   </div>
 </div>
 
-[//]: # "Locations (OLD)"
-<div class="section">
-  <h1>Locations</h1>
-</div>
-<div class="card location-card">
-  <div class="location">
-    <Image className="card-image top" src="north_america_med.jpg"></Image>
-    <div class="location-text">
-      <h1>North America</h1>
-      <p>243 packages. 798 units. 897 collections.</p>
-    </div>
-  </div>
-  <div class="location">
-    <div class="location-text">
-      <h1>Caribbean</h1>
-      <p>243 packages. 798 units. 897 collections.</p>
-    </div>
-    <Image className="card-image" src="caribbean_new_medium.jpg"></Image>
-  </div>
-  <div class="location">
-    <Image className="card-image" src="new_zealand_new_medium.jpg"></Image>
-    <div class="location-text">
-      <h1>New Zealand</h1>
-      <p>828 packages. 2,168 units. 328 collections.</p>
-    </div>
-  </div>
-  <div class="location">
-    <div class="location-text">
-      <h1>Deep Sea</h1>
-      <p>388 packages. 7,124 units. 0 collections.</p>
-    </div>
-    <Image className="card-image bottom" src="deep_sea_new_medium.jpg"></Image>
-  </div>
-</div>
-
 [//]: # "Data Products"
-<div class="section">
+<div class="header">
   <h1>Data products</h1>
   <h2>Macrostrat integrates a variety of geological data products into a community-accessibe, space-time model of the Earth's crust. These products come from a variety of sources throughout the geosciences.</h2>
 </div>
@@ -230,10 +149,10 @@ import { MacrostratIcon } from "~/components";
 
 
 [//]: # "Donate"
-<div class="section">
+<div class="header">
   <a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank"><h1>Donate Now</h1></a>
 </div>
-<div class="card donate-card">
+<div class="cdonte-card card">
   <Image className="back-img donate-img" src="donate_medium.jpg"></Image>
   <p class="donate-text">
     Grant funding, principally from the <a href="http://www.nsf.gov" target="_blank">U.S. National Science Foundation</a>, got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!
diff --git a/src/pages/dev/test-site/main-page/new-home/main.styl b/src/pages/dev/test-site/main-page/new-home/main.styl
new file mode 100644
index 00000000..5291992c
--- /dev/null
+++ b/src/pages/dev/test-site/main-page/new-home/main.styl
@@ -0,0 +1,585 @@
+html, body
+  color: #E0E1E6
+  background-color: white 
+  margin: 0
+
+#total
+  background-color: white
+
+a
+  color: white
+
+a:hover
+  text-decoration: none
+
+.nohighlight
+  color: white
+
+.start
+  margin-top: 75px
+  margin-top: 75px
+  width: 100%
+  display: flex;
+  justify-content: center;
+  align-items: center;  
+  height: 35vh
+  color: white
+
+  li
+    float: left
+    list-style-type: none
+    width: 33%
+
+  ul
+    display: inline-block
+    width: 100%
+
+.text
+  position:absolute
+  z-index: 100
+  padding: 0 20px
+  display: grid
+  width: 50%
+  margin: auto
+
+.cover-image
+  position:absolute
+  z-index:5
+  height: 35vh
+  width: 60%
+  object-fit: cover
+  border-radius: 10px
+
+.sea-image
+  position:absolute
+  z-index: 6
+  height: 100vh
+  width: 30%
+  object-fit: cover   
+
+.parent
+  display: inline-flex
+  width: 100%
+
+.big
+  font-size: 72px
+  font-family: "Maven Pro", sans-serif;
+  text-align: center
+
+.big-text
+  display: grid
+  margin: auto
+  font-family: Helvetica, sans-serif
+  font-weight: 900
+  font-size: 20px
+  text-shadow: black 1px 0 10px
+  color: white
+
+.top-stat, .top-stat-label
+  display: grid
+  margin: auto
+  color: white
+
+.top-stat
+  font-size: 35px
+  font-family: Helvetica, sans-serif
+
+.stats
+  display: grid
+  grid-template-columns: 25% 25% 25% 25%
+  margin-bottom: 3%
+  margin-top: 30px
+  text-shadow: black 1px 0 10px;
+
+  .stat
+    display: grid
+    margin: auto
+
+  a
+    color: white
+    
+.rockd
+  background-color: green
+
+.btn
+  background-color: #363434;
+  border: none;
+  color: white;
+  padding: 13px 10px;
+  margin: 5% 15%
+  text-align: center;
+  text-decoration: none;
+  border-radius: 12px;
+
+  a 
+    color: white
+
+.btn:hover 
+  background-color: #545151 
+
+.buttons1 
+  font-size: 20px
+  padding: 0px
+  display: grid
+  grid-template-columns: 50% 50%
+
+  a 
+    color: white
+    text-decoration: none
+
+  a:hover
+    color: white
+
+.country_container 
+  height: 100vh
+
+.country
+  height: 100%
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: white
+
+.img
+  width: 50%
+  object-fit: cover
+
+.country-image
+  height: 50vh
+  width: 50%
+
+.rock-border
+  width: 100%
+  margin: 0
+  padding: 0
+
+.geologic-maps
+  height: 100vh
+  background-color: white
+  color: black
+  margin: 0
+
+.map-info
+  padding: 0 10vh
+  margin: 0
+
+.title
+  margin: 0
+  font-size: 72px
+  font-family: "Maven Pro", sans-serif;
+  padding: 20vh 0
+  text-align: center
+
+.header 
+  display: grid
+  margin: auto
+  margin-bottom: 0
+  text-shadow: black 1px 0 10px
+
+#main-title
+  display: inline-block
+  margin-bottom: 0
+  padding-bottom: 10px
+
+.version
+  display: inline-block
+  margin-left: 20px
+  font-size: 40px
+
+#about
+  height: 100vh
+  background-color: white
+  color: black
+  margin: 0
+
+#apps
+  height: 100vh
+  color: black
+  background-color: white
+
+#api
+  height: 100vh
+
+.donate-img
+  position:absolute
+  z-index:5
+  height: 30vh
+  width: 100%
+  object-fit: cover
+  border-radius: 10px
+
+.app-header
+  margin: 0
+  padding: 0
+
+.app-box 
+  height: 15vh
+  display: flex
+  width: 60%
+  margin: 0 20%
+  position: relative
+  color: black
+
+.app-background-text
+  margin: auto
+  padding-right: 20px
+  margin-right: 0
+  text-align: right
+  max-width: 55%
+  font-size: 72px
+
+.blurb
+  font-size: 15px
+
+.app-img
+  height: 80%
+  margin: auto
+  margin-left: 6%
+
+
+#api  
+  position: relative
+  height: 30vh
+  background-color: white
+
+#api-circle-text
+  display: table-cell;
+  vertical-align: middle;
+  color: #6bbe98;
+  font-size: 72px
+  font-weight: 500
+
+.api-circle
+  float: left
+  margin-left: 15%
+  margin-right: 50px
+  background-color: #fff;
+  height: 200px;
+  width: 200px;
+  border-radius: 50%;
+  text-align: center;
+  display: table;
+  border: 11px solid #6bbe98;
+  color: #4BABBf;
+
+#api-text
+  padding-top: 50px
+  margin-right: 15%
+  color: #4bab7f;
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 400;
+
+#publications 
+  margin: 100px 10%
+
+#pub-title 
+  text-align: left
+  color: #E0E1E6
+  position: relative
+  padding-bottom: 0
+  margin-bottom: 0
+
+.pub-list
+  padding-top: 10px
+  margin-left: 20px
+  counter-reset: pub-counter 70
+  color: black
+
+  li
+    counter-increment: pub-counter -1
+
+  li::marker
+    font-size: 35px;
+    color: #babdc8;
+    content: counter(pub-counter) " "
+    counter-increment: pub-counter
+
+#about  
+  margin: 0 10%
+
+.about-row
+  margin: 4%
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: 200;
+
+.about-body-subtitle
+  float: left
+  font-size: 22px;
+  font-weight: 200;
+
+.about-body
+  margin-left: 30%
+
+#about-title
+  text-align: left
+  color: #E0E1E6
+  position: relative
+  padding-bottom: 0
+
+.line
+  width: 100%;
+  border-bottom: 1px solid #E0E1E6;
+  position: absolute;
+
+.geology-img
+  position:absolute
+  z-index: 0
+  height: 100vh
+  width: 100%
+  object-fit: cover
+
+.map-info
+  position:absolute
+  z-index: 1
+  color: white
+  font-size: 20px
+  margin: 40vh 10%
+  padding: 20px
+  background-color: rgba(0,0,0,.4)
+
+.map-title
+  position:absolute
+  z-index: 1
+  color: white
+  width: 50%
+  margin: 0 25%
+
+.pub-line
+  width: 80%;
+  border-bottom: 1px solid #E0E1E6;
+  position: absolute;
+
+.location
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-rows: 30vh;
+
+.t1
+  margin-left: 10%
+
+.t2
+  margin-right: 10%
+
+.location-img
+  width: 100%
+  height: 40vh
+  display: flex;
+  margin: auto
+  object-fit: cover
+
+.location-text
+  color: black
+  display: grid;
+  grid-template-rows: 50% 50%;
+  
+  h1
+    font-size: 45px
+    font-weight: 600
+    display: grid
+    margin: auto
+    margin-top: 33%
+
+.caption
+  font-size: 15px
+  font-weight: 600
+  display: grid
+  margin: auto
+
+.card-set
+  display: grid
+  grid-template-columns: 50% 50%
+  grid-template-rows: 30vh
+  width: 60%
+  margin: 0 20%
+
+.basic-card
+  background-color: white
+  width: 95%
+  margin: 2% 0
+  text-align: center
+  padding: 0 25px
+  padding-bottom: 30px
+  height: 25vh
+
+  .link-title 
+    font-size: 25px
+    
+    a
+      color: black
+
+  p
+    color: black
+    font-size: 16px
+
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
+
+.right-card
+  margin-left: 5%
+
+.basic-card2
+  margin: 0
+  .link-title
+    padding-left: 10%
+
+    font-size: 35px
+
+    a
+      color: black
+
+  p
+    padding-left: 5%
+
+    color: black
+    font-size: 16px
+
+.card
+  background-color: white
+  padding: 0
+  margin: 2% 20%
+  width: 60%
+
+  .link-title 
+    font-size: 35px
+    
+    a
+      color: black
+
+  p
+    font-size: 16px
+
+  border-radius: 10px
+  box-shadow: black 1px 0 10px
+
+.location-card
+  display: grid
+  grid-template-rows: 30vh
+  
+  p
+    color: black
+    font-size: 16px
+
+  h1
+    color: black
+  
+  .card-image
+    height: 30vh
+    width: 100%
+
+  .top
+    border-radius: 10px 0 0 0
+  
+  .bottom
+    border-radius: 0 0 10px 0
+
+.location-text 
+  h1
+    diplay: grid
+    margin: auto
+    margin-bottom: 1%
+  p
+    display: grid
+    margin: auto
+    margin-top: 1%
+
+  height: 30vh
+
+.map-card
+  p
+    color: black
+    border-radius: 10px
+    padding: 30px
+
+  a 
+    color: white
+
+.donate-card
+  height: 30vh
+  position:relative
+
+  display: grid
+  margin: auto
+  margin-bottom: 50px
+
+.donate-text
+  position:relative
+  z-index: 100
+  width: 80%
+  display: grid
+  margin: auto
+  padding: 25px
+  background: rgba(255,255,255,0.7);
+  color: black
+  font-size: 18px
+  border-radius: 10px
+
+  a
+    color: black
+    font-weight: bold
+    text-decoration: none
+
+  p
+    margin-bottom: 0
+
+.caption-donate
+  display: grid
+  margin: auto
+  padding: 25px
+  margin-right: 25px
+  background: rgba(255,255,255,0.6);
+  color: black
+  font-size: 18px
+
+  a
+    color: black
+    font-weight: bold
+    text-decoration: none
+
+  p
+    margin-bottom: 0
+
+.section
+  width: 60%
+  margin-left: 20%
+
+  h1
+    color: black
+    font-size: 60px
+
+  h2
+    color: black
+    margin-top: 0
+
+.temp
+  font-size: 20px
+
+  a 
+    color: #015eab
+
+.mobile-card
+  height: 10vh
+  display: grid
+  grid-template-columns: 10vh 80%
+
+  a
+    color: black
+
+  h1
+    display: grid
+    margin: auto
+    font-size: 50px
+
+.rockd-png
+  height: 10vh
+  width: 10vh
+  padding-top: 0
+  border-radius: 10px 0 0 10px
+
+.search-card
+  h1 
+    display: grid
+    margin: auto
+    font-size: 50px
\ No newline at end of file

From fc30dfb56e28e850b60d63fe244694bf32926cbe Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Tue, 6 Aug 2024 11:46:02 -0400
Subject: [PATCH 27/28] cleaned up

---
 .../test-site/main-page/new-home/+Page.mdx    | 48 +++++++++----------
 .../test-site/main-page/new-home/main.styl    | 28 +++++------
 2 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/src/pages/dev/test-site/main-page/new-home/+Page.mdx b/src/pages/dev/test-site/main-page/new-home/+Page.mdx
index 74ed2b94..c07c2730 100644
--- a/src/pages/dev/test-site/main-page/new-home/+Page.mdx
+++ b/src/pages/dev/test-site/main-page/new-home/+Page.mdx
@@ -14,31 +14,31 @@ import { MacrostratIcon } from "~/components";
 
 [//]: # "Start Page" 
 <div class="start-card card">
-    <Image className="cover-img back-img" src="cover_large.jpg"></Image>
-    <div class="text">
-      <span class="header">
-        <h1 id="main-title" class="big">Macrostrat<h2 class="version">v2</h2></h1>
-      </span>
-      <p class="big-text">A platform for geological data exploration, integration, and analysis</p>
-      <div class="stats">
-        <div class="stat">
-          <span class="top-stat" id="n_columns">1,400</span>
-          <span class="top-stat-label">Regional Rock Columns</span>
-        </div>
-        <div class="stat">
-          <span class="top-stat" id="n_units">33,903</span>
-          <span class="top-stat-label">Rock Units</span>
-        </div>
-        <div class="stat">
-          <span class="top-stat" id="n_polys">2,500,000</span>
-          <span class="top-stat-label">Geologic Map Polygons</span>
-        </div>
-        <div class="stat">
-          <span class="top-stat" id="n_names">51,212</span>
-          <span class="top-stat-label"><a href="Macrostrat_strat_names.html" target="_blank">Stratigraphic Names</a></span>
-        </div>
+  <Image className="cover-img back-img" src="cover_large.jpg"></Image>
+  <div class="text">
+    <span class="start-header">
+      <h1 id="main-title" class="big">Macrostrat<h2 class="version">v2</h2></h1>
+    </span>
+    <p class="big-text">A platform for geological data exploration, integration, and analysis</p>
+    <div class="stats">
+      <div class="stat">
+        <span class="top-stat" id="n_columns">1,400</span>
+        <span class="top-stat-label">Regional Rock Columns</span>
+      </div>
+      <div class="stat">
+        <span class="top-stat" id="n_units">33,903</span>
+        <span class="top-stat-label">Rock Units</span>
+      </div>
+      <div class="stat">
+        <span class="top-stat" id="n_polys">2,500,000</span>
+        <span class="top-stat-label">Geologic Map Polygons</span>
+      </div>
+      <div class="stat">
+        <span class="top-stat" id="n_names">51,212</span>
+        <span class="top-stat-label"><a href="Macrostrat_strat_names.html" target="_blank">Stratigraphic Names</a></span>
       </div>
     </div>
+  </div>
 </div>
 
 [//]: # "Map Interface"
@@ -152,7 +152,7 @@ import { MacrostratIcon } from "~/components";
 <div class="header">
   <a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank"><h1>Donate Now</h1></a>
 </div>
-<div class="cdonte-card card">
+<div class="donate-card card">
   <Image className="back-img donate-img" src="donate_medium.jpg"></Image>
   <p class="donate-text">
     Grant funding, principally from the <a href="http://www.nsf.gov" target="_blank">U.S. National Science Foundation</a>, got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!
diff --git a/src/pages/dev/test-site/main-page/new-home/main.styl b/src/pages/dev/test-site/main-page/new-home/main.styl
index 5291992c..953b89ef 100644
--- a/src/pages/dev/test-site/main-page/new-home/main.styl
+++ b/src/pages/dev/test-site/main-page/new-home/main.styl
@@ -2,6 +2,7 @@ html, body
   color: #E0E1E6
   background-color: white 
   margin: 0
+  margin-top: 35px
 
 #total
   background-color: white
@@ -15,10 +16,9 @@ a:hover
 .nohighlight
   color: white
 
-.start
+.start-card
   margin-top: 75px
   margin-top: 75px
-  width: 100%
   display: flex;
   justify-content: center;
   align-items: center;  
@@ -34,6 +34,10 @@ a:hover
     display: inline-block
     width: 100%
 
+  .start-header
+    text-shadow: black 1px 0 10px
+    text-align: center
+
 .text
   position:absolute
   z-index: 100
@@ -42,7 +46,7 @@ a:hover
   width: 50%
   margin: auto
 
-.cover-image
+.cover-img
   position:absolute
   z-index:5
   height: 35vh
@@ -171,12 +175,6 @@ a:hover
   padding: 20vh 0
   text-align: center
 
-.header 
-  display: grid
-  margin: auto
-  margin-bottom: 0
-  text-shadow: black 1px 0 10px
-
 #main-title
   display: inline-block
   margin-bottom: 0
@@ -464,10 +462,6 @@ a:hover
 
   h1
     color: black
-  
-  .card-image
-    height: 30vh
-    width: 100%
 
   .top
     border-radius: 10px 0 0 0
@@ -475,6 +469,10 @@ a:hover
   .bottom
     border-radius: 0 0 10px 0
 
+.card-image
+  height: 30vh
+  width: 100%
+
 .location-text 
   h1
     diplay: grid
@@ -541,7 +539,7 @@ a:hover
   p
     margin-bottom: 0
 
-.section
+.header
   width: 60%
   margin-left: 20%
 
@@ -553,7 +551,7 @@ a:hover
     color: black
     margin-top: 0
 
-.temp
+.map-element
   font-size: 20px
 
   a 

From c786fd473ae8833c73a6af7f55b8e8243063fbab Mon Sep 17 00:00:00 2001
From: David Sklar <davidsklar99@outlook.com>
Date: Tue, 6 Aug 2024 11:47:44 -0400
Subject: [PATCH 28/28] merged

---
 src/pages/dev/test-site/main-page/+Page.mdx   |  74 +--
 src/pages/dev/test-site/main-page/main.styl   |  28 +-
 .../test-site/main-page/new-home/+Page.mdx    | 167 -----
 .../test-site/main-page/new-home/main.styl    | 583 ------------------
 4 files changed, 52 insertions(+), 800 deletions(-)
 delete mode 100644 src/pages/dev/test-site/main-page/new-home/+Page.mdx
 delete mode 100644 src/pages/dev/test-site/main-page/new-home/main.styl

diff --git a/src/pages/dev/test-site/main-page/+Page.mdx b/src/pages/dev/test-site/main-page/+Page.mdx
index 61873a18..227f1454 100644
--- a/src/pages/dev/test-site/main-page/+Page.mdx
+++ b/src/pages/dev/test-site/main-page/+Page.mdx
@@ -4,50 +4,52 @@ import "./main.styl";
 import "../main.styl";
 import { MacrostratIcon } from "~/components";
 
+
 <div id="total">
 
 [//]: # "Nav Bar"
 <Navbar></Navbar>
 
+<div class="body">
+
+
 [//]: # "Start Page" 
-<div class="card start-card">
-<div class="start">
-    <Image className="back-img cover-image" src="cover_large.jpg"></Image>
-    <div class="text">
-      <span class="header">
-        <h1 id="main-title" class="big">Macrostrat<h2 class="version">v2</h2></h1>
-      </span>
-      <p class="big-text">A platform for geological data exploration, integration, and analysis</p>
-      <div class="stats">
-        <div class="stat">
-          <span class="top-stat" id="n_columns">1,400</span>
-          <span class="top-stat-label">Regional Rock Columns</span>
-        </div>
-        <div class="stat">
-          <span class="top-stat" id="n_units">33,903</span>
-          <span class="top-stat-label">Rock Units</span>
-        </div>
-        <div class="stat">
-          <span class="top-stat" id="n_polys">2,500,000</span>
-          <span class="top-stat-label">Geologic Map Polygons</span>
-        </div>
-        <div class="stat">
-          <span class="top-stat" id="n_names">51,212</span>
-          <span class="top-stat-label"><a href="Macrostrat_strat_names.html" target="_blank">Stratigraphic Names</a></span>
-        </div>
+<div class="start-card card">
+  <Image className="cover-img back-img" src="cover_large.jpg"></Image>
+  <div class="text">
+    <span class="start-header">
+      <h1 id="main-title" class="big">Macrostrat<h2 class="version">v2</h2></h1>
+    </span>
+    <p class="big-text">A platform for geological data exploration, integration, and analysis</p>
+    <div class="stats">
+      <div class="stat">
+        <span class="top-stat" id="n_columns">1,400</span>
+        <span class="top-stat-label">Regional Rock Columns</span>
+      </div>
+      <div class="stat">
+        <span class="top-stat" id="n_units">33,903</span>
+        <span class="top-stat-label">Rock Units</span>
+      </div>
+      <div class="stat">
+        <span class="top-stat" id="n_polys">2,500,000</span>
+        <span class="top-stat-label">Geologic Map Polygons</span>
+      </div>
+      <div class="stat">
+        <span class="top-stat" id="n_names">51,212</span>
+        <span class="top-stat-label"><a href="Macrostrat_strat_names.html" target="_blank">Stratigraphic Names</a></span>
       </div>
     </div>
-</div>
+  </div>
 </div>
 
 [//]: # "Map Interface"
-<div class="card map-card">
+<div class="map-card card">
   <p>
-    <div class="temp">With over 225 maps from data providers around the world across every scale, Macrostrat is the world's largest homogenized geologic map database. Our data processing pipeline links geologic map polygons to Macrostrat column polygons, external stratigraphic name lexicons, and geochronological intervals, enabling the enhancement of the original map data and allowing for direct links into <a href="https://xdd.wisc.edu" target="_blank">xDD</a> (formly GeoDeepDive).</div>
+    <div class="map-element">With over 225 maps from data providers around the world across every scale, Macrostrat is the world's largest homogenized geologic map database. Our data processing pipeline links geologic map polygons to Macrostrat column polygons, external stratigraphic name lexicons, and geochronological intervals, enabling the enhancement of the original map data and allowing for direct links into <a href="https://xdd.wisc.edu" target="_blank">xDD</a> (formly GeoDeepDive).</div>
     \
-    <div class="temp">Are you affiliated with a state or national geologic survey? <a href="mailto:contact@macrostrat.org?Subject=Geologic%20Map%20Collaboration">Get in touch</a> with us - we'd love to collaborate and help publicize your maps!</div>
+    <div class="map-element">Are you affiliated with a state or national geologic survey? <a href="mailto:contact@macrostrat.org?Subject=Geologic%20Map%20Collaboration">Get in touch</a> with us - we'd love to collaborate and help publicize your maps!</div>
     \
-    <div class="temp"> Get started by <a href="/map">exploring the map</a> or <a href="/map/sources">taking a look at</a> which maps are currently a part of Macrostrat.</div>
+    <div class="map-element"> Get started by <a href="/map">exploring the map</a> or <a href="/map/sources">taking a look at</a> which maps are currently a part of Macrostrat.</div>
     <div class="buttons1">
       <a type="button" class="btn" href="/map/#3/40.78/-94.13">Geologic Map</a>
       <a type="button" class="btn" href="/sift/#/">Search</a>
@@ -62,10 +64,10 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Locations"
-<div class="section">
+<div class="header">
   <h1>Locations</h1>
 </div>
-<div class="card location-card">
+<div class="locations-card card">
   <div class="location">
     <Image className="card-image top" src="north_america_med.jpg"></Image>
     <div class="location-text">
@@ -97,7 +99,7 @@ import { MacrostratIcon } from "~/components";
 </div>
 
 [//]: # "Data Products"
-<div class="section">
+<div class="header">
   <h1>Data products</h1>
   <h2>Macrostrat integrates a variety of geological data products into a community-accessibe, space-time model of the Earth's crust. These products come from a variety of sources throughout the geosciences.</h2>
 </div>
@@ -148,16 +150,18 @@ import { MacrostratIcon } from "~/components";
 
 
 [//]: # "Donate"
-<div class="section">
+<div class="header">
   <a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank"><h1>Donate Now</h1></a>
 </div>
-<div class="card donate-card">
+<div class="donate-card card">
   <Image className="back-img donate-img" src="donate_medium.jpg"></Image>
   <p class="donate-text">
     Grant funding, principally from the <a href="http://www.nsf.gov" target="_blank">U.S. National Science Foundation</a>, got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!
   </p>
 </div>
 
+</div>
+
 [//]: # "Footer"
 <Footer></Footer>
 
diff --git a/src/pages/dev/test-site/main-page/main.styl b/src/pages/dev/test-site/main-page/main.styl
index 5291992c..953b89ef 100644
--- a/src/pages/dev/test-site/main-page/main.styl
+++ b/src/pages/dev/test-site/main-page/main.styl
@@ -2,6 +2,7 @@ html, body
   color: #E0E1E6
   background-color: white 
   margin: 0
+  margin-top: 35px
 
 #total
   background-color: white
@@ -15,10 +16,9 @@ a:hover
 .nohighlight
   color: white
 
-.start
+.start-card
   margin-top: 75px
   margin-top: 75px
-  width: 100%
   display: flex;
   justify-content: center;
   align-items: center;  
@@ -34,6 +34,10 @@ a:hover
     display: inline-block
     width: 100%
 
+  .start-header
+    text-shadow: black 1px 0 10px
+    text-align: center
+
 .text
   position:absolute
   z-index: 100
@@ -42,7 +46,7 @@ a:hover
   width: 50%
   margin: auto
 
-.cover-image
+.cover-img
   position:absolute
   z-index:5
   height: 35vh
@@ -171,12 +175,6 @@ a:hover
   padding: 20vh 0
   text-align: center
 
-.header 
-  display: grid
-  margin: auto
-  margin-bottom: 0
-  text-shadow: black 1px 0 10px
-
 #main-title
   display: inline-block
   margin-bottom: 0
@@ -464,10 +462,6 @@ a:hover
 
   h1
     color: black
-  
-  .card-image
-    height: 30vh
-    width: 100%
 
   .top
     border-radius: 10px 0 0 0
@@ -475,6 +469,10 @@ a:hover
   .bottom
     border-radius: 0 0 10px 0
 
+.card-image
+  height: 30vh
+  width: 100%
+
 .location-text 
   h1
     diplay: grid
@@ -541,7 +539,7 @@ a:hover
   p
     margin-bottom: 0
 
-.section
+.header
   width: 60%
   margin-left: 20%
 
@@ -553,7 +551,7 @@ a:hover
     color: black
     margin-top: 0
 
-.temp
+.map-element
   font-size: 20px
 
   a 
diff --git a/src/pages/dev/test-site/main-page/new-home/+Page.mdx b/src/pages/dev/test-site/main-page/new-home/+Page.mdx
deleted file mode 100644
index c07c2730..00000000
--- a/src/pages/dev/test-site/main-page/new-home/+Page.mdx
+++ /dev/null
@@ -1,167 +0,0 @@
-import { PageHeader } from "~/components";
-import { Image, Navbar, Footer } from "../../index";
-import "./main.styl";
-import "../../main.styl";
-import { MacrostratIcon } from "~/components";
-
-<div id="total">
-
-[//]: # "Nav Bar"
-<Navbar></Navbar>
-
-<div class="body">
-
-
-[//]: # "Start Page" 
-<div class="start-card card">
-  <Image className="cover-img back-img" src="cover_large.jpg"></Image>
-  <div class="text">
-    <span class="start-header">
-      <h1 id="main-title" class="big">Macrostrat<h2 class="version">v2</h2></h1>
-    </span>
-    <p class="big-text">A platform for geological data exploration, integration, and analysis</p>
-    <div class="stats">
-      <div class="stat">
-        <span class="top-stat" id="n_columns">1,400</span>
-        <span class="top-stat-label">Regional Rock Columns</span>
-      </div>
-      <div class="stat">
-        <span class="top-stat" id="n_units">33,903</span>
-        <span class="top-stat-label">Rock Units</span>
-      </div>
-      <div class="stat">
-        <span class="top-stat" id="n_polys">2,500,000</span>
-        <span class="top-stat-label">Geologic Map Polygons</span>
-      </div>
-      <div class="stat">
-        <span class="top-stat" id="n_names">51,212</span>
-        <span class="top-stat-label"><a href="Macrostrat_strat_names.html" target="_blank">Stratigraphic Names</a></span>
-      </div>
-    </div>
-  </div>
-</div>
-
-[//]: # "Map Interface"
-<div class="map-card card">
-  <p>
-    <div class="map-element">With over 225 maps from data providers around the world across every scale, Macrostrat is the world's largest homogenized geologic map database. Our data processing pipeline links geologic map polygons to Macrostrat column polygons, external stratigraphic name lexicons, and geochronological intervals, enabling the enhancement of the original map data and allowing for direct links into <a href="https://xdd.wisc.edu" target="_blank">xDD</a> (formly GeoDeepDive).</div>
-    \
-    <div class="map-element">Are you affiliated with a state or national geologic survey? <a href="mailto:contact@macrostrat.org?Subject=Geologic%20Map%20Collaboration">Get in touch</a> with us - we'd love to collaborate and help publicize your maps!</div>
-    \
-    <div class="map-element"> Get started by <a href="/map">exploring the map</a> or <a href="/map/sources">taking a look at</a> which maps are currently a part of Macrostrat.</div>
-    <div class="buttons1">
-      <a type="button" class="btn" href="/map/#3/40.78/-94.13">Geologic Map</a>
-      <a type="button" class="btn" href="/sift/#/">Search</a>
-    </div>
-  </p>
-</div>
-
-[//]: # "Mobile"
-<div class="mobile-card card">
-  <Image src="rockd.jpg" width="22px" className="rockd-png"></Image>
-  <h1><a href="https://rockd.org" target="_blank">Go mobile!</a></h1>
-</div>
-
-[//]: # "Locations"
-<div class="header">
-  <h1>Locations</h1>
-</div>
-<div class="locations-card card">
-  <div class="location">
-    <Image className="card-image top" src="north_america_med.jpg"></Image>
-    <div class="location-text">
-      <h1>North America</h1>
-      <p>243 packages. 798 units. 897 collections.</p>
-    </div>
-  </div>
-  <div class="location">
-    <div class="location-text">
-      <h1>Caribbean</h1>
-      <p>243 packages. 798 units. 897 collections.</p>
-    </div>
-    <Image className="card-image" src="caribbean_new_medium.jpg"></Image>
-  </div>
-  <div class="location">
-    <Image className="card-image" src="new_zealand_new_medium.jpg"></Image>
-    <div class="location-text">
-      <h1>New Zealand</h1>
-      <p>828 packages. 2,168 units. 328 collections.</p>
-    </div>
-  </div>
-  <div class="location">
-    <div class="location-text">
-      <h1>Deep Sea</h1>
-      <p>388 packages. 7,124 units. 0 collections.</p>
-    </div>
-    <Image className="card-image bottom" src="deep_sea_new_medium.jpg"></Image>
-  </div>
-</div>
-
-[//]: # "Data Products"
-<div class="header">
-  <h1>Data products</h1>
-  <h2>Macrostrat integrates a variety of geological data products into a community-accessibe, space-time model of the Earth's crust. These products come from a variety of sources throughout the geosciences.</h2>
-</div>
-
-<div class="card-set">
-
-[//]: # "Maps"
-<div class="basic-card left-card">
-  <div class="link-title">
-    <a href="/maps"><h1>Maps</h1></a>
-  </div>
-  <p>
-    The spatial footprint of rocks on the Earth's surface
-  </p>
-</div>
-
-[//]: # "Columns"
-<div class="basic-card right-card">
-  <div class="link-title">
-    <a href="/columns"><h1>Columns</h1></a>
-  </div>
-  <p>
-    Stratigraphic and geological columns showing the organization of rocks in time
-  </p>
-</div>
-
-[//]: # "Geologic Lexicon"
-<div class="basic-card left-card">
-  <div class="link-title">
-    <a href="/lex"><h1>Geologic Lexicon</h1></a>
-  </div>
-  <p>
-    Geologic units and data dictionaries
-  </p>
-</div>
-
-[//]: # "Projects"
-<div class="basic-card right-card">
-  <div class="link-title">
-    <a href="/projects"><h1>Projects</h1></a>
-  </div>
-  <p>
-    Projects for specific regions or geological problems
-  </p>
-</div>
-
-</div>
-
-
-[//]: # "Donate"
-<div class="header">
-  <a href="https://secure.supportuw.org/give/?id=E0A03FA3-B2A0-431C-83EE-A121A04EEB5D" target="_blank"><h1>Donate Now</h1></a>
-</div>
-<div class="donate-card card">
-  <Image className="back-img donate-img" src="donate_medium.jpg"></Image>
-  <p class="donate-text">
-    Grant funding, principally from the <a href="http://www.nsf.gov" target="_blank">U.S. National Science Foundation</a>, got Macrostrat off the ground and keeps us innovating, but maintaining and growing a free and open digital resource involves ongoing expenses beyond the grant cycle, like annual certificate renewals, cloud server hosting and backup storage that keep your connection safe, domain name registrations that keep us located on the web, and system upgrades to keep us fast and efficient. If you would like to help us continue to grow and provide free resources, you can do so with a one-time or recurring gift to the UW Foundation Paleontology Program Fund in Geology. Thank you!
-  </p>
-</div>
-
-</div>
-
-[//]: # "Footer"
-<Footer></Footer>
-
-</div>
\ No newline at end of file
diff --git a/src/pages/dev/test-site/main-page/new-home/main.styl b/src/pages/dev/test-site/main-page/new-home/main.styl
deleted file mode 100644
index 953b89ef..00000000
--- a/src/pages/dev/test-site/main-page/new-home/main.styl
+++ /dev/null
@@ -1,583 +0,0 @@
-html, body
-  color: #E0E1E6
-  background-color: white 
-  margin: 0
-  margin-top: 35px
-
-#total
-  background-color: white
-
-a
-  color: white
-
-a:hover
-  text-decoration: none
-
-.nohighlight
-  color: white
-
-.start-card
-  margin-top: 75px
-  margin-top: 75px
-  display: flex;
-  justify-content: center;
-  align-items: center;  
-  height: 35vh
-  color: white
-
-  li
-    float: left
-    list-style-type: none
-    width: 33%
-
-  ul
-    display: inline-block
-    width: 100%
-
-  .start-header
-    text-shadow: black 1px 0 10px
-    text-align: center
-
-.text
-  position:absolute
-  z-index: 100
-  padding: 0 20px
-  display: grid
-  width: 50%
-  margin: auto
-
-.cover-img
-  position:absolute
-  z-index:5
-  height: 35vh
-  width: 60%
-  object-fit: cover
-  border-radius: 10px
-
-.sea-image
-  position:absolute
-  z-index: 6
-  height: 100vh
-  width: 30%
-  object-fit: cover   
-
-.parent
-  display: inline-flex
-  width: 100%
-
-.big
-  font-size: 72px
-  font-family: "Maven Pro", sans-serif;
-  text-align: center
-
-.big-text
-  display: grid
-  margin: auto
-  font-family: Helvetica, sans-serif
-  font-weight: 900
-  font-size: 20px
-  text-shadow: black 1px 0 10px
-  color: white
-
-.top-stat, .top-stat-label
-  display: grid
-  margin: auto
-  color: white
-
-.top-stat
-  font-size: 35px
-  font-family: Helvetica, sans-serif
-
-.stats
-  display: grid
-  grid-template-columns: 25% 25% 25% 25%
-  margin-bottom: 3%
-  margin-top: 30px
-  text-shadow: black 1px 0 10px;
-
-  .stat
-    display: grid
-    margin: auto
-
-  a
-    color: white
-    
-.rockd
-  background-color: green
-
-.btn
-  background-color: #363434;
-  border: none;
-  color: white;
-  padding: 13px 10px;
-  margin: 5% 15%
-  text-align: center;
-  text-decoration: none;
-  border-radius: 12px;
-
-  a 
-    color: white
-
-.btn:hover 
-  background-color: #545151 
-
-.buttons1 
-  font-size: 20px
-  padding: 0px
-  display: grid
-  grid-template-columns: 50% 50%
-
-  a 
-    color: white
-    text-decoration: none
-
-  a:hover
-    color: white
-
-.country_container 
-  height: 100vh
-
-.country
-  height: 100%
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  color: white
-
-.img
-  width: 50%
-  object-fit: cover
-
-.country-image
-  height: 50vh
-  width: 50%
-
-.rock-border
-  width: 100%
-  margin: 0
-  padding: 0
-
-.geologic-maps
-  height: 100vh
-  background-color: white
-  color: black
-  margin: 0
-
-.map-info
-  padding: 0 10vh
-  margin: 0
-
-.title
-  margin: 0
-  font-size: 72px
-  font-family: "Maven Pro", sans-serif;
-  padding: 20vh 0
-  text-align: center
-
-#main-title
-  display: inline-block
-  margin-bottom: 0
-  padding-bottom: 10px
-
-.version
-  display: inline-block
-  margin-left: 20px
-  font-size: 40px
-
-#about
-  height: 100vh
-  background-color: white
-  color: black
-  margin: 0
-
-#apps
-  height: 100vh
-  color: black
-  background-color: white
-
-#api
-  height: 100vh
-
-.donate-img
-  position:absolute
-  z-index:5
-  height: 30vh
-  width: 100%
-  object-fit: cover
-  border-radius: 10px
-
-.app-header
-  margin: 0
-  padding: 0
-
-.app-box 
-  height: 15vh
-  display: flex
-  width: 60%
-  margin: 0 20%
-  position: relative
-  color: black
-
-.app-background-text
-  margin: auto
-  padding-right: 20px
-  margin-right: 0
-  text-align: right
-  max-width: 55%
-  font-size: 72px
-
-.blurb
-  font-size: 15px
-
-.app-img
-  height: 80%
-  margin: auto
-  margin-left: 6%
-
-
-#api  
-  position: relative
-  height: 30vh
-  background-color: white
-
-#api-circle-text
-  display: table-cell;
-  vertical-align: middle;
-  color: #6bbe98;
-  font-size: 72px
-  font-weight: 500
-
-.api-circle
-  float: left
-  margin-left: 15%
-  margin-right: 50px
-  background-color: #fff;
-  height: 200px;
-  width: 200px;
-  border-radius: 50%;
-  text-align: center;
-  display: table;
-  border: 11px solid #6bbe98;
-  color: #4BABBf;
-
-#api-text
-  padding-top: 50px
-  margin-right: 15%
-  color: #4bab7f;
-  font-size: 20px;
-  line-height: 28px;
-  font-weight: 400;
-
-#publications 
-  margin: 100px 10%
-
-#pub-title 
-  text-align: left
-  color: #E0E1E6
-  position: relative
-  padding-bottom: 0
-  margin-bottom: 0
-
-.pub-list
-  padding-top: 10px
-  margin-left: 20px
-  counter-reset: pub-counter 70
-  color: black
-
-  li
-    counter-increment: pub-counter -1
-
-  li::marker
-    font-size: 35px;
-    color: #babdc8;
-    content: counter(pub-counter) " "
-    counter-increment: pub-counter
-
-#about  
-  margin: 0 10%
-
-.about-row
-  margin: 4%
-  font-size: 18px;
-  line-height: 28px;
-  font-weight: 200;
-
-.about-body-subtitle
-  float: left
-  font-size: 22px;
-  font-weight: 200;
-
-.about-body
-  margin-left: 30%
-
-#about-title
-  text-align: left
-  color: #E0E1E6
-  position: relative
-  padding-bottom: 0
-
-.line
-  width: 100%;
-  border-bottom: 1px solid #E0E1E6;
-  position: absolute;
-
-.geology-img
-  position:absolute
-  z-index: 0
-  height: 100vh
-  width: 100%
-  object-fit: cover
-
-.map-info
-  position:absolute
-  z-index: 1
-  color: white
-  font-size: 20px
-  margin: 40vh 10%
-  padding: 20px
-  background-color: rgba(0,0,0,.4)
-
-.map-title
-  position:absolute
-  z-index: 1
-  color: white
-  width: 50%
-  margin: 0 25%
-
-.pub-line
-  width: 80%;
-  border-bottom: 1px solid #E0E1E6;
-  position: absolute;
-
-.location
-  display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-rows: 30vh;
-
-.t1
-  margin-left: 10%
-
-.t2
-  margin-right: 10%
-
-.location-img
-  width: 100%
-  height: 40vh
-  display: flex;
-  margin: auto
-  object-fit: cover
-
-.location-text
-  color: black
-  display: grid;
-  grid-template-rows: 50% 50%;
-  
-  h1
-    font-size: 45px
-    font-weight: 600
-    display: grid
-    margin: auto
-    margin-top: 33%
-
-.caption
-  font-size: 15px
-  font-weight: 600
-  display: grid
-  margin: auto
-
-.card-set
-  display: grid
-  grid-template-columns: 50% 50%
-  grid-template-rows: 30vh
-  width: 60%
-  margin: 0 20%
-
-.basic-card
-  background-color: white
-  width: 95%
-  margin: 2% 0
-  text-align: center
-  padding: 0 25px
-  padding-bottom: 30px
-  height: 25vh
-
-  .link-title 
-    font-size: 25px
-    
-    a
-      color: black
-
-  p
-    color: black
-    font-size: 16px
-
-  border-radius: 10px
-  box-shadow: black 1px 0 10px
-
-.right-card
-  margin-left: 5%
-
-.basic-card2
-  margin: 0
-  .link-title
-    padding-left: 10%
-
-    font-size: 35px
-
-    a
-      color: black
-
-  p
-    padding-left: 5%
-
-    color: black
-    font-size: 16px
-
-.card
-  background-color: white
-  padding: 0
-  margin: 2% 20%
-  width: 60%
-
-  .link-title 
-    font-size: 35px
-    
-    a
-      color: black
-
-  p
-    font-size: 16px
-
-  border-radius: 10px
-  box-shadow: black 1px 0 10px
-
-.location-card
-  display: grid
-  grid-template-rows: 30vh
-  
-  p
-    color: black
-    font-size: 16px
-
-  h1
-    color: black
-
-  .top
-    border-radius: 10px 0 0 0
-  
-  .bottom
-    border-radius: 0 0 10px 0
-
-.card-image
-  height: 30vh
-  width: 100%
-
-.location-text 
-  h1
-    diplay: grid
-    margin: auto
-    margin-bottom: 1%
-  p
-    display: grid
-    margin: auto
-    margin-top: 1%
-
-  height: 30vh
-
-.map-card
-  p
-    color: black
-    border-radius: 10px
-    padding: 30px
-
-  a 
-    color: white
-
-.donate-card
-  height: 30vh
-  position:relative
-
-  display: grid
-  margin: auto
-  margin-bottom: 50px
-
-.donate-text
-  position:relative
-  z-index: 100
-  width: 80%
-  display: grid
-  margin: auto
-  padding: 25px
-  background: rgba(255,255,255,0.7);
-  color: black
-  font-size: 18px
-  border-radius: 10px
-
-  a
-    color: black
-    font-weight: bold
-    text-decoration: none
-
-  p
-    margin-bottom: 0
-
-.caption-donate
-  display: grid
-  margin: auto
-  padding: 25px
-  margin-right: 25px
-  background: rgba(255,255,255,0.6);
-  color: black
-  font-size: 18px
-
-  a
-    color: black
-    font-weight: bold
-    text-decoration: none
-
-  p
-    margin-bottom: 0
-
-.header
-  width: 60%
-  margin-left: 20%
-
-  h1
-    color: black
-    font-size: 60px
-
-  h2
-    color: black
-    margin-top: 0
-
-.map-element
-  font-size: 20px
-
-  a 
-    color: #015eab
-
-.mobile-card
-  height: 10vh
-  display: grid
-  grid-template-columns: 10vh 80%
-
-  a
-    color: black
-
-  h1
-    display: grid
-    margin: auto
-    font-size: 50px
-
-.rockd-png
-  height: 10vh
-  width: 10vh
-  padding-top: 0
-  border-radius: 10px 0 0 10px
-
-.search-card
-  h1 
-    display: grid
-    margin: auto
-    font-size: 50px
\ No newline at end of file