Merge pull request #166 from sapphyree/update-constitution

#149 Update Constitution links and pdf

_data/redirects.yaml

@@ -6,6 +6,9 @@
 - source: /sponsor
   destination: /CSS_Sponsorship.pdf
 
+# constitution
+- source: /constitution
+  destination: /constitution.pdf
 
 # social
 - source: /facebook

about.html

@@ -101,17 +101,23 @@ <h4><i class="fab fa-github"></i> GitHub</h4>
         <p class="emoji-bullet">🏆 Inspirational Committee Member, Jack Wearden, CSS President (2016)</p>
     </div>
 
-
-    <h2>Constitution 📄</h2>
-    <p>CSS is part of the <a href=/guild>Guild of Students</a>. 🙌</p>
-    <p>That means we've got a constitution that you can find below 👇</p>
-    <ul>
-        <li><a href="https://docs.google.com/document/d/1J3_EWs3dd2gq5T_xYylcP5pDzm0HHAYCTgiqKUYwkls">Constitution —
-            Google Doc</a></li>
-        <li><a href=/constitution.pdf>Constitution — PDF</a></li>
-    </ul>
-    <p>We recommend that all our members read it at least once. </p>
-    <p> You can also find our agendas <a href=/agendas">here</a>. </p>
+    <div id="constitution">
+        <div class="flex-container flex-v-center">
+            <div><h2>Consitution</h2></div>
+            <div><p id="document">📄</p></div>
+        </div>
+
+        <p>CSS is part of the <a href=/guild>Guild of Students</a>. This means we have a Constitution which we recommend all members read at least once.</p>
+        <p>Below are links to both our current Constitution and all previous agendas:</p>
+        <div id="constitution-buttons">
+            <a href=/constitution class="constitution-link constitution">
+                <h4>Constitution</h4>
+            </a>
+            <a href=/agendas class="constitution-link agendas">
+                <h4>Agendas</h4>
+            </a>
+        </div>
+    </div>
 
     <h2>Contact Us 📧</h2>
     <p><a href=/email>[email protected]</a></p>

css/about.scss

@@ -154,6 +154,51 @@ h1, h2, h3, h4 {
   }      
 }
 
+#constitution {
+  #constitution-buttons {
+    justify-content: center;
+    display: grid;
+    grid-template-columns: repeat(2, 185px);
+  }
+
+  .constitution-link {
+    display: inline-block;
+    width: 150px;
+    height: 25px;
+    text-decoration: none;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    border-radius: 20px;
+    padding: 15px;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    h4 {
+      font-family: "Helvetica Neue", sans-serif;
+      margin: 0;
+    }
+    h4, i {
+      color: white;
+    }
+  }
+
+  @media (max-width: 400px){
+    #constitution-buttons{
+      justify-content: center;
+      display: grid;
+      grid-template-columns: 185px;
+    }
+  }
+
+  .constitution {
+    background-color: #793fd8; //TeX Shadow
+  }
+
+  .agendas {
+    background-color: #3b37b6; //TeX Blue
+  }
+}
+
 #sparkles {
   font-size: 30px;
 }
@@ -166,6 +211,10 @@ h1, h2, h3, h4 {
   font-size: 30px;
 }
 
+#document {
+  font-size: 30px;
+}
+
 #heart {
   font-size: 30px;
 }