TA bio section styling

2 files changed, 88 insertions, 93 deletions

diff --git a/index.html b/index.html
index 782ac36..ef98911 100755
--- a/index.html
+++ b/index.html
@@ -218,16 +218,7 @@
             </div>
             <article class="flex-column">
                 <div class="shelf flex-column">
-                    <div class="ta-box-right flex-row">
-                        <div class="flex-column bio-text">
-                            <h3>[professor] jeff</h3>
-                            <h4>
-                                jeff has been teaching cs 1300 for 10 years ever since its
-                                inception. he’s studying cs and is an amateur farmer👨‍🌾, plays
-                                keyboard in a local band, and holds the world record for tech
-                                internships!
-                            </h4>
-                        </div>
+                    <div class="ta-box-left flex-row ta-wrapper">
                         <div class="img-box">
                             <img
                                     src="./assets/pastry-photos/jeff.png"
@@ -236,28 +227,36 @@
                             />
                             <img src="assets/bio-photos/jeff.jpg" class="ta-img" alt="jeff's image"/>
                         </div>
+                        <div class="bio-text">
+                            <h3>[professor] jeff</h3>
+                            <p>
+                                jeff has been teaching cs 1300 for 10 years ever since its
+                                inception. he’s studying cs and is an amateur farmer👨‍🌾, plays
+                                keyboard in a local band, and holds the world record for tech
+                                internships!
+                            </p>
+                        </div>
                     </div>
                     <img src="./assets/shelf.png" class="shelf-png" alt="shelf image"/>
                 </div>
 
                 <div class="shelf flex-column">
                     <div class="flex-row ta-wrapper">
-                        <div class="ta-box-right flex-row">
-                            <div class="flex-column bio-text">
-                                <h3>[hta] anika</h3>
-                                <h4>
-                                    Hi! I'm a senior from Minnesota studying computer science! I like tennis, word games, and trying new foods.
-                                </h4>
-                            </div>
+                        <div class="ta-box-left flex-row">
                             <div class="img-box">
                                 <img
-                                        src="./assets/pastry-photos/anika.png"
-                                        class="ta-pastry"
-                                        id="anika-pastry"
-                                        style="margin-bottom: 3px"
-                                        alt="anika's pastry"
+                                    src="./assets/pastry-photos/anika.png"
+                                    class="ta-pastry"
+                                    id="anika-pastry
+                                    alt="anika's pastry"
                                 />
-                                <img src="./assets/bio-photos/anika.jpeg" class="ta-img" alt="anika's image"/>
+                              <img src="./assets/bio-photos/anika.jpeg" class="ta-img" alt="anika's image"/>
+                          </div>
+                            <div class="bio-text">
+                                <h3>[hta] anika</h3>
+                                <p>
+                                    Hi! I'm a senior from Minnesota studying computer science! I like tennis, word games, and trying new foods.
+                                </p>
                             </div>
                         </div>
 
@@ -267,16 +266,15 @@
                                         src="./assets/pastry-photos/michael.png"
                                         class="ta-pastry"
                                         id="michael-pastry"
-                                        style="margin-bottom: 3px"
                                         alt="michael's pastry"
                                 />
                                 <img src="./assets/bio-photos/michael.jpg" class="ta-img" alt="michael's image"/>
                             </div>
-                            <div class="flex-column bio-text">
+                            <div class="bio-text">
                                 <h3>[hta] michael</h3>
-                                <h4>
+                                <p>
                                     Ciao! Give me a cannoli or a sfogliatella then I'll be happy 😄😋
-                                </h4>
+                                </p>
                             </div>
                         </div>
                     </div>
@@ -284,7 +282,7 @@
                 </div>
 
                 <div class="shelf flex-column">
-                    <div class="ta-box-left flex-row">
+                    <div class="ta-wrapper ta-box-left flex-row">
                         <div class="img-box">
                             <img
                                     src="./assets/pastry-photos/tongyu.png"
@@ -294,11 +292,11 @@
                             />
                             <img src="./assets/bio-photos/tongyu.jpeg" class="ta-img" alt="tongyu's image"/>
                         </div>
-                        <div class="flex-column bio-text">
+                        <div class="bio-text">
                             <h3>[grad ta] tongyu</h3>
-                            <h4>
+                            <p>
                                 Hiya, I'm Tongyu! I'm a PhD student working with Jeff on creativity support and specifically drawing/design tools. I doodle with watercolours a lot and play all types of video games except FPSes (they make me dizzy @_@)
-                            </h4>
+                            </p>
                         </div>
                     </div>
                     <img
@@ -311,18 +309,17 @@
                 <div class="shelf flex-column">
                     <div class="flex-row ta-wrapper">
                         <div class="ta-box-right flex-row">
-                            <div class="flex-column bio-text">
+                            <div class="bio-text">
                                 <h3>aubrey</h3>
-                                <h4>
+                                <p>
                                     Hello!! I'm Aubrey, a senior studying cs. I really like studio Ghibli a decade back and drew half of the storyboard of Spirited Away. I'm also really into skiing and photography :)
-                                </h4>
+                                </p>
                             </div>
                             <div class="img-box">
                                 <img
                                         src="./assets/pastry-photos/aubrey.png"
                                         class="ta-pastry"
                                         id="aubrey-pastry"
-                                        style="margin-bottom: 3px"
                                         alt="aubrey's pastry"
                                 />
                                 <img src="./assets/bio-photos/aubrey.jpeg" class="ta-img" alt="aubrey's image"/>
@@ -330,18 +327,17 @@
                         </div>
 
                         <div class="ta-box-right flex-row">
-                            <div class="flex-column bio-text">
+                            <div class="bio-text">
                                 <h3>connie</h3>
-                                <h4>
+                                <p>
                                     Fan of Pantone 3435 C 🍉.
-                                </h4>
+                                </p>
                             </div>
                             <div class="img-box">
                                 <img
                                         src="./assets/pastry-photos/connie.png"
                                         class="ta-pastry"
                                         id="connie-pastry"
-                                        style="margin-bottom: 3px"
                                         alt="connie's pastry"
                                 />
                                 <img src="./assets/bio-photos/connie.jpg" class="ta-img" alt="connie's image"/>
@@ -359,16 +355,15 @@
                                         src="./assets/pastry-photos/dylan.png"
                                         class="ta-pastry"
                                         id="dylan-pastry"
-                                        style="margin-bottom: 3px"
                                         alt="dylan's pastry"
                                 />
                                 <img src="./assets/bio-photos/dylan.jpg" class="ta-img" alt="dylan's image"/>
                             </div>
-                            <div class="flex-column bio-text">
+                            <div class="bio-text">
                                 <h3>dylan</h3>
-                                <h4>
+                                <p>
                                     Hi everyone, I'm so excited to meet all of you :D -- my name is Dylan, I'm a junior at Brown, and I'm from central MA. I enjoy playing with a new JavaScript framework every week and sometimes actually get real work done. In my free time, I enjoy playing competitive Valorant (join Brown's team!), overspending at cafés, and reading.
-                                </h4>
+                                </p>
                             </div>
                         </div>
 
@@ -378,16 +373,15 @@
                                         src="./assets/pastry-photos/isaac.png"
                                         class="ta-pastry"
                                         id="isaac-pastry"
-                                        style="margin-bottom: 3px"
                                         alt="isaac's pastry"
                                 />
                                 <img src="./assets/bio-photos/isaac.jpg" class="ta-img" alt="isaac's image"/>
                             </div>
-                            <div class="flex-column bio-text">
+                            <div class="bio-text">
                                 <h3>isaac</h3>
-                                <h4>
+                                <p>
                                     Hi! I'm Isaac, a senior studying cognitive science from California. I enjoy playing the violin, exploring with my electric skateboard, running Brown Esports, and shooting films!
-                                </h4>
+                                </p>
                             </div>
                         </div>
                     </div>
@@ -397,18 +391,17 @@
                 <div class="shelf flex-column">
                     <div class="flex-row ta-wrapper">
                         <div class="ta-box-right flex-row">
-                            <div class="flex-column bio-text">
+                            <div class="bio-text">
                                 <h3>jenny</h3>
-                                <h4>
+                                <p>
                                     Hey, I am a junior studying CS. Always on the search for cute and elegant designs, places to watch sunsets, and good food!
-                                </h4>
+                                </p>
                             </div>
                             <div class="img-box">
                                 <img
                                         src="./assets/pastry-photos/jenny.png"
                                         class="ta-pastry"
                                         id="jenny-pastry"
-                                        style="margin-bottom: 3px"
                                         alt="jenny's pastry"
                                 />
                                 <img src="./assets/bio-photos/jenny.jpeg" class="ta-img" alt="jenny's image"/>
@@ -416,18 +409,17 @@
                         </div>
 
                         <div class="ta-box-right flex-row">
-                            <div class="flex-column bio-text">
+                            <div class="bio-text">
                                 <h3>jessie</h3>
-                                <h4>
+                                <p>
                                     hi everyone! i’m jessie, a senior from las vegas studying cs and applied math. i love live music, being outdoors, and drinking matcha lattes.
-                                </h4>
+                                </p>
                             </div>
                             <div class="img-box">
                                 <img
                                         src="./assets/pastry-photos/jessie.png"
                                         class="ta-pastry"
                                         id="jessie-pastry"
-                                        style="margin-bottom: 3px"
                                         alt="jessie's pastry"
                                 />
                                 <img src="./assets/bio-photos/jessica.jpeg" class="ta-img" alt="jessie's image"/>
@@ -445,16 +437,15 @@
                                         src="./assets/pastry-photos/kelly.png"
                                         class="ta-pastry"
                                         id="kelly-pastry"
-                                        style="margin-bottom: 3px"
                                         alt="kelly's pastry"
                                 />
                                 <img src="./assets/bio-photos/kelly.jpg" class="ta-img" alt="kelly's image"/>
                             </div>
-                            <div class="flex-column bio-text">
+                            <div class="bio-text">
                                 <h3>kelly</h3>
-                                <h4>
+                                <p>
                                     Hello! I am Kelly, a Senior from California concentrating in CS-Econ and EAS. I enjoy digital illustration, listening to J-pop/K-pop, and watching anime/reading manga. I love Salmon, especially in sushi. I also like collecting things.
-                                </h4>
+                                </p>
                             </div>
                         </div>
 
@@ -464,16 +455,15 @@
                                         src="./assets/pastry-photos/lauren.png"
                                         class="ta-pastry"
                                         id="lauren-pastry"
-                                        style="margin-bottom: 3px"
                                         alt="lauren's pastry"
                                 />
                                 <img src="./assets/bio-photos/lauren.jpeg" class="ta-img" alt="lauren's image"/>
                             </div>
-                            <div class="flex-column bio-text">
+                            <div class="bio-text">
                                 <h3>lauren</h3>
-                                <h4>
+                                <p>
                                     Hi! My name’s Lauren, and I’m a senior studying CS. I love hiking, traveling, and rom-coms, and I’m super excited to meet y’all!
-                                </h4>
+                                </p>
                             </div>
                         </div>
                     </div>
@@ -483,16 +473,15 @@
                 <div class="shelf flex-column">
                     <div class="flex-row ta-wrapper">
                         <div class="ta-box-right flex-row">
-                            <div class="flex-column bio-text">
+                            <div class="bio-text">
                                 <h3>melissa</h3>
-                                <h4>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.</h4>
+                                <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>
                             </div>
                             <div class="img-box">
                                 <img
                                         src="./assets/pastry-photos/melissa.png"
                                         class="ta-pastry"
                                         id="melissa-pastry"
-                                        style="margin-bottom: 3px"
                                         alt="melissa's pastry"
                                 />
                                 <img src="./assets/bio-photos/melissa.jpg" class="ta-img" alt="melissa's image"/>
@@ -500,18 +489,17 @@
                         </div>
 
                         <div class="ta-box-right flex-row">
-                            <div class="flex-column bio-text">
+                            <div class="bio-text">
                                 <h3>miku</h3>
-                                <h4>
+                                <p>
                                     Hi I'm Miku, a senior concentrating in CS. I am from Bangkok, Thailand. I love tiramisu, strawberry shortcake, macaron, banana bread, cream puff, mille-feuille, baklava, donuts.... ..
-                                </h4>
+                                </p>
                             </div>
                             <div class="img-box">
                                 <img
                                         src="./assets/pastry-photos/miku.png"
                                         class="ta-pastry"
                                         id="miku-pastry"
-                                        style="margin-bottom: 3px"
                                         alt="miku's pastry"
                                 />
                                 <img src="./assets/bio-photos/miku.jpeg" class="ta-img" alt="miku's image"/>
@@ -529,33 +517,31 @@
                                         src="./assets/pastry-photos/nick.png"
                                         class="ta-pastry"
                                         id="nick-pastry"
-                                        style="margin-bottom: 3px"
                                         alt="nick's pastry"
                                 />
                                 <img src="./assets/bio-photos/nick.png" class="ta-img" alt="nick's image"/>
                             </div>
-                            <div class="flex-column bio-text">
+                            <div class="bio-text">
                                 <h3>nick</h3>
-                                <h4>Hi! My name is Nick Vadasz and I am a junior studying CS. I'm from rural East Texas, though my whole family is from Hungary. Besides computer science, I love listening to and performing music (Brown U Orchestra 4 lyfe), art, gaming, philosophy, and starting projects that I will never finish.</h4>
+                                <p>Hi! My name is Nick Vadasz and I am a junior studying CS. I'm from rural East Texas, though my whole family is from Hungary. Besides computer science, I love listening to and performing music (Brown U Orchestra 4 lyfe), art, gaming, philosophy, and starting projects that I will never finish.</p>
                             </div>
                         </div>
 
-                        <div class="ta-box-right flex-row">
-                            <div class="flex-column bio-text">
-                                <h3>sunny</h3>
-                                <h4>
-                                    Hello! I am a senior studying CS and Behavioral Decision Sciences. I will be working as a product designer in New York after graduation. I love drawing, owning plushies, and drinking boba (very basic, I know). My dream is to travel around the world while working remotely in the future~                                    </h4>
-                            </div>
+                        <div class="ta-box-left flex-row">
                             <div class="img-box">
                                 <img
                                         src="./assets/pastry-photos/sunny.png"
                                         class="ta-pastry"
                                         id="sunny-pastry"
-                                        style="margin-bottom: 3px"
                                         alt="sunny's pastry"
                                 />
                                 <img src="./assets/bio-photos/sunny.jpeg" class="ta-img" alt="sunny's image"/>
                             </div>
+                            <div class="bio-text">
+                                <h3>sunny</h3>
+                                <p>
+                                    Hello! I am a senior studying CS and Behavioral Decision Sciences. I will be working as a product designer in New York after graduation. I love drawing, owning plushies, and drinking boba (very basic, I know). My dream is to travel around the world while working remotely in the future~                                    </p>
+                            </div>
                         </div>
                     </div>
                     <img src="./assets/shelf.png" class="shelf-png" alt="shelf image"/>
diff --git a/styles.css b/styles.css
index 05e3cb8..5be5418 100755
--- a/styles.css
+++ b/styles.css
@@ -570,25 +570,31 @@ staff area
 }
 
 .ta-box-left, .ta-box-right {
-    margin: 0 20px;
+    margin: 0 10px;
+}
+
+.ta-box-left .img-box {
+    margin-right: 10px;
+}
+
+.ta-box-right .img-box {
+    margin-left: 10px;
 }
 
 .ta-pastry {
-    width: 150px;
+    width: 120px;
     height: auto;
     text-shadow: 0 0 25px brown;
     z-index: 1;
     align-self: flex-end;
     opacity: 1;
     transition: .5s ease;
-    border-radius: 25%;
-    padding-bottom: 20px;
 }
 
 .bio-text {
     justify-content: center;
-    text-align: center;
     font-size: 120%;
+    padding: 5px;
 }
 
 .bio-text h3 {
@@ -596,20 +602,18 @@ staff area
     margin: 0;
 }
 
-.bio-text h4 {
-    font-size: 14px;
+.bio-text p {
+    font-size: 12px;
     letter-spacing: normal;
     text-transform: none;
-    max-width: 200px;
+    max-width: 250px;
     line-height: 1.25;
-    margin-bottom: 35px;
     font-weight: normal;
-    padding: 0 5px;
     color: var(--second-accent-color);
 }
 
 .shelf-png {
-    width: 800px;
+    width: 900px;
     height: auto;
     margin-top: -30px;
 }
@@ -618,14 +622,15 @@ staff area
     cursor: default;
     position: relative;
     height: 100%;
+    margin-bottom: 3px;
 }
 .ta-img {
     transition: .5s ease;
     opacity: 0;
     position: absolute;
-    top: calc(50% - 25px);
+    top: calc(50% - 5px);
     left: 50%;
-    height: 150px;
+    height: 120px;
     border-radius: 50%;
     transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
@@ -642,6 +647,10 @@ staff area
     align-items: flex-end;
 }
 
+.ta-wrapper {
+  margin-bottom: 35px;
+}
+ 
 
 /*
 faq area