prep sections for graphics

calblueprint · Jan 12, 2024 · 00068a9 · 00068a9
1 parent 916c160
commit 00068a9
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 30 deletions.
diff --git a/src/components/About.astro b/src/components/About.astro
@@ -86,6 +86,7 @@ import crowd from '../graphics/about/crowd.webp';
   @use '../styles/fonts';
 
   section {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;

diff --git a/src/components/Contact.astro b/src/components/Contact.astro
@@ -1,30 +1,37 @@
-<section> 
+<section>
   <h4 id="contact">CONTACT US</h4>
   <div class="spacer"></div>
   <div class="row">
     <h3>Any other&nbsp;</h3><h2>questions?</h2>
   </div>
   <div class="spacer"></div>
-  <p class="description">We are here to help you! Please check the FAQ first; 
-    If your question is not already answered, you can reach us at 
-    <a class="email" href="mailto:[email protected]">[email protected]</a>.<br>
-    <br>
-    Please email <a class="email" href="mailto:[email protected]">[email protected]</a>
-    if you need a particular accommodation.
-    Note that requests made less than 24 hours before the event will likely not be accommodated.
+  <p class="description">
+    We are here to help you! Please check the FAQ first; If your question is not
+    already answered, you can reach us at
+    <a class="email" href="mailto:[email protected]"
+      >[email protected]</a
+    >.<br />
+    <br />
+    Please email <a class="email" href="mailto:[email protected]"
+      >[email protected]</a
+    >
+    if you need a particular accommodation. Note that requests made less than 24
+    hours before the event will likely not be accommodated.
   </p>
 </section>
 
 <style lang="scss">
   section {
+    position: relative;
     display: flex;
     flex-direction: column;
-    align-items: center; 
+    align-items: center;
     text-align: center;
-    width: 46.5rem;
     margin: 0 auto;
+    padding: 0 20%;
     padding-top: 10.75rem;
   }
+
   div.spacer {
     height: 1.5rem;
   }
@@ -39,6 +46,6 @@
   }
 
   a.email {
-    text-decoration-line: underline; // the underline is too close to the text... 
+    text-decoration-line: underline; // the underline is too close to the text...
   }
-</style>
+</style>
diff --git a/src/components/FAQ.astro b/src/components/FAQ.astro
@@ -73,9 +73,9 @@ const faqsCol1 = faqs.slice(0, split);
 const faqsCol2 = faqs.slice(split);
 ---
 
-<section id="faq">
+<section>
   <div class="faq-headers">
-    <h4>FAQ</h4>
+    <h4 id="faq">FAQ</h4>
     <h2>
       Frequently asked questions <span>– we've got the answers</span>
     </h2>
@@ -104,11 +104,12 @@ const faqsCol2 = faqs.slice(split);
   @use '../styles/fonts';
   @use '../styles/breakpoints';
 
-  #faq {
+  section {
+    position: relative;
     display: flex;
     flex-direction: column;
-    width: 80vw;
-    margin: 10rem auto 0;
+    width: 100%;
+    margin: 160px auto 0;
   }
 
   .faq-headers {

diff --git a/src/components/NonProfits.astro b/src/components/NonProfits.astro
@@ -2,8 +2,8 @@
 import NonProfit from './NonProfit.astro';
 ---
 
-<section class="lead" id="nonprofits">
-  <h4>NON-PROFITS</h4>
+<section class="lead">
+  <h4 id="nonprofits">NON-PROFITS</h4>
   <h3>
     We’re a hackathon with <b class="emphasis">social good</b> at its heart.
   </h3>
@@ -77,12 +77,12 @@ import NonProfit from './NonProfit.astro';
     text-align: center;
     color: colors.$text;
     padding-bottom: 2rem;
+    margin-top: 180px;
 
     @media (min-width: breakpoints.$laptop) {
-      padding: 0 5rem 2rem 5rem;
+      padding: 0 20%;
+      padding-bottom: 80px;
       grid-template-columns: 1fr 1fr 1fr;
-      max-width: 800px;
-      margin: auto;
     }
   }
 
@@ -105,8 +105,4 @@ import NonProfit from './NonProfit.astro';
       grid-template-columns: 1fr 1fr 1fr;
     }
   }
-
-  #nonprofits {
-    margin-top: 180px;
-  }
 </style>
diff --git a/src/components/Schedule.astro b/src/components/Schedule.astro
@@ -71,7 +71,9 @@
 
 <style lang="scss">
   @use '../styles/fonts';
+
   section {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;

diff --git a/src/components/Sponsors.astro b/src/components/Sponsors.astro
@@ -8,9 +8,9 @@ import ffwdLogo from '../graphics/sponsors/ffwd.webp';
 import witiLogo from '../graphics/sponsors/witi.webp';
 ---
 
-<section id="sponsors">
+<section>
   <div class="header-container">
-    <h4>SPONSORS & PARTNERS</h4>
+    <h4 id="sponsors">SPONSORS & PARTNERS</h4>
     <h3>A round of applause for our <b>past sponsors</b></h3>
     <p>Stay tuned — Hack for Impact sponsors will be released soon!</p>
   </div>
@@ -31,7 +31,10 @@ import witiLogo from '../graphics/sponsors/witi.webp';
     <a href="https://www.ffwd.org/" target="_blank">
       <Image src={ffwdLogo} alt="Fast Forward" />
     </a>
-    <a href="https://citris-uc.org/research/edge-in-tech-initiative/" target="_blank">
+    <a
+      href="https://citris-uc.org/research/edge-in-tech-initiative/"
+      target="_blank"
+    >
       <Image src={witiLogo} alt="Women in Tech Initiaive" />
     </a>
   </div>
@@ -40,7 +43,8 @@ import witiLogo from '../graphics/sponsors/witi.webp';
 <style lang="scss">
   @use '../styles/fonts';
 
-  #sponsors {
+  section {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;