messed with some new camo backgrounds

Gemfile

@@ -1,9 +1,7 @@
-source :rubygems
+source 'https://rubygems.org'
 gem "sinatra"
 gem "slim"
 gem "sass"
 gem "redcarpet"
-gem "coffee-script"
-gem "therubyracer"
 gem "pony"
 gem "thin"

main.rb

@@ -1,6 +1,11 @@
 ########### DAZ4126 website ###########
-require 'bundler'
-Bundler.require
+require "sinatra"
+require "slim"
+require "sass"
+require "redcarpet"
+require "pony"
+require "thin"
+require 'sinatra/reloader' if development?
 
 ########### configuration & settings ###########
 configure do
@@ -35,6 +40,13 @@ def webfonts
     "<link href=\"http://fonts.googleapis.com/css?family=#{(@fonts?settings.fonts+@fonts:settings.fonts).uniq.*'|'}\" rel=\"stylesheet\" />"
   end
 
+  def section(name)
+    begin
+      slim :section, locals: {name: name}
+    rescue
+    end
+  end
+
 end
 
 ###########  Routes ###########
@@ -88,14 +100,62 @@ def webfonts
 
 __END__
 ########### Views ###########
-
+@@section
+section
+  == slim name
+
 @@index
-h1 title='Traditional Mancunian Greeting' Alright Mate!
-p  Welcome to my website! 
-P My name is DAZ and I work, rest and play in Manchester,UK. I build websites, play water polo and eat veggie burgers.
-p Thanks for visiting. Have a nice day!
-== slim :contact
+== section :about
+== section :contact
+== section :twitter
+== section :websites
+== section :writing
+== section :github
+
+
+
+
+@@about
+markdown:
+  Alright Mate!
+  ==============
+
+  Hello from #{rand(10)}
+
+  Welcome to my website!
+
+  My name is DAZ and I work, rest and play in Manchester,UK. I build websites, play water polo and eat veggie burgers.
 
+  Thanks for visiting. Have a nice day!
+
+@@twitter
+h1 Twitter
+p Follow me or tweet me <a title="Tweet Me" href="http://twitter.com/#!/daz4126">@daz4126</a>
+
+@@websites
+h1 websites
+p I like to build websites. Here are some of them:
+ul
+  li <a href="http://cardsinthecloud.com/">Cards in the Cloud</a>
+  li <a href="http://euenergyfocus.co.uk/">EU Energy Focus</a>
+  li <a href="http://ididitmyway.heroku.com/">I Did It My Way</a>
+  li <a href="http://identity-manchester.heroku.com/">Identity Manchester</a>
+
+@@writing
+markdown:
+  #Writing
+
+  I write articles about Ruby and Sinatra for Rubysource:
+
+    * [Fiddling Around With Sinatra part 2](http://rubysource.com/fiddling_around_with_sinatra_ii/)
+    *  [Fiddling Around With Sinatra part 1](http://rubysource.com/fiddling-around-with-sinatra/)
+    *  [Using Sinatra Helpers to Clean Up Your Code](http://rubysource.com/using-sinatra-helpers-to-clean-up-your-code/)
+    *  [Sinatra Up and Running: A Book Review](http://rubysource.com/sinatra-up-and-running-a-book-review/")
+
+@@github
+h1 Github
+p I love programming and developing web apps. All my stuff is saved on <a href="https://github.com/daz4126">Github</a>.
+
 @@quote1
 blockquote rel="http://www.flickr.com/photos/nativephotography/4343566244/" We Do Things Differently Here
 cite Anthony H Wilson

views/layout.slim

@@ -9,25 +9,22 @@ html
     link rel="shortcut icon" href="/favicon.ico"
     /[if lt IE 9]
       script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"
-    == webfonts
-    == javascripts
-    == styles
+    link href='/main.css' media="screen, projection" rel="stylesheet"
   body
     header role="banner"
       hgroup
         h1
           a title="Come Home" href="/" = settings.name
-        h2 Made in Manchester
+        h2 Made in Manchester EST. 1978
     -if @banner
       #banner 
         == slim @banner.to_sym
     #main role='main'
       .content
         == yield
-      == slim @sidebar || :sidebar
     footer role="contentinfo"
       small 
         p © Copyleft #{settings.author} #{Time.now.year==2011 ? '2011': '2011-'+Time.now.year.to_s}
-        p This site has been built using <a href="http://xubuntu.org">Xubuntu</a>, <a href="http://ruby-lang.org/en/">Ruby</a>, <a href="http://sinatrarb.com">Sinatra</a> &amp; <a href="http://inkscape.org/">Inkscape</a>. Hosting is provided by <a href="http://heroku.com">Heroku</a>.
+        p This site has been built using the very best of open source: <a href="http://crunchbanglinux.org/">CrunchBang Linux</a>, <a href="http://ruby-lang.org/en/">Ruby</a>, <a href="http://sinatrarb.com">Sinatra</a> &amp; <a href="http://inkscape.org/">Inkscape</a>. Hosting is provided by <a href="http://heroku.com">Heroku</a>.
       javascript:
         var _gaq=[["_setAccount","#{ settings.analytics }"],["_trackPageview"]];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=g.src="//www.google-analytics.com/ga.js";s.parentNode.insertBefore(g,s)}(document,"script"))

views/settings.scss

@@ -3,8 +3,6 @@ $headingfont: Abel,"Liberation Sans",Helvetica ,Arial, "Nimbus Sans L", FreeSans
 $basefontsize: 13px;
 $thickness:6px;
 $width: 90%;
-$mainwidth: 62%;
-$sidebarwidth: 32%;
 
 //colors
 $olive:#6C7360;
@@ -18,16 +16,19 @@ $orange:#F1BC66;
 $purple:#7A6577;
 $black:#444;
 $white:#ececec;
+$transwhite:rgba(#ececec,0.5);
 
 $brightyellow:#F1DC3A;
 $brightorange:#F6A523;
 $brightblack:#222;
 
-$border:$white;
-$text:$black;
-$html:$olive url(texture.png) -24px 13px repeat;
-$header:$black;
-$banner:$yellow;
-$quotetext:$black;
-$main:$grey;
-$footer:$black;
+$border:$olive;
+$body: $transwhite;
+$text: $black;
+$headings: $white;
+$html:$olive url(camo2.png) 0 0 repeat;
+$header: $black url(fac51.jpg) -30px -370px no-repeat;;
+$banner: $yellow;
+$quotetext: $black;
+$main: $grey;
+$footer: $black;

views/styles.scss

@@ -7,9 +7,11 @@ html{
 }
 
 body{
+  background: $body;
+  padding: 16px;
+  border-radius: 12px;
   font-family:$normalfont;
   font-size:$basefontsize;
-  border: $thickness solid $border;
   max-width: 840px;
   margin: 10px auto;
   box-shadow: 5px 5px 5px rgba(0,0,0,0.16),-5px 5px 5px rgba(0,0,0,0.16);
@@ -26,15 +28,21 @@ line-height:1.1;
 margin: 0.2em 0 0.8em;
 }
 
-h1,h2,h3,h4,h5,h6{@include headings($black);}
+ul{
+  margin: 0;
+  padding: 0;
+  list-style: square;
+}
+
+h1,h2,h3,h4,h5,h6{@include headings($headings);}
 
 h1{font-size:2.6em;}
 h2{font-size:2.2em;}
 h3{font-size:2em;}
 
 header{
     background: $header;
-    border-bottom: $thickness solid $border;
+    border: $thickness solid $border;
     padding:20px;
   hgroup{
   h1{
@@ -90,25 +98,8 @@ header{
   @include clearfix;
   padding: 20px;
   background:$main;
-  border-bottom: $thickness solid $border;
+  border: $thickness solid $border;
   @include links($black,$black,$yellow);
-  .content{float:left;width:$mainwidth;}
-  .sidebar{
-    @include zero;
-    float:right;
-    width:$sidebarwidth;
-    list-style:none;
-    li{
-      margin:0 20px 0 0;
-      padding: 4px 0;
-      font-size:1em;
-      border-top:solid $black $thickness/2;
-      ul{margin:0;padding: 0 1.1em;}
-      li{border:0;list-style:square;}
-    }
-    h1{font-size:2.2em;color:$black;}
-    p{font-size: 1.1em;}
-    }
   p{
       text-shadow: 1px 1px 0 rgba($white,0.2);
   }
@@ -146,22 +137,21 @@ header{
 
 footer{
   background:$footer;
+  border: $thickness solid $border;
   padding:20px;
   small{font-size:0.85em;display:block;}
   p{color: $white;}
   @include links($yellow,$black);
 }
 
-#main a#badge{
-  display: block;
-  height: 105px;
-  width: 105px;
-  background: url(http://cdn.sitepoint.com/author-badges/badges/black/105.png) no-repeat center;
-  text-indent: 100%; white-space: nowrap; overflow: hidden;
-  margin: 0 auto;
-  &:hover{
-    background: url(http://cdn.sitepoint.com/author-badges/badges/black/105.png) no-repeat center;
-  }
+
+section{
+  width:50%;
+  padding: 8px;
+  float: left;
+  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+  box-sizing: border-box; 
 }
 
 @import "responsive";