Updated Algolia styling

Author: dcooney

components/molecules/AlgoliaSearch/AlgoliaSearch.module.css

@@ -18,29 +18,24 @@
     @apply relative h-full;
 
     & input {
-      @apply w-full p-4 pr-8 border;
+      @apply w-full p-10 pr-48 border border-tertiary-lighter rounded font-primary text-xs;
 
-      font-size: 15px;
-      line-height: 1.15;
+      line-height: 1;
 
       &::-webkit-search-decoration,
       &::-webkit-search-cancel-button,
       &::-webkit-search-results-button,
       &::-webkit-search-results-decoration {
         -webkit-appearance: none;
       }
-
-      &:focus {
-        @apply outline-none;
-      }
     }
 
     /* Buttons (Submit, Reset) */
     & button {
       @apply absolute cursor-pointer flex justify-center items-center right-4;
 
-      width: 30px;
-      height: 30px;
+      width: 28px;
+      height: 28px;
       top: 50%;
       transform: translateY(-50%);
 
@@ -58,7 +53,7 @@
 
       /* Reset Button */
       &[type='reset'] {
-        @apply right-8;
+        @apply right-28;
 
         & svg {
           width: 12px;
@@ -75,76 +70,88 @@
 
   /* Drop Menu (Hits &  History) */
   & .dropMenu {
-    @apply absolute invisible opacity-0 transition-all duration-150;
+    @apply absolute invisible opacity-0 transition-all duration-150 ease-in-out;
 
     z-index: 999;
-    top: 100%;
-    width: 100%;
+    bottom: -10px;
+    width: 112%;
+    margin-left: -6%;
   }
 
   /* Show dropmenu on Focus */
   &:focus-within {
+    & input {
+      @apply shadow;
+    }
+
     & .dropMenu {
       @apply visible opacity-100;
+
+      bottom: -5px;
     }
   }
 
   /* History and Hits Menu */
   & .history,
   & .hits {
-    @apply absolute border shadow w-full;
+    @apply absolute border border-tertiary-lighter shadow w-full rounded-larger;
 
     background-color: #fff;
 
     & ul {
-      @apply py-4 px-4;
+      @apply py-8;
 
       & li {
-        @apply border-t;
-
-        &:first-of-type {
-          @apply border-none;
+        &:not(.clear) {
+          & button {
+            &:hover,
+            &:focus {
+              @apply bg-primary;
+
+              color: #fff;
+
+              & span.time {
+                color: #fff;
+              }
+            }
+          }
         }
       }
     }
 
     & button {
-      @apply block w-full py-4 text-left;
+      @apply block w-full py-12 px-20 text-left transition font-primary font-semibold text-xs;
 
-      line-height: 1;
-      font-size: 0.85rem;
+      line-height: 1.25;
 
       & em {
         font-style: normal;
       }
-
-      &:hover,
-      &:focus {
-        @apply underline;
-      }
     }
   }
 
   /* History Menu */
   & .history {
     & button {
-      @apply w-full flex justify-between items-center font-semibold;
+      @apply w-full flex justify-between items-center;
 
       & span.time {
-        @apply overflow-ellipsis opacity-40 font-normal italic;
+        @apply overflow-ellipsis text-right text-primary-light font-normal italic text-xxs flex-shrink-0 self-start;
 
-        font-size: 0.7rem;
-        max-width: 30%;
+        width: 30%;
       }
     }
 
     & .clear {
       @apply mt-4 border-none;
 
       & button {
-        @apply font-normal;
+        @apply py-8 font-normal text-xxs text-tertiary-lighter;
 
-        font-size: 0.775rem;
+        &:hover,
+        &:focus {
+          @apply underline  text-primary;
+        }
       }
     }
   }

components/organisms/Footer/Footer.module.css

@@ -1,5 +1,5 @@
 .footer {
-  @apply py-8;
+  @apply py-40 border-t border-tertiary-lightest;
 
   & .footerMenu {
     & > ul {
@@ -19,6 +19,6 @@
   }
 
   & .copyright {
-    @apply py-4 text-center text-sm;
+    @apply py-4 text-center text-xs;
   }
 }

components/organisms/Header/Header.js

@@ -16,7 +16,7 @@ export default function Header() {
   return (
     <header className={styles.header}>
       <div className="container flex items-center justify-end">
-        <div className="relative pt-12 pb-16">
+        <div className="relative pb-16">
           <AlgoliaSearch
             useHistory={true}
             usePlaceholder={true}

components/organisms/Header/Header.module.css

@@ -1,5 +1,5 @@
 .header {
-  @apply sticky top-0 pb-8 transition-all z-50;
+  @apply sticky top-0 py-20 transition-all z-50 border-b border-tertiary-lightest shadow;
 
-  background-color: #fff;
+  background-color: #f7f7f7;
 }

pages/blog/[[...slug]].js

@@ -49,7 +49,7 @@ export default function BlogPost({post, archive, posts, pagination}) {
   if (archive) {
     return (
       <Layout seo={{...post?.seo}}>
-        <div className="container">
+        <div className="container py-20">
           <section>
             {!posts || !posts.length ? (
               <p>No posts found.</p>
@@ -77,7 +77,7 @@ export default function BlogPost({post, archive, posts, pagination}) {
 
   return (
     <Layout seo={{...post?.seo}} hasJsonLd={true}>
-      <article className="container">
+      <article className="container py-40">
         <Blocks blocks={post?.blocks} />
         <div
           dangerouslySetInnerHTML={{

tailwind.config.js

@@ -27,7 +27,7 @@ module.exports = {
       body: ['1.125rem', '2rem'],
       sm: ['1rem', '1.75rem'],
       caption: ['0.875rem', '1.25rem'],
-      xs: ['0.75rem', '1.25rem'],
+      xs: ['0.85rem', '1.25rem'],
       xxs: ['0.625rem', '1rem'],
       h1: ['3rem', '3.75rem'],
       h2: ['2.25rem', '3.25rem'],
@@ -47,7 +47,9 @@ module.exports = {
       0: '0',
       4: '0.25rem',
       8: '0.5rem',
+      10: '0.625rem',
       12: '0.75rem',
+      14: '0.875rem',
       16: '1rem',
       20: '1.25rem',
       24: '1.5rem',
@@ -67,7 +69,7 @@ module.exports = {
       80: '5rem'
     },
     borderWidth: {
-      DEFAULT: '0.125rem'
+      DEFAULT: '1px'
     },
     borderRadius: {
       none: '0',