style: Enhance UI styling

- Update various UI elements with new colors, shadows, and text styles for improved aesthetics. - Add hidden class to preparation sections in recipe pages for better user interaction
SaraFreitas02 · Jan 21, 2025 · e97350d · e97350d
1 parent 0c4404f
commit e97350d
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 63 deletions.
diff --git a/css/recipe.css b/css/recipe.css
@@ -1,3 +1,5 @@
+@import "/css/animations.css";
+
 /*Main*/
 main {
   display: flex;
@@ -28,6 +30,11 @@ main {
   margin: 0;
 }
 
+.recipe-changer i {
+  color: #275837;
+  text-shadow: 1px -1px 3px #333333, 1px 1px black, -1px -1px black;
+}
+
 .recipe-changer > a > i {
   font-size: 50px;
 }
@@ -57,7 +64,10 @@ h2 {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0 0 25px 0;
+  padding: 0;
+  margin-bottom: 25px;
+  box-shadow: 2px 2px 5px #333333;
+  height: 300px;
 }
 
 .recipe-description {
@@ -70,14 +80,17 @@ h2 {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: gray; /*placeholder color*/
+  background-color: #275837; 
   width: 100%;
-  box-shadow: 2px 2px 5px black;
+  box-shadow: 2px 2px 5px #333333;
+  border-radius: 20px;
 }
 
 .eval-btns button {
-  font-size: 20px;
+  font-size: 23px;
   padding: 8px 20px 8px 20px;
+  color: #e5e5e5;
+  text-shadow: 1px 1px black, -1px -1px black, 1px -1px #333333;
 }
 
 /*Recipe*/
@@ -86,29 +99,34 @@ h2 {
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  border: solid 1px black;
-  box-shadow: 3px 3px 5px darkgray;
+  border: solid 1px #275837;
+  box-shadow: 2px 2px 5px #333333;
   height: 500px;
   width: 1000px;
   position: relative;
   border-radius: 20px;
+  background-color: #2758370d;
 }
 
 .toggle-btns {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    padding: 20px 0 20px 0;;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 20px 0 20px 0;
 }
 
 .toggle-btns button {
-    border: solid 1px black;
-    box-shadow: 1px 1px 2px darkgray;
-    border-radius: 5px;
-    padding: 5px 10px 5px 10px;
-    margin: 5px;
+  border: solid 1px black;
+  box-shadow: 1px 1px 2px #333333;
+  border-radius: 5px;
+  padding: 5px 10px 5px 10px;
+  margin: 5px;
+  background-color: #275837;
+  color: white;
+  text-shadow: 1px 1px black, -1px -1px black;
+  z-index: 10000;
 }
 
 .ingredients {
@@ -146,7 +164,6 @@ ul {
   left: 0;
   z-index: 10;
   padding: 40px 20px 0 20px;
-  visibility: hidden;
 }
 
 .preparation li {
@@ -156,22 +173,23 @@ ul {
 }
 
 ol {
-    list-style-type: decimal;
-    list-style-position: inside;
+  list-style-type: decimal;
+  list-style-position: inside;
 }
 
 ol li::marker {
-    font-weight: bold;
-    font-size: 18px;
+  font-weight: bold;
+  font-size: 18px;
 }
 
-.ingredients span, .preparation span {
-    padding: 0 5px 0 5px;
-    margin-right: 5px;
-    width: 60px;
-    border: solid 1px black;
-    box-shadow: 1px 1px 2px darkgray;
-    text-align: center;
+.ingredients span,
+.preparation span {
+  padding: 0 5px 0 5px;
+  margin-right: 5px;
+  width: 60px;
+  border: solid 1px #333333;
+  box-shadow: 1px 1px 2px dark#76c893;
+  text-align: center;
 }
 
 /*Learn More*/
@@ -184,9 +202,9 @@ ol li::marker {
 }
 
 .learn-more > * {
-    text-align: center;
-    padding: 5px;
-    margin: 0;
+  text-align: center;
+  padding: 5px;
+  margin: 0;
 }
 
 /*Comment Section*/
@@ -199,35 +217,44 @@ ol li::marker {
 }
 
 .user-comments h3 {
-    font-size: 25px;
-    background-color: gray; /*placeholder color*/
-    padding: 10px;
-    box-shadow: 2px 2px 5px black;
+  font-size: 25px;
+  background-color: #275837; /*placeholder color*/
+  padding: 15px;
+  box-shadow: 2px 2px 5px #333333;
+  border-radius: 20px;
+  color: #e5e5e5;
+  text-shadow: 1px 1px 3px black, -1px -1px 3px black;
 }
 
 .comments-div {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
 }
 
 .comments-column {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: stretch;
-    width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  width: 100%;
 }
 
 .comment {
-   text-align: center;
-   border: solid 1px black;
-   margin: 5px;
-   padding: 5px;
-   border-radius: 10px;
-   box-shadow: 2px 2px 5px darkgray;
+  text-align: center;
+  border: solid 1px #333333;
+  margin: 5px;
+  padding: 5px;
+  border-radius: 10px;
+  box-shadow: 2px 2px 5px dark#76c893;
 }
 
 .comment-user span {
-    padding: 0 0 0 5px;
+  padding: 0 0 0 5px;
+}
+
+
+/*Other*/
+.hidden {
+  visibility: hidden;
 }
diff --git a/css/style.css b/css/style.css
@@ -20,9 +20,10 @@ header {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: gray; /* this is a placeholder color*/
+    background-color: #275837; /* this is a placeholder color*/
     width: 100%;
-    box-shadow: 2px 2px 5px black;
+    box-shadow: 2px 2px 6px #333333;
+    border: 2px solid black;
 }
 
 .banner {
@@ -47,11 +48,12 @@ button { /*button reset*/
 
 .brand a {
     text-decoration: none;
-    color: black; /* this is a placeholder color*/
 }
 
 .brand > i, h1 {
     font-size: 45px;
+    color: #e2e2e2;
+    text-shadow: 2px 2px  black, -2px -2px black;
 }
 
 .brand > i {
@@ -66,8 +68,10 @@ button { /*button reset*/
 }
 
 .header-btns button {
-    font-size: 23px;
+    font-size: 30px;
     padding: 10px;
+    color: #e2e2e2;
+    text-shadow: 2px 2px  black, -2px -2px black;
 }
 
 .account-btn {
@@ -87,6 +91,15 @@ button { /*button reset*/
     padding: 50px 0 20px 0;
 }
 
+img {
+    object-fit: cover;
+    border: 1px solid #333333;
+  }
+
+  a {
+    color:#275837;
+  }
+
 
 /*Home*/
 .home-section {
@@ -137,15 +150,16 @@ footer {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: gray; /* this is a placeholder color*/
+    background-color: #275837;
     width: 100%;
     height: auto;
     box-shadow: 2px -2px 5px black;
     margin: 300px 0 0 0;
 }
 
 footer * {
-    color: black; /* this is a placeholder color*/
+    color: #e2e2e2;
+    text-shadow: 1px 1px black, -1px -1px black, 1px -1px 3px#333333;
 }
 
 footer > *:not(:last-child) {
@@ -164,7 +178,6 @@ footer > *:not(:last-child) {
     padding: 30px 10px 0 10px;
 }
 
-
 .footer-social > * {
     padding: 20px 5px 0 5px;
 }
@@ -178,7 +191,7 @@ footer > *:not(:last-child) {
     padding: 20px 0 20px 0;
 }
 
-.footer-credits >  * {
+.footer-credits > * {
     text-align: center;
     margin: 0;
 }

diff --git a/recipes/brownies.html b/recipes/brownies.html
@@ -106,7 +106,7 @@ <h3>INGREDIENTS</h3>
                     </ul>
                 </div>
             </section>
-            <section class="preparation">
+            <section class="preparation hidden" id="preparation">
                 <ol>
                     <li>Preheat oven to <span class="measurement-span">350°F</span>. Grease and flour an <span
                             class="measurement-span">8 inch</span> square pan.</li>

diff --git a/recipes/lasagna.html b/recipes/lasagna.html
@@ -77,6 +77,7 @@ <h2>Lasagna</h2>
         <button class="review-btn" type="button"><i class="fa-solid fa-comment"
             aria-label="Leave a review"></i></button>
       </div>
+
       <description class="recipe-description" id="recipe-description">
         <p>This lasagna recipe is a <em>hearty and delicious</em> dish, perfect for family dinners or special occasions.
           It features layers of rich meat sauce, creamy ricotta cheese, and gooey mozzarella, all baked to perfection.
@@ -126,7 +127,7 @@ <h3>INGREDIENTS</h3>
           </ul>
         </div>
       </section>
-      <section class="preparation">
+      <section class="preparation hidden" id="preparation">
         <ol>
           <li>In a large pot or Dutch oven, cook the sausage, ground beef, onion, and garlic over medium heat until
             browned. Add the crushed tomatoes, tomato paste, tomato sauce, and water.<br> Season with sugar, basil,
@@ -140,7 +141,7 @@ <h3>INGREDIENTS</h3>
               class="measurement-span">1/2 tsp</span> of salt.</li>
           <li>Preheat oven to <span class="measurement-span">375°F</span>.</li>
           <li>To assemble, spread <span class="measurement-span">1.5 cups</span> of meat sauce in the bottom of a <span
-              class="measurement-span">9"x13"</span> baking dish. Arrange <span class="measurement-span">6
+              class="measurement-span">9 inch x 13 inch"</span> baking dish. Arrange <span class="measurement-span">6
               noodles</span> lengthwise over the meat sauce. Spread half of the ricotta
             cheese mixture over the noodles.
             Top with <span class="measurement-span">1/3</span> of the mozzarella cheese slices. Spoon <span

diff --git a/recipes/pancakes.html b/recipes/pancakes.html
@@ -106,7 +106,7 @@ <h3>INGREDIENTS</h3>
             </ul>
           </div>
         </section>
-        <section class="preparation">
+        <section class="preparation hidden" id="preparation">
           <ol>
             <li>In a large bowl, sift together the flour, baking powder, salt, and sugar.</li>
             <li>Make a well in the center and pour in the milk, egg, and melted butter; mix until smooth.</li>