Card layout for macrostrat developmental website and updated testing

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>
 

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

pages/dev/test-site/donate/+Page.mdx

@@ -9,18 +9,16 @@ import { MacrostratIcon } from "~/components";
 <Navbar></Navbar>
 
 [//]: # "Donate"
-<div class="donate-container" 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"

pages/dev/test-site/donate/main.styl

@@ -14,63 +14,85 @@ 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-img
+  position:absolute
+  z-index:5
+  height: 80vh
+  width: 60%
+  object-fit: cover
+  border-radius: 10px
+
+.text
+  position:absolute
+  z-index: 100
+  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
+
+.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;
-  padding: 0
+  font-size: 100px
 
-.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);
+.caption-donate
+  display: grid
+  margin: auto
   padding: 25px
+  margin-right: 20%
+  margin-left: 20%
+  background: rgba(255,255,255,0.6);
   color: black
-  width: 80%
-  font-size: 18px
 
   a
     color: black
     font-weight: bold
     text-decoration: none
 
-.donate-img
-  position:absolute
-  z-index:5
-  height: 80vh
-  width: 100%
-  object-fit: cover
-
-.text
-  position:absolute
-  z-index: 100
-  padding: 0 20px
+  p
+    margin-bottom: 0
+    font-size: 175%