Show recipe title in each recipe page

1 files changed, 36 insertions, 16 deletions

diff --git a/static/main.css b/static/main.css
index e19d1ac..cb4fda0 100644
--- a/static/main.css
+++ b/static/main.css
@@ -60,6 +60,18 @@ body {
   margin: 1rem;
 }
 
+.g-Recipe__Title {
+  font-size: 1.5rem;
+  margin-top: 1.5rem;
+  color: var(--color-title);
+}
+
+.g-Recipe__SubTitle {
+  font-size: 1.1rem;
+  margin-top: 1rem;
+  color: var(--color-title);
+}
+
 .g-Page__Recipes {
   list-style-type: none;
   padding-left: 1rem;
@@ -69,21 +81,25 @@ body {
   margin-bottom: 1rem;
 }
 
-h1, h2, h3 {
-  color: var(--color-title);
-}
+/* Recipe */
 
-h1 {
+.g-Recipe__Content h1 {
   font-size: 1.5rem;
   margin-top: 1.5rem;
+  color: var(--color-title);
 }
 
-h2 {
+.g-Recipe__Content h2 {
   font-size: 1.1rem;
   margin-top: 1rem;
+  color: var(--color-title);
 }
 
-/* Recipe */
+.g-Recipe__Content h3 {
+  font-size: 1.1rem;
+  margin-top: 1rem;
+  color: var(--color-title);
+}
 
 .g-Number {
   font-size: inherit;
@@ -95,33 +111,33 @@ h2 {
   width: 5rem;
 }
 
-.g-Recipe ul,
-.g-Recipe ol {
+.g-Recipe__Content ul,
+.g-Recipe__Content ol {
   list-style-type: none;
   padding-left: 1rem;
 }
 
-.g-Recipe li {
+.g-Recipe__Content li {
   margin-bottom: 1rem;
   line-height: 1.5rem;
 }
 
-.g-Recipe ol,
-.g-Recipe ul {
+.g-Recipe__Content ol,
+.g-Recipe__Content ul {
   margin-top: 1.5rem;
 }
 
-.g-Recipe ol {
+.g-Recipe__Content ol {
   counter-reset: ol;
 }
 
-.g-Recipe ol > li {
+.g-Recipe__Content ol > li {
   padding-left: 3rem;
   position: relative;
   text-align: justify;
 }
 
-.g-Recipe ol > li::before {
+.g-Recipe__Content ol > li::before {
   display: inline;
   position: absolute;
   top: 0;
@@ -137,10 +153,14 @@ h2 {
   text-align: center;
 }
 
-.g-Recipe ol > li:hover {
+.g-Recipe__Content ol > li:hover {
   cursor: pointer;
 }
 
-.g-Recipe ol > li.g-Recipe__Completed::before {
+.g-Recipe__Content ol > li.g-Recipe__Completed {
+  text-decoration: line-through;
+}
+
+.g-Recipe__Content ol > li.g-Recipe__Completed::before {
   background-color: var(--color-completed);
 }