Merge pull request #2 from pmarsceill/v0.1.1

V0.1.1

_config.yml

@@ -28,5 +28,5 @@ exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "pac
 
 # Aux links for the upper right navigation
 aux_links:
-  "View it on GitHub":
+  "Just the Docs on GitHub":
     - "//github.com/pmarsceill/just-the-docs"

_layouts/default.html

@@ -9,15 +9,15 @@
       <span class="fs-3"><button class="js-main-nav-trigger navigation-list-toggle btn btn-outline" type="button" data-text-toggle="Hide">Menu</button></span>
       <div class="navigation main-nav js-main-nav">
         {% include nav.html %}
-        <footer role="contentinfo" class="site-footer">
-          <p class="text-small text-grey-dk-000 mb-0">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
-        </footer>
       </div>
+      <footer role="contentinfo" class="site-footer">
+        <p class="text-small text-grey-dk-000 mb-0">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
+      </footer>
     </div>
     <div class="main-content-wrap">
       <div class="page-header">
         <div class="main-content pb-0">
-          <div class="search">
+          <div class="search js-search">
             <div class="search-input-wrap">
               <input type="text" class="js-search-input search-input fs-2" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
               <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>

_sass/content.scss

@@ -57,8 +57,11 @@
     }
   }
 
-  hr + *,
-  h1:first-of-type {
+  hr + * {
     margin-top: 0;
   }
+
+  h1:first-of-type {
+    margin-top: 0.5em;
+  }
 }

_sass/labels.scss

@@ -14,6 +14,7 @@
   color: $white;
   vertical-align: middle;
   background-color: $blue-100;
+  text-transform: uppercase;
   @include fs-2;
 }
 

_sass/layout.scss

@@ -93,7 +93,8 @@
 }
 
 .navigation,
-.site-title {
+.site-title,
+.site-footer {
 
   @include container;
 
@@ -114,8 +115,21 @@
   }
 }
 
-.site-footer {
+body {
+  position: relative;
+  padding-bottom: $sp-10;
+
   @include mq(md) {
-    margin-top: $sp-10;
+    position: static;
+    padding-bottom: 0;
+  }
+}
+
+.site-footer {
+  position: absolute;
+  bottom: $sp-3;
+
+  @include mq(md) {
+    right: 0;
   }
 }

_sass/navigation.scss

@@ -20,6 +20,7 @@
 .navigation-list {
   padding: 0;
   margin-top: $sp-4;
+  margin-bottom: 0;
   list-style: none;
 
   @include mq(md) {
@@ -53,8 +54,12 @@
 }
 
 .navigation-list-item {
-  @include fs-3;
+  @include fs-4;
   margin: 0;
+
+  @include mq(md) {
+    @include fs-3;
+  }
 }
 
 .navigation-list-link {

_sass/search.scss

@@ -3,15 +3,27 @@
 //
 
 .search {
+  position: relative;
+  z-index: 99;
   display: none;
+  flex-grow: 1;
+  padding-bottom: $gutter-spacing / 2;
+  background-color: $white;
+  padding: $sp-2;
+  margin-bottom: $sp-3;
 
   @include mq(md) {
-    position: relative;
-    z-index: 99;
     display: block;
-    flex-grow: 1;
     padding-top: $sp-1;
-    padding-bottom: $gutter-spacing / 2;
+    padding-right: 0;
+    padding-bottom: $sp-4;
+    padding-left: 0;
+    margin-bottom: 0;
+    background-color: transparent;
+  }
+
+  &.nav-open {
+    display: block;
   }
 }
 

_sass/typography.scss

@@ -50,5 +50,9 @@ li {
 }
 
 .text-mono {
-  font-family: $mono-font-family;
+  font-family: $mono-font-family !important;
+}
+
+.text-center {
+  text-align: center !important;
 }

assets/js/just-the-docs.js

@@ -13,6 +13,7 @@ function toggleNav(){
   const nav = document.querySelector('.js-main-nav');
   const auxNav = document.querySelector('.js-aux-nav');
   const navTrigger = document.querySelector('.js-main-nav-trigger');
+  const search = document.querySelector('.js-search');
 
   addEvent(navTrigger, 'click', function(){
     var text = navTrigger.innerText;
@@ -21,6 +22,7 @@ function toggleNav(){
     nav.classList.toggle('nav-open');
     auxNav.classList.toggle('nav-open');
     navTrigger.classList.toggle('nav-open');
+    search.classList.toggle('nav-open');
     navTrigger.innerText = textToggle;
     navTrigger.setAttribute('data-text-toggle', text);
     textToggle = text;

index.md

@@ -11,7 +11,7 @@ nav_order: 1
 Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages.
 {: .fs-6 .fw-300 }
 
-[Get started now](#getting-started){: .btn .btn-purple .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn }
+[Get started now](#getting-started){: .btn .btn-purple .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 }
 
 ---
 

just-the-docs.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "just-the-docs"
-  spec.version       = "0.1.0"
+  spec.version       = "0.1.1"
   spec.authors       = ["Patrick Marsceill"]
   spec.email         = ["patrick.marsceill@gmail.com"]