Added initial styles

ryanbriones · Feb 5, 2012 · 40f3c21 · 40f3c21
1 parent 0444671
commit 40f3c21
Show file tree

Hide file tree

Showing 6 changed files with 210 additions and 21 deletions.
diff --git a/lib/time_budget/application.rb b/lib/time_budget/application.rb
@@ -7,7 +7,7 @@ class Application < Sinatra::Base
     get("/") do
       days = []
       (0..7).each do |day_number|
-        day_name = Date::DAYNAMES[day_number]
+        day_name = Date::ABBR_DAYNAMES[day_number]
         activities = DB[:activities].filter(day: day_number).all.map do |activity_data|
           OpenStruct.new(activity_data)
         end

diff --git a/lib/time_budget/public/stylesheets/fluid_grid.css b/lib/time_budget/public/stylesheets/fluid_grid.css
@@ -45,7 +45,7 @@
 
 
 .container_4 .grid_1 {
-	width:21.0%;
+	width:20%;
 }
 
 
@@ -86,4 +86,4 @@
 
 .clearfix {
 	display: block;
-}
+}
diff --git a/lib/time_budget/public/stylesheets/reset.css b/lib/time_budget/public/stylesheets/reset.css
@@ -0,0 +1,102 @@
+/* 
+html5doctor.com Reset Stylesheet
+v1.6.1
+Last Updated: 2010-09-17
+Author: Richard Clark - http://richclarkdesign.com 
+Twitter: @rich_clark
+*/
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+body {
+    line-height:1;
+}
+
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section { 
+    display:block;
+}
+
+nav ul {
+    list-style:none;
+}
+
+blockquote, q {
+    quotes:none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content:'';
+    content:none;
+}
+
+a {
+    margin:0;
+    padding:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+/* change colours to suit your needs */
+ins {
+    background-color:#ff9;
+    color:#000;
+    text-decoration:none;
+}
+
+/* change colours to suit your needs */
+mark {
+    background-color:#ff9;
+    color:#000; 
+    font-style:italic;
+    font-weight:bold;
+}
+
+del {
+    text-decoration: line-through;
+}
+
+abbr[title], dfn[title] {
+    border-bottom:1px dotted;
+    cursor:help;
+}
+
+table {
+    border-collapse:collapse;
+    border-spacing:0;
+}
+
+/* change border colour to suit your needs */
+hr {
+    display:block;
+    height:1px;
+    border:0;   
+    border-top:1px solid #cccccc;
+    margin:1em 0;
+    padding:0;
+}
+
+input, select {
+    vertical-align:middle;
+}
diff --git a/lib/time_budget/public/stylesheets/time_budget.css b/lib/time_budget/public/stylesheets/time_budget.css
@@ -1,51 +1,133 @@
+body {
+  margin-bottom: 5em;
+}
+
 p, h1, h2, h3, h4, ul, li {
+  font-family: 'Lato', sans-serif;
   margin: 0;
   padding: 0;
 }
-
+
+h1 {
+  font-size: 2.4em;
+  font-weight: 100;
+}
+
+h2 {
+  font-size: 1.618em;
+}
+
+h3 {
+  font-size: 1em;
+}
+
+p {
+  font-weight: 400;
+}
+
+section.container { 
+
+}
+
 #masthead {
-  margin-bottom: 10px;
+  margin: 10px;
+}
+
+#masthead { 
+  margin: 1.5em auto 2em auto;
 }
 
 .day {
-  background-color: #CCC;
-  height: 300px;
+  background-color: #FAFAFA;
+  border-top: 4px solid #444;
+  border-bottom: 1px solid rgba(204, 204, 204, 0.4);
+  border-left: 1px solid rgba(204, 204, 204, 0.4);
+  border-right: 1px solid rgba(204, 204, 204, 0.4);  
+  height: 280px;
+  -webkit-box-shadow: 0px 1px 4px #EEE;
+  min-width: 203px;
 }
 
 .day > p {
-  margin: 10px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVQYGWN8JMjwn4EAYCIgz/D+LwMDXkUgBYLMBBSBFIAAVpNAJiADDEUwK/AqglmBVRG6FRiKsFmBrAgAY2IN8JTefwoAAAAASUVORK5CYII=) repeat;
+  background-color: #E21100;
+  border: 1px solid #b40e02;
+  color: #FAFAFA;
+  height: 1.5em;
+  margin: 0 auto 10px auto;
+  text-transform: uppercase;
+  padding: 2px 0;
+  font-family: 'Lato', sans-serif;
+  font-size: 0.8em;
+  font-weight: 900;
+  letter-spacing: 2px;
+  text-align: center;
+  width: 6em;  
 }
 
-.day section.free, .day section.over {
-  background-color: #AAA;
+.day section.free, .day section.over { 
+  background-color: #EEE;
   bottom: 0;
   padding: 3px 0;
   position: absolute;
+    left: -1px;
   text-align: center;
   width: 100%;
 }
 
+.day section.free { 
+  border: 1px solid #DDD;
+}
+
+.day section.free p {
+  font-size: 0.8em;
+  letter-spacing: 2px;
+  height: 1.5em;
+  padding-top: 3px;
+  text-transform: uppercase;
+}
+
 .day section.over {
-  background-color: #FAA;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVQYGWN8JMjwn4EAYCIgz/D+LwMDXkUgBYLMBBSBFIAAVpNAJiADDEUwK/AqglmBVRG6FRiKsFmBrAgAY2IN8JTefwoAAAAASUVORK5CYII=) repeat;
+  background-color: #E21100;
+  border: 1px solid #b40e02;  
+}
+
+section.over p {
+  color: #FFF;
+  display: block;
+  font-size: 0.8em;
+  letter-spacing: 2px;
+  height: 1.5em;
+  padding-top: 3px;
+  text-transform: uppercase;
 }
 
 ul.time_list {
   list-style: none;
   margin: 0 10px;
 }
 
+ul.time_list p {
+  height: 2em;
+  padding-top: 0.25em;
+}
+
 ul.time_list li {
   background-color: #FFF;
+  border: 1px solid #EEE;
   margin-bottom: 10px;
   padding-left: 5px;
+  height: 2em;
 }
 
 ul.time_list li span {
-  border-left: 1px dashed #CCC;
+  border-left: 1px dashed #EEE;
   display: block;
   float: right;
   text-align: center;
-  width: 30px;
+  width: 3em;
+  height: 2em;  
 }
 
 .time_block {

diff --git a/lib/time_budget/views/budget/day.haml b/lib/time_budget/views/budget/day.haml
@@ -4,12 +4,14 @@
   %ul.time_list
     - day.activities.each do |activity|
       %li
-        = activity.title
-        %span= activity.hours_and_minutes
+        %p.activity
+          = activity.title
+          %span= activity.hours_and_minutes
 
   %section{:class => (day.has_time_available? ? "free" : "over")}
     - if day.has_time_available?
-      = day.hours_and_minutes_available
-      Free
+      %p 
+        = day.hours_and_minutes_available
+        Free
     - else
-      Overbudget!
+      %p Overbudget!
diff --git a/lib/time_budget/views/budget/show.haml b/lib/time_budget/views/budget/show.haml
@@ -9,13 +9,16 @@
   %meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}
   %title Time Budget
   %meta{content: "width=device-width,initial-scale=1", name: "viewport"}
-  
+
+  %link{rel: "stylesheet", type: "text/css", href: "/stylesheets/reset.css"}
   %link{rel: "stylesheet", type: "text/css", href: "/stylesheets/fluid_grid.css"}
   %link{rel: "stylesheet", type: "text/css", href: "/stylesheets/time_budget.css"}
-    
+  %link{rel: "stylesheet", type: "text/css", href: "http://fonts.googleapis.com/css?family=Lato:100,400,900"} 
+   
 %body
   %section#masthead.container.container_4
-    .grid_4 Time Budget
+    .grid_4 
+      %h1 Time Budget
     
     .clear &nbsp;