🎨 blue & hero

.tm_properties

@@ -1,4 +1,4 @@
 softTabs = true
 tabSize = 2
-excludeInFileChooser = "{$exclude,build,components,bower_components,node_modules}"
-excludeInFolderSearch = "{$exclude,build,components,bower_components,node_modules}"
+excludeInFileChooser = "{$exclude,build,bower_components,node_modules}"
+excludeInFolderSearch = "{$exclude,build,bower_components,node_modules}"

content/index.hbs

@@ -4,7 +4,7 @@ is_homepage: true
 
 {{! ----------------------------------------------------------------- }}
 
-<h3>Install</h3>
+<h2>Install</h2>
 
 {{! ----------------------------------------------------------------- }}
 

css/base.css

@@ -18,12 +18,12 @@ html { font-size: 17px; }
 html.export { font-size: 15px; }
 
 a {
-  color: #6A6;
+  color: #19F;
   text-decoration: none;
 }
 
 a:hover {
-  color: #E90;
+  color: #C25;
 }
 
 h1, h2, h3 {
@@ -85,13 +85,6 @@ tr:nth-child(2) td {
   position: relative; /* for page-nav */
 }
 
-/* ---- content ---- */
-
-.container {
-  max-width: 1000px;
-  padding: 0 10px;
-}
-
 /* ---- page-title ---- */
 
 .page-title {

data/licenses.json

@@ -0,0 +1,20 @@
+{
+  "developer": {
+    "title": "Developer",
+    "for": "1 developer",
+    "price": "25",
+    "gumroadSlug": "episcroll-dev"
+  },
+  "team": {
+    "title": "Team",
+    "for": "up to 8 developers",
+    "price": "110",
+    "gumroadSlug": "episcroll-team"
+  },
+  "organization": {
+    "title": "Organization",
+    "for": "Unlimited developers",
+    "price": "320",
+    "gumroadSlug": "episcroll-org"
+  }
+}

modules/.jshintrc

@@ -0,0 +1,12 @@
+{
+  "browser": true,
+  "unused": true,
+  "undef": true,
+  "globals": {
+    "filterBind": false,
+    "Episcroll": false,
+    "EpiscrollDocs": true,
+    "matchesSelector": false,
+    "utils": true
+  }
+}

modules/container/container.css

@@ -0,0 +1,26 @@
+/* container
+------------------------- */
+
+.container {
+  padding-left: 10px;
+  padding-right: 10px;
+  max-width: 1500px;
+}
+
+.container > * {
+  max-width: 900px;
+}
+
+.container .duo.example {
+  max-width: none;
+}
+
+/* desktop */
+@media screen and ( min-width: 960px ) {
+
+  .container {
+    padding-left: 200px;
+    padding-right: 20px;
+  }
+
+}

modules/hero/hero.css

@@ -0,0 +1,20 @@
+/* hero
+------------------------- */
+
+.hero {
+  padding: 40px 0;
+  background: #19F;
+  color: white;
+}
+
+.hero__title {
+  font-size: 8.0rem;
+  margin: 0;
+  line-height: 1;
+}
+
+.hero__tagline {
+  font-size: 2.0rem;
+  margin: 0;
+  color: white;
+}

modules/hero/hero.hbs

@@ -0,0 +1,6 @@
+<div class="hero">
+  <div class="container">
+    <h1 class="hero__title">Episcroll</h1>
+    <p class="hero__tagline">Infinite scroll, back-button friendly</p>
+  </div>
+</div>

modules/page-nav/page-nav.css

@@ -21,10 +21,12 @@
 @media screen and ( min-width: 1220px ) {
   .page-nav {
     position: absolute;
-    right: 0px;
-    top: 0px;
+    left: 0;
+    top: 0;
     width: 200px;
-    padding-top: 20px;
+    margin: 0;
+    padding: 20px;
+    list-style: none;
   }
 
   /* activate sticky */

modules/site-nav/site-nav.css

@@ -2,28 +2,26 @@
 ------------------------- */
 
 .site-nav {
-  background: #8C8;
-}
-
-/* bottom nav */
-.main ~ .site-nav {
-  position: relative;
-  margin-top: 80px;
-  z-index: 2; /* on top of page-nav */
-}
-
-.site-nav__list {
+  background: #19F;
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.site-nav__list:after {
+/* clearfix */
+.site-nav:after {
   content: '';
   clear: both;
   display: block;
 }
 
+/* bottom nav */
+.main ~ .site-nav {
+  position: relative;
+  margin-top: 80px;
+  z-index: 2; /* on top of page-nav */
+}
+
 .site-nav__item {
   width: 33.333%;
   float: left;
@@ -45,7 +43,7 @@
 }
 
 .site-nav__item a:hover {
-  background: #E5A;
+  background: #C25;
   color: white;
 }
 
@@ -61,8 +59,8 @@
 .page--events .site-nav__item--events a,
 .page--extras .site-nav__item--extras a,
 .page--license .site-nav__item--license a {
-  background: #ED2;
-  color: white;
+  background: #FFF;
+  color: #19F;
 }
 
 /* size at which it can fit */
@@ -79,7 +77,8 @@
   }
 
   .site-nav__item--homepage {
-    font-size: 26px;
+    font-size: 1.6rem;
+    width: 200px;
   }
 
 }

modules/site-nav/site-nav.hbs

@@ -1,24 +1,20 @@
-<nav class="site-nav">
-  <div class="container">
-    <ul class="site-nav__list">
-      <li class="site-nav__item site-nav__item--homepage">
-        <a href="{{#if page.is_404}}/{{/if}}.">Episcroll</a>
-      </li>
-      <li class="site-nav__item site-nav__item--options">
-        <a href="{{#if page.is_404}}/{{/if}}options.html">Options</a>
-      </li>
-      <li class="site-nav__item site-nav__item--api">
-        <a href="{{#if page.is_404}}/{{/if}}api.html">API</a>
-      </li>
-      <li class="site-nav__item site-nav__item--events">
-        <a href="{{#if page.is_404}}/{{/if}}events.html">Events</a>
-      </li>
-      <li class="site-nav__item site-nav__item--extras">
-        <a href="{{#if page.is_404}}/{{/if}}extras.html">Extras</a>
-      </li>
-      <li class="site-nav__item site-nav__item--license">
-        <a href="license.html">License</a>
-      </li>
-    </ul>
-  </div>
-</nav>
+<ol class="site-nav">
+  <li class="site-nav__item site-nav__item--homepage">
+    <a href="{{#if page.is_404}}/{{/if}}.">Episcroll</a>
+  </li>
+  <li class="site-nav__item site-nav__item--options">
+    <a href="{{#if page.is_404}}/{{/if}}options.html">Options</a>
+  </li>
+  <li class="site-nav__item site-nav__item--api">
+    <a href="{{#if page.is_404}}/{{/if}}api.html">API</a>
+  </li>
+  <li class="site-nav__item site-nav__item--events">
+    <a href="{{#if page.is_404}}/{{/if}}events.html">Events</a>
+  </li>
+  <li class="site-nav__item site-nav__item--extras">
+    <a href="{{#if page.is_404}}/{{/if}}extras.html">Extras</a>
+  </li>
+  <li class="site-nav__item site-nav__item--license">
+    <a href="license.html">License</a>
+  </li>
+</ol>

templates/page.hbs

@@ -21,7 +21,7 @@
 {{> site-nav}}
 
 {{#if page.is_homepage}}
-  {{!> hero-carousel}}
+  {{> hero}}
 {{/if}}
 
 <div class="main">