add jquery, add hiding menu #7

oscarmorrison · May 18, 2016 · 53bcd80 · 53bcd80
1 parent ccd1706
commit 53bcd80
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 196 deletions.
diff --git a/assets/css/oscar.css b/assets/css/oscar.css
@@ -18,9 +18,9 @@
  * Update the foundational and global aspects of the page.
  */
 
-/* Prevent scroll on narrow devices */
-html,
-body {
+ /* Prevent scroll on narrow devices */
+ html,
+ body {
   overflow-x: hidden;
 }
 
@@ -43,7 +43,7 @@ h1, h2, h3, h4, h5, h6 {
  * regular page content.
  */
 
-.wrap {
+ .wrap {
   position: relative;
   width: 100%;
 }
@@ -55,22 +55,18 @@ h1, h2, h3, h4, h5, h6 {
  * Center the page content.
  */
 
- .nav.container{
-  padding-top: 10px;
- }
-
 .container {
-  max-width: 28rem;
+    max-width: 28rem;
 }
 @media (min-width: 38em) {
   .container {
     max-width: 32rem;
-  }
+}
 }
 @media (min-width: 56em) {
   .container {
     max-width: 38rem;
-  }
+}
 }
 
 
@@ -80,7 +76,7 @@ h1, h2, h3, h4, h5, h6 {
  * Super small header above the content for site name and short description.
  */
 
-.masthead {
+ .masthead {
   padding-top:    1rem;
   padding-bottom: 1rem;
   margin-bottom: 3rem;
@@ -103,23 +99,68 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 @media (max-width: 48em) {
-  .masthead-title {
-    text-align: center;
-  }
-  .masthead-title small {
+    .masthead-title {
+        text-align: center;
+    }
+    .nav{
+        text-align: center;
+    }
+    .masthead-title small {
+        display: none;
+    }
+}
+.nav{
     display: none;
-  }
 }
+// .masthead:hover{
+//     display: inherit;
+//     padding-bottom: 1rem;
+//     animation: masterheadGrow .5s;
+// }
+
+// .masthead:hover .nav{
+//     animation: showNav .5s;
+// }
+// @keyframes showNav{
+//     0%{
+//         background: red;
+//         display: none;
+//     }
+//     90%{
+//         background: blue;
+//         display: inherit;
+//     }
+//     100%{
+//         background: blue;
+//         display: inherit;
+//     }
+// }
+// @keyframes masterheadGrow{
+//     0%{
+//         padding-bottom: 1rem;
+//     }
+//     100%{
+//         padding-bottom: 3rem;
+//     }
+// }
 
 /*******Navigation*********/
 
+.nav.container{
+    padding-top: 10px;
+}
+
+.nav.hidden{
+    display: none;
+}
+
 a.nav-item{
   text-decoration: none;
 }
 
 .nav-item{
   text-decoration: none;
-  color: #848484;
+  color: #A6A6A6;
   margin-right: 1em;
 }
 
@@ -135,8 +176,8 @@ a.nav-item{
  * page is wrapped in `.page` and is only used on the page layout.
  */
 
-.page,
-.post {
+ .page,
+ .post {
   margin-bottom: 4em;
 }
 
@@ -231,7 +272,7 @@ a.read-more:hover{
  * there are no more previous or next posts to show.
  */
 
-.pagination {
+ .pagination {
   overflow: hidden; /* clearfix */
   margin-left: -1rem;
   margin-right: -1rem;
@@ -258,183 +299,24 @@ a.pagination-item:hover {
 @media (min-width: 30em) {
   .pagination {
     margin: 3rem 0;
-  }
-  .pagination-item {
+}
+.pagination-item {
     float: left;
     width: 50%;
-  }
-  .pagination-item:first-child {
+}
+.pagination-item:first-child {
     margin-bottom: 0;
     border-top-left-radius:    4px;
     border-bottom-left-radius: 4px;
-  }
-  .pagination-item:last-child {
+}
+.pagination-item:last-child {
     margin-left: -1px;
     border-top-right-radius:    4px;
     border-bottom-right-radius: 4px;
-  }
 }
-
-
-/*
- * Reverse layout
- *
- * Flip the orientation of the page by placing the `.sidebar` and sidebar toggle
- * on the right side.
- */
-
-.layout-reverse .sidebar {
-  left: auto;
-  right: -14rem;
-}
-.layout-reverse .sidebar-toggle {
-  left: auto;
-  right: 1rem;
-}
-
-.layout-reverse #sidebar-checkbox:checked ~ .sidebar,
-.layout-reverse #sidebar-checkbox:checked ~ .wrap,
-.layout-reverse #sidebar-checkbox:checked ~ .sidebar-toggle {
-  -webkit-transform: translateX(-14rem);
-      -ms-transform: translateX(-14rem);
-          transform: translateX(-14rem);
-}
-
-
-/*
- * Themes
- *
- * Apply custom color schemes by adding the appropriate class to the `body`.
- * Based on colors from Base16: http://chriskempson.github.io/base16/#default.
- */
-
-/* Red */
-.theme-base-08 .sidebar,
-.theme-base-08 .sidebar-toggle:active,
-.theme-base-08 #sidebar-checkbox:checked ~ .sidebar-toggle {
-  background-color: #ac4142;
-}
-.theme-base-08 .container a,
-.theme-base-08 .sidebar-toggle,
-.theme-base-08 .related-posts li a:hover {
-  color: #ac4142;
-}
-
-/* Orange */
-.theme-base-09 .sidebar,
-.theme-base-09 .sidebar-toggle:active,
-.theme-base-09 #sidebar-checkbox:checked ~ .sidebar-toggle {
-  background-color: #d28445;
 }
-.theme-base-09 .container a,
-.theme-base-09 .sidebar-toggle,
-.theme-base-09 .related-posts li a:hover {
-  color: #d28445;
-}
-
-/* Yellow */
-.theme-base-0a .sidebar,
-.theme-base-0a .sidebar-toggle:active,
-.theme-base-0a #sidebar-checkbox:checked ~ .sidebar-toggle {
-  background-color: #f4bf75;
-}
-.theme-base-0a .container a,
-.theme-base-0a .sidebar-toggle,
-.theme-base-0a .related-posts li a:hover {
-  color: #f4bf75;
-}
-
-/* Green */
-.theme-base-0b .sidebar,
-.theme-base-0b .sidebar-toggle:active,
-.theme-base-0b #sidebar-checkbox:checked ~ .sidebar-toggle {
-  background-color: #90a959;
-}
-.theme-base-0b .container a,
-.theme-base-0b .sidebar-toggle,
-.theme-base-0b .related-posts li a:hover {
-  color: #90a959;
-}
-
-/* Cyan */
-.theme-base-0c .sidebar,
-.theme-base-0c .sidebar-toggle:active,
-.theme-base-0c #sidebar-checkbox:checked ~ .sidebar-toggle {
-  background-color: #75b5aa;
-}
-.theme-base-0c .container a,
-.theme-base-0c .sidebar-toggle,
-.theme-base-0c .related-posts li a:hover {
-  color: #75b5aa;
-}
-
-/* Blue */
-.theme-base-0d .sidebar,
-.theme-base-0d .sidebar-toggle:active,
-.theme-base-0d #sidebar-checkbox:checked ~ .sidebar-toggle {
-  background-color: #6a9fb5;
-}
-.theme-base-0d .container a,
-.theme-base-0d .sidebar-toggle,
-.theme-base-0d .related-posts li a:hover {
-  color: #6a9fb5;
-}
-
-/* Magenta */
-.theme-base-0e .sidebar,
-.theme-base-0e .sidebar-toggle:active,
-.theme-base-0e #sidebar-checkbox:checked ~ .sidebar-toggle {
-  background-color: #aa759f;
-}
-.theme-base-0e .container a,
-.theme-base-0e .sidebar-toggle,
-.theme-base-0e .related-posts li a:hover {
-  color: #aa759f;
-}
-
-/* Brown */
-.theme-base-0f .sidebar,
-.theme-base-0f .sidebar-toggle:active,
-.theme-base-0f #sidebar-checkbox:checked ~ .sidebar-toggle {
-  background-color: #8f5536;
-}
-.theme-base-0f .container a,
-.theme-base-0f .sidebar-toggle,
-.theme-base-0f .related-posts li a:hover {
-  color: #8f5536;
-}
-
-
-/*
- * Overlay sidebar
- *
- * Make the sidebar content overlay the viewport content instead of pushing it
- * aside when toggled.
- */
-
-.sidebar-overlay #sidebar-checkbox:checked ~ .wrap {
-  -webkit-transform: translateX(0);
-      -ms-transform: translateX(0);
-          transform: translateX(0);
-}
-.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle {
-  box-shadow: 0 0 0 .25rem #fff;
-}
-.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
-  box-shadow: .25rem 0 .5rem rgba(0,0,0,.1);
-}
-
-/* Only one tweak for a reverse layout */
-.layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
-  box-shadow: -.25rem 0 .5rem rgba(0,0,0,.1);
-}
-
-/*
- * Author profile in Ghost
- *
- */
 
- /* The author credit area after the post */
+/* The author credit area after the post */
 .footnotes {
     font-size: 0.8rem;
 }
@@ -603,7 +485,7 @@ a.pagination-item:hover {
 }
 
 /* Turn off meta for page2+ to make room for extra
-   pagination prev/next links */
+pagination prev/next links */
 .archive-template .author-profile .author-meta {
     display: none;
 }

diff --git a/assets/js/oscar.js b/assets/js/oscar.js
@@ -0,0 +1,5 @@
+$('.masthead').mouseenter(function(){
+	$('.nav').slideToggle();
+}).mouseleave(function(){
+	$('.nav').slideToggle();
+});
diff --git a/default.hbs b/default.hbs
@@ -36,7 +36,7 @@
       <div class="masthead">
         <div class="container">
           <h2 class="masthead-title">
-            <a href="{{@blog.url}}" title="Home">{{@blog.title}}</a>
+            {{@blog.title}}
             <small>{{@blog.description}}</small>
           </h2>
         </div>
@@ -48,7 +48,9 @@
       </div>
     </div>
 
-    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script> 
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
+    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
+    <script type="text/javascript" src="{{asset "js/oscar.js"}}"></script>
     {{! Ghost outputs important scripts and data with this tag }}
     {{ghost_foot}}
   </body>

diff --git a/partials/navigation.hbs b/partials/navigation.hbs
@@ -1,8 +1,10 @@
-  <nav class="nav container">
-    {{! The code below dynamically generates a sidebar nav of posts tagged as static pages. }}
+<nav class="nav container">
+    <a class="nav-item sidebar-nav-home {{#if current}}active{{/if}}" href="/">
+        <i class="nav-icon icon-home"></i>
+    </a>
     {{#foreach navigation}}
-      <a class="nav-item sidebar-nav-{{slug}} {{#if current}}active{{/if}}" href="{{url absolute="true"}}" target="_blank">
-        <i class="nav-icon icon-{{slug}}"></i>
-      </a>
+        <a class="nav-item sidebar-nav-{{slug}} {{#if current}}active{{/if}}" href="{{url absolute="true"}}" target="_blank">
+            <i class="nav-icon icon-{{slug}}"></i>
+        </a>
     {{/foreach}}
-  </nav>
+</nav>