fix: contact page styling

src/components/ContactCard.tsx

@@ -18,8 +18,8 @@ const Row = styled.div`
 
 const ImageContainer = styled.div`
   position: relative;
-  height: 150px;
-  width: 150px;
+  height: 125px;
+  width: 125px;
   flex-shrink: 0;
 
   img {
@@ -33,17 +33,17 @@ const Info = styled.div`
   flex-direction: column;
   align-items: flex-start;
   margin-left: -20px;
-  min-width: 225px;
+  min-width: 150px;
   padding: 2rem;
   color: ${colors.darkBlue};
 
   & > p {
-    font-size: 1.1rem;
+    font-size: 1.0rem;
     margin: 0;
   }
 
   & > h3 {
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     font-weight: 500;
   }
 `;

src/views/ContactsPage/ContactsPageView.tsx

@@ -70,9 +70,13 @@ const Index: React.FC<{ committees: typeof orderedCommittees }> = ({ committees
 
 const Container = styled.div`
   color: ${colors.darkBlue};
+  align-items: center;
+  justify-content: center;
+  width: 50vw;
 
   & > h2 {
     text-transform: uppercase;
+    font-size: 4rem;
     width: 100%;
   }
 
@@ -80,15 +84,63 @@ const Container = styled.div`
     display: flex;
     flex-flow: row wrap;
   }
+
+  @media (max-width: 950px) {
+    width: 100vw;
+  }
+`;
+
+const ContactContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  @media (max-width: 950px) {
+    flex-direction: column;
+  }
+`;
+
+const ContentCenter = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 60vw;
+  padding: 15px 15px;
+  overflow-x: hidden;
+  @media (max-width: 950px) {
+    width: 100vw;
+  }
+`;
+
+const ContentAside = styled.div`
+  display: flex;
+  width: 20vw;
+  padding: 15px 15px;
+  @media (max-width: 950px) {
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+  }
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 10px;
+  flex-direction: column;
+  margin: auto;
 `;
 
 const CommitteeContainer: React.FC<{
   committee: Committee;
 }> = ({ committee, children }) => (
   <Container>
-    <h2>
-      {committee.name_fi || committee.name_en}
-    </h2>
+    <TitleContainer>
+      <h2>
+        {committee.name_fi || committee.name_en}
+      </h2>
+    </TitleContainer>
     <div>
       {committee.roles.map((role) => (
         role.representatives.map((representative) => (
@@ -129,41 +181,47 @@ interface Representative {
 
 const ContactsPageView: React.FC = () => (
   <>
-    <TextSection>
-      <h1>Yhteystiedot</h1>
-      <p>
-        Asiaa olisi, mutta kehen ottaa yhteyttä?
-        <br />
-        Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
-      </p>
-      <aside>
+    <ContactContainer>
+      <ContentAside>
         <div>
           <h6>Toimikuntaluettelo</h6>
           <Index committees={orderedCommittees} />
         </div>
-      </aside>
-    </TextSection>
-
-    {orderedCommittees.map((json) => (
-      <React.Fragment key={json.slug}>
-        {(json.slug !== "board") && (
-          <Divider />
-        )}
-        <TextSection id={json.slug}>
-          <CommitteeContainer committee={json}>
-            {(json.slug === "board") && (
-              <p>
-                {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
-                <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
-                  hallitus@sahkoinsinoorikilta.fi
-              </BlueLink>
-                {". Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista."}
-              </p>
+      </ContentAside>
+      <ContentCenter>
+        <h1>Yhteystiedot</h1>
+        <p>
+          Asiaa olisi, mutta kehen ottaa yhteyttä?
+        <br />
+        Tämä sivu yrittää valottaa sen oikean ihmisen sekä vastuualueen.
+      </p>
+        {orderedCommittees.map((json) => (
+          <React.Fragment key={json.slug}>
+            {(json.slug !== "board") && (
+              <Divider />
             )}
-          </CommitteeContainer>
-        </TextSection>
-      </React.Fragment>
-    ))}
+            <div id={json.slug}>
+
+              <CommitteeContainer committee={json}>
+                {(json.slug === "board") && (
+                  <TitleContainer>
+                    <p>
+                      {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
+                      <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
+                        hallitus@sahkoinsinoorikilta.fi
+                      </BlueLink>
+                      {". Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista."}
+                    </p>
+                  </TitleContainer>
+                )}
+              </CommitteeContainer>
+            </div>
+
+          </React.Fragment>
+        ))}
+      </ContentCenter>
+      <ContentAside />
+    </ContactContainer>
   </>
 );