review with connie - good stylistic changes

3 files changed, 53 insertions, 36 deletions

diff --git a/index.html b/index.html
index 01bdbe6..c8bb52b 100644
--- a/index.html
+++ b/index.html
@@ -30,10 +30,12 @@
 <!--                <a class="link" href="#weekly_specials">Weekly Specials</a>-->
 <!--            <a class="link" href="#course_info">Course Info</a>-->
 <!--            <a class="button" href="#xxx">Weekly Specials</a>-->
-            <a class="link" href="#full_menu">menu</a>
-            <a class="link" href="#calendar">calendar</a>
-            <a class="link" href="#staff">kitchen staff</a>
-            <a class="link" href="#faq">faqs</a>
+            <div class="flex-row">
+                <a class="link" href="#full_menu">menu</a>
+                <a class="link" href="#calendar">calendar</a>
+                <a class="link" href="#staff">kitchen staff</a>
+                <a class="link" href="#faq">faqs</a>
+            </div>
         </nav>
 
         <section class="title-flex">
@@ -52,12 +54,12 @@
                 </article>
 
 
-                <aside class="business-hours">
-                    <h3>business hours</h3>
-                    <p>T/Th 1-2:20pm</p>
-                    <p>MacMillan Hall 117</p>
-                    <div><a class="link" href="https://example.com">Zoom Link</a></div>
-                </aside>
+<!--                <aside class="business-hours">-->
+<!--                    <h3>business hours</h3>-->
+<!--                    <p>T/Th 1-2:20pm</p>-->
+<!--                    <p>MacMillan Hall 117</p>-->
+<!--                    <div><a class="link" href="https://example.com">Zoom Link</a></div>-->
+<!--                </aside>-->
             </article>
             <figure class="pastries-wrapper">
                 <iframe id="connie-pastries" src='https://my.spline.design/cs1300pastries-527b5a4ae57f8e04517708ce6f4dd80e/' frameborder='0'></iframe>
@@ -75,22 +77,22 @@
 <!--                </div>-->
 <!--            </section>-->
 
-        <section id="important_links" class="section">
+        <section id="important_links">
             <h2 class="title">important links</h2>
 
             <div id="helpful-links-box" class="flex-column">
 
                 <div class="flex-column" style="margin: 0 10px;">
                     <h3 class="subtitles">websites</h3>
-                    <a style="margin: 10px;" href="https://piazza.com/class/kcw25izsiei48j" target="_blank" class="helpful-link glow-on-hover">
+                    <a style="margin: 10px;" href="https://piazza.com/class/kcw25izsiei48j" target="_blank" class="button helpful-link glow-on-hover">
                         <img src="./assets/edstem.png" class="small-icon">
                         <h3>edstem →</h3>
                     </a>
-                    <a style="margin: 10px;" href="https://canvas.brown.edu/" target="_blank" class="helpful-link glow-on-hover">
+                    <a style="margin: 10px;" href="https://canvas.brown.edu/" target="_blank" class="button helpful-link glow-on-hover">
                         <img src="./assets/canvas.png" class="small-icon">
                         <h3>canvas →</h3>
                     </a>
-                    <a style="margin: 10px;" href="https://script.google.com/a/brown.edu/macros/s/AKfycbw3-4g7pzYS8dgLLu5fHImIXC0Asu7Cqn_DLEGngPdEDRmFgxs/exec" target="_blank" class="helpful-link glow-on-hover">
+                    <a style="margin: 10px;" href="https://script.google.com/a/brown.edu/macros/s/AKfycbw3-4g7pzYS8dgLLu5fHImIXC0Asu7Cqn_DLEGngPdEDRmFgxs/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>
@@ -168,7 +170,7 @@
                     this contains all information regarding assignments, lectures,
                     studios, and readings.
                 </p>
-                <a class="glow-on-hover button" href="https://docs.google.com/spreadsheets/d/e/2PACX-1vRow8i_X8guQpwU_da4y7rwDBbhTeYsUQ2b33MPkezcz2dLOpQxMBzo_6XBYJFTD6mSnT3-FVUsjh6S/pubhtml?gid=1112663023&amp;single=true" target="_blank">link to schedule →</a>
+                <a style="margin-bottom: 5px;" class="glow-on-hover button" href="https://docs.google.com/spreadsheets/d/e/2PACX-1vRow8i_X8guQpwU_da4y7rwDBbhTeYsUQ2b33MPkezcz2dLOpQxMBzo_6XBYJFTD6mSnT3-FVUsjh6S/pubhtml?gid=1112663023&amp;single=true" target="_blank">link to schedule →</a>
             </div>
 
 
@@ -179,7 +181,7 @@
         <section id="calendar">
             <h2 class="title">calendar</h2>
             <div class="edges">
-                <p style="margin: .5rem 0 1rem 0; padding-left: 10px;">
+                <p style="margin: 5px 0 10px 0; padding-left: 10px;">
                     To subscribe to the course gcal, click
                     <a
                             class="link"
@@ -188,7 +190,7 @@
                     >here</a
                     >.
                 </p>
-                <p style="padding-left: 10px; margin-bottom: 1rem;">
+                <p style="padding-left: 10px; margin-bottom: 10px;">
                     To sign up for TA Hours, please go to
                     <a
                             class="link"
@@ -205,7 +207,7 @@
             </figure>
         </section>
 
-        <section id="staff" class="section">
+        <section id="staff">
             <h2 class="title">staff</h2>
 
             <div class="flex-column edges">
diff --git a/script.js b/script.js
index ca69230..ad80f63 100644
--- a/script.js
+++ b/script.js
@@ -12,14 +12,15 @@ const observer = new IntersectionObserver(entries => {
     // note - if the boundingClientRect.y is negative, then they are scrolling down
     // note - since using id, only 1 entry
     const {intersectionRatio, boundingClientRect} = entries[0];
-    if (intersectionRatio !== 1 && boundingClientRect.y <= 0) {
+    console.log(entries[0])
+    if (intersectionRatio !== 1 ) {
         videoTitle.currentTime = 5 - 3 * intersectionRatio;
     } else {
         videoTitle.currentTime = 2;
     }
 }, {
     threshold: [...Array(THRESHOLD_FIDELITY).keys()].map(num => num/THRESHOLD_FIDELITY),
-    rootMargin: '-75px'
+    rootMargin: '-150px 0px 0px 0px'
 });
 
 // after two seconds pause the video
diff --git a/styles.css b/styles.css
index ed2540c..f5ac612 100644
--- a/styles.css
+++ b/styles.css
@@ -5,7 +5,7 @@ vars and color
     /* define the color pallet */
     /*--primary-color: #D1F7FF;*/
     --primary-color: rgb(220, 251, 254);
-    --secondary-color: #fcd6c2;
+    --secondary-color: #FAEAC0;
     --accent-color: #DA627D;
     --second-accent-color: #222E50;
 }
@@ -27,11 +27,6 @@ body {
     /*color: rgb(212, 212, 212);*/
 }
 
-header {
-    position: relative;
-    overflow: hidden;
-}
-
 p {
     line-height: 1.2;
 }
@@ -58,7 +53,7 @@ section format + colors
  */
 
 section, header {
-    padding: 1.5rem 2rem 4rem 2rem;
+    padding: 4rem 2rem 4rem 2rem;
 }
 
 section:nth-child(even) {
@@ -72,7 +67,7 @@ section:nth-child(odd) {
 
 .title, .title-info-flex, .edges{
     text-align: left;
-    padding: 0 15% 1rem 15%;
+    padding: 0 15% 10px 15%;
 }
 
 .title {
@@ -80,6 +75,7 @@ section:nth-child(odd) {
 }
 
 
+
 h2 {
     text-align: center;
     font-size: 2rem;
@@ -97,6 +93,9 @@ header color will be that blue
 
 header {
     background-color: var(--primary-color);
+    position: relative;
+    overflow: hidden;
+    padding-top: 2rem;
 }
 
 
@@ -113,11 +112,18 @@ nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-right: 20px;
+    padding: 0 5vw;
 }
 
-.nav-flex > a {
+.nav-flex > .flex-row > a {
     margin-bottom: 30px;
+    display: block;
+    margin-left: 5vw;
+}
+
+.nav-flex > .flex-row {
+    justify-content: space-between;
+    width: fit-content;
 }
 
 .logo-img {
@@ -261,10 +267,11 @@ title area (animated text and connie's 3d model)
 }
 
 .video-title-wrapper {
+    position: relative;
     z-index: 1;
     width: clamp(25rem, 35vw, 500px);
     margin-bottom: 1rem;
-    padding-left: 50px;
+    left: -15px;
 }
 
 #video-title {
@@ -305,7 +312,7 @@ h1 {
 .course-name {
     font-size: 2rem;
     line-height: 1;
-    margin: .25rem 0 1rem 0;
+    margin: 10px 0 1rem 0;
     z-index: 5;
 }
 
@@ -393,7 +400,7 @@ course info section
     line-height: 25px;
     text-decoration: none;
 
-    border: 2px blue solid;
+    border: 3px solid #0000ff66;
     background-color: white;
 
     width: fit-content;
@@ -412,7 +419,7 @@ full menu & ta_calendar
 
 .important-note > p {
     padding-left: 10px;
-    margin: .5rem 0 1rem 0;
+    margin: 0 0 1rem 0;
 }
 
 .embedded-iframe {
@@ -473,6 +480,7 @@ convenience for helpful links
     align-items: start;
     justify-content: space-evenly;
     margin: 1rem auto 0 auto;
+    padding: 0 5%;
 }
 
 .helpful-link {
@@ -483,10 +491,11 @@ convenience for helpful links
     align-items: center;
     justify-content: center;
     width: 150px;
-    padding: 5px 15px;
+    padding: 10px 20px;
     border-radius: 5px;
     border: 3px solid #0000ff66;
     margin: 10px 0;
+    background-color: white;
 }
 
 .helpful-link h3 {
@@ -495,7 +504,8 @@ convenience for helpful links
 }
 
 .helpful-link:hover h3 {
-    color: #706881;
+    /*color: #706881;*/
+    /*font-size: 107%;*/
 }
 
 .helpful-link:hover {
@@ -707,6 +717,10 @@ img {
     .embedded-iframe {
         width: 90vw;
     }
+
+    .wrap-container {
+        justify-content: center;
+    }
 }