Styling #2 (#19)

drinkingandcoding · Sep 23, 2022 · e9c4ac2 · e9c4ac2
1 parent a9418f8
commit e9c4ac2
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 12 deletions.
diff --git a/src/app.css b/src/app.css
@@ -17,6 +17,8 @@
   --white: hsla(var(--hue), 0%, 98%, 1);
   --white-dark: hsla(var(--hue), 0%, 95%, 1);
 
+  --orange: hsla(30, 96%, 52%, 1.0);
+
   --outline-color: var(--primary-transparent);
 
   --global-padding-x: 16px;

diff --git a/src/lib/card/Card.svelte b/src/lib/card/Card.svelte
@@ -4,8 +4,7 @@
 
 <style>
   .card {
-    background-color: #fff;
-    /*border: 1px solid var(--primary-light);*/
+    background-color: var(--white);
     border-radius: var(--global-border-radius);
   }
 </style>
diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
@@ -27,7 +27,7 @@
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     align-items: center;
-    background-color: var(--base);
+    background-color: var(--white);
     padding: 12px 12px 0 12px;
   }
 
@@ -61,7 +61,7 @@
     content: '';
     width: 95%;
     height: 2px;
-    background-color: var(--accent);
+    background-color: var(--orange);
     display: block;
   }
 

diff --git a/src/lib/logo/Logo.svelte b/src/lib/logo/Logo.svelte
@@ -4,6 +4,7 @@
   @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
 
   .logo {
+    color: var(--orange);
     font-family: 'Nanum Pen Script', cursive;
     font-size: 1.5rem;
     text-transform: lowercase;

diff --git a/src/lib/recipes/Recipe.svelte b/src/lib/recipes/Recipe.svelte
@@ -85,10 +85,10 @@
               <div>
                 <div class="circle">{i + 1}</div>
               </div>
-              <div>
+              <dl>
                 <div class="title"><DescriptionTerm item={instruction.name} /></div>
                 <div class="caption"><DescriptionDetails item={instruction.text} /></div>
-              </div>
+              </dl>
             </div>
           {/each}
         </CardBody>
@@ -113,7 +113,7 @@
 
   .layout {
     display: flex;
-    background: #fff;
+    background:  var(--white);
   }
   .layout > div {
     width: 50%;
@@ -124,6 +124,10 @@
     width: 40%;
   }
 
+  dl {
+    padding-left: 46px;
+  }
+
   @media (max-width: 768px) {
     .layout {
       flex-direction: column;
@@ -159,7 +163,7 @@
   .recipe_author,
   .recipe_category,
   .recipe_author a {
-    color: #fff;
+    color: var(--white);
   }
   .recipe_author,
   .recipe_category {
@@ -198,15 +202,16 @@
   }
   /* Circle */
   .circle {
-    background: gray;
+    background: var(--primary-medium);
     position: relative;
     width: 1.5em;
     height: 1.5em;
     line-height: 1.5em;
     border-radius: 100%;
-    color: #fff;
+    color: var(--white);
     text-align: center;
-    box-shadow: 0 0 0 3px #fff;
+    box-shadow: 0 0 0 3px var(--white);
+    z-index:  2;
   }
 
   /* Vertical Line */
@@ -222,7 +227,7 @@
     width: 1px;
     transform: scale(1, 2);
     transform-origin: 50% -100%;
-    background-color: #ccc;
+    background-color: var(--primary-medium);
     z-index: 1;
   }
   .step:last-child .circle:after {