Implement subnav

source/css/organisms/subnav.pcss

+.subnav {
+  @apply bg-black text-white py-1;
+}

source/css/style.pcss

@@ -19,6 +19,7 @@
 @import "./atoms/button.pcss";
 @import "./atoms/card.pcss";
 @import "./atoms/contact-line.pcss";
+@import "./atoms/container.pcss";
 @import "./atoms/flag.pcss";
 @import "./atoms/heading.pcss";
 @import "./atoms/paragraph.pcss";
@@ -31,11 +32,13 @@
 @import "./molecules/candidate-card.pcss";
 @import "./molecules/candidate-table-row.pcss";
 @import "./molecules/social-icon-group.pcss";
+@import "./molecules/switch.pcss";
 
 @import "./organisms/candidate-card-list.pcss";
 @import "./organisms/candidate-table.pcss";
 @import "./organisms/footer.pcss";
 @import "./organisms/hero.pcss";
+@import "./organisms/subnav.pcss";
 
 /**
 * This injects Tailwind's utility classes and any utility classes registered

tailwind.config.js

@@ -14,6 +14,13 @@ module.exports = {
         'negative': '0.9',
       }
     },
+    // Breakpoints
+    screens: {
+      'sm': '576px',
+      'md': '768px',
+      'lg': '992px',
+      'xl': '1200px',
+    },
     fontFamily: {
       alt: ['Bebas Neue', 'Helvetica', 'Arial', 'sans-serif'],
       body: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
@@ -50,8 +57,10 @@ module.exports = {
         '200': '#adadad',
         '300': '#4c4c4c',
         '400': '#343434',
-        '450': '#262626',
-        '500': '#202020',
+        '500': '#303132',
+        '600': '#262626',
+        '700': '#202020',
+        '800': '#1f1f1f',
       },
       'red': {
         '100': '#d6151b',
@@ -92,9 +101,7 @@ module.exports = {
       center: true,
       padding: {
         default: '1rem',
-        sm: '2rem',
-        lg: '4rem',
-        xl: '5rem',
+        xl: '2rem',
       },
     },
     textDecorationColor: { // defaults to theme => theme('colors')