Style updates

Author: dcooney

components/atoms/Breadcrumbs/Breadcrumbs.js

@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import PropTypes from 'prop-types'
 import styles from './Breadcrumbs.module.css'
+import cn from 'classnames'
 
 /**
  * Render the Breadcrumbs component.
@@ -14,7 +15,7 @@ export default function Breadcrumbs({breadcrumbs}) {
   return (
     <>
       {!!breadcrumbs?.length && (
-        <ul className={styles.breadcrumbs}>
+        <ul className={cn(styles.breadcrumbs, 'breadcrumbs')}>
           {breadcrumbs.map((breadcrumb, index) => (
             <li key={index}>
               <Link href={breadcrumb?.url}>

components/atoms/Breadcrumbs/Breadcrumbs.module.css

@@ -2,7 +2,7 @@ ul.breadcrumbs {
   @apply mb-8 flex;
 
   & li {
-    @apply text-sm font-semibold;
+    @apply uppercase text-xs font-semibold p-0;
 
     & .sep {
       @apply px-2 opacity-50 font-normal;

components/atoms/Button/Button.module.css

@@ -1,5 +1,5 @@
 .button {
-  @apply inline-flex items-center justify-center rounded border transition-colors duration-150 ease-in-out cursor-pointer uppercase;
+  @apply inline-flex items-center justify-center rounded border cursor-pointer font-semibold;
 
   & svg {
     @apply ml-12;

components/atoms/Code/Code.module.css

@@ -1,5 +1,5 @@
 .code {
-  @apply mb-40;
+  @apply mb-8;
 
   & > pre {
     @apply rounded;

components/atoms/Columns/Columns.module.css

@@ -1,5 +1,5 @@
 .columns {
-  @apply grid gap-16 grid-cols-3;
+  @apply grid gap-8 grid-cols-3;
 
   &.columns-1 {
     @apply grid-cols-1;

components/atoms/Image/Image.module.css

@@ -1,5 +1,5 @@
 .image {
-  @apply mb-20;
+  @apply mb-8;
 
   & img {
     @apply block rounded;

components/atoms/Quote/Quote.module.css

@@ -1,8 +1,12 @@
 .quote {
-  @apply mb-6 p-5 px-10 border-l;
+  @apply mb-8 p-6 px-10 border-l;
 
   & blockquote {
     @apply mb-8;
+
+    & p {
+      @apply text-xl mb-0;
+    }
   }
 
   & figcaption {

components/atoms/RichText/RichText.module.css

@@ -3,37 +3,30 @@
     @apply text-center;
   }
 
-  /* Paragraph, List Styles */
-  & ul,
-  &.ul,
-  & ol,
-  &.ol,
-  & p,
+  /* Paragraph Styles */
   &.p {
-    @apply mb-8;
+    @apply mb-4;
   }
 
-  & ul,
   &.ul,
-  & ol,
   &.ol {
     & li {
-      @apply mb-4 relative pl-24 list-none;
+      @apply mb-2 relative pl-6 list-none;
     }
 
     & ul,
     & ol {
-      @apply ml-16 mb-0;
+      @apply ml-6 mb-0;
     }
   }
 
   /* Unordered Lists */
-  & ul,
   &.ul {
     & li {
       &::before {
         @apply absolute block rounded-full;
 
+        background: #000;
         content: '';
         width: 5px;
         height: 5px;
@@ -44,7 +37,6 @@
   }
 
   /* Ordered Lists */
-  & ol,
   &.ol {
     counter-reset: item;
 
@@ -58,30 +50,4 @@
       }
     }
   }
-
-  /* Heading Styles */
-  & h1,
-  &.h1 {
-    @apply mb-10;
-  }
-
-  & h2,
-  &.h2 {
-    @apply mb-10;
-  }
-
-  & h3,
-  &.h3 {
-    @apply mb-10;
-  }
-
-  & h4,
-  &.h4 {
-    @apply mb-10;
-  }
-
-  & h5,
-  &.h5 {
-    @apply mb-10;
-  }
 }

components/atoms/Separator/Separator.module.css

@@ -1,3 +1,3 @@
 .separator {
-  @apply w-full border-b my-40;
+  @apply w-full border-b my-8;
 }