Styling drinkingandcoding#2

epwinchell · Sep 22, 2022 · 57f3275 · 57f3275
1 parent fa12df8
commit 57f3275
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 9 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,8 +27,8 @@
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     align-items: center;
-    background-color: var(--base);
-    padding: 12px 12px 0 12px;
+    background-color: var(--white);
+    padding: 12px 12px 6px 12px;
   }
 
   .brand {
@@ -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,8 +4,9 @@
   @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;
+    font-size: 2.5rem;
     text-transform: lowercase;
   }
 </style>
diff --git a/src/lib/recipes/Recipe.svelte b/src/lib/recipes/Recipe.svelte
@@ -113,7 +113,7 @@
 
   .layout {
     display: flex;
-    background: #fff;
+    background:  var(--white);
   }
   .layout > div {
     width: 50%;
@@ -159,7 +159,7 @@
   .recipe_author,
   .recipe_category,
   .recipe_author a {
-    color: #fff;
+    color: var(--white);
   }
   .recipe_author,
   .recipe_category {
@@ -206,7 +206,8 @@
     border-radius: 100%;
     color: #fff;
     text-align: center;
-    box-shadow: 0 0 0 3px #fff;
+    box-shadow: 0 0 0 3px var(--white);
+    z-index:  2;
   }
 
   /* Vertical Line */