From bbce0a265d072bf59c28188064736e821c1695e8 Mon Sep 17 00:00:00 2001 From: Rogelio Guzman Date: Sat, 21 Jan 2012 15:39:16 +0100 Subject: [PATCH] Added simple footer --- app/assets/stylesheets/style.css.scss | 382 +++++-------------------- app/views/layouts/_footer.html.erb | 4 + app/views/layouts/_header.html.erb | 49 ++++ app/views/layouts/application.html.erb | 56 +--- 4 files changed, 133 insertions(+), 358 deletions(-) create mode 100644 app/views/layouts/_footer.html.erb create mode 100644 app/views/layouts/_header.html.erb diff --git a/app/assets/stylesheets/style.css.scss b/app/assets/stylesheets/style.css.scss index f23e707..8ca40aa 100644 --- a/app/assets/stylesheets/style.css.scss +++ b/app/assets/stylesheets/style.css.scss @@ -10,28 +10,88 @@ } @mixin linear_gradient($c1, $p1, $c2, $p2){ -background: linear-gradient(bottom, $c1 $p1,$c2 $p2); -background: -o-linear-gradient(bottom, $c1 $p1,$c2 $p2); -background: -moz-linear-gradient(bottom, $c1 $p1,$c2 $p2); -background: -webkit-linear-gradient(bottom, $c1 $p1,$c2 $p2); -background: -ms-linear-gradient(bottom, $c1 $p1,$c2 $p2); + background: linear-gradient(bottom, $c1 $p1,$c2 $p2); + background: -o-linear-gradient(bottom, $c1 $p1,$c2 $p2); + background: -moz-linear-gradient(bottom, $c1 $p1,$c2 $p2); + background: -webkit-linear-gradient(bottom, $c1 $p1,$c2 $p2); + background: -ms-linear-gradient(bottom, $c1 $p1,$c2 $p2); } @mixin linear_gradient_3($c1, $p1, $c2, $p2, $c3, $p3){ -background: linear-gradient(bottom, $c1 $p1,$c2 $p2,$c3 $p3); -background: -o-linear-gradient(bottom, $c1 $p1,$c2 $p2,$c3 $p3); -background: -moz-linear-gradient(bottom, $c1 $p1,$c2 $p2,$c3 $p3); -background: -webkit-linear-gradient(bottom, $c1 $p1,$c2 $p2,$c3 $p3); -background: -ms-linear-gradient(bottom, $c1 $p1,$c2 $p2,$c3 $p3); + background: linear-gradient(bottom, $c1 $p1,$c2 $p2,$c3 $p3); + background: -o-linear-gradient(bottom, $c1 $p1,$c2 $p2,$c3 $p3); + background: -moz-linear-gradient(bottom, $c1 $p1,$c2 $p2,$c3 $p3); + background: -webkit-linear-gradient(bottom, $c1 $p1,$c2 $p2,$c3 $p3); + background: -ms-linear-gradient(bottom, $c1 $p1,$c2 $p2,$c3 $p3); } -a{color:#049CDB;} + +* { + margin: 0; +} +html, body { + height: 100%; +} + +a{ + color:#049CDB; +} + +.container { + min-height: 100%; + height: auto !important; + height: 100%; + margin: 0 auto; + margin-bottom:-30px; +} + +#footer, #push { + height:30px; +} +#footer{ + width:100%; + text-align:center; + padding: 10px 0; + padding-bottom:20px; + background: #222; +} + #content{ margin-top:25px; } + #billboard{ background: url('bg_hero.png'); } + +#side{ + @include shadow(0px, 1px, 2px, #999); + @include rounded(5px); + h3{padding:3px 10px;} + ul{ + list-style:none; + padding:0; + margin:0; + } + p{ + font-size:10px; + color:#333; + @include rounded(5px); + margin: 2px 0 2px 0; + padding:4px; + } + li{ + border-top:1px solid #fff; + border-bottom:1px solid #fff; + a{text-decoration:none} + &:hover{ + background:#efefef; + } + padding:10px; + } + min-height:400px; +} + #title{ h1{ position:relative; @@ -48,7 +108,7 @@ a{color:#049CDB;} #tutorial_wrapper{ .tutorial{ - padding:10px; + padding:10px; &:hover{ background:#ebf5ff; } @@ -145,37 +205,9 @@ a{color:#049CDB;} @include rounded(5px); } -#side{ - @include shadow(0px, 1px, 2px, #999); - @include rounded(5px); - h3{padding:3px 10px;} - ul{ - list-style:none; - padding:0; - margin:0; - } - p{ - font-size:10px; - color:#333; - @include rounded(5px); - margin: 2px 0 2px 0; - padding:4px; - } - li{ - border-top:1px solid #fff; - border-bottom:1px solid #fff; - a{text-decoration:none} - &:hover{ - background:#efefef; - } - padding:10px; - } - min-height:400px; -} - #tutorial_form{ -width: 420px; -border-right: 1px solid #DDD; + width: 420px; + border-right: 1px solid #DDD; } .blue { @@ -211,275 +243,9 @@ border-right: 1px solid #DDD; h2{ font-size: 100%; } } - - - -// body { -// font-family: Verdana, Helvetica, Arial; -// font-size: 14px; -// } -// #fork{ -// position:fixed; -// z-index:5; -// top:0; -// right:0; -// } - -// a img { -// border: none; -// } - -// a { -// color: #0000FF; -// } - .clear { clear: both; height: 0; overflow: hidden; } -// #container { -// width:1000px; -// position:relative; -// margin: 0 auto; -// background-color: #FFF; -// margin-top: 0px; -// @include rounded(5px); -// } - -// #header{ -// .logo{ -// font-size:35px; -// color:#333; -// text-decoration:none; -// } - -// margin-bottom:20px; -// h1 { -// position:absolute; -// top:6px; -// font-size:1.3em; -// left:170px; -// font-family:sans-serif; -// font-weight:normal; -// color:#999; -// } -// } - -// #session_links{ -// margin-top:22px; -// a{ -// color:#666; -// margin-left:25px; -// text-transform: uppercase; -// text-decoration:none; -// &:hover{text-decoration:underline;} - -// } - -// } -// #navigation{ -// margin-top:5px; -// float: right; -// width: 100%; -// background:#444; -// #search{ -// input{ -// width:200px; -// margin: 4px 6px 0 0; -// } -// color:#fff; -// float:right; -// } -// ul{ -// margin: 0; -// padding: 0; -// li{ -// list-style-type: none; -// display: inline; -// } -// } -// li a{ -// display: block; -// float: left; -// padding: 5px 10px; -// color: #fff; -// text-decoration: none; -// border-right: 1px solid #fff; -// &.current, &:hover{ -// background: #f60; -// } -// } -// } -// .user_link a{ -// color:#666; - -// } -// #content { -// min-height:500px; -// padding: 20px 40px; -// } - -// #tutorial_wrapper{ -// border-top:1px solid #666; -// border-left:1px solid #666; -// border-right:1px solid #666; -// .tutorial{ -// padding:10px; -// font-weight:bold; -// height:50px; -// border-bottom: 1px solid #333; -// &:hover{ -// background:#ebf5ff; -// } -// } -// } -// .live{ color:darken(#f60, 10%); } - -// .tutorial{ -// .odd{ -// background:#eee; -// } -// .tutorial.even{ -// background:#FFF; -// } -// } - -// #gem{ -// position:relative; -// h1{ -// color:#333; -// } -// #authors{ -// position:absolute; -// top:10px; -// right:10px; -// } -// ul{ -// float:right; -// list-style: none; -// li{ display:inline; } -// } -// padding:10px 20px; -// margin:10px; -// margin-bottom:30px; -// @include shadow(0px, 4px, 5px, #666); -// background:#efefef; -// } -// .gem_tag{ -// background:#f60; -// background: -moz-linear-gradient(top, #e50 0%, #f60 20%, #e50 50%); -// background: -webkit-linear-gradient(top, #e50 0%, #f60 20%, #e50 50%); -// border-radius:4px; -// border:1px solid #c30; -// -moz-border-radius:4px; -// -webkit-border-radius:4px; -// margin:3px; -// padding:5px 10px; -// font-size:12px; -// a { -// color:#fff; -// text-decoration:none; -// } -// } -// #footer{ -// background: -moz-linear-gradient(top,#FFF 75%,#DDD); -// background: -webkit-linear-gradient(top,#FFF 75%,#DDD); -// padding:20px; -// text-align:center; -// font-weight:bold; -// @include rounded(5px); -// } - -// .no_decoration{ -// text-decoration:none; -// } -// .inline{ -// display:inline; -// } -// .left{ -// float:left; -// } -// .right{ -// float:right; -// } -// .small{ -// font-size:10px; -// } -// /* Github sign in*/ -// .sign_in_with_github{ -// position:relative; -// margin-top:10px; -// } -// .sign_in_with_github a { -// display:block; -// text-decoration:none; -// height: 23px; -// width: 175px; -// text-align: right; -// padding-right: 23px; -// padding-top:3px; -// color: #293f46; -// text-shadow: #fff 1px 1px 2px; -// border: 2px solid #aaa; -// background: #aaa -webkit-gradient(linear, left bottom, left top, color-stop(0, #aaa), color-stop(0.9, #ddd)); -// background: #c1e6ea -moz-linear-gradient( center bottom, rgb(161,200,209) 0%, rgb(211,245,246) 81%); -// -webkit-border-radius: 5px; -// -moz-border-radius: 5px; -// font: bold 15px "Lucida Grande"; -// &:hover{ -// background: #aaa -webkit-gradient(linear, left bottom, left top, color-stop(0, #bbb), color-stop(0.9, #fefefe)); -// background: #c1e6ea -moz-linear-gradient( center bottom, rgb(161,200,209) 0%, rgb(211,245,246) 81%); -// } -// } - -// /* Flash notice*/ -// #flash_notice, #flash_error, #flash_alert { -// padding: 5px 8px; -// margin: 10px 0; -// } - -// #flash_notice { -// background-color: #CFC; -// border: solid 1px #6C6; -// } - -// #flash_error, #flash_alert { -// background-color: #FCC; -// border: solid 1px #C66; -// } - -// .fieldWithErrors { -// display: inline; -// } - -// .error_messages { -// width: 400px; -// border: 2px solid #CF0000; -// padding: 0px; -// padding-bottom: 12px; -// margin-bottom: 20px; -// background-color: #f0f0f0; -// font-size: 12px; -// } - -// .error_messages h2 { -// text-align: left; -// font-weight: bold; -// padding: 5px 10px; -// font-size: 12px; -// margin: 0; -// background-color: #c00; -// color: #fff; -// } - -// .error_messages p { -// margin: 8px 10px; -// } - -// .error_messages ul { -// margin: 0; -// } - - diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb new file mode 100644 index 0000000..786e59a --- /dev/null +++ b/app/views/layouts/_footer.html.erb @@ -0,0 +1,4 @@ + diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb new file mode 100644 index 0000000..0212bba --- /dev/null +++ b/app/views/layouts/_header.html.erb @@ -0,0 +1,49 @@ + diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 9d8dbfc..8c52aee 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -18,58 +18,10 @@ -
+
<%# <%= link_to (image_tag 'fork.png', :id => 'fork'), "http://github.com/rogeliog/nerdgem", :target => "_blank", %>%> - + <%= render 'layouts/header' %>
<% flash.each do |name, msg| %> @@ -81,7 +33,11 @@
<%= yield %>
+
+
+ <%= render 'layouts/footer'%> +