[temp fix] fixed home icons

Author: michulee

src/css/custom.css

@@ -69,14 +69,6 @@
   border-radius: 15px;
 }
 
-.core-values .core-icons {
-  margin-bottom: 3rem;
-}
-
-.core-values h2 {
-  font-size: 2rem;
-}
-
 /* STRUCTURE */
 .col {
   border-style: none;
@@ -99,11 +91,17 @@ h1 {
 }
 
 /* FONTAWESOME */
-.core-icons {
+/* TEMP FIX: for core values icons */
+.svg-inline--fa {
+  /* color: red; */
   font-size: 10rem;
-
 }
 
+/* .core-icons {
+  font-size: 10rem !important;
+  color: red;
+} */
+
 /* SCROLLBAR */
 /* FireFox: can't resize scrollbar, can't use border-radius on scrollbar */
 * {

src/pages/index.js

@@ -12,24 +12,35 @@ function CoreValues() {
   return (
     <div class={clsx(styles.sectionPadding)}>
       <section class="container">
-        <div class="row core-values">
+        <div class="row">
           <div class="col col--4 centered">
             {/* <FontAwesomeIcon icon={faHandshake} color="orange" size="xs"/> */}
             {/* <FontAwesomeIcon icon={faHandshake} color="orange" size="6x"/> */}
-            {/* <FontAwesomeIcon icon={faHandshake} class={clsx("test")} /> */}
-            <FontAwesomeIcon icon={faHandshake} class={"core-icons"} />
-            <h2>Networking</h2>
-            <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
+
+            {/* TEMP FIX: use .svg-inline--fa to directly target icon */}
+            {/* when using class={}, icon auto fills the container but can't resize with .core-icons class */}
+            {/* <FontAwesomeIcon icon={faHandshake} class={clsx("core-icons")}/> */}
+            <FontAwesomeIcon icon={faHandshake}/>
+            <div class={clsx("padding--sm centered")}>
+              <h2>Networking</h2>
+              <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
+            </div>
           </div>
           <div class="col col--4 centered">
-            <FontAwesomeIcon icon={faShieldAlt} class={"core-icons"} />
-            <h2>Cybersecurity</h2>
-            <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
+            {/* <FontAwesomeIcon icon={faShieldAlt} class={clsx("core-icons")}/> */}
+            <FontAwesomeIcon icon={faShieldAlt}/>
+            <div class={clsx("padding--sm centered")}>
+              <h2>Cybersecurity</h2>
+              <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
+            </div>
           </div>
           <div class="col col--4 centered">
-            <FontAwesomeIcon icon={faDatabase} class={"core-icons"} />
-            <h2>System Admin</h2>
-            <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
+            {/* <FontAwesomeIcon icon={faDatabase} class={clsx("core-icons")} /> */}
+            <FontAwesomeIcon icon={faDatabase}/>
+            <div class={clsx("padding--sm centered")}>
+              <h2>System Admin</h2>
+              <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
+            </div>
           </div>
         </div>
       </section>

src/pages/membership.js

@@ -8,7 +8,7 @@ import styles from "./styles.module.css";
 
 function Steps() {
   return (
-    <div class={styles.sectionPadding}>
+    <div class={clsx(styles.sectionPadding)}>
       <div class="container">
         <div class="row">
           <div class="col centered padding--lg">
@@ -124,7 +124,7 @@ function Description() {
     <div class={styles.sectionPadding}>
       <div class="container">
         {/* <div class={styles.description}>  */}
-        <div class={clsx(styles.description, "margin-centered padding--lg")}>
+        <div class={clsx("margin-centered padding--xl")}>
           <p>
             <span class={styles.firstWord}>SWIFT</span> is a way of moving your college career to the next level.
             Joining is a three step process, but it should not take more then 10

src/pages/styles.module.css

@@ -50,20 +50,26 @@
   width: 200px;
 }
 
+/* Section */
+.sectionIcon {
+  font-size: 24px;
+  color: red;
+}
+
 
 /* Text */
 .firstWord {
   font-size: 1.5rem;
   color: var(--color-blue-light);
 }
 
-.description {
+/* .description {
   width: 80%;
-}
+} */
 
-.description > p {
+/* .description > p {
   margin-top: 1rem;
-}
+} */
 
 /* Quote */
 .quote {