Permalink
Browse files

Improved blog site look and feel

  • Loading branch information...
1 parent e4e178f commit 39b0579ea2d19f2b16a7496c1b7d9855fc3fd84d @nesquena nesquena committed Mar 18, 2010
@@ -1,6 +1,6 @@
SampleBlog.controllers :posts do
get :index do
- @posts = Post.all
+ @posts = Post.all(:order => 'created_at desc')
render 'posts/index'
end
@@ -0,0 +1,129 @@
+body
+ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
+ font-size: 14px
+ background-color: #E6E0D9
+ a
+ color: #336699
+ h2
+ padding-bottom: 12px
+ font-weight: bold
+ h3
+ padding-bottom: 10px
+ pre
+ display: block
+ background-color: #F8F8FF
+ border: 1px solid #DEDEDE
+ color: #444444
+ line-height: 1.5em
+ margin-bottom: 10px
+ padding: 0.5em
+ ul.bulleted
+ margin-left: 20px
+ margin-bottom: 10px
+ li
+ list-style-type: square
+ span
+ font-weight: bold
+
+#container
+ width: 80%
+ margin: 20px auto
+ overflow: hidden
+
+#header
+ background-color: #900209
+ padding: 30px 10px 20px 10px
+ border-bottom: 2px solid #EC9A94
+ overflow: hidden
+ h1
+ float: left
+ color: #ECEBC3
+ font-size: 2.3em
+ font-weight: bold
+ ul.menu
+ margin-left: 80px
+ margin-top: 10px
+ float: left
+ overflow: hidden
+ li
+ float: left
+ margin-right: 20px
+ padding-bottom: 5px
+ a
+ font-size: 1.2em
+ color: #DFF6FC
+ text-decoration: none
+ &:hover
+ text-decoration: underline
+
+
+#main
+ float: left
+ width: 600px
+ padding-top: 20px
+ h2
+ font-size: 2.1em
+ .post
+ margin-bottom: 20px
+ p
+ padding-bottom: 10px
+ .title
+ font-family: "Georgia,Times New Roman,serif"
+ font-size: 2em
+ color: #752A26
+ a
+ color: #752A26
+ text-decoration: none
+ &:hover
+ text-decoration: underline
+ .date
+ font-size: 1.1em
+ color: #999999
+ display: block
+ margin-bottom: 15px
+ margin-top: 2px
+ .body
+ padding-bottom: 10px
+ .details
+ border-top: 1px solid #CCCCCC
+ margin-bottom: 0.25em
+ padding: 5px 0
+ overflow: hidden
+ .author
+ float: left
+ padding-right: 5px
+ border-right: 1px solid #CCCCCC
+ #show
+ .author
+ border-right: none
+
+#sidebar
+ padding: 20px
+ margin-left: 20px
+ float: left
+ height: 650px
+ width: 320px
+ border: 1px dotted black
+ p
+ font-weight: bold
+ padding-top: 10px
+ padding-bottom: 12px
+
+
+#about
+ h2
+ font-family: "Georgia,Times New Roman,serif"
+ font-size: 2em
+ color: #752A26
+ h3
+ font-family: "Georgia,Times New Roman,serif"
+ font-size: 1.5em
+ color: #752A26
+ padding-bottom: 6px
+
+ p
+ padding-bottom: 12px
+
+
+#footer
+ padding: 30px 10px 10px 10px
@@ -0,0 +1,36 @@
+!!! Strict
+%html
+ %head
+ %title= [@title, "Padrino Sample Blog"].compact.join(" | ")
+ = stylesheet_link_tag 'reset', 'application'
+ = javascript_include_tag 'jquery', 'application'
+ = yield_content :include
+ %body
+ #header
+ %h1 Sample Padrino Blog
+ %ul.menu
+ %li= link_to 'Blog', url_for(:posts, :index)
+ #container
+ #main= yield
+ #sidebar
+ - form_tag url_for(:posts, :index), :method => 'get' do
+ Search for:
+ = text_field_tag 'query', :value => params[:query]
+ = submit_tag 'Search'
+ %p Recent Posts
+ %ul.bulleted
+ %li Item 1 - Lorem ipsum dolorum itsum estem
+ %li Item 2 - Lorem ipsum dolorum itsum estem
+ %li Item 3 - Lorem ipsum dolorum itsum estem
+ %p Categories
+ %ul.bulleted
+ %li Item 1 - Lorem ipsum dolorum itsum estem
+ %li Item 2 - Lorem ipsum dolorum itsum estem
+ %li Item 3 - Lorem ipsum dolorum itsum estem
+ %p Latest Comments
+ %ul.bulleted
+ %li Item 1 - Lorem ipsum dolorum itsum estem
+ %li Item 2 - Lorem ipsum dolorum itsum estem
+ %li Item 3 - Lorem ipsum dolorum itsum estem
+ #footer
+ Copyright © 2009-2010 Padrino
@@ -1,6 +1,6 @@
.post
- .heading
- %h2= link_to(post.title, url_for(:posts, :show, :id => post.id))
- %p Posted by #{post.account.email}
- .contenta
- = simple_format(post.body)
+ .title= link_to post.title, url_for(:posts_show, :id => post)
+ .date= time_ago_in_words(post.created_at || Time.now) + ' ago'
+ .body= simple_format(post.body)
+ .details
+ .author Posted by #{post.account.email}
@@ -1,3 +1,3 @@
-%h1 Listing posts
+- @title = "Welcome"
-.posts= partial 'posts/post', :collection => @posts
+#posts= partial 'posts/post', :collection => @posts
@@ -1,8 +1,11 @@
-.post
- .heading
- %h2= @post.title
- %p Posted by #{post.account.email}
- .contenta
- = simple_format(@post.body)
+-@title = "#{@post.title}"
+
+#show
+ .post
+ .title= @post.title
+ .date= time_ago_in_words(@post.created_at || Time.now) + ' ago'
+ .body= simple_format(@post.body)
+ .details
+ .author Posted by #{@post.account.email}
-%p= link_to 'Back to all posts', url_for(:posts, :index)
+%p= link_to 'View all posts', url_for(:posts, :index)
View
Binary file not shown.
@@ -0,0 +1,123 @@
+body {
+ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+ font-size: 14px;
+ background-color: #E6E0D9; }
+ body a {
+ color: #336699; }
+ body h2 {
+ padding-bottom: 12px;
+ font-weight: bold; }
+ body h3 {
+ padding-bottom: 10px; }
+ body pre {
+ display: block;
+ background-color: #F8F8FF;
+ border: 1px solid #DEDEDE;
+ color: #444444;
+ line-height: 1.5em;
+ margin-bottom: 10px;
+ padding: 0.5em; }
+ body ul.bulleted {
+ margin-left: 20px;
+ margin-bottom: 10px; }
+ body ul.bulleted li {
+ list-style-type: square; }
+ body ul.bulleted li span {
+ font-weight: bold; }
+
+#container {
+ width: 80%;
+ margin: 20px auto;
+ overflow: hidden; }
+
+#header {
+ background-color: #900209;
+ padding: 30px 10px 20px 10px;
+ border-bottom: 2px solid #EC9A94;
+ overflow: hidden; }
+ #header h1 {
+ float: left;
+ color: #ECEBC3;
+ font-size: 2.3em;
+ font-weight: bold; }
+ #header ul.menu {
+ margin-left: 80px;
+ margin-top: 10px;
+ float: left;
+ overflow: hidden; }
+ #header ul.menu li {
+ float: left;
+ margin-right: 20px;
+ padding-bottom: 5px; }
+ #header ul.menu li a {
+ font-size: 1.2em;
+ color: #DFF6FC;
+ text-decoration: none; }
+ #header ul.menu li a:hover {
+ text-decoration: underline; }
+
+#main {
+ float: left;
+ width: 600px;
+ padding-top: 20px; }
+ #main h2 {
+ font-size: 2.1em; }
+ #main .post {
+ margin-bottom: 20px; }
+ #main .post p {
+ padding-bottom: 10px; }
+ #main .post .title {
+ font-family: "Georgia,Times New Roman,serif";
+ font-size: 2em;
+ color: #752A26; }
+ #main .post .title a {
+ color: #752A26;
+ text-decoration: none; }
+ #main .post .title a:hover {
+ text-decoration: underline; }
+ #main .post .date {
+ font-size: 1.1em;
+ color: #999999;
+ display: block;
+ margin-bottom: 15px;
+ margin-top: 2px; }
+ #main .post .body {
+ padding-bottom: 10px; }
+ #main .post .details {
+ border-top: 1px solid #CCCCCC;
+ margin-bottom: 0.25em;
+ padding: 5px 0;
+ overflow: hidden; }
+ #main .post .details .author {
+ float: left;
+ padding-right: 5px;
+ border-right: 1px solid #CCCCCC; }
+ #main #show .author {
+ border-right: none; }
+
+#sidebar {
+ padding: 20px;
+ margin-left: 20px;
+ float: left;
+ height: 650px;
+ width: 320px;
+ border: 1px dotted black; }
+ #sidebar p {
+ font-weight: bold;
+ padding-top: 10px;
+ padding-bottom: 12px; }
+
+#about h2 {
+ font-family: "Georgia,Times New Roman,serif";
+ font-size: 2em;
+ color: #752A26; }
+#about h3 {
+ font-family: "Georgia,Times New Roman,serif";
+ font-size: 1.5em;
+ color: #752A26;
+ padding-bottom: 6px; }
+#about p {
+ padding-bottom: 12px; }
+
+#footer {
+ padding: 30px 10px 10px 10px; }
@@ -0,0 +1,23 @@
+/*
+Meyer CSS Reset
+*/
+html,body,div,span,applet,object,iframe,
+h1,h2,h3,h4,h5,h6,p,blockquote,pre,
+a,abbr,acronym,address,big,cite,code,
+del,dfn,em,font,img,ins,kbd,q,s,samp,
+small,strike,strong,sub,sup,tt,var,
+dl,dt,dd,ol,ul,li,
+fieldset,form,label,legend,
+table,caption,tbody,tfoot,thead,tr,th,td{
+ margin:0;padding:0;border:0;outline:0;font-weight:inherit;
+ font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
+/* remember to define focus styles! */
+:focus{outline:0;}
+body{line-height:1;color:black;background:white;}
+ol,ul{list-style:none;}
+/* tables still need 'cellspacing="0"' in the markup */
+table{border-collapse:separate;border-spacing:0;}
+caption,th,td{text-align:left;font-weight:normal;}
+blockquote:before,blockquote:after,
+q:before,q:after{content:"";}
+blockquote,q{quotes:"" "";}

0 comments on commit 39b0579

Please sign in to comment.