update

tracy-e · Dec 23, 2013 · 2ee0767 · 2ee0767
1 parent 32c3975
commit 2ee0767
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 44 deletions.
diff --git a/layout/_partial/archive.ejs b/layout/_partial/archive.ejs
@@ -21,7 +21,6 @@ if (page.archive){
       <article class="<%= item.layout %>">
         <div class="post-content">
           <header>
-            <div class="icon"></div>
             <% if (item.link){ %>
               <% if (item.title){ %>
                 <h1 class="title link"><a href="<%- item.link %>" target="_blank"><%= item.title %></a></h1>

diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
@@ -8,7 +8,6 @@
   <div class="post-content">
   <header>
       <% if (item.layout != 'page'){ %>
-        <div class="icon"></div>
       <%- partial('post/title') %>
       <time datetime="<%= item.date.toDate().toISOString() %>"><a href="<%- config.root %><%- item.path %>"><%= item.date.format(config.date_format) %></a></time>
       <% } %>

diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
@@ -28,6 +28,7 @@
   <% if (page.keywords){ %><meta name="keywords" content="<%= page.keywords %>"><% } %>
   <% if (page.title){ %><meta property="og:title" content="<%= page.title %>"/><% } %>
   <meta property="og:site_name" content="<%= config.title %>"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
   <% if(page.cover) { %>
     <meta property="og:image" content="<%= page.cover %>" />
@@ -36,7 +37,7 @@
   <% } %>
    <link rel="apple-touch-icon" href="/icon.png" />
    <link rel="shortcut icon" href="<%- config.root %>favicon.png" >
-  <link rel="alternate" href="<% if (theme.rss){ %><%- theme.rss %><% } else { %><%- config.root %>atom.xml<% } %>" title="<%= config.title %>" type="application/atom+xml">
+   <link rel="alternate" href="<% if (theme.rss){ %><%- theme.rss %><% } else { %><%- config.root %>atom.xml<% } %>" title="<%= config.title %>" type="application/atom+xml">
   <link rel="stylesheet" href="<%- config.root %>css/style.css" media="screen" type="text/css">
   <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

diff --git a/layout/_partial/tabbar.ejs b/layout/_partial/tabbar.ejs
@@ -0,0 +1,6 @@
+<div class="tabbar" onload="divideTabBar()">
+	<% for (var i in theme.menu){ %>
+      <div class="tabbaritem"><a class="next" href="<%- theme.menu[i] %>"><%= i %></a></div>
+    <% } %>
+</div>
+
diff --git a/layout/layout.ejs b/layout/layout.ejs
@@ -3,16 +3,22 @@
 <body>
   <div id="content" class="inner">
     <aside id="sidebar" class="alignleft">
-    <div class="navigationBar">
-      <a href="<%- config.root %>"><%= config.title %></a>
-    </div>
+      <div class="navigationBar">
+        <a href="<%- config.root %>"><%= config.title %></a>
+      </div>
     	<%- partial('_partial/sidebar') %>
     	<footer id="footer" class="inner"><%- partial('_partial/footer') %></footer>
     </aside>
+
+
+    <div id="hidden-navigationBar" class="navigationBar">
+      <a href="<%- config.root %>"><%= config.title %></a>
+    </div>
     <div id="main-col" class="alignright">
     <div id="wrapper">
       <%- body %></div>
     </div>
+    <%- partial('_partial/tabbar') %>
   </div>
 </body>
 </html>
diff --git a/source/css/_base/layout.styl b/source/css/_base/layout.styl
@@ -8,6 +8,8 @@ body
   font-family font-default
   margin 0
   font-size 14px
+  @media screen and (max-width: 900px)
+  	font-size 12px
 
 h1, h2, h3, h4, h5, h6
   font-family font-title
@@ -48,6 +50,23 @@ a
   &:hover
     text-decoration underline
 
+.navigationBar
+  text-align center
+  width 280px
+  height 44px
+  line-height 44px
+  background rgba(255, 255, 255, 0.9)
+  border-bottom 1px solid color-border
+  margin-bottom 30px
+  a
+    font-family Cuprum
+    font-size 22px
+    font-weight bold
+    color black
+    &:hover
+      color color-link
+      text-decoration none
+
 .alignleft
   float left
 
@@ -59,7 +78,6 @@ a
 
 .inner
   width page-width
-  margin 0 auto
   @media screen and (max-width: 1260px)
     width 100%
 
@@ -69,8 +87,18 @@ a
     width 100%
     margin-left -280px
 
+#hidden-navigationBar
+  display none
+  @media screen and (max-width: 900px)
+    display block
+    width 100%
+    margin-bottom 0
+
 #wrapper
   background color-background
   padding 25px
   @media screen and (max-width: 1260px)
-    margin-left 280px
+    margin-left 280px
+  @media screen and (max-width: 900px)
+    margin 0 0 60px 0
+    padding 20px 0
diff --git a/source/css/_partial/article.styl b/source/css/_partial/article.styl
@@ -2,20 +2,8 @@ icon-size = 32px
 icon-gap = 25px
 
 article
-  &.page
-    .icon
-      display none
-
   &.post
     background color-background
-    .icon
-      &:before
-        content '\f016'
-
-  &.photo
-    .icon
-      &:before
-        content '\f030'
 
   &.link
     .icon
@@ -33,10 +21,12 @@ article
 
   .post-content
     background-color white
-    padding 20px 20px 15px (icon-size + icon-gap + 20)
+    padding 20px 20px 15px 20px
     border 1px solid color-border
     margin-bottom 30px
     position relative
+    @media screen and (max-width: 900px)
+      padding 10px
 
   .gallery
     overflow hidden
@@ -255,6 +245,9 @@ article
     position relative
     min-height 16px
     .addthis
+      margin-top 15px
+      iframe
+        margin-top 0
       a
         color color-font
         &:hover
@@ -300,9 +293,4 @@ article
       &:before
         content '\f02b'
         top 3px
-        left 2px
-
-    .addthis
-      margin-top 15px
-      iframe
-        margin-top 0
+        left 2px
diff --git a/source/css/_partial/index.styl b/source/css/_partial/index.styl
@@ -7,7 +7,7 @@
     text-shadow 0 0 1px #fff
     margin-bottom 50px
     &:hover
-      color #fff
+      color color-font
       text-decoration none
       text-shadow none
 

diff --git a/source/css/_partial/sidebar.styl b/source/css/_partial/sidebar.styl
@@ -1,4 +1,6 @@
 #sidebar
+  @media screen and (max-width: 900px)
+    display none
   display block
   background color-background
   border-right 1px solid rgb(200, 200, 200)
@@ -7,22 +9,6 @@
   line-height 1.8em
   position fixed
   margin 0
-  .navigationBar
-    text-align center
-    width side-width
-    height 44px
-    line-height 44px
-    background white
-    border-bottom 1px solid color-border
-    margin-bottom 30px
-    a
-      font-family Cuprum
-      font-size 22px
-      font-weight bold
-      color black
-      &:hover
-        color color-link
-        text-decoration none
 
   #menu
     border-bottom-style none

diff --git a/source/css/_partial/tabbar.styl b/source/css/_partial/tabbar.styl
@@ -0,0 +1,27 @@
+.tabbar
+  display none
+  @media screen and (max-width: 900px)
+    display block
+  position fixed
+  bottom 0
+  width 100%
+  height 44px
+  line-height 44px
+  background-color rgba(255, 255, 255, 0.9)
+  border-top 1px solid color-border
+  padding 0
+  .tabbaritem
+    margin 0
+    padding 0
+    float left
+    height 100%
+    width 25%
+    text-align center
+    font-size 18px
+    a
+      color color-font
+      &:hover
+        color color-meta
+        text-decoration none
+
+
diff --git a/source/css/style.styl b/source/css/style.styl
@@ -10,5 +10,6 @@
 @import '_partial/index'
 @import '_partial/archive'
 @import '_partial/sidebar'
+@import '_partial/tabbar'
 @import '_partial/footer'
 @import '_partial/syntax'