fix: webkit inconsistencies & responsiveness

src/components/Animation/Animation.css

@@ -18,3 +18,9 @@
     flex-direction: column;
     align-items: center;
 }
+
+@media only screen and (max-width: 500px) {
+    #animation__root {
+        opacity: 0.7;
+    }
+}

src/components/ArticleCard/ArticleCard.tsx

@@ -12,7 +12,7 @@ export default function ArticleCard(props: { data: any }) {
   }
   return (
     <div className='card-container' onClick={onClick}>
-      <div style={{ maxWidth: 300 }}>
+      <div style={{ maxWidth: 300, height: 200 }}>
         <GatsbyImage image={img!} alt={props.data.subtitle} />
       </div>
       <h2>{props.data.title}</h2>

src/components/CursorText.tsx

@@ -3,7 +3,7 @@ import Typewriter from "typewriter-effect"
 
 export default function CursorText(props: { batch: Array<string> }) {
   return (
-    <div style={{ width: 400, height: 80 }}>
+    <div style={{ width: "100%", height: 80 }}>
       <Typewriter
         options={{
           strings: props.batch,

src/components/Footer/Footer.css

@@ -22,6 +22,11 @@
     background: black;
 }
 
+.footer-upper__text h1 {
+    padding-left: 20px;
+    font-size: 18px;
+}
+
 .social-buttons {
     margin-right: 40px;
     display: flex;
@@ -90,3 +95,13 @@ footer {
         align-items: center;
     }
 }
+
+@media only screen and (max-width: 380px) {
+    .footer-upper__text h1 {
+        font-size: 1rem;
+    }
+
+    .version-txt {
+        display: none;
+    }
+}

src/components/Footer/Footer.tsx

@@ -18,9 +18,7 @@ export default function () {
         <div className="footer-content-container">
           <div className='footer-upper'>
             <div className='footer-upper__text'>
-              <h1 style={{paddingLeft: "20px", fontSize: "18px"}}>
-                UF OSC
-              </h1>
+              <h1> UF OSC </h1>
               <p className="version-txt">
                 { version }
               </p>

src/components/Index/AboutSection.tsx

@@ -29,13 +29,15 @@ const AboutSection = () => (
           </button>
         </div>
       </div>
-      <StaticImage
-        src="../../images/group_photo.jpg"
-        width={600}
-        alt="Club Group Photo"
-        className="club-group-photo"
-        loading="lazy"
-      />
+      <div>
+        <StaticImage
+          src="../../images/group_photo.jpg"
+          width={600}
+          alt="Club Group Photo"
+          className="club-group-photo"
+          loading="lazy"
+        />
+      </div>
     </div>
   </section>
 )

src/components/Index/AnimationSection.tsx

@@ -15,7 +15,7 @@ const MSG_BATCH = [
 const AnimationSection = () => (
   <Animation speed={0.001} scale={30}>
     <h2>let's build <CursorText batch={MSG_BATCH} /></h2>
-    <h3 style={{margin: "auto", marginTop: 50, maxWidth: "min(800px, 70%)", fontSize: "1.5rem"}}>
+    <h3 style={{margin: "auto", marginTop: 50, maxWidth: "min(800px, 70%)"}}>
       Embrace the power of collaborative creation at the University of
       Florida's Open Source Club. Meet new friends, propose ideas, learn
       programming, and work on open source projects.

src/components/Index/CommunitySection.tsx

@@ -104,7 +104,7 @@ const CommunitySection = () => (
         If interested, join our Discord channel and keep an eye out for
         any upcoming meetings on our announcements page.
       </h3>
-      <div style={{ marginTop: 50 }}>
+      <div id="become-a-member--actions">
         <button onClick={ () => navigate("https://discord.gg/Gsxej6u") }
           style={{ marginLeft: 0 }}>
           JOIN DISCORD

src/components/Index/ContactSection.tsx

@@ -65,7 +65,7 @@ export default function ContactSection() {
               onChange={onSubscribeChange}
             />
             <label for="subscribe" style={{ margin: "5px 20px" }}>
-              Subscribe to our newsletter (max 1-2 emails/month)
+              Subscribe to our newsletter (1-2 emails/month)
             </label>
           </div>
           <input type="submit" value="Submit" />

src/components/Navbar/Navbar.css

@@ -167,7 +167,7 @@
         flex-direction: column;
         top: 70px;
         background-color: black;
-        height: fit-content;
+        height: auto;
         width: 100%;
         padding: 10px;
         transition: 0.3s ease-in-out;

src/components/ProjectCard/ProjectCard.css

@@ -36,7 +36,7 @@
     width: fit-content;
 }
 
-@media only screen and (max-width: 850) {
+@media only screen and (max-width: 850px) {
     .project-card h2 {
         font-size: 1.2rem;
     }
@@ -45,3 +45,11 @@
         font-size: 1.2rem;
     }
 }
+
+@media only screen and (max-width: 500px) {
+    .project-card button {
+        padding: 8px;
+        height: fit-content;
+        width: fit-content;
+    }
+}

src/global.css

@@ -69,7 +69,7 @@ h2 {
 
 h3 {
     font-family: 'Diatype';
-    font-size: 1.4rem;
+    font-size: 1.5rem;
     font-weight: 400;
     color: #e8e8e8;
 }
@@ -209,3 +209,42 @@ label {
     height: 100%;
     width: 100%;
 }
+
+@media only screen and (max-width: 500px) {
+    .Typewriter__cursor, .Typewriter__wrapper, h2 {
+        font-size: 3.5rem;
+    }
+
+    h3 {
+        font-size: 1.3rem;
+    }
+
+    .tertiary {
+        padding: 0;
+    }
+}
+
+@media only screen and (max-width: 380px) {
+    .Typewriter__cursor, .Typewriter__wrapper, h2 {
+        font-size: 3.2rem;
+    }
+
+    h3 {
+        font-size: 1.2rem;
+    }
+}
+
+@media only screen and (max-width: 350px) {
+    .Typewriter__cursor, .Typewriter__wrapper, h2 {
+        font-size: 2.8rem;
+    }
+
+    button {
+        padding: 5px;
+        margin: 10px 0px;
+    }
+
+    .section-heading {
+        font-size: 1.5rem;
+    }
+}

src/pages/about.css

@@ -113,4 +113,23 @@
     .slide-img {
         height: 400px;
     }
+
+    .about h2 {
+        font-size: 2rem;
+    }
+
+    .about h3 {
+        font-weight: 300;
+        font-size: 1.2rem;
+    }
+}
+
+@media only screen and (max-width: 380px) {
+    .about h2 {
+        font-size: 2rem;
+    }
+
+    #slideshow {
+        display: none;
+    }
 }

src/pages/index.css

@@ -164,6 +164,10 @@
     min-height: 650px;
 }
 
+#become-a-member--actions {
+    margin-top: 50px;
+}
+
 .contact-form {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -242,4 +246,32 @@
     .project-container {
         grid-template-columns: 1fr;
     }
+
+    #become-a-member--actions {
+        display: flex;
+        flex-direction: row;
+    }
+}
+
+@media only screen and (max-width: 380px) {
+    #become-a-member--actions {
+        display: flex;
+        flex-direction: column;
+    }
+
+    #become-a-member--actions .secondary {
+        margin-left: 0;
+    }
+
+    #become-a-member--actions button {
+        width: 150px;
+    }
+
+    #contact-form__meta {
+        max-width: 85vw;
+    }
+
+    form {
+        max-width: 85vw;
+    }
 }

src/templates/BlogPostTemplate.css

@@ -60,7 +60,6 @@
 p {
     font-family: "Diatype";
     color: rgb(255, 255, 255);
-    text-align: justify;
     font-size: 1.35rem;
     line-height: 170%;
     font-weight: 400;
@@ -185,6 +184,7 @@ p {
 
 table {
     width: 100%;
+    overflow: auto;
     margin-bottom: 2rem;
     border-collapse: collapse;
     border-spacing: 0.25rem;
@@ -238,15 +238,45 @@ table tbody tr td {
     display: flex;
 }
 
+.gatsby-highlight {
+    max-width: 100vw;
+    overflow: auto;
+}
+
 @media only screen and (max-width: 650px) {
     .article-layout__recc__articles {
         flex-direction: column;
-        align-items: center;
     }
-}
 
-@media only screen and (max-width: 500px) {
+    .article-layout__recc__articles .card-container {
+        margin-left: 0px;
+    }
+
     #inner-html blockquote p {
         font-size: 1.225rem;
     }
+
+    p {
+        font-size: 1.225rem;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .article-layout__matter__meta h2 {
+        font-size: 3rem;
+    }
+
+    .subtitle {
+        font-size: 1.3rem;
+    }
+}
+
+@media only screen and (max-width: 350px) {
+    .article-layout__matter__meta h2 {
+        font-size: 2.7rem;
+    }
+
+    p {
+        font-size: 1.1rem;
+    }
 }