style first pass

Author: halfghaninne

src/pages/organizers/index.js

@@ -17,38 +17,38 @@ const IndexPage = ({ data }) => (
     <SkipNavLink />
     <Header />
     <SkipNavContent>
-        <section
-      id="about-us"
-      className={[styles.photoSection, styles.oye].join(' ')}
-    >
-      <div className={styles.row}>
-        <Img
-          alt="A smiling speaker talks on stage at the 2018 conference with a microphone."
-          fluid={data.organizers.childImageSharp.fluid}
-          imgStyle={{ objectFit: 'contain', objectPosition: 'center center' }}
-          className={styles.image}
-        />
-        <div className={styles.content}>
-          {' '}
-          <h1 className="title">About Us</h1>
-          <h2 className="subtitle">
-            Meet the hard-working board, chapter leaders, and conference organizers behind Write/Speak/Code.
-          </h2>
-          <p>
-            Email us at [email protected] to learn about different ways to get involved in our community.
-          </p>
-          {/* <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://www.meetup.com/pro/writespeakcode/"
-            className="link"
-          >
-            Find events on Meetup
-          </a> */}
+      <section
+        id="about-us"
+        className={[styles.photoSection, styles.aboutUs].join(' ')}
+      >
+        <div className={styles.row}>
+          <Img
+            alt="A smiling speaker talks on stage at the 2018 conference with a microphone."
+            fluid={data.organizers.childImageSharp.fluid}
+            imgStyle={{ objectFit: 'contain', objectPosition: 'center center' }}
+            className={styles.image}
+          />
+          <div className={styles.content}>
+            {' '}
+            <h1 className="title">About Us</h1>
+            <h2 className="subtitle">
+              Meet the hard-working board, chapter leaders, and conference organizers behind Write/Speak/Code.
+            </h2>
+            <p>
+              Email us at [email protected] to learn about different ways to get involved in our community.
+            </p>
+            {/* <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://www.meetup.com/pro/writespeakcode/"
+              className="link"
+            >
+              Find events on Meetup
+            </a> */}
+          </div>
         </div>
-      </div>
-    </section>
-    <Organizers/>
+      </section>
+      <Organizers/>
     </SkipNavContent>
     <Footer />
     </>    

src/pages/organizers/index.module.css

@@ -1,64 +1,38 @@
-#about-us {
+.aboutUs {
   background-color: var(--mint);
 }
 
-.section {
-  padding: 3em 0;
-  .content {
-    padding: 0 2em;
-  }
-  @media screen and (min-width: 50em) {
-    .content {
-      padding: 2em;
-    }
-  }
-  @media screen and (min-width: 80em) {
-    max-width: var(--container);
-    margin: 0 auto;
+.content {
+  p {
+    font-weight: bold;
   }
 }
 
 .photoSection {
   .row {
     display: flex;
     flex-direction: column;
-    padding: 3em 1em;
-    .content {
-      padding: 0 2em;
-    }
     .image {
-      margin: 2em;
+      margin: 0;
     }
   }
   @media screen and (min-width: 50em) {
     .row {
       flex-direction: row;
-      justify-content: space-around;
       .content {
-        align-self: center;
         width: 50%;
-        max-width: 30em;
-        padding: 2em;
+        padding: 0 2em;
+        align-self: center;
       }
       .image {
         width: 50%;
         max-height: none;
-        margin-left: 2em;
       }
     }
     &:nth-of-type(2n) {
       .row {
         flex-direction: row-reverse;
-        .image {
-          margin-right: 2em;
-        }
       }
     }
   }
-  @media screen and (min-width: 80em) {
-    .row {
-      max-width: var(--container);
-      margin: 0 auto;
-    }
-  }
 }