diff options
| -rwxr-xr-x | index.html | 46 | ||||
| -rwxr-xr-x | styles.css | 44 |
2 files changed, 36 insertions, 54 deletions
@@ -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&single=true&widget=true&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, & 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, & 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"> @@ -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; } } |