njks header

JayBox325 · Sep 26, 2020 · 1a7a2f7 · 1a7a2f7
1 parent dfeadf8
commit 1a7a2f7
Show file tree

Hide file tree

Showing 16 changed files with 35,756 additions and 6,737 deletions.
diff --git a/_gulp/tailwind.config.js b/_gulp/tailwind.config.js
@@ -26,29 +26,64 @@ module.exports = {
 
       // Social
       facebook: {
-        'dark': 'red',
-        'base': '#3b5998',
-        'light': '#3b5998'
+        50: '#F5F7FA',
+        100: '#EBEEF5',
+        200: '#CED6E5',
+        300: '#B1BDD6',
+        400: '#768BB7',
+        500: '#3B5998',
+        600: '#355089',
+        700: '#23355B',
+        800: '#1B2844',
+        900: '#121B2E',
       },
       twitter: {
-        'dark': '#1da1f2',
-        'base': '#1da1f2',
-        'light': '#1da1f2'
+        50: '#F4FAFE',
+        100: '#E8F6FE',
+        200: '#C7E8FC',
+        300: '#A5D9FA',
+        400: '#61BDF6',
+        500: '#1DA1F2',
+        600: '#1A91DA',
+        700: '#116191',
+        800: '#0D486D',
+        900: '#093049',
       },
       pinterest: {
-        'dark': '#bd081c',
-        'base': '#bd081c',
-        'light': '#bd081c'
+        50: '#FCF3F4',
+        100: '#F8E6E8',
+        200: '#EFC1C6',
+        300: '#E59CA4',
+        400: '#D15260',
+        500: '#BD081C',
+        600: '#AA0719',
+        700: '#710511',
+        800: '#55040D',
+        900: '#390208',
       },
       instagram: {
-        'dark': '#c13584',
-        'base': '#c13584',
-        'light': '#c13584'
+        50: '#FCF5F9',
+        100: '#F9EBF3',
+        200: '#F0CDE0',
+        300: '#E6AECE',
+        400: '#D472A9',
+        500: '#C13584',
+        600: '#AE3077',
+        700: '#74204F',
+        800: '#57183B',
+        900: '#3A1028',
       },
-      linkedin: {
-        'dark': '#0077b5',
-        'base': '#0077b5',
-        'light': '#0077b5'
+      linkedi: {
+        50: '#F2F8FB',
+        100: '#E6F1F8',
+        200: '#BFDDED',
+        300: '#99C9E1',
+        400: '#4DA0CB',
+        500: '#0077B5',
+        600: '#006BA3',
+        700: '#00476D',
+        800: '#003651',
+        900: '#002436',
       },
 
       // Generator: https://javisperez.github.io/tailwindcolorshades/#/

diff --git a/_src/html/_layout/header.njk b/_src/html/_layout/header.njk
@@ -1,10 +1,32 @@
 <header class="header">
-    <a href="#">
-        <h1 class="h3">JayPack</h1>
-        {# {% set icon = {
-            symbol: 'ncp-logo',
-            size: 'lg'
-        } %}
-        {% include 'elements/icon.njk' %} #}
-    </a>
-</header>
+	<div class="container header__inner">
+
+
+                {# <div class="grid md:grid-cols-12 gap-6 md:gap-0">
+                    <div class="md:col-span-6 text-white"> #}
+
+
+		<div class="grid grid-cols-4 sm:grid-cols-12 header__grid">
+            <div class="col-span-3 sm:col-span-4">
+                <h1 class="h3">
+    				<a href="/" class="header__logo">JayPack</a>
+                </h1>
+			</div>
+            <div class="col-span-1 sm:col-span-8">
+				<nav class="menu hidden sm:block">
+					<ul class="menu__list">
+						<li class="menu__item">
+							<a class="menu__link is-active" href="#">Menu</a>
+						</li>
+						<li class="menu__item">
+							<a class="menu__link" href="#">Menu</a>
+						</li>
+						<li class="menu__item">
+							<a class="menu__link" href="#">Menu</a>
+						</li>
+					</ul>
+				</nav>
+			</div>
+		</div>
+	</div>
+</header>
diff --git a/_src/html/_macros/macros.njk b/_src/html/_macros/macros.njk
@@ -12,8 +12,8 @@
     <ul class="list list--inline">
         {% for network in networks %}
             <li class="list__item">
-                <a href="{{ network.accountUrl }}" aria-label="{{ network.text }}" class="social-icon bg-{{ network.account|lower }}-base hover:bg-{{ network.account|lower }}-dark">
-                    {{ icon(network.icon, 'sm') }}
+                <a href="{{ network.accountUrl }}" aria-label="{{ network.text }}" class="social-icon bg-{{ network.account|lower }}-500 hover:bg-{{ network.account|lower }}-600">
+                    {{ icon(network.icon, 'xs') }}
                 </a>
             </li>
         {% endfor %}

diff --git a/_src/html/elements/button.njk b/_src/html/elements/button.njk
@@ -0,0 +1,23 @@
+{% import '_macros/macros.njk' as macro %}
+
+{# Content #}
+{% set title = title|default("Read more") %}
+{% set action = action|default(null) %}
+
+{# Options #}
+{% set type = type|default('link') %}
+{% set target = target|default(false) %}
+{% set full = full|default(false) %}
+{% set classes = classes|default('bg-orange-500 hover:bg-orange-600 text-white') %}
+
+{% if type == 'link' or type == 'download' %}
+    {% set download = true %}
+    {% set type = 'link' %}
+{% endif %}
+
+{% switch type %}
+	{% case 'button' %}
+        <button {{ action }} class="btn {{ classes }}{% if full %} btn--full{% endif %}">{{ title }}</button>
+    {% case 'link' %}
+        <a href="{{ action }}" {{ macro.external(target) }} class="btn {{ classes }}{% if full %} btn--full{% endif %}" {% if download %}download{% endif %}>{{ title }}</a>
+{% endswitch %}
diff --git a/_src/html/pages/index.njk b/_src/html/pages/index.njk
@@ -7,7 +7,12 @@
                 <h1>Welcome to {{ siteDetails.title }}</h1>
                 <p>A front end scaffolding framework for static projects using Nunjucks or for CraftCMS sites with JayCraft.</p>
             </div>
-            <button class="btn btn--secondary">Button</button>
+            <div class="mt-6">
+                {% set button = {
+                    action: 'https://google.com'
+                } %}
+                {% include 'elements/button.njk' %}
+            </div>
         </div>
     </section>
 {% endblock %}
diff --git a/_src/styles/_core/variables/colors.scss b/_src/styles/_core/variables/colors.scss
@@ -27,8 +27,8 @@ $colors: (
 );
 
 $social: (
-    facebook:       theme('colors.facebook.base'),
-    twitter:        theme('colors.twitter.base'),
-    instagram:      theme('colors.instagram.base'),
-    pinterest:      theme('colors.pinterest.base'),
+    facebook:       theme('colors.facebook.500'),
+    twitter:        theme('colors.twitter.500'),
+    instagram:      theme('colors.instagram.500'),
+    pinterest:      theme('colors.pinterest.500'),
 );
diff --git a/_src/styles/base/menu.scss b/_src/styles/base/menu.scss
@@ -1,26 +1,20 @@
-/*
-    MOBILE MENU
-*/
-
-// @media screen and (max-width: 599px) {
-    .menu {
-        @apply fixed shadow top-0 right-0 h-screen w-screen z-40 p-4 bg-blue-300 invisible;
-
-        &__list {
-            @apply list-none;
-        }
-
-        &__item {
-            @apply mb-2
-        }
+.menu {
+    &__list {
+        list-style-type: none;
+        text-align: right;
+    }
+    &__item {
+        display: inline-block;
 
-        &__link {
-            @apply font-bold leading-none text-2xl;
+        &:not(:first-child) {
+            margin-left: .15rem;
         }
     }
-// }
-
-
-// @media screen and (min-width: 600px) {
-
-// }
+    &__link {
+        height: 3rem;
+        padding: 0 1.5rem;
+        border-radius: 1.5rem;
+        display: inline-flex;
+        align-items: center;
+    }
+}
diff --git a/_src/styles/elements/button.scss b/_src/styles/elements/button.scss
@@ -1,6 +1,21 @@
 .btn {
-    height: 4rem;
-    border-radius: 50%;
+    height: 3rem;
+    border-radius: 1.5em;
+    padding: 0 1.5rem;
+    display: inline-flex;
+    align-items: center;
+    font-weight: bold;
+    transition: color .2s ease-in-out, background .2s ease-in-out;
+
+    @screen sm {
+        padding: 0 2rem;
+    }
+
+    @screen lg {
+        padding: 0 2.5rem;
+        height: 3.5rem;
+        border-radius: 1.75rem;
+    }
 
     @each $name, $hex in $colors {
         &--#{$name} {

diff --git a/_src/styles/elements/social-icon.scss b/_src/styles/elements/social-icon.scss
@@ -14,8 +14,8 @@
     }
 
     @screen md {
-        height: 3.25rem;
-        width: 3.25rem;
+        height: 2.8rem;
+        width: 2.8rem;
     }
 
     @each $name, $hex in $social {

diff --git a/_src/styles/layout/container.scss b/_src/styles/layout/container.scss
@@ -3,7 +3,7 @@
     min-width: 300px;
 
     @screen xs {
-        @apply max-w-6xl;
+        max-width: 1400px;
     }
 
     @screen md {
@@ -13,4 +13,8 @@
     @screen lg {
         @apply px-10;
     }
+
+    @screen xl {
+        @apply px-0;
+    }
 }
diff --git a/_src/styles/layout/header.scss b/_src/styles/layout/header.scss
@@ -1,7 +1,45 @@
 .header {
-    @apply relative shadow w-full h-16 bg-white;
+    height: 4rem;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    z-index: 900;
+    left: 0;
+    transition: height .2s ease-in-out;
+
+    @screen md {
+        height: 6rem;
+    }
 
     @screen lg {
-        @apply h-24;
+        height: 8rem;
+    }
+
+    @screen xl {
+        height: 10rem;
+    }
+
+    &:before {
+        @apply bg-white;
+        content: '';
+        position: absolute;
+        z-index: 1;
+        width: calc(100% + 4rem);
+        height: 100%;
+        top: 0;
+        left: 0;
+        transform: translateX(-2rem);
+        box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.75);
+    }
+
+    &__inner {
+        position: relative;
+        z-index: 2;
+        height: 100%;
+    }
+
+    &__grid {
+        height: 100%;
+        align-items: center;
     }
-}
+}
diff --git a/_src/styles/styles.scss b/_src/styles/styles.scss
@@ -1,4 +1,7 @@
 
+// Tailwind
+@tailwind base;
+// @tailwind components;
 
 // Core
 // @import '_core/_index';
@@ -22,7 +25,5 @@
 // Elements
 @import 'elements/**/*';
 
-// Tailwind
-@tailwind base;
-@tailwind components;
+
 @tailwind utilities;
diff --git a/_src/styles/typography/base.scss b/_src/styles/typography/base.scss
@@ -28,11 +28,13 @@ body {
     }
 
     a {
-        @apply text-teal-800;
+        @apply text-orange-500;
         border-bottom: 1px solid;
+        border-spacing: unset;
+        transition: color .2s ease-in-out;
 
         &:hover {
-            @apply bg-blue-200;
+            @apply text-orange-600;
         }
     }
 }
diff --git a/_src/styles/typography/headings.scss b/_src/styles/typography/headings.scss
@@ -1,4 +1,4 @@
-h1,.h1 {
+h1, .h1 {
     @apply font-bold leading-none text-5xl font-sans;
 
     @screen sm {