Integrate www content

assets/config/tailwind.config.js

@@ -13,26 +13,39 @@ const brand = {
     purple: "#512668",
     orange: "#ee975c",
     green: "#2fc89f",
-    blue: "#3ec2f8",
-    gray: "#f1f1f1",
+    blue: "#52a6da",
 }
 
 const purple = {
     100: "#ddcae8",
+    200: "#9c76b3",
     300: "#83549c",
+    400: "#6c348a",
     500: brand.purple,
+    600: "#421d57",
     700: "#371a47",
+    800: "#2a1337",
     900: "#180b1f",
 }
 
+// TBD: Orange and green scales. (Using defaults for now.)
+
 const blue = {
-    100: "#C4EEFF",
-    300: "#94E1FF",
+    100: "#c4eeff",
+    200: "#abe7ff",
+    300: "#94e1ff",
+    400: "#63d0ff",
     500: brand.blue,
-    700: "#238FBA",
-    900: "#0F2E3B",
+    600: "#3182ce",
+    700: "#1873bd",
+    800: "#0a4970",
+    900: "#0f2e3b",
 }
 
+const orange = defaultTheme.colors.orange;
+const green = defaultTheme.colors.green;
+const gray = defaultTheme.colors.gray;
+
 module.exports = {
     theme: {
 
@@ -50,34 +63,11 @@ module.exports = {
             },
 
             colors: {
-                purple: {
-                    100: purple["100"],
-                    300: purple["300"],
-                    500: purple["500"],
-                    default: purple["500"],
-                    700: purple["700"],
-                    900: purple["900"],
-                },
-                blue: {
-                    100: blue["100"],
-                    300: blue["300"],
-                    500: blue["500"],
-                    default: blue["500"],
-                    700: blue["700"],
-                    900: blue["900"],
-                },
-                green: {
-                    default: brand.green,
-                    ...defaultTheme.colors.green,
-                },
-                orange: {
-                    default: brand.orange,
-                    ...defaultTheme.colors.orange,
-                },
-                gray: {
-                    default: brand.gray,
-                    ...defaultTheme.colors.gray,
-                },
+                purple,
+                blue,
+                orange,
+                green,
+                gray,
             },
         },
     },

assets/js/main.js

@@ -35,10 +35,6 @@ function generateMiniToc() {
 }
 
 (function ($) {
-    //----------------------------------------
-    // Essentials
-    //----------------------------------------
-    var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 
     // Set up toggle functionality.
     bindToggles(".toggle");
@@ -47,54 +43,9 @@ function generateMiniToc() {
     // Create a mini TOC if desired.
     generateMiniToc();
 
-    // breakpoints
-    var $screen_xxs = 320;
-    var $screen_xs = 480;
-    var $screen_sm = 576;
-    var $screen_md = 768;
-    var $screen_lg = 991;
-    var $screen_xlg = 1200;
-
-    // find out if is touch device
-    function is_touch_device() {
-        return (('ontouchstart' in window)
-            || (navigator.MaxTouchPoints > 0)
-            || (navigator.msMaxTouchPoints > 0));
-        //navigator.msMaxTouchPoints for microsoft IE backwards compatibility
-    }
-
-    // Add slideDown animation to Bootstrap dropdown when expanding.
-    $('.dropdown:not(.main-nav-wrapper-wrapper)').on('show.bs.dropdown', function () {
-        $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
-    });
-
-    // Add slideUp animation to Bootstrap dropdown when collapsing.
-    $('.dropdown:not(.main-nav-wrapper-wrapper)').on('hide.bs.dropdown', function () {
-        $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
-    });
-
-    // mobile dropdown
-    $('.main-header .dropdown').on('show.bs.dropdown', function () {
-        var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-        if (windowWidth < $screen_md) {
-            $('body').addClass('no-scroll');
-        }
-    }).on('hide.bs.dropdown', function () {
-        $('body').removeClass('no-scroll');
-    });
-
-    var originalWindowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-    $(window).resize(function () {
-        var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-
-        //prevent functions from recalculating on scroll on mobile. when scrolling on iphone, the bottom appears/disappears and the browser thinks this is resizing
-        //execute these functions on width resize only
-        if (windowWidth != originalWindowWidth) { //if width resized
-        }
-    });
-
-    // Toggle the mobile menu.
+    // Mobile menu toggle.
     $(".nav-header-toggle").click(function() {
         $(".nav-header-items").toggleClass("hidden");
     });
+
 }(jQuery));

assets/sass/_buttons.scss

@@ -1,15 +1,69 @@
+@import "colors";
+@import "mixins";
+
 .btn {
-    @apply py-2 px-4 rounded text-white uppercase bg-blue;
+    @include transition;
+
+    @apply cursor-pointer text-sm whitespace-no-wrap uppercase py-2 px-4 rounded;
+    @apply bg-blue-600 border-2 border-blue-600 font-bold text-white;
 
     &:hover {
-        @apply bg-blue-300;
+        @apply bg-blue-500 text-white;
     }
 
     &:active {
-        @apply bg-blue-100;
+        @apply bg-blue-500;
     }
 }
 
-.btn-cta {
-    @apply bg-orange;
+.btn-sm {
+    @apply text-xs;
+}
+
+.btn-lg {
+    @apply btn py-3 px-5;
+}
+
+.btn-orange {
+    @apply bg-orange-500 border-orange-600;
+
+    &:hover {
+        @apply bg-orange-600 border-orange-700;
+    }
+}
+
+.btn-purple {
+    @apply bg-purple-500 border-purple-500;
+
+    &:hover {
+        @apply bg-purple-200 border-purple-700;
+    }
+}
+
+.btn-white {
+    @apply bg-white text-gray-900 border-white;
+
+    &:hover {
+        @apply bg-gray-300 text-gray-900;
+    }
+}
+
+.btn-translucent {
+    background-color: rgba($brand-blue, 0.3);
+    border-color: rgba($brand-blue, 0.5);
+
+    &:hover {
+        background-color: rgba($brand-blue, 0.7);
+        border-color: $brand-blue;
+    }
+}
+
+.btn-orange-translucent {
+    background-color: rgba($brand-orange, 0.3);
+    border-color: rgba($brand-orange, 0.5);
+
+    &:hover {
+        background-color: rgba($brand-orange, 0.7);
+        border-color: $brand-orange;
+    }
 }

assets/sass/_colors.scss

@@ -2,27 +2,15 @@ $black: #000;
 $white: #fff;
 
 $brand: (
-    "purple": "#512668",
-    "orange": "#ee975c",
-    "green": "#2fc89f",
-    "blue": "#3ec2f8",
+    "purple": #512668,
+    "orange": #ee975c,
+    "green": #2fc89f,
+    "blue": #5fb2df,
 );
 
 $brand-purple: map-get($brand, "purple");
 $brand-orange: map-get($brand, "orange");
 $brand-green: map-get($brand, "green");
 $brand-blue: map-get($brand, "blue");
 
-$gray: (
-    100: '#f7fafc',
-    200: '#edf2f7',
-    300: '#e2e8f0',
-    400: '#cbd5e0',
-    500: '#a0aec0',
-    600: '#718096',
-    700: '#4a5568',
-    800: '#2d3748',
-    900: '#1a202c',
-);
-
-$border-gray: map-get($gray, 100);
+$border-gray: #f1f1f1;

assets/sass/_fonts.scss

@@ -1,2 +1,2 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,400|Ubuntu:400,700');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,400,700|Ubuntu:400,700');
 @import url('https://fonts.googleapis.com/css?family=PT+Mono');

assets/sass/_hubspot.scss

@@ -0,0 +1,93 @@
+.hs-form {
+    @apply text-sm;
+
+    fieldset {
+        @apply block;
+        margin: 1rem 0 !important;
+
+        &:not(.form-columns-1) > .field:first-child {
+            @apply pr-2;
+        }
+
+        label {
+            @apply block mb-2 font-normal;
+        }
+
+        .hs-input {
+            @apply block;
+            width: 100% !important;
+        }
+
+        .hs-form-required {
+            @apply ml-1 text-red-500;
+        }
+
+        .hs-richtext p {
+            @apply opacity-50 text-xs font-normal my-0;
+
+            a {
+                @apply underline;
+            }
+        }
+
+        input, textarea {
+            @apply border border-gray-300 rounded p-2 bg-white;
+        }
+    }
+
+    input[type="submit"] {
+        @apply btn btn-orange-translucent;
+    }
+
+    .hs-error-msgs {
+        @apply list-none mt-2 p-0 text-red-500 text-xs;
+
+        label {
+            @apply mb-0;
+        }
+    }
+
+    .hs_error_rollup {
+        @apply hidden;
+    }
+
+    &-fg-light {
+        @apply text-gray-100;
+
+        a {
+            @apply text-gray-100;
+        }
+    }
+
+    &-fg-dark {
+        @apply text-gray-700;
+
+        input {
+            &.hs-button {
+                @apply btn;
+            }
+        }
+    }
+
+    &.newsletter {
+        @apply flex items-start;
+
+        label:not(.hs-error-msg) {
+            @apply hidden;
+        }
+
+        input {
+            @apply block py-3 px-4 rounded-l rounded-r-none text-gray-600 w-56;
+
+            &.hs-button {
+                @apply block btn btn-lg btn border-none py-3 px-4 rounded-r rounded-l-none w-auto;
+            }
+        }
+    }
+
+    &.pricing {
+        label {
+            @apply font-normal;
+        }
+    }
+}