From 1802d963acee3a9b14595df465c0b7e1870ccb13 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 20 Jan 2020 16:51:34 -0800
Subject: [PATCH] style(palimpsest): revise styles

---
 palimpsest/src/components/ButtonTile.svelte   |  2 +-
 .../src/components/Component/Component.svelte |  2 +-
 palimpsest/src/components/Home.svelte         | 49 +++++++++++--------
 palimpsest/src/components/SideNav.svelte      |  9 +++-
 4 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/palimpsest/src/components/ButtonTile.svelte b/palimpsest/src/components/ButtonTile.svelte
index c4555751..c4022589 100644
--- a/palimpsest/src/components/ButtonTile.svelte
+++ b/palimpsest/src/components/ButtonTile.svelte
@@ -36,7 +36,7 @@
   .icon {
     position: absolute;
     bottom: 1rem;
-    fill: var(--cds-ui-05);
+    fill: var(--cds-icon-01);
   }
 
   .icon--left {
diff --git a/palimpsest/src/components/Component/Component.svelte b/palimpsest/src/components/Component/Component.svelte
index 87d05cd1..fbb7ba30 100644
--- a/palimpsest/src/components/Component/Component.svelte
+++ b/palimpsest/src/components/Component/Component.svelte
@@ -60,7 +60,7 @@
 <style>
   main {
     margin-top: 5rem;
-    padding-left: 12rem;
+    padding-left: 16rem;
     padding-bottom: 2.5rem;
   }
 
diff --git a/palimpsest/src/components/Home.svelte b/palimpsest/src/components/Home.svelte
index 7da77956..6fa68dd2 100644
--- a/palimpsest/src/components/Home.svelte
+++ b/palimpsest/src/components/Home.svelte
@@ -4,14 +4,14 @@
   import ButtonTile from './ButtonTile.svelte';
 
   $: {
-    document.title = `Carbon Components Svelte`;
+    document.title = 'Carbon Components Svelte';
   }
 </script>
 
 <style>
   main {
-    margin-top: 5rem;
-    padding-left: 12rem;
+    margin-top: 2.5rem;
+    padding-left: 16rem;
     padding-bottom: 2.5rem;
   }
 
@@ -21,6 +21,11 @@
     }
   }
 
+  .banner {
+    background: var(--cds-ui-01);
+    padding: 2.5rem 0 1.5rem;
+  }
+
   .bx--grid {
     max-width: 66rem;
   }
@@ -41,31 +46,35 @@
   }
 
   h3 {
-    margin-top: 4rem;
+    margin-top: 2.5rem;
     margin-bottom: 1.5rem;
     font-size: 1.5rem;
   }
 </style>
 
 <main>
-  <div class="bx--grid">
-    <div class="bx--row">
-      <div class="bx--col">
-        <img src={Logo} alt="Logo" class="logo" />
-        <h1>
-          <span>
-            <strong>Carbon</strong>
-          </span>
-          <span>
-            <strong>Components</strong>
-          </span>
-          <span>
-            <strong>Svelte</strong>
-          </span>
-        </h1>
-        <p>The Carbon Design System implemented in Svelte</p>
+  <div class="banner">
+    <div class="bx--grid">
+      <div class="bx--row">
+        <div class="bx--col">
+          <img src={Logo} alt="Logo" class="logo" />
+          <h1>
+            <span>
+              <strong>Carbon</strong>
+            </span>
+            <span>
+              <strong>Components</strong>
+            </span>
+            <span>
+              <strong>Svelte</strong>
+            </span>
+          </h1>
+          <h3>The Carbon Design System implemented in Svelte.</h3>
+        </div>
       </div>
     </div>
+  </div>
+  <div class="bx--grid">
     <div class="bx--row">
       <div class="bx--col">
         <h3>Packages</h3>
diff --git a/palimpsest/src/components/SideNav.svelte b/palimpsest/src/components/SideNav.svelte
index cc9438b1..8be80aac 100644
--- a/palimpsest/src/components/SideNav.svelte
+++ b/palimpsest/src/components/SideNav.svelte
@@ -30,7 +30,7 @@
     z-index: 9999;
     top: 2.5rem;
     left: 0;
-    width: 12rem;
+    width: 16rem;
     height: calc(100% - 2.5rem);
     background-color: var(--cds-ui-01);
     overflow-y: scroll;
@@ -110,7 +110,12 @@
   }} />
 
 <nav class:toggled={$sideNavToggled}>
-  <Search small id="search-components" labelText="Components" bind:value />
+  <Search
+    small
+    id="search-components"
+    labelText="Components"
+    placeholder="Search components..."
+    bind:value />
   <ul>
     {#each results as { name }, i (name)}
       <li>