From db881359f6fe2e9bc85cce700c52ef46cac966f1 Mon Sep 17 00:00:00 2001
From: JadlionHD <48410066+JadlionHD@users.noreply.github.com>
Date: Wed, 6 Mar 2024 17:22:14 +0700
Subject: [PATCH] fix nutrition subtitle & title-gap

---
 recipe-page/index.html |  9 ++++++---
 recipe-page/style.css  | 10 ++++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/recipe-page/index.html b/recipe-page/index.html
index f253b7f..806551d 100644
--- 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
index 74bb55f..11b7805 100644
--- 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 {