drupal-pattern-lab · sghoweri · May 5, 2017 · May 4, 2017 · May 4, 2017 · May 4, 2017
diff --git a/_config.yml b/_config.yml
@@ -8,19 +8,30 @@ name: Drupal Pattern Lab
 
 
 # Short bio or description (displayed in the header)
-description: Curated resources on integrating Pattern Lab with Drupal 8.
+description: Curated resources for integrating Pattern Lab with Drupal 8.
 
 
 # URL of your avatar or profile pic (you could use your GitHub profile pic)
 # avatar: https://raw.githubusercontent.com/drupal-pattern-lab/drupal-pattern-lab.github.io/master/images/drupal-pl-logo--grayscale.png
-#theme: jekyll-theme-midnight
-
-
-# Includes an icon in the footer for each username you enter
-#footer-links:
-#  github: drupal-pattern-lab/drupal-pattern-lab.github.io
-#  slack:
-#
+#theme: jekyll-theme-cayman
+
+
+sass:
+  sass_dir: styles
+
+navItems:
+  - blog:
+    text: Blog
+    url: /blog
+  - github:
+    text: Github Repo
+    url: https://github.com/drupal-pattern-lab/drupal-pattern-lab.github.io
+  - slack:
+    text: Slack Channel
+    url: https://drupaltwig-slack.herokuapp.com
+  - roadmap:
+    text: Roadmap
+    url: https://github.com/drupal-pattern-lab/roadmap/projects/1
 
 
 # Enter your Google Analytics web tracking code (e.g. UA-2110908-2) to activate tracking

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -5,15 +5,57 @@
     <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.name }}</title>
     <meta name="description" content="{{ site.description }}">
     <meta name="viewport" content="width=device-width,initial-scale=1">
+
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="{{ '/styles/styles.drupal-pattern-lab.css?v=' | append: site.github.build_revision | relative_url }}">
   </head>
   <body>
-    <div class="site">
-      <header class="site__header">
-        {% include header.html %}
-      </header>
-      <div class="site__content">
-        {{ content }}
+
+    <header class="c-global-header">
+      <div class="o-flag c-global-header__intro">
+        <div class="o-flag__image">
+          <a href="/" alt="Home">
+            <img src="{{ '/assets/images/logo--inverted.svg' | relative_url }}" alt="Pattern Lab logo combined with the Drupal Drop" width="100">
+          </a>
+        </div>
+
+        <div class="o-flag__body c-global-header__intro-text">
+          <h1 class="c-project-name">{{ site.name | default: site.github.repository_name }}</h1>
+        </div>
       </div>
-    </div>
+
+      <h2 class="c-project-tagline">{{ site.description | default: site.github.project_tagline }}</h2>
+
+
+      {% for nav_item in site.navItems %}
+        <a href="{{ nav_item.url }}" class="c-btn">{{ nav_item.text }}</a>
+      {% endfor %}
+    </header>
+
+
+
+    <section class="c-page">
+      {{ content }}
+
+      <footer class="c-global-footer">
+        {% if site.github.is_project_page %}
+          <span class="c-global-footer__owner">
+            <a href="{{ site.github.repository_url }}">{{ site.github.repository_name }}</a> is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a>.</span>
+        {% endif %}
+        <span class="c-global-footer__credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
+      </footer>
+    </section>
+
+    {% if site.google_analytics %}
+      <script type="text/javascript">
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+        ga('create', '{{ site.google_analytics }}', 'auto');
+        ga('send', 'pageview');
+      </script>
+    {% endif %}
   </body>
+
 </html>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -1,7 +1,7 @@
 ---
 layout: default
 ---
-<article>
+<article class="c-article">
   <header>
     {% if page.title %}<h2>{{ page.title }}</h2>{% endif %}
     <ul>

diff --git a/assets/images/logo--inverted.svg b/assets/images/logo--inverted.svg
diff --git a/assets/images/logo.svg b/assets/images/logo.svg
diff --git a/styles/01-settings/_settings.variables.scss b/styles/01-settings/_settings.variables.scss
@@ -0,0 +1,27 @@
+/* ------------------------------------ *\
+  #SETTINGS - VARIABLES
+\* ------------------------------------ */
+
+// Breakpoints
+$large-breakpoint: 64em !default;
+$medium-breakpoint: 42em !default;
+
+// Headers
+$header-heading-color: #fff !default;
+$header-bg-color: #159957 !default;
+$header-bg-color-secondary: #155799 !default;
+
+// Text
+$section-headings-color: #159957 !default;
+$body-text-color: #606c71 !default;
+$body-link-color: #1e6bb8 !default;
+$blockquote-text-color: #819198 !default;
+
+// Code
+$code-bg-color: #f3f6fa !default;
+$code-text-color: #567482 !default;
+
+// Borders
+$border-color: #dce6f0 !default;
+$table-border-color: #e9ebec !default;
+$hr-border-color: #eff0f1 !default;
diff --git a/styles/02-tools/_tools.mixins.scss b/styles/02-tools/_tools.mixins.scss
@@ -0,0 +1,21 @@
+/* ------------------------------------ *\
+  #TOOLS - MIXINS
+\* ------------------------------------ */
+
+@mixin large {
+  @media screen and (min-width: #{$large-breakpoint}) {
+    @content;
+  }
+}
+
+@mixin medium {
+  @media screen and (min-width: #{$medium-breakpoint}) and (max-width: #{$large-breakpoint}) {
+    @content;
+  }
+}
+
+@mixin small {
+  @media screen and (max-width: #{$medium-breakpoint}) {
+    @content;
+  }
+}
diff --git a/styles/03-generic/_generic.box-sizing.scss b/styles/03-generic/_generic.box-sizing.scss
@@ -0,0 +1,9 @@
+/* ------------------------------------ *\
+  #GENERIC - BOX SIZING
+\* ------------------------------------ */
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}