added header, footer, logo and styling

dbarnhart · Jan 29, 2012 · 585f05f · 585f05f
1 parent e6e94bf
commit 585f05f
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 13 deletions.
diff --git a/app/assets/images/logo.png b/app/assets/images/logo.png
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
@@ -0,0 +1,111 @@
+.container {
+	width: 710px;
+}
+
+body {
+	background: #cff;
+}
+
+header {
+	padding-top: 20px;
+}
+
+header img {
+	padding: 1em;
+	background: white;
+}
+
+section {
+	margin-top: 1em;
+	font-size: 120%;
+	padding: 20px;
+	background-color: white;
+}
+
+section h1 {
+	font-size: 200%;
+}
+
+/* Links */
+
+a {
+	color: #09c;
+	text-decoration: none;
+}
+
+a:hover {
+	color: #069;
+	text-decoration: underline;
+}
+
+a:visited {
+	color: #069;
+}
+
+/* Navigation */
+
+nav {
+  float: right;
+  background-color: white;
+  padding: 0 0.7em;
+  white-space: nowrap;
+}
+
+nav ul {
+  margin: 0;
+  padding: 0;
+}
+
+nav ul li {
+  list-style-type: none;
+  display: inline-block;
+  padding: 0.2em 0;
+}
+
+nav ul li a {
+  padding: 0 5px;
+  font-weight: bold;
+}
+
+nav ul li a:visited {
+  color: #09c;
+}
+
+nav ul li a:hover {
+  text-decoration: underline;
+}
+
+/* Sign up button */
+
+a.signup_button {
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+  text-align: center;
+  width: 190px;
+  color: white;
+  background: #006400;
+  font-size: 150%;
+  font-weight: bold;
+  padding: 20px;
+}
+
+/* Round corners */
+
+.round {
+  -moz-border-radius:    10px;
+  -webkit-border-radius: 10px;
+  border-radius:         10px;
+}
+
+footer {
+  text-align: center;
+  margin-top: 10px;
+  width: 710px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+footer nav {
+  float: none;
+}
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -7,4 +7,8 @@ def full_title(page_title)
 			"#{base_title} | #{page_title}"
 		end
 	end
+
+	def static_page_path(page)
+		"/pages/" + page
+	end
 end
diff --git a/app/helpers/static_pages_helper.rb b/app/helpers/static_pages_helper.rb
@@ -1,5 +1,2 @@
 module StaticPagesHelper
-	def static_page_path(page)
-		"pages/" + page
-	end
 end
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
@@ -0,0 +1,10 @@
+<footer>
+	<nav class="round">
+		<ul>
+			<li><%= link_to "About", static_page_path('about') %></li>
+			<li><%= link_to "Contact", static_page_path('about') %></li>
+			<li><a href="http://news.railstutorial.org/">News</a></li>
+      <li><a href="http://railstutorial.org/">Rails Tutorial</a></li>
+		</ul>
+	</nav>
+</footer>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
@@ -0,0 +1,10 @@
+<header>
+	<%= image_tag("logo.png", alt: "Sample App", class: "round") %>
+	<nav class="round">
+		<ul>
+			<li><%= link_to "Home", '#' %></li>
+			<li><%= link_to "Help", '#' %></li>
+			<li><%= link_to "Sign In", '#' %></li>
+		</ul>
+	</nav>
+</header>
diff --git a/app/views/layouts/_stylesheets.html.erb b/app/views/layouts/_stylesheets.html.erb
@@ -0,0 +1,7 @@
+<!--[if lt IE 9]>
+<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+<![endif]-->
+<%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
+<%= stylesheet_link_tag 'blueprint/print', :media => 'print' %>
+<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]-->
+<%= stylesheet_link_tag    "application", :media => "all" %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -2,15 +2,17 @@
 <html>
 <head>
   <title><%= full_title(yield(:title)) %></title>
-  <%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
-  <%= stylesheet_link_tag 'blueprint/print', :media => 'print' %>
-  <%= stylesheet_link_tag    "application", :media => "all" %>
+  <%= render 'layouts/stylesheets' %>
   <%= javascript_include_tag "application" %>
   <%= csrf_meta_tags %>
 </head>
 <body>
-
-<%= yield %>
-
+	<div class="container">
+		<%= render 'layouts/header' %>
+		<section class="round">
+			<%= yield %>
+		</section>
+		<%= render 'layouts/footer' %>
+	</div>
 </body>
 </html>
diff --git a/app/views/static_pages/home.html.erb b/app/views/static_pages/home.html.erb
@@ -5,7 +5,4 @@
 	<a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
 	sample application.
 </p>
-<p>
-	<%= link_to "About", static_page_path('about') %>
-	<%= link_to "Help", static_page_path('help') %>
-</p>
+<%= link_to "Sign up now!", '#', class: "signup_button round" %>