From 7ec35be08c7f025c727fb8d897ecab7b5f06d771 Mon Sep 17 00:00:00 2001
From: Max Antonucci <maxx1128@gmail.com>
Date: Wed, 25 Jul 2018 14:33:01 -0400
Subject: [PATCH] WIP

---
 404/index.md                                  |   7 ++
 _data/mentors.yml                             |  23 ++++
 _data/menu.yml                                |   9 +-
 _includes/footer.html                         |  49 ++++----
 _includes/head.html                           |  21 ++--
 _includes/nav.html                            |  31 +++++
 _layouts/default.html                         |  20 ++-
 _layouts/full.html                            |   6 +
 _layouts/page.html                            |  25 ++--
 about/index.md                                |  32 +++++
 contact/index.md                              |  20 +++
 events/index.md                               |  33 +++++
 img/logo.svg                                  | 116 ++++++++++++++++++
 index.html                                    |  26 ++--
 js/components/meetup-event-card.html          |  46 +++++--
 js/components/meetup-events.html              |   5 +-
 mentors/index.md                              |  22 ++++
 .../scss_files/_elements/_native-text.scss    |  24 ++++
 webpack/scss_files/_generic/_global.scss      |  10 ++
 webpack/scss_files/_objects/_event-cards.scss |   5 +
 webpack/scss_files/_objects/_max-width.scss   |   5 +
 webpack/scss_files/_objects/_skip-link.scss   |   9 ++
 webpack/scss_files/main.scss                  |  41 ++-----
 23 files changed, 453 insertions(+), 132 deletions(-)
 create mode 100644 404/index.md
 create mode 100644 _data/mentors.yml
 create mode 100644 _includes/nav.html
 create mode 100644 _layouts/full.html
 create mode 100644 about/index.md
 create mode 100644 contact/index.md
 create mode 100644 events/index.md
 create mode 100644 img/logo.svg
 create mode 100644 mentors/index.md
 create mode 100644 webpack/scss_files/_elements/_native-text.scss
 create mode 100644 webpack/scss_files/_generic/_global.scss
 create mode 100644 webpack/scss_files/_objects/_event-cards.scss
 create mode 100644 webpack/scss_files/_objects/_max-width.scss
 create mode 100644 webpack/scss_files/_objects/_skip-link.scss

diff --git a/404/index.md b/404/index.md
new file mode 100644
index 0000000..bd085ed
--- /dev/null
+++ b/404/index.md
@@ -0,0 +1,7 @@
+---
+layout: page
+title: 404
+permalink: /404.html
+---
+
+Please wait as an elite team of dogs playing Tetris pause their games to redirect you.
diff --git a/_data/mentors.yml b/_data/mentors.yml
new file mode 100644
index 0000000..f3df9ee
--- /dev/null
+++ b/_data/mentors.yml
@@ -0,0 +1,23 @@
+- name: Fake Name 1
+  company: Fake Company 1
+  focus: Back-end Development
+  languages: CSS, JavaScript, Ruby, Rust
+  description: Deserunt quis enim dolore cupidatat laboris elit cupidatat cillum minim pariatur fugiat nisi dolore. Incididunt minim adipisicing Lorem tempor cupidatat laborum ut proident tempor veniam excepteur.
+
+- name: Fake Name 2
+  company: Fake Company 2
+  focus: Back-end Development
+  languages: CSS, JavaScript, Ruby, Rust
+  description: Deserunt quis enim dolore cupidatat laboris elit cupidatat cillum minim pariatur fugiat nisi dolore. Incididunt minim adipisicing Lorem tempor cupidatat laborum ut proident tempor veniam excepteur.
+
+- name: Fake Name 3
+  company: Fake Company 3
+  focus: Back-end Development
+  languages: CSS, JavaScript, Ruby, Rust
+  description: Deserunt quis enim dolore cupidatat laboris elit cupidatat cillum minim pariatur fugiat nisi dolore. Incididunt minim adipisicing Lorem tempor cupidatat laborum ut proident tempor veniam excepteur.
+
+- name: Fake Name 4
+  company: Fake Company 4
+  focus: Back-end Development
+  languages: CSS, JavaScript, Ruby, Rust
+  description: Deserunt quis enim dolore cupidatat laboris elit cupidatat cillum minim pariatur fugiat nisi dolore. Incididunt minim adipisicing Lorem tempor cupidatat laborum ut proident tempor veniam excepteur.
diff --git a/_data/menu.yml b/_data/menu.yml
index 16b4614..6554915 100644
--- a/_data/menu.yml
+++ b/_data/menu.yml
@@ -1,11 +1,8 @@
 - name: About
   link: '/about/'
 
-- name: Blog
-  link: '/blog/'
-
-- name: Developers
-  link: '/developers'
+- name: Events
+  link: '/events/'
 
 - name: Contact
-  link: 'http://groups.google.com/forum/?fromgroups#!forum/newhavenio'
+  link: '/contact/'
diff --git a/_includes/footer.html b/_includes/footer.html
index 831c5d6..f15e1a5 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,31 +1,24 @@
-<footer class="site-footer">
+<footer class="mt-auto bg-teal-darker text-grey-lighter shadow-lg">
+  <div class="nh-o-maxWidth flex flex-col md:flex-row">
+    <p class="md:w-2/3 pb-4 text-teal-lighter leading-normal">
+      {{ site.description }}
+    </p>
 
-  <div class="container-fluid">
-    <div class="row">
-      
-      <div class="footer-links col-sm-6 col-md-8">
-          {% for menu in site.data.menu %}
-            <a href="{{ menu.link | prepend: site.baseurl }}">
-              {{ menu.name }}
-            </a>{% if forloop.last == false %} / {% endif %}
-        {% endfor %}
-      </div>
-
-      <div class="col-sm-6 col-md-4">
-        <a href="{{ menu.link | prepend: site.baseurl }}">
-          <h4 class="footer-heading">
-            {{ site.title }}
-          </h4>
-        </a>
-      </div>
-    </div>
+    <ul class="list-reset md:ml-auto">
+      {% for menu in site.data.menu %}
+        {% if page.url == menu.link %}
+          {% assign link = '#main' %}
+          {% assign active_classes = 'font-semibold' %}
+        {% else %}
+          {% assign link = menu.link | prepend: site.baseurl %}
+          {% assign active_classes = 'text-sm' %}
+        {% endif %}
+        <li>
+          <a class="inline-block pb-2 text-teal-lighter {{ active_classes }}" href="{{ link }}">
+            {{ menu.name }}
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
   </div>
-
-  <script src="{{ "/js/modernizr.min.js" | prepend: site.baseurl }}"></script>
-  <script>
-    // Makes all blog links open in a new tab
-    $('article.post a').each(function() {
-      $(this).attr('target', '_blank');
-    });
-  </script>
 </footer>
diff --git a/_includes/head.html b/_includes/head.html
index 18a80d2..2507007 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -16,18 +16,23 @@
   <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
   <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
 
-  <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
-  <link href='https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
-  <script type="text/javascript" src="{{ '/js/bundle.js' | prepend: site.baseurl }}" charset="utf8" ></script>
-  <script src="{{ "/js/components/meetup-utils.js" | prepend: site.baseurl }}"></script>
+  <style type="text/css">
+    {% include main.css %}
+  </style>
+
+  {% if page.meetup_events %}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
+    <script type="text/javascript" src="{{ '/js/bundle.js' | prepend: site.baseurl }}" charset="utf8" ></script>
+    <script src="{{ "/js/components/meetup-utils.js" | prepend: site.baseurl }}"></script>
+    <link rel="import" href="{{ "/js/components/meetup-events.html" | prepend: site.baseurl }}">
+    <link rel="import" href="{{ "/js/components/meetup-event-card.html" | prepend: site.baseurl }}">
+  {% endif %}
 
   {% if jekyll.environment == 'production' %}
-  {% include analytics.html %}
+    {% include analytics.html %}
   {% endif %}
-  
+
 </head>
diff --git a/_includes/nav.html b/_includes/nav.html
new file mode 100644
index 0000000..fd05b1d
--- /dev/null
+++ b/_includes/nav.html
@@ -0,0 +1,31 @@
+{% if page.url == '/' %}
+  {% assign home_link = '#main' %}
+{% else %}
+  {% assign home_link = '/' | site.baseurl %}
+{% endif %}
+
+<header class="border-orange border-t-3 border-b-3 bg-grey-lightest shadow-md" role="banner">
+  <div class="nh-o-maxWidth py-0 flex items-center justify-between">
+    <a href="{{ home_link }}" class="inline-flex pr-8">
+      <img class="w-16" src="/img/logo.svg" alt="NewHaven.IO homepage">
+    </a>
+    <nav>
+      <ul class="list-reset flex flex-wrap items-center justify-end">
+        {% for menu in site.data.menu %}
+          {% if page.url == menu.link %}
+            {% assign link = '#main' %}
+            {% assign active_classes = 'font-semibold text-base' %}
+          {% else %}
+            {% assign link = menu.link | prepend: site.baseurl %}
+            {% assign active_classes = '' %}
+          {% endif %}
+          <li>
+            <a class="inline-block p-3 md:p-4 {{ active_classes }}" href="{{ link }}">
+              {{ menu.name }}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    </nav>
+  </div>
+</header>
diff --git a/_layouts/default.html b/_layouts/default.html
index aad2613..8ee5c3c 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,20 +1,18 @@
 <!DOCTYPE html>
-<html>
-
+<html lang="en">
   {% include head.html %}
 
-  <body>
+  <body class="min-h-screen flex flex-col mt-auto">
+    <a aria-label="Skip Link" class="skip-link" href="#main">
+      Skip to Content
+    </a>
 
-    {% include header.html %}
+    {% include nav.html %}
 
-    <div class="wrapper">
-      <div class="page-content {% if page.container == true %}container-fluid{% endif %}">
-        {{ content }}
-      </div>
-    </div>
+    <main id="main" class="flex-1 {{ page.container_classes }} {% if page.container == false %}p-4{% endif %}">
+      {{ content }}
+    </main>
 
     {% include footer.html %}
-
   </body>
-
 </html>
diff --git a/_layouts/full.html b/_layouts/full.html
new file mode 100644
index 0000000..3c769eb
--- /dev/null
+++ b/_layouts/full.html
@@ -0,0 +1,6 @@
+---
+layout: default
+---
+<article class="nh-o-maxWidth--full native-text">
+	{{ content }}
+</article>
diff --git a/_layouts/page.html b/_layouts/page.html
index c3a2191..ae3e729 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -1,19 +1,12 @@
 ---
 layout: default
 ---
-
-<div class="wrapper">
-    <div class="page-content container-fluid">
-		<div class="panel panel-default">
-
-		  <div class="panel-header">
-		    <h1 class="page-title">{{ page.title }}</h1>
-		  </div>
-
-		  <div class="panel-body">
-		    {{ content }}
-		  </div>
-
-		</div>
-	</div>
-</div>
+<header class="pt-4">
+	<h1 class="nh-o-maxWidth {% if page.fullWidth %}nh-o-maxWidth--full{% endif %}">
+		{{ page.title }}
+	</h1>
+</header>
+
+<article class="nh-o-maxWidth {% if page.fullWidth %}nh-o-maxWidth--full{% endif %} native-text">
+	{{ content }}
+</article>
diff --git a/about/index.md b/about/index.md
new file mode 100644
index 0000000..88bc814
--- /dev/null
+++ b/about/index.md
@@ -0,0 +1,32 @@
+---
+layout: page
+title: About
+---
+
+You may be peripherally aware of NewHaven.io but not really understand what the group is or why it exists. In a nutshell, we're a nonprofit organization that serves the local tech community. But what does that actually _mean?_
+
+## Communication and organization in the community
+
+NewHaven.io leverages some well-known tools to achieve its goal of connecting the local tech community. In addition to [our own website](http://newhaven.io/), we make extensive use of [Meetup](http://www.meetup.com/newhavenio/) and [Slack](https://newhavenio-slackin.herokuapp.com/). [Meetup](http://www.meetup.com/newhavenio/) is used to organize and schedule in-person gatherings, while Slack facilitates online communication and collaboration. Many people first discover NewHaven.io through [Meetup](http://www.meetup.com/newhavenio/) by searching locally for events highlighting technologies of interest to them. Slack is a natural extension of the physical meetings, allowing the conversation to continue fluidly and asynchronously long after the lights have been turned off and the doors have closed.
+
+Both our [Meetup](http://www.meetup.com/newhavenio/) and Slack are structured to allow for tech- or topic-specific engagement. Anyone from novice to expert can self-select areas that interest them and dive in as shallow or as deep as they choose. This includes proposing meetings where one can either present to a group as an expert or convene a learning session as a novice. We encourage both equally!
+
+### Code of Conduct
+
+All members of NewHaven.io are expected to abide by our code of coduct found [here.](https://github.com/newhavenio/code-of-conduct/blob/master/README.md)
+
+## Aggregation of local interest groups
+
+Technology is a funny thing. More importantly, humans are funny creatures. We obsess over bright shiny things and then when we lose interest in them we move on to the next one. One could easily argue that along with continuous improvement, it is the inherently ephemeral nature of our collective interest in different technologies that drives the cycle of obsolescence and change.
+
+As geeks self-organize around their preferred technologies, related interest groups coalesce, grow, stagnate and die. These social constructs change as the technologies change. What stays the same is the underlying bedrock of people in the tech community. This foundation layer remains constant even if the elements which comprise it are constantly rearranging themselves into new configurations. It may slowly expand or contract as people move into and out of the local area, but it is reasonably stable. The people that make up this foundation are who NewHaven.io serves, and we're in it for the long haul.
+
+## Partnerships in the community
+
+Local companies and educational institutions recognize the importance of NewHaven.io in maintaining and growing a thriving tech community. A healthy tech community makes New Haven more attractive to prospective students and IT professionals, which has a positive impact beyond the realm of technology. Sponsorship of NewHaven.io is one way organizations can contribute to our efforts toward achieving these outcomes. We're also interested in cross-promotional opportunities in the community.
+
+We regularly collaborate on events with local organizations such as [ProductCamp Connecticut](http://www.pcampct.org/), [A100](http://indie-soft.com/a100/), [Independent Software](http://indie-soft.com/), [Yale University](http://yale.edu), [The Grove](http://grovenewhaven.com/), [Continuity](http://continuity.net), [Digital Surgeons](https://www.digitalsurgeons.com/), [SeeClickFix](http://seeclickfix.com), and [Core Informatics](http://www.coreinformatics.com/). Often times the value that NewHaven.io brings to these collaborations is our "human infrastructure," other times it's the subject matter expertise of our members. Our nonprofit financial apparatus can also be leveraged for management of larger-scale community events such as conferences. We're even exploring some exciting new event frontiers such as the blending of tech and fitness.
+
+## How will _you_ get involved?
+
+We welcome everyone into NewHaven.io with open arms. Keeping this engine running requires sustained effort, so we're always on the lookout for help. There are numerous opportunities for contributing based on your own personal talents and areas of interest, so [pop into our `#organizing` Slack channel](https://newhavenio-slackin.herokuapp.com/) and introduce yourself today!
diff --git a/contact/index.md b/contact/index.md
new file mode 100644
index 0000000..9cc8632
--- /dev/null
+++ b/contact/index.md
@@ -0,0 +1,20 @@
+---
+layout: page
+title: Contact
+---
+
+Want to get to know NewHaven.IO's members better? There's many ways you can contact us to learn more!
+
+## Chat With Us On Slack!
+
+[You can meet and chat with our community through our Slack!](https://newhavenio-slackin.herokuapp.com/) We have channels for job postings, discussing programming languages, giving career and tech advice, and some random topics too. Many members frequently visit and post here, so it's a great way to introduce yourself and see what we're all about.
+
+<div aria-label="Click here to request an invite to the NewHaven.IO slack by submitting your email address."><script async defer src="https://newhavenio-slackin.herokuapp.com/slackin.js?large"></script></div>
+
+## Check Out Upcoming Meetups!
+
+You can [read more about our different types of meetups, and which ones are next](/events/), on our Events page. You can also [visit our Meetup.com group](http://www.meetup.com/newhavenio/) to reserve a spot at one.
+
+## Tweet us at @newhavenio!
+
+You can [find us on twitter at @newhavenio](http://www.twitter.com/newhavenio). We tweet useful articles, updates about upcoming meetups, and other info related to tech and New Haven.
diff --git a/events/index.md b/events/index.md
new file mode 100644
index 0000000..1d28ee3
--- /dev/null
+++ b/events/index.md
@@ -0,0 +1,33 @@
+---
+layout: page
+title: Events
+fullWidth: true
+
+meetup_events: true
+---
+
+<ul>
+  <li>
+    <strong>Hack Nights</strong> - Ut elit eu eu qui sit nisi adipisicing quis esse nisi et proident do.
+  </li>
+  <li>
+    <strong>Workshops</strong> - Ut elit eu eu qui sit nisi adipisicing quis esse nisi et proident do.
+  </li>
+  <li>
+    <strong>Social Nights</strong> - Aliqua culpa sit sit enim et Lorem excepteur ex consectetur dolor cillum magna incididunt labore.
+  </li>
+  <li>
+    <strong>Talks</strong> - Amet in Lorem laboris ea labore consequat.
+  </li>
+  <li>
+    <strong>Study Halls</strong> - Esse aliqua excepteur pariatur id laboris eiusmod sit sit ipsum adipisicing sunt sint.
+  </li>
+</ul>
+
+<section id="meetup-events">
+  <meetup-events
+    id="events"
+    class="md:flex md:flex-wrap md:p-2"
+    max-events="5">
+  </meetup-events>
+</section>
diff --git a/img/logo.svg b/img/logo.svg
new file mode 100644
index 0000000..25d7934
--- /dev/null
+++ b/img/logo.svg
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   viewBox="0 0 225 225"
+   height="225"
+   width="225"
+   id="svg2"
+   version="1.1">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6" />
+  <image
+     y="0"
+     x="0"
+     id="image10"
+     xlink:href="data:image/png;base64,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
+"
+     preserveAspectRatio="none"
+     height="225"
+     width="225" />
+</svg>
diff --git a/index.html b/index.html
index 6ce1555..0cfdb7e 100644
--- a/index.html
+++ b/index.html
@@ -1,20 +1,14 @@
 ---
 layout: default
-container: false
+title: Homepage
+container_classes: "flex"
 ---
-
-<link rel="import" href="{{ "/js/components/meetup-events.html" | prepend: site.baseurl }}">
-<link rel="import" href="{{ "/js/components/meetup-event-card.html" | prepend: site.baseurl }}">
-
-<div class="home">
-
-{% include masthead.html %}
-
-<section id="meetup-events" class="container-fluid">
-    <meetup-events
-        id="events"
-        max-events="5">
-    </meetup-events>
-</section>
-
+<div class="p-4 max-w-lg mx-auto flex-1 flex flex-col items-center justify-center">
+  <h1 class="mb-4">
+    {{ site.title }}
+  </h1>
+
+  <h3>
+    {{ site.description }}
+  </h3>
 </div>
diff --git a/js/components/meetup-event-card.html b/js/components/meetup-event-card.html
index ba41771..7bd0df9 100644
--- a/js/components/meetup-event-card.html
+++ b/js/components/meetup-event-card.html
@@ -1,19 +1,41 @@
 <template id="meetup-event-card-template" type="x-tmpl-mustache">
-  <article class="panel panel-default">
-    <div class="panel-heading">
-      <a href="{{event_url}}" target="_blank">
-        <h3>{{name}}</h3>
-      </a>
+  <article class="h-full flex flex-col -mx-4 md:-mx-0 mb-6 rounded bg-grey-lightest shadow-lg">
+    <div class="p-4 bg-teal-dark">
+      <h2 class="no-marg">
+        <a class="text-white" href="{{event_url}}" target="_blank">
+          {{name}}
+        </a>
+      </h2>
     </div>
-    <div class="panel-body">
-      <div class="col-sm-8">
-        <p>{{{description}}}</p>
+
+    <div class="px-4 pt-4 md:mb-auto">
+      {{{description}}}
+    </div>
+
+    <dl class="p-4 md:mt-auto bg-grey-lighter border-black border-t">
+      <div class="flex">
+        <dt class="font-bold">WHEN:</dt>
+        <dd class="ml-2">{{formattedDate}}</dd>
+      </div>
+
+      <div class="flex">
+        <dt class="font-bold">WHERE:</dt>
+        <dd class="ml-2">
+          {{#venue.name}}
+            <a href="{{venueLink}}" target="_blank">{{venue.name}}</a>
+          {{/venue.name}}
+
+          {{^venue.name}}
+            To Be Decided
+          {{/venue.name}}
+        </dd>
       </div>
-      <div class="col-sm-4"><b>WHEN:</b> {{formattedDate}}
-        <br><b>WHERE:</b> <a href="{{venueLink}}" target="_blank">{{venue.name}}</a>
-        <br><b>WHO:</b> {{yes_rsvp_count}} already going
+
+      <div class="flex">
+        <dt class="font-bold">WHO:</dt>
+        <dd class="ml-2">{{yes_rsvp_count}} already going</dd>
       </div>
-    </div>
+    </dl>
   </article>
 </template>
 
diff --git a/js/components/meetup-events.html b/js/components/meetup-events.html
index 1647787..eb91c46 100644
--- a/js/components/meetup-events.html
+++ b/js/components/meetup-events.html
@@ -1,11 +1,11 @@
 <template id="meetup-events-error-template" type="x-tmpl-mustache">
-  <div class="alert alert-danger">
+  <div>
     {{message}}
   </div>
 </template>
 
 <template id="meetup-events-loading-template" type="x-tmpl-mustache">
-  <div class="alert alert-info">
+  <div>
     Loading events&hellip;
   </div>
 </template>
@@ -47,6 +47,7 @@
           this.innerHTML = '';
           events.forEach(function (eventData) {
             var eventCard = document.createElement('meetup-event-card');
+            eventCard.className = 'nh-o-eventCard';
             eventCard.data = eventData;
             this.appendChild(eventCard);
           }, this);
diff --git a/mentors/index.md b/mentors/index.md
new file mode 100644
index 0000000..7035ba5
--- /dev/null
+++ b/mentors/index.md
@@ -0,0 +1,22 @@
+---
+layout: page
+title: Mentors
+---
+
+Occaecat dolore ullamco qui magna proident pariatur laboris duis in. Et laboris consequat do minim laborum labore nisi reprehenderit in adipisicing. Cillum irure labore exercitation reprehenderit ea quis anim consectetur. Labore minim duis laborum minim do sunt.
+
+Velit laboris tempor est laboris est Lorem dolore proident pariatur incididunt est in officia. Officia consequat reprehenderit velit fugiat ex aute exercitation proident laboris consectetur. Id deserunt sit deserunt mollit incididunt excepteur labore officia esse nisi occaecat cillum. Aliqua fugiat occaecat nisi aliquip consectetur sint culpa esse cupidatat nisi anim officia deserunt laborum. Commodo commodo sit fugiat ea do proident commodo magna enim in. Ipsum voluptate magna consequat occaecat commodo adipisicing dolor.
+
+<ul>
+  {% for mentor in site.data.mentors %}
+    <li>
+      Name: {{ mentor.name }}
+      <ul>
+        <li>Company: {{ mentor.company }}</li>
+        <li>Focus: {{ mentor.focus }}</li>
+        <li>Languages: {{ mentor.languages }}</li>
+        <li>Description: {{ mentor.description }}</li>
+      </ul>
+    </li>
+  {% endfor %}
+</ul>
diff --git a/webpack/scss_files/_elements/_native-text.scss b/webpack/scss_files/_elements/_native-text.scss
new file mode 100644
index 0000000..0137491
--- /dev/null
+++ b/webpack/scss_files/_elements/_native-text.scss
@@ -0,0 +1,24 @@
+.native-text {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    &:not(.no-marg) {
+      @apply .mt-8 .mb-4 .leading-tight;
+    }
+  }
+
+  p,
+  ol,
+  ul,
+  small,
+  tiny {
+    @apply .mb-4 .leading-normal;
+  }
+}
+
+a {
+  @apply .text-orange-dark;
+}
diff --git a/webpack/scss_files/_generic/_global.scss b/webpack/scss_files/_generic/_global.scss
new file mode 100644
index 0000000..f26c064
--- /dev/null
+++ b/webpack/scss_files/_generic/_global.scss
@@ -0,0 +1,10 @@
+html {
+  @apply .text-grey-darkest .bg-white;
+
+  font-size: 90%;
+
+  @media (min-width: 31.25rem) { font-size: 95%; }
+  @media (min-width: 50rem) { font-size: 105%; }
+  @media (min-width: 75rem) { font-size: 120%; }
+  @media (min-width: 85rem) { font-size: 125%; }
+}
diff --git a/webpack/scss_files/_objects/_event-cards.scss b/webpack/scss_files/_objects/_event-cards.scss
new file mode 100644
index 0000000..900dbd8
--- /dev/null
+++ b/webpack/scss_files/_objects/_event-cards.scss
@@ -0,0 +1,5 @@
+.nh-o-eventCard {
+  flex: 1 1 20rem;
+
+  @screen md { @apply .p-2; }
+}
diff --git a/webpack/scss_files/_objects/_max-width.scss b/webpack/scss_files/_objects/_max-width.scss
new file mode 100644
index 0000000..48b8c7e
--- /dev/null
+++ b/webpack/scss_files/_objects/_max-width.scss
@@ -0,0 +1,5 @@
+.nh-o-maxWidth {
+  @apply .block .max-w-md .mx-auto .p-4;
+}
+
+.nh-o-maxWidth--full { @apply .max-w-xl; }
diff --git a/webpack/scss_files/_objects/_skip-link.scss b/webpack/scss_files/_objects/_skip-link.scss
new file mode 100644
index 0000000..c1c6b1c
--- /dev/null
+++ b/webpack/scss_files/_objects/_skip-link.scss
@@ -0,0 +1,9 @@
+.skip-link {
+  position: absolute;
+  left: -100000px;
+
+  @apply .bg-white .p-2 .shadow-md;
+
+  &:focus,
+  &:active { left: 0; }
+}
diff --git a/webpack/scss_files/main.scss b/webpack/scss_files/main.scss
index db10081..d7aa0f1 100644
--- a/webpack/scss_files/main.scss
+++ b/webpack/scss_files/main.scss
@@ -1,37 +1,12 @@
-@charset "utf-8";
+@tailwind preflight;
+@tailwind components;
 
-@import
-	"utils/bootstrap-variables"
-;
+@import "_generic/global";
 
-$icon-font-path: "~/bootstrap-sass/assets/fonts";
-@import
-	"~bourbon/app/assets/stylesheets/bourbon",
-	"~bootstrap-sass/assets/stylesheets/bootstrap",
-	"~susy/sass/susy"
-;
+@import "_elements/_native-text";
 
-@import
-	"base/base"
-;
+@import "_objects/_event-cards";
+@import "_objects/_max-width";
+@import "_objects/_skip-link";
 
-@import
-	"layout/grid",
-	"layout/dev-cards",
-	"layout/blog-list"
-;
-
-@import
-	"pages/home",
-	"pages/blog-post"
-;
-
-@import
-	"components/syntax-highlighting",
-	"components/dev-card",
-	"components/navbar",
-	"components/footer",
-	"components/panels",
-	"components/video-wrapper",
-	"components/post-images"
-;
+@tailwind utilities;