Add simple sticky footer.

jschementi · Jul 12, 2010 · 5c7fff5 · 5c7fff5
1 parent 3582175
commit 5c7fff5
Show file tree

Hide file tree

Showing 6 changed files with 176 additions and 75 deletions.
diff --git a/app.rb b/app.rb
@@ -14,15 +14,14 @@ def get_feed(url)
   res = Net::HTTP.start(url.host, url.port) { |http|
     http.get(url.path)
   }
+  content_type 'application/xml', :charset => 'utf-8'
   res.body
 end
 
 get '/blog.rss' do
-  content_type 'application/xml', :charset => 'utf-8'
   get_feed 'http://feeds.feedburner.com/jimmy-thinking'
 end
 
 get '/twitter.rss' do
-  content_type 'application/xml', :charset => 'utf-8'
   get_feed 'http://twitter.com/statuses/user_timeline/8007442.rss'
 end
diff --git a/public/app.js b/public/app.js
@@ -268,6 +268,11 @@ var renderResume = function() {
 var roundTheWorld = function() {
   $(document).ready(function() {
     $('.area, .island').corner('round tr br 10px');
+    $('#navigation a').corner('round 5px');
+    $('.section').not('#most-recent-post, #home-writing').corner('round tl bl 10px');
+    $('#most-recent-post').corner('round tl 10px')
+    $('#home-writing').corner('round bl 10px')
+    $('#most-recent-post .rss_item a, #home-writing .rss_item a').corner('round 5px');
   });
 }
 

diff --git a/public/sticky-footer.css b/public/sticky-footer.css
@@ -0,0 +1,49 @@
+/*  
+Sticky Footer Solution
+by Steve Hatcher 
+http://stever.ca
+http://www.cssstickyfooter.com
+*/
+
+/*
+* {margin:0;padding:0;} 
+*/
+
+/* must declare 0 margins on everything, also for main layout components use padding, not 
+vertical margins (top and bottom) to add spacing, else those margins get added to total height 
+and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
+
+html, body {height: 100%;}
+
+#wrap {min-height: 100%;}
+
+#main {overflow:auto;
+	padding-bottom: 150px;}  /* must be same height as the footer */
+
+#footer {position: relative;
+	margin-top: -150px; /* negative value of footer height */
+	height: 150px;
+	clear:both;} 
+
+/*Opera Fix*/
+body:before {/* thanks to Maleika (Kohoutec)*/
+content:"";
+height:100%;
+float:left;
+width:0;
+margin-top:-32767px;/* thank you Erik J - negate effect of float*/
+}
+
+
+
+/* IMPORTANT
+
+You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
+
+<!--[if !IE 7]>
+	<style type="text/css">
+		#wrap {display:table;height:100%}
+	</style>
+<![endif]-->
+
+*/
diff --git a/public/style.css b/public/style.css
@@ -21,7 +21,12 @@ a:hover {
   text-decoration: underline;
 }
 
-#page {
+#wrap {
+  text-align: center;
+  width: 100%;
+}
+
+#main, #footer .inside {
   margin: 0 auto;
   text-align: left;
   width: 92.7em;
@@ -203,7 +208,7 @@ a:hover {
     color: #444;
   }*/
 
-  #page #twitter-status {
+  #twitter-status {
     font-size:1.5em;
     margin-left:1.5em;
     margin-top:0.3em;
@@ -514,3 +519,19 @@ a:hover {
   #code #github-badge-wrapper #github-badge {
     padding: 5px;
   }
+
+/* footer */
+
+  #footer {
+    background-color: #222;
+    color: white;
+    text-align: center;
+    border-top: 3px solid #444;
+  }
+
+  #footer .inside {
+  }
+
+  #footer .inside p {
+    font-size: 1.35em;
+  }
diff --git a/views/_footer.erb b/views/_footer.erb
@@ -0,0 +1,7 @@
+<p>
+  &copy; Jimmy Schementi &rsaquo;
+  <a href="#/about" rel="address:/about">about</a> |
+  <a href="#/projects" rel="address:/projects">projects</a> |
+  <a href="#/writing" rel="address:/writing">writing</a> |
+  <a href="http://flickr.com/photos/jschementi" target="_blank">photos</a>
+</p>
diff --git a/views/layout.erb b/views/layout.erb
@@ -14,96 +14,116 @@
     <link type="text/css" media="screen" rel="stylesheet" href="colorbox/example5/colorbox.css" />
     <link type="text/css" media="screen" rel="stylesheet" href="jquery.lightbox-0.5.css" />
     <link type="text/css" media="screen" rel="stylesheet" href="style.css" />
+    <link type="text/css" media="screen" rel="stylesheet" href="sticky-footer.css" />
     <!--[if gt IE 7]>
       <link type="text/css" media="screen" rel="stylesheet" href="ie.css" />
     <![endif]-->
+    <!--[if !IE 7]>
+      <style type="text/css">
+        #wrap {display:table;height:100%}
+      </style>
+    <![endif]-->
 
     <script type="text/javascript" src="app.js"></script>
     <!--[if gt IE 7]>
       <script type="text/javascript" src="ie.js"></script>
     <![endif]-->
   </head>
   <body id=''>
-    <a name="very-top"></a>
-
-    <div id="background">
-      <img class="image" alt="" src='' style='display: none' />
-    </div>
-
-    <div id="page">
-
-      <div id="header">
-        <div id="navigation">
-          <%= erb :_navigation, :layout => false %>
-          <div class="clear"></div>
-        </div>
-      </div>
-
-      <%= erb :_twitter_status, :layout => false %>
+
+    <div id="wrap">
 
-      <div id="body">
+        <a name="very-top"></a>
 
-        <div id='home' class='topic' style="display: none">
-          <a name="/"></a>
-          <%= erb :_home, :layout => false %>
-        </div>
-
-        <div id="code" class='topic subpage' style="display: none">  
-          <a name="/projects"></a>
-          <%= erb :_projects, :layout => false %>
-        </div>
-
-        <div id="writing" class="topic subpage" style="display: none">
-          <a name="/writing"></a>
-          <%= erb :_writing, :layout => false %>
-        </div>
-
-        <div id="music" class="topic subpage" style="display: none">
-          <a name="/music"></a>
-          <%= erb :_music, :layout => false %>
-        </div>
-
-        <div id="photos" class="topic subpage" style="display: none">
-          <a name="/photos"></a>
-          <%= erb :_photos, :layout => false %>
-        </div>
-
-        <div id="art" class="topic subpage" style="display: none">
-          <a name="/art"></a>
-          <%= erb :_art, :layout => false %>
-        </div>
-
-        <div id="ironruby" class="topic subpage" style="display: none">
-          <a name="/projects/ironruby"></a>
-          <%= erb :_ironruby, :layout => false %>
-        </div>
-
-        <div id="sourceaid" class="topic subpage" style="display: none">
-          <a name="/projects/sourceaid"></a>
-          <%= erb :_sourceaid, :layout => false %>
-        </div>
-
-        <div id="assistment" class="topic subpage" style="display: none">
-          <a name="/projects/assistment"></a>
-          <%= erb :_assistment, :layout => false %>
-        </div>
-
-        <div id="about" class="topic subpage" style="display: none">
-          <a name="/about"></a>
-          <%= erb :_about, :layout => false %>
-        </div>
-
-        <div id="resume" class="topic subpage" style="display: none">
-          <a name="/about/resume" title="Jimmy Schementi - Software Developer"></a>
-          <%= erb :_resume, :layout => false %>
+        <div id="background">
+          <img class="image" alt="" src='' style='display: none' />
         </div>
 
+        <div id="main">
+
+          <div id="header">
+            <div id="navigation">
+              <%= erb :_navigation, :layout => false %>
+              <div class="clear"></div>
+            </div>
+          </div>
+
+          <%= erb :_twitter_status, :layout => false %>
+
+          <div id="body">
+
+            <div id='home' class='topic' style="display: none">
+              <a name="/"></a>
+              <%= erb :_home, :layout => false %>
+            </div>
+
+            <div id="code" class='topic subpage' style="display: none">  
+              <a name="/projects"></a>
+              <%= erb :_projects, :layout => false %>
+            </div>
+
+            <div id="writing" class="topic subpage" style="display: none">
+              <a name="/writing"></a>
+              <%= erb :_writing, :layout => false %>
+            </div>
+
+            <div id="music" class="topic subpage" style="display: none">
+              <a name="/music"></a>
+              <%= erb :_music, :layout => false %>
+            </div>
+
+            <div id="photos" class="topic subpage" style="display: none">
+              <a name="/photos"></a>
+              <%= erb :_photos, :layout => false %>
+            </div>
+
+            <div id="art" class="topic subpage" style="display: none">
+              <a name="/art"></a>
+              <%= erb :_art, :layout => false %>
+            </div>
+
+            <div id="ironruby" class="topic subpage" style="display: none">
+              <a name="/projects/ironruby"></a>
+              <%= erb :_ironruby, :layout => false %>
+            </div>
+
+            <div id="sourceaid" class="topic subpage" style="display: none">
+              <a name="/projects/sourceaid"></a>
+              <%= erb :_sourceaid, :layout => false %>
+            </div>
+
+            <div id="assistment" class="topic subpage" style="display: none">
+              <a name="/projects/assistment"></a>
+              <%= erb :_assistment, :layout => false %>
+            </div>
+
+            <div id="about" class="topic subpage" style="display: none">
+              <a name="/about"></a>
+              <%= erb :_about, :layout => false %>
+            </div>
+
+            <div id="resume" class="topic subpage" style="display: none">
+              <a name="/about/resume" title="Jimmy Schementi - Software Developer"></a>
+              <%= erb :_resume, :layout => false %>
+            </div>
+
+          </div>
+
+      </div> <!-- #main -->
+
+    </div> <!-- #wrap -->
+
+    <div id="footer">
+      <div class="inside">
+        <%= erb :_footer, :layout => false %>
       </div>
-
     </div>
 
+    <!--
     <script type="text/javascript">
       roundTheWorld();
     </script>
+    -->
+
   </body>
 </html>