fix nutrition subtitle & title-gap

JadlionHD · Mar 6, 2024 · db88135 · db88135
1 parent f3d9297
commit db88135
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/recipe-page/index.html b/recipe-page/index.html
@@ -35,7 +35,7 @@
         </div>
 
         <div class="ingredients">
-          <div class="ingredients-title color-dark-rasp title-size">Ingredients</div>
+          <div class="ingredients-title color-dark-rasp title-size title-gap">Ingredients</div>
           <ul>
             <li>2-3 large eggs</li>
             <li>Salt, to taste</li>
@@ -48,7 +48,7 @@
         <hr />
 
         <div class="instructions">
-          <div class="instructions-title color-dark-rasp title-size">Instructions</div>
+          <div class="instructions-title color-dark-rasp title-size title-gap">Instructions</div>
           <ol>
             <li>
               <b>Beat the eggs:</b> In a bowl, beat the eggs with a pinch of salt and pepper until
@@ -78,7 +78,10 @@
         <hr />
 
         <div class="nutrition">
-          <div class="nutrition-title color-dark-rasp title-size">Nutrition</div>
+          <div class="nutrition-title color-dark-rasp title-size title-gap">Nutrition</div>
+          <div class="nutrition-subtitle">
+            The table below shows nutritional values per serving without the additional fillings
+          </div>
           <table>
             <thead>
               <th style="width: 60%"></th>

diff --git a/recipe-page/style.css b/recipe-page/style.css
@@ -93,6 +93,11 @@ hr {
   font-size: 28px;
 }
 
+.title-gap {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
 .nutrition table {
   border-collapse: collapse;
   width: 100%;
@@ -113,6 +118,11 @@ hr {
   font-weight: bold;
 }
 
+.nutrition .nutrition-subtitle {
+  font-size: 14px;
+  color: #908c88;
+}
+
 /* Mobile */
 @media only screen and (max-width: 768px) {
   body {