Browse files

Add simple sticky footer.

  • Loading branch information...
1 parent 3582175 commit 5c7fff599d53095ea45268ba99b28cd4d62354b7 @jschementi committed Jul 12, 2010
Showing with 176 additions and 75 deletions.
  1. +1 −2 app.rb
  2. +5 −0 public/app.js
  3. +49 −0 public/sticky-footer.css
  4. +23 −2 public/style.css
  5. +7 −0 views/_footer.erb
  6. +91 −71 views/layout.erb
View
3 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
View
5 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');
});
}
View
49 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]-->
+
+*/
View
25 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;
+ }
View
7 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>
View
162 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>

0 comments on commit 5c7fff5

Please sign in to comment.