fix alignment/spacing

2 files changed, 36 insertions, 54 deletions

diff --git a/index.html b/index.html
index ef98911..1bee533 100755
--- a/index.html
+++ b/index.html
@@ -71,17 +71,17 @@
 
             <div id="helpful-links-box" class="flex-column">
 
-                <div class="flex-column" style="margin: 0 10px;">
+                <div class="flex-column">
                     <h3 class="subtitles">websites</h3>
-                    <a style="margin: 10px;" href="https://edstem.org/us/courses/26929/discussion/" target="_blank" class="button helpful-link glow-on-hover">
+                    <a href="https://edstem.org/us/courses/26929/discussion/" target="_blank" class="button helpful-link glow-on-hover">
                         <img src="./assets/edstem.png" class="small-icon" alt="edstem logo">
                         <h3>edstem →</h3>
                     </a>
-                    <a style="margin: 10px;" href="https://canvas.brown.edu/courses/1089551" target="_blank" class="button helpful-link glow-on-hover">
+                    <a href="https://canvas.brown.edu/courses/1089551" target="_blank" class="button helpful-link glow-on-hover">
                         <img src="./assets/canvas.png" class="small-icon" alt="canvas logo">
                         <h3>canvas →</h3>
                     </a>
-                    <a style="margin: 10px;" href="https://script.google.com/a/macros/brown.edu/s/AKfycbxqAcEtc8CDcIBZ16quZ6Sqsprz_QTZUkpLWkNhSkSltuVgktNqblDQABOSCQCdAKwL1g/exec" target="_blank" class="button helpful-link glow-on-hover">
+                    <a href="https://script.google.com/a/macros/brown.edu/s/AKfycbxqAcEtc8CDcIBZ16quZ6Sqsprz_QTZUkpLWkNhSkSltuVgktNqblDQABOSCQCdAKwL1g/exec" target="_blank" class="button helpful-link glow-on-hover">
                         <svg class="svg-show" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#222E50" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 2)"><path d="m5.5.5h6v5h-6z"></path><path d="m10.5 11.5h6v5h-6z"></path><path d="m.5 11.5h6v5h-6z"></path><path d="m3.498 11.5v-3h10v3"></path><path d="m8.5 8.5v-3"></path></g></svg>
                         <svg class="svg-hover" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#DA627D" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 2)"><path d="m5.5.5h6v5h-6z"></path><path d="m10.5 11.5h6v5h-6z"></path><path d="m.5 11.5h6v5h-6z"></path><path d="m3.498 11.5v-3h10v3"></path><path d="m8.5 8.5v-3"></path></g></svg>
                         <h3>ux factor →</h3>
@@ -163,7 +163,7 @@
             </div>
 
 
-            <figure class="spreadsheet-wrapper">
+            <figure class="iframe-wrapper">
                 <iframe id="schedule-iframe" class="embedded-iframe" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR97aOo6hHLDmv_bqzK5ipCBHRUKqnzfox3c0RzjBggOjWAzn0a49S2GxRieW9Cgg/pubhtml?gid=455343365&amp;single=true&amp;widget=true&amp;headers=false"></iframe>
             </figure>
         </section>
@@ -171,8 +171,7 @@
         <section id="calendar">
             <h2 class="title">calendar</h2>
             <div class="edges">
-                <p style="margin: 5px 0 10px 0; padding-left: 10px;">
-                    To subscribe to the course gcal, click
+                <p>To subscribe to the course gcal, click
                     <a
                             class="link"
                             href="https://calendar.google.com/calendar/u/1?cid=Y19pZ2Fmc3UzOG03YWNpc203M2RlcWx0cDhzNEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t"
@@ -180,8 +179,7 @@
                     >here</a
                     >.
                 </p>
-                <p style="padding-left: 10px; margin-bottom: 10px;">
-                    To sign up for TA Hours, please go to
+                <p>To sign up for TA Hours, please go to
                     <a
                             class="link"
                             href="https://hours.cs.brown.edu/"
@@ -190,9 +188,7 @@
                     >.
                 </p>
             </div>
-
-
-            <figure class="spreadsheet-wrapper">
+            <figure class="iframe-wrapper">
                 <iframe id="calendar-iframe" class="embedded-iframe"  src="https://calendar.google.com/calendar/embed?src=c_igafsu38m7acism73deqltp8s4%40group.calendar.google.com&ctz=America%2FNew_York"></iframe>
             </figure>
         </section>
@@ -200,20 +196,18 @@
         <section id="staff">
             <h2 class="title">staff</h2>
 
-            <div class="flex-column edges">
-                <div id="emails" class="flex-row wrap-container">
-                    <div class="email">
-                        <h3 class="subtitles"><a class="link" href="mailto:uiuxtas@lists.cs.brown.edu" target="_blank">uiuxtas@lists.cs.brown.edu</a></h3>
-                        <h4>(email all TAs, use this by default)</h4>
-                    </div>
-                    <div class="email">
-                        <h3 class="subtitles"><a class="link" href="mailto:uiuxhtas@lists.cs.brown.edu" target="_blank">uiuxhtas@lists.cs.brown.edu</a></h3>
-                        <h4>(HTAs, Grad TA, &amp; Jeff)</h4>
-                    </div>
-                    <div class="email">
-                        <h3 class="subtitles"><a class="link" href="mailto:jeff@cs.brown.edu" target="_blank">jeff@cs.brown.edu</a></h3>
-                        <h4>(sensitive issues)</h4>
-                    </div>
+            <div id="emails" class="flex-row email-container edges">
+                <div class="email">
+                    <h3 class="subtitles"><a class="link" href="mailto:uiuxtas@lists.cs.brown.edu" target="_blank">uiuxtas@lists.cs.brown.edu</a></h3>
+                    <h4>(email all TAs, use this by default)</h4>
+                </div>
+                <div class="email">
+                    <h3 class="subtitles"><a class="link" href="mailto:uiuxhtas@lists.cs.brown.edu" target="_blank">uiuxhtas@lists.cs.brown.edu</a></h3>
+                    <h4>(HTAs, Grad TA, &amp; Jeff)</h4>
+                </div>
+                <div class="email">
+                    <h3 class="subtitles"><a class="link" href="mailto:jeff@cs.brown.edu" target="_blank">jeff@cs.brown.edu</a></h3>
+                    <h4>(sensitive issues)</h4>
                 </div>
             </div>
             <article class="flex-column">
diff --git a/styles.css b/styles.css
index 5be5418..aa8626c 100755
--- a/styles.css
+++ b/styles.css
@@ -67,7 +67,7 @@ section:nth-child(odd) {
 
 .title, .title-info-flex, .edges{
     text-align: left;
-    padding: 0 15% 10px 15%;
+    padding: 0 8rem;
 }
 
 .title {
@@ -409,23 +409,21 @@ course info section
 full menu & ta_calendar
  */
 
-.spreadsheet-wrapper {
+.iframe-wrapper {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin: 0 auto;
+    margin: 2rem 8rem;
 }
 
 .important-note > p {
-    padding-left: 10px;
-    margin: 0 0 1rem 0;
+    margin-bottom: 1rem;
 }
 
 .embedded-iframe {
-    width: 70vw;
-    height: max(60vh, 500px);
+    width: 100%;
+    height: max(60vh, 600px);
     display: block;
-    margin-top: 10px;
 }
 
 /*
@@ -443,18 +441,16 @@ convenience for helpful links
     align-items: center;
 }
 
-.wrap-container {
+.email-container {
     display: flex;
-    flex-wrap: wrap;
     justify-content: left;
-    width: 100%;
+    margin-bottom: 50px;
 }
 
 .flex-column {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
 }
 
 .flex-right {
@@ -477,9 +473,9 @@ convenience for helpful links
     display: flex;
     flex-direction: row;
     align-items: start;
-    justify-content: space-evenly;
+    justify-content: space-between;
     margin: 1rem auto 0 auto;
-    padding: 0 5%;
+    padding: 0 8rem;
 }
 
 .helpful-link {
@@ -562,11 +558,11 @@ staff area
 .email {
     border-left: 3px solid var(--accent-color);
     padding-left: 10px;
-    margin: 10px 25px;
+    margin-right: 30px;
 }
 
-#emails {
-    margin-bottom: 15px;
+.shelf {
+    align-items: center;
 }
 
 .ta-box-left, .ta-box-right {
@@ -717,17 +713,9 @@ img {
 
 
 @media only screen and (max-width: 1100px) {
-    .title-info-flex, .title, .edges {
-        padding: 0 5%;
-    }
-
     .embedded-iframe {
         width: 90vw;
     }
-
-    .wrap-container {
-        justify-content: center;
-    }
 }
 
 
@@ -748,7 +736,7 @@ img {
         padding-left: 1rem;
     }
     .title-info-flex, .title, .edges {
-        padding-left: 2%;
+        padding-left: 2rem;
     }
     .embedded-iframe {
         width: 95vw;
@@ -757,7 +745,7 @@ img {
         width: 90%;
     }
     .ta-box-left, .ta-box-right {
-        max-width: 45%;
+        max-width: 50%;
     }
     .ta-box-left {
         flex-direction: column-reverse !important;
@@ -843,7 +831,7 @@ img {
         margin-top: 2rem;
     }
     section {
-        padding: 3rem 2rem;
+        padding: 3rem 1rem;
     }
 }