Merge pull request #179 from WebDevStudios/feature/core-styling

Feature/core styling

Author: Greg Rickaby

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,8 +1,8 @@
 .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 mr-2 mb-2;
 
   & svg {
-    @apply ml-12;
+    @apply ml-4;
   }
 
   &.iconLeft {
@@ -16,26 +16,20 @@
   &:hover,
   &:focus,
   &:active:not([disabled]) {
-    @apply no-underline;
+    @apply underline;
   }
 
   /* SIZES */
   &.lg {
-    @apply px-6 py-3;
-
-    line-height: 1.5625rem;
+    @apply px-4 py-3 text-lg;
   }
 
   &.md {
-    @apply px-3 py-1.5;
-
-    line-height: 1.25rem;
+    @apply px-3 py-2;
   }
 
   &.sm {
     @apply px-1.5 py-0.5;
-
-    line-height: 1.0625rem;
   }
 
   &.fluid {

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,11 +1,11 @@
 .image {
-  @apply mb-20;
+  @apply mb-8;
 
   & img {
     @apply block rounded;
   }
 
   & .caption {
-    @apply text-center pt-12;
+    @apply text-center text-xs pt-4;
   }
 }

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,28 @@
     @apply text-center;
   }
 
-  /* Paragraph, List Styles */
-  & ul,
+  /* List Styles */
   &.ul,
-  & ol,
-  &.ol,
-  & p,
-  &.p {
-    @apply mb-8;
-  }
-
-  & ul,
-  &.ul,
-  & ol,
   &.ol {
+    @apply mb-4;
+
     & 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 {
+    & > li {
       &::before {
         @apply absolute block rounded-full;
 
+        background: #000;
         content: '';
         width: 5px;
         height: 5px;
@@ -44,7 +35,6 @@
   }
 
   /* Ordered Lists */
-  & ol,
   &.ol {
     counter-reset: item;
 
@@ -58,30 +48,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;
 }