responsiveness

2 files changed, 55 insertions, 31 deletions

diff --git a/index.html b/index.html
index 9fa69b9..7d75dab 100755
--- a/index.html
+++ b/index.html
@@ -17,12 +17,14 @@
         <h3 style="color: white; position: fixed; top: 20px; right: 5px; padding-right: 10px;">csci 1300</h3>
     </nav>
     <nav id="sidepanel" class="sidepanel" aria-label="drawer-navigation">
-        <img class="logo-img" src="assets/favicon.png" alt="Our logo image that directs to top of page"/>
-        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()" tabindex="-1">×</a>
-        <a href="#full_menu" class="link" tabindex="-1">menu</a>
-        <a href="#calendar" class="link" tabindex="-1">calendar</a>
-        <a href="#staff" class="link" tabindex="-1">kitchen staff</a>
-        <a href="#faq" class="link" tabindex="-1">faqs</a>
+        <div class="sidepanel-menu">
+            <img class="logo-img" src="assets/favicon.png" alt="Our logo image that directs to top of page"/>
+            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()" tabindex="-1">×</a>
+            <a href="#full_menu" class="link" tabindex="-1">menu</a>
+            <a href="#calendar" class="link" tabindex="-1">calendar</a>
+            <a href="#staff" class="link" tabindex="-1">kitchen staff</a>
+            <a href="#faq" class="link" tabindex="-1">faqs</a>
+        </div>
     </nav>
     <header>
         <nav class="nav-flex" aria-label="primary-navigation">
@@ -212,7 +214,7 @@
             </div>
             <article class="flex-column">
                 <div class="shelf flex-column">
-                    <div class="ta-box-left flex-row ta-wrapper">
+                    <div class="flex-row ta-box-single ta-wrapper">
                         <div class="img-box">
                             <img
                                     src="./assets/pastry-photos/jeff.png"
@@ -276,7 +278,7 @@
                 </div>
 
                 <div class="shelf flex-column">
-                    <div class="ta-wrapper ta-box-left flex-row">
+                    <div class="ta-wrapper ta-box-single flex-row">
                         <div class="img-box">
                             <img
                                     src="./assets/pastry-photos/tongyu.png"
@@ -469,7 +471,7 @@
                         <div class="ta-box-right flex-row">
                             <div class="bio-text">
                                 <h3>melissa</h3>
-                                <p>Hi I'm a senior studying CS and IAPA from Vancouver, Canada. I love being in the outdoors skiing, hiking, biking or anything at all. I also enjoy eating honey cruller donuts, reading, and playing the board game Go.</p>
+                                <p>Hi I'm a senior studying CS and IAPA from Vancouver, Canada. I love being in the outdoors skiing, hiking, biking or anything at all. I also enjoy eating honey cruller donuts, reading, and playing Go.</p>
                             </div>
                             <div class="img-box">
                                 <img
diff --git a/styles.css b/styles.css
index 2b192c8..aa35b2b 100755
--- a/styles.css
+++ b/styles.css
@@ -149,11 +149,15 @@ nav {
     overflow-x: hidden;
     transition: 0.4s;
     margin: 0;
+    background-color: #222E50ee;
+}
+
+.sidepanel-menu {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
-    background-color: #222E50ee;
+    height: 100%;
+    padding: 2rem;
 }
 
 .sidepanel a {
@@ -194,7 +198,7 @@ nav {
     position: fixed;
     height: fit-content;
     top: 0;
-    width: 100vw;
+    width: 100%;
     justify-content: space-between;
     background-color: rgb(43,42,45,0.6);
     margin: 0;
@@ -531,7 +535,6 @@ convenience for helpful links
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
     width: fit-content;
     margin: 10px 0;
     text-decoration: none;
@@ -567,7 +570,7 @@ staff area
     margin: 0 10px;
 }
 
-.ta-box-left .img-box {
+.ta-box-left .img-box, .ta-box-single .img-box {
     margin-right: 10px;
 }
 
@@ -714,6 +717,12 @@ img {
     .embedded-iframe {
         width: 90vw;
     }
+    #helpful-links-box {
+        padding: 0 6rem;
+    }
+    .title, .title-info-flex, .edges {
+        padding: 0 6rem;
+    }
 }
 
 
@@ -721,9 +730,18 @@ img {
     #emails {
         width: 90%;
     }
+    #helpful-links-box {
+        padding: 0 2rem;
+    }
     .no-border-helpful-link {
         width: 85%;
     }
+    .title, .title-info-flex, .edges {
+        padding: 0 2rem;
+    }
+    .faq-content {
+        max-width: 80%;
+    }
 }
 
 @media only screen and (max-width: 720px) {
@@ -731,11 +749,13 @@ img {
         width: 100%;
     }
     header {
-        padding-left: 1rem;
+        padding: 0 2rem;
+    }
+    section {
+        padding: 2rem 2rem;
     }
     .title-info-flex, .title, .edges {
-        padding-left: 2rem;
-        padding-right: 2rem;
+        padding: 0;
     }
     .faq-content {
         max-width: 95%;
@@ -744,7 +764,7 @@ img {
         width: 95vw;
     }
     .shelf-png {
-        width: 90%;
+        width: 100%;
     }
     .ta-box-left, .ta-box-right {
         max-width: 50%;
@@ -758,7 +778,11 @@ img {
         margin: 0 5px;
     }
     .ta-pastry {
-        align-self: center;
+       width: 95%;
+    }
+    .ta-box-right .img-box, .ta-box-left .img-box {
+        justify-content: center;
+        margin: 0;
     }
     .img-box:hover {
         margin-top: 25px;
@@ -769,11 +793,11 @@ img {
     .shelf .flex-row {
         align-items: center;
     }
-    .bio-text h4 {
-        margin-bottom: 5px;
+    .bio-text {
+        width: 90%;
     }
-    .ta-pastry {
-        padding-bottom: 25px;
+    .ta-box-single .bio-text p {
+        width: 175px;
     }
 }
 
@@ -808,8 +832,10 @@ img {
     }
     #helpful-links-box {
         flex-direction: column;
-        align-items: center;
-        padding: 0 10px;
+        padding: 0;
+    }
+    #helpful-links-box .flex-column, #helpful-links-box .button {
+        width: 80%;
     }
     #helpful-links-box .subtitles {
         font-size: 150%;
@@ -818,11 +844,10 @@ img {
         margin-top: 2rem;
     }
     #emails {
-        align-items: center;
+        flex-wrap: wrap;
     }
     .email {
-        margin-right: 0;
-        margin-left: 0;
+        margin-bottom: 1rem;
         word-break: break-all;
         font-size: 90%;
     }
@@ -832,9 +857,6 @@ img {
     .business-hours {
         margin-top: 2rem;
     }
-    section {
-        padding: 3rem 1rem;
-    }
 }
 
 @media only screen and (max-width: 425px) {