re-add footer

natew · Dec 20, 2012 · c544b79 · c544b79
2 parents 9d4ad0d + c1d4c03
commit c544b79
Show file tree

Hide file tree

Showing 4 changed files with 169 additions and 35 deletions.
diff --git a/app/assets/stylesheets/posts.css.scss b/app/assets/stylesheets/posts.css.scss
@@ -31,7 +31,16 @@ h1,
 #text-title pre,
 #text-title textarea {
   font-weight: 900;
-  font-size: 35px;
+  font-size: 30px;
+  margin: 25px 0 10px 0 !important;
+
+  a {
+    border-bottom: none;
+
+    &:hover {
+      color: black;
+    }
+  }
 }
 
 p {
@@ -92,22 +101,23 @@ header {
 }
 
 #container {
-  margin-left: 243px;
-  position: relative;
+  position: absolute;
+  left: 26%;
 
   time {
     display: block;
-    padding: 20px 0 20px 50px;
+    padding: 40px 0 40px 50px;
     text-transform: uppercase;
     font-weight: 900;
-    font-size: 12px;
+    font-size: 14px;
     border-bottom: 1px solid #ddd;
+    letter-spacing: 1px;
   }
 }
 
 #content {
   section {
-    padding: 26px 0 40px 50px;
+    padding: 17px 0 40px 50px;
     border-bottom: 1px solid #ddd;
     position: relative;
   }
@@ -123,6 +133,8 @@ header {
       border: none;
     }
   }
+
+  ul, ol { padding: 0 0 0 40px; }
 }
 
 .show #content section {
@@ -138,7 +150,7 @@ code {
 }
 
 .contain {
-  width: 600px;
+  width: 85%;
   position: relative;
 }
 
@@ -573,4 +585,109 @@ nav.pagination {
 
   nav.pagination a {
     margin-left: 10px;
-  }
+  }
+
+.sidebar {
+  position: fixed;
+  padding: 0 30px;
+
+  #owner-name {
+    color: #3A3A3A;
+    font-size: 13px;
+    margin-top: 0;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+  }
+
+  #tagline {
+    font-size: 16px;
+    font-weight: 400;
+    color: #585C60;
+  }
+
+  ul {
+    margin: 25px 0;
+
+    li {
+      word-break: break-all;
+    }
+  }
+}
+
+.row-fluid {
+  width: 100%;
+  *zoom: 1;
+}
+
+.row-fluid::after {
+  clear: both;
+}
+
+.row-fluid::before,
+.row-fluid::after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.row-fluid .sidebar {
+  width: 23.076923076923077%;
+  *width: 23.023731587561375%;
+
+  h1 {
+    margin: 25px 0;
+  }
+}
+
+.row-fluid .content {
+  width: 74.35897435897436%;
+  *width: 74.30578286961266%;
+  position: absolute;
+  left: 25%;
+  border-left: 1px solid #ddd;
+}
+
+.row-fluid .sidebar,
+.row-fluid .content {
+  display: block;
+  float: left;
+  min-height: 30px;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+@media (max-width: 767px) {
+  .sidebar {
+    text-align: center;
+    padding-left: 0;
+  }
+
+  .sidebar ul {
+    padding: 0 !important;
+  }
+
+  .sidebar, .content {
+    width: 100% !important;
+    position: relative !important;
+  }
+
+  .content {
+    padding: 0 5px;
+    left: 0% !important;
+  }
+
+  #content, #container {
+    section, time {
+      padding-left: 0px;
+    }
+  }
+}
+
+
+#footer {
+  padding: 4em;
+  font-size: 12px;
+  color: #999;
+  text-align: center;
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -5,6 +5,7 @@
   <%= csrf_meta_tag %>
   <%= stylesheet_link_tag 'application' %>
   <meta name="author" content="<%= CONFIG['name'] %>">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="/posts.rss" rel="alternate" title="RSS" type="application/rss+xml" />
   <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
 </head>
@@ -13,35 +14,51 @@
   <div id="body">
   <% if is_admin? %><a id="blog-button" href="/new">Go to blog</a><% end %>
   <% unless @no_header %>
-  <header class="clearfix">
-    <div class="inner">
-      <h1><%= link_to CONFIG['name'], root_url %></h1>
-      <% if CONFIG['tagline'] %>
-        <span><%= CONFIG['tagline'].html_safe %></span>
-      <% end %>
-      <ul class="clearfix">
-        <% if CONFIG['twitter'] %><li><%= link_to 'twitter', 'http://twitter.com/' + CONFIG['twitter'] %></li><% end %>
-        <% if CONFIG['github'] %><li><%= link_to 'github', 'https://github.com/' + CONFIG['github'] %></li><% end %>
-        <% if CONFIG['email'] %><li class="right"><%= link_to 'mail', "mailto:#{CONFIG['email']}?subject:whats up!" %></li><% end %>
-        <li class="right"><%= link_to 'subscribe', '/posts.rss' %></li>
+
+  <div class="row-fluid">
+    <div class="sidebar">
+      <h1><%= link_to CONFIG['title'], root_url %></h1>
+      <h2 id="owner-name"><%= CONFIG['name'].html_safe %></h2>
+      <h2 id="tagline"><%= CONFIG['tagline'].html_safe %></h2>
+      <ul>
+        <% if CONFIG['twitter'] %>
+          <li><%= link_to '@' + CONFIG['twitter'], 'http://twitter.com/' + CONFIG['twitter'] %></li>
+        <% end %>
+        <% if CONFIG['github'] %>
+          <li><%= link_to 'github', 'https://github.com/' + CONFIG['github'] %></li>
+        <% end %>
+        <% if CONFIG['email'] %>
+          <li><%= link_to 'say hi', "mailto:#{CONFIG['email']}?subject:whats up!" %></li>
+        <% end %>
+        <li><%= link_to 'rss feed', '/posts.rss' %></li>
       </ul>
+      <span class="powered-by">
+        Powered by <a href="http://github.com/natew/obtvse.git">Obtvse</a>
+        <% if is_admin? %> &nbsp;&middot;&nbsp; <a href="/admin">Admin</a><% end %>
+      </span>
     </div>
-  </header>
-  <% end %>
 
-  <div id="container">
-    <section id="content">
-      <% if notice %><span class="notice"><%= notice %></span><% end %>
-      <%= yield %>
-    </section>
 
-    <section id="footer">
-      <% if action_name == 'index' %><%= link_to 'Back to top', '#', :id => 'back-to-top' %>
-      <% else %><%= link_to 'Back to blog', root_url %>
+    <% end %>
+
+    <div id="container" class="content">
+      <% unless @no_header %>
+        <time><% if @post && @post.created_at %>Posted <%= @post.created_at.to_formatted_s(:day_month_year) %><% else %><%= Time.now.to_formatted_s(:day_month_year) %><% end %></time>
       <% end %>
-      <br />
-      powered by <a href="http://github.com/natew/obtvse.git">obtvse</a>
-    </section>
+      <div id="content">
+        <% if notice %><span class="notice"><%= notice %></span><% end %>
+        <%= yield %>
+      </div>
+
+      <div id="footer">
+        <% if action_name == 'index' %><%= link_to 'Back to top', '#', :id => 'back-to-top' %>
+        <% else %><%= link_to 'Back to blog', root_url %>
+        <% end %>
+        <br />
+        powered by <a href="http://github.com/natew/obtvse.git">obtvse</a>
+      </div>
+    </div>
+
   </div>
 
   <%= javascript_include_tag 'application' %>

diff --git a/app/views/posts/_post.html.erb b/app/views/posts/_post.html.erb
@@ -22,8 +22,8 @@
       </ul>
     <%- end -%>
     <% if @single_post %>
-      <a class="button space-top space-bottom" href="<%= root_url %>">Back to Blog</a>
+      <a class="button space-top space-bottom" href="<%= root_url %>">← Read More</a>
       <%= render 'posts/comments' %>
     <% end %>
   </div>
-</section>
+</section>
diff --git a/vendor/assets/stylesheets/normalize.css b/vendor/assets/stylesheets/normalize.css
@@ -292,7 +292,7 @@ dd {
 menu,
 ol,
 ul {
-    padding: 0 0 0 40px;
+    padding: 0 0 0 0px;
 }
 
 /*