Cleaning up styles.

diff --git a/_layouts/default.html b/_layouts/default.html
index 38b95e469f7f9dcc94afe9e28186b15ca41c363d..a7ecdcc4db734f12a6421344c2243f4518c8462b 100644 (file)
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -17,7 +17,7 @@
       <!-- content push wrapper -->
       <div class="st-pusher">
         
-        <nav class="st-menu st-effect-3" id="menu-3">
+        <nav class="st-menu st-effect-1" id="menu-1">
           <ul class="posts">
             {% for post in site.posts %}
               <li><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>

diff --git a/_layouts/post.html b/_layouts/post.html
index 76135ee623649f01228e786e026442a905c409be..2a55bf2657d7058aae9c5e98f09305003e00b9ae 100644 (file)
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -3,7 +3,7 @@ layout: default
 ---
 
 <div id="st-trigger-effects" class="nav">
-  <div data-effect="st-effect-3">&#9776;</div>
+  <div data-effect="st-effect-1">&#9776;</div>
 </div>
 
 <h1>{{ page.title }}</h1>

diff --git a/css/component.css b/css/component.css
index d816f405888a030526d28f465ba018fc712ee4d6..36006cdfdd9742aa9a125fc76eee31b499797dce 100755 (executable)
--- a/css/component.css
+++ b/css/component.css
@@ -30,8 +30,8 @@ body,
        left: 0;
        z-index: 99;
        height: 100%;
-       -webkit-transition: -webkit-transform 0.35s;
-       transition: transform 0.35s;
+       -webkit-transition: -webkit-transform 0.1s;
+       transition: transform 0.1s;
 }
 
 .st-pusher::after {
@@ -43,8 +43,8 @@ body,
        background: rgba(0,0,0,0.3);
        content: '';
        opacity: 0;
-       -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
-       transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+       -webkit-transition: opacity 0.1s, width 0.1s 0.1s, height 0.1s 0.1s;
+       transition: opacity 0.1s, width 0.1s 0.1s, height 0.1s 0.1s;
 }
 
 .st-menu-open .st-pusher::after {
@@ -56,6 +56,7 @@ body,
 }
 
 .st-menu {
+       background:#fff;
        position: absolute;
        top: 0;
        left: 0;
@@ -122,6 +123,23 @@ body,
 
 /* Individual effects */
 
+/* Effect 1: Slide in on top */
+.st-effect-1.st-menu {
+       visibility: visible;
+       -webkit-transform: translate3d(-100%, 0, 0);
+       transform: translate3d(-100%, 0, 0);
+}
+
+.st-effect-1.st-menu-open .st-effect-1.st-menu {
+       visibility: visible;
+       -webkit-transform: translate3d(0, 0, 0);
+       transform: translate3d(0, 0, 0);
+}
+
+.st-effect-1.st-menu::after {
+       display: none;
+}
+
 /* Effect 3: Push*/
 .st-effect-3.st-menu-open .st-pusher {
        -webkit-transform: translate3d(300px, 0, 0);
@@ -135,8 +153,8 @@ body,
 
 .st-effect-3.st-menu-open .st-effect-3.st-menu {
        visibility: visible;
-       -webkit-transition: -webkit-transform 0.5s;
-       transition: transform 0.5s;
+       -webkit-transition: -webkit-transform 0.1s;
+       transition: transform 0.1s;
 }
 
 .st-effect-3.st-menu::after {

diff --git a/css/main.css b/css/main.css
index 45c0ceb23b79e5e8c1a2680e54b193e3fbc5dbc9..3e3ba1aec20513b0f1e5020bbfe2e6ce718d404e 100755 (executable)
--- a/css/main.css
+++ b/css/main.css
@@ -21,13 +21,16 @@ html, body { height: 100%; }
 body {
   background-color: #f4f4f4;
   font: 12px Menlo, "Consolas", "Andale Mono", "Lucida Console", monospace;
-  animation: fadein 1s;
-  -moz-animation: fadein 1s; /* Firefox */
-  -webkit-animation: fadein 1s; /* Safari and Chrome */
-  -o-animation: fadein 1s; /* Opera */  
+  /*animation: fadein 1s;*/
+   /* Firefox */
+  /*-moz-animation: fadein 1s;*/
+   /* Safari and Chrome */
+  /*-webkit-animation: fadein 1s;*/
+   /* Opera */  
+  /*-o-animation: fadein 1s;*/
 }
 
-
+/*
 @keyframes fadein {
     from {
         opacity:0;
@@ -59,12 +62,12 @@ body {
     to {
         opacity: 1;
     }
-}
+}*/
 
 h1,h2,h3, h4, h5, h6 {
   font-size: 1em;
   color:#000;
-  line-height:1.2em;
+  line-height:1.5em;
   font-weight:bold;
   margin: 1em 0;
 }
@@ -73,6 +76,7 @@ h1 {
   font-size:2.8em;
   padding-bottom:0.25em;
   text-align:center;
+  line-height:1.1em;
   font-family:lettergothic;
   border-bottom:1px solid #aaa;
 }
@@ -121,7 +125,7 @@ header {
 .posts li {
   font-family: lettergothic, sans;
   font-size:1.2em;
-  line-height:1.5em;
+  line-height:1.1em;
 }
 
 .posts span {