Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

separate folders. sidebar. a few style changes. pages look for slim t…

…hen markdown before 404
  • Loading branch information...
commit 3078e82b72be7a6a1a895092c40239434a529437 1 parent da3c3ce
@daz4126 authored
View
BIN  .sass-cache/71559642e0c4a15b113d2ed01655104a7a0a34ba/_mixins.scssc
Binary file not shown
View
BIN  .sass-cache/71559642e0c4a15b113d2ed01655104a7a0a34ba/colours.scssc
Binary file not shown
View
BIN  .sass-cache/71559642e0c4a15b113d2ed01655104a7a0a34ba/main.rbc
Binary file not shown
View
BIN  .sass-cache/ef2c5f486331413205371f5527ea96357a786bfb/_mixins.scssc
Binary file not shown
View
BIN  .sass-cache/ef2c5f486331413205371f5527ea96357a786bfb/reset.scssc
Binary file not shown
View
BIN  .sass-cache/ef2c5f486331413205371f5527ea96357a786bfb/settings.scssc
Binary file not shown
View
BIN  .sass-cache/ef2c5f486331413205371f5527ea96357a786bfb/styles.scssc
Binary file not shown
View
1  Gemfile
@@ -5,6 +5,5 @@ gem "sass"
gem "redcarpet"
gem "coffee-script"
gem "therubyracer"
-#gem "rack-flash"
gem "pony"
gem "thin"
View
243 main.rb
@@ -8,9 +8,6 @@
set :author, ENV['author'] || 'DAZ'
set :analytics, ENV['ANALYTICS'] || 'UA-XXXXXXXX-X'
- set :public_folder, -> { root }
- set :views, -> { root }
-
set :javascripts, %w[ ]
set :fonts, %w[ Abel ]
@@ -58,19 +55,50 @@
end
get '/:page' do
- raise error(404) unless File.exists?(params[:page]+'.md')
- markdown params[:page].to_sym
+ if File.exists?('views/'+params[:page]+'.slim')
+ slim params[:page].to_sym
+ elsif File.exists?('views/'+params[:page]+'.md')
+ markdown params[:page].to_sym
+ else
+ raise error(404)
+ end
end
__END__
########### Views ###########
+@@sidebar
+ul.sidebar
+ li
+ h1 Twitter
+ p
+ a.twitter title="Tweet Me" href="http://twitter.com/#!/daz4126" @daz4126
+ li
+ h1 Github
+ li
+ h1 Writing
+ p I write articles about Ruby and Sinatra for Rubysources:
+ ul
+ li An Interview with Konstantin Haase
+ li Ruby Heros
+ li Ruby Golf
+ li Rails or Sinatra? Best of Both Worlds
+ li
+ h1 websites
+ p I like to build websites. Here are some of them:
+ ul
+ li Cards in the Cloud
+ li Identity
+ li EU Energy Focus
+ li I Did It My Way
+ li
+ h1 Blog
+ p Coming Soon!
+
@@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.
+p Welcome to my website! My name is DAZ and I work, rest and play in Manchester,UK.
p I enjoy building websites that are simple, but brilliant.
@@ -88,9 +116,8 @@
p I built this website so that I could write about all that stuff and show off some of my work. I love to build websites that are simple, yet brilliant at the same time. I am a big believer in Open Source. I write about Sinatra web development at <a href='http://rubysource.com'>Ruby Source</a> and <a href='http://ididitmyway.heroku.com'>I Did It My Way</a>.
@@quote
-#quote
- .container
- == slim ('quote'+(rand(3)+1).to_s).to_sym
+#banner
+ == slim ('quote'+(rand(3)+1).to_s).to_sym
@@quote1
blockquote rel="http://www.flickr.com/photos/nativephotography/4343566244/" We Do Things Differently Here
@@ -111,43 +138,6 @@
label for='message' Write me a short message below
textarea rows='12' cols='40' name='message'
input#send.button type='submit' value='Send'
- h2 Tweet Me
- p
- a.twitter title="Tweet Me" href="http://twitter.com/#!/daz4126" @daz4126
-
-@@layout
-doctype html
-html
- head
- meta charset="utf-8"
- meta name="description" content="Made In Manchester by DAZ"
- meta name="author" content="DAZ"
- meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
- title= @title || settings.name || "Untitled"
- link rel="shortcut icon" href="/favicon.ico"
- - (@javascripts?settings.javascripts+@javascripts:settings.javascripts).uniq.each do |link|
- script src==link
- /[if lt IE 9]
- script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"
- link href="http://fonts.googleapis.com/css?family=#{(@fonts?settings.fonts+@fonts:settings.fonts).uniq.*'|'}" rel='stylesheet'
- link rel="stylesheet" media="screen, projection" href="/styles.css"
- body
- header role="banner"
- hgroup
- h1
- a title="Home Sweet Home" href="/" = settings.name
- h2 Made in Manchester
- == slim @before.to_sym if @before
- #main role='main'
- .content
- == yield
- == slim @after.to_sym if @after
- footer role="contentinfo"
- small
- p &copy; 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>.
- 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"))
@@404
h1 404!
@@ -159,160 +149,3 @@
@@script
alert 'Coffeescript is working!'
-
-@@styles
-@import "reset";
-@import "colours";
-@import "mixins";
-
-// variables
-
-$normalfont: "Courier New", "Nimbus Mono L", Monospace;
-$headingfont: Abel,"Liberation Sans",Helvetica ,Arial, "Nimbus Sans L", FreeSans, Sans-serif;
-$basefontsize: 13px;
-$thickness:8px;
-$width: 90%;
-
-html{
- background:#6C7360;
-}
-
-body{
- 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.1),-5px 5px 5px rgba(0,0,0,0.1);
-}
-
-p,li{
-color:$text;
-font-size:1.4em;
-line-height:1.1;
-margin: 0.2em 0 0.8em;
-font-weight: bold;
-}
-
-h1,h2,h3,h4,h5,h6{@include headings($black);}
-
-h1{font-size:3.2em;}
-h2{font-size:2.6em;}
-h3{font-size:2em;}
-
-.container{max-width:960px;width:$width;margin:0 auto;}
-
-header{
- background: $header;
- border-bottom: $thickness solid $border;
- padding:20px;
- hgroup{
- @extend .container;
- h1{
- margin:0;
- a{
- display:block;
- margin:0 auto;
- background:url(/logo.png) transparent 0 0 no-repeat;
- text-indent:-12345px;
- height:120px;width:120px;
- &:hover{ background:url(/logo.png) transparent -120px 0 no-repeat; }
- &:active{ position: relative; top:4px;}
- }
- }
-
- h2{
- color: #fff;
- margin: 10px 0 0;
- text-align: center;
- font-size:1.8em;
- font-weight: normal;
- letter-spacing:0.26em;
- }
- }
-}
-
-#quote{
- background: $quote;
- padding: 20px 100px;
- border-bottom: $thickness solid $border;
- blockquote{
- @include headings($quotetext);
- line-height: 0.96;
- font-size:2.6em;
- text-align:center;
- }
-
- cite{
- color:$quotetext;
- padding:0;margin:0;
- font-style: italic;
- font-size:1.3em;
- font-weight: bold;
- display: block;
- text-align: center;
- &:before{content:"★ ";}
- &:after{content:" ★";}
- }
-}
-
-#main{
- .content{@extend .container;}
- background:$main;
- border-bottom: $thickness solid $border;
- padding:20px;
- @include links($black,$black,$yellow);
- p{max-width:26em;text-shadow: 1px 1px 0 rgba($white,0.3);}
- form{
- label{
- display:block;
- color:$text;
- font-size:1.4em;
- font-weight: bold;
- }
- textarea{
- border: $thickness solid $black;
- font-family:$normalfont;
- background: transparent;
- display: block;
- padding: 10px;
- &:focus{outline:none;}
- }
- #send{
- font-family:$normalfont;
- background: $yellow;
- border: $thickness solid $black;
- color: $black;
- color:$text;
- font-size:1.4em;
- padding: 0.4em 0.3em;
- font-weight: bold;
- text-transform: uppercase;
- }
- }
-}
-
-footer{
- background:$footer;
- padding:20px;
- #contact{@extend .container;}
- small{@extend .container;font-size:0.85em;display:block;}
- p{color: $white;}
- @include links($yellow,$black);
-}
-
-//responsive layout
-@media screen and (max-width: 840px) {
- body{width:auto;margin:0;}
-}
-
-@media screen and (max-width: 600px) {
- .container {
- width: auto;
- }
- #quote{
- padding:20px 2px;
- }
- form{width:100%;}
- textarea{width:90%;}
-}
View
BIN  public/favicon.ico
Binary file not shown
View
BIN  public/logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
58 views/_mixins.scss
@@ -0,0 +1,58 @@
+@mixin clearfix{
+ _height: 1%;
+ *min-height:1px;
+ zoom:1;
+ &:after{
+ content:".";
+ display:block;
+ height:0;
+ clear:both;
+ visibility:hidden;
+ }
+}
+
+@mixin zero{
+ margin: 0;
+ padding: 0;
+}
+
+@mixin grid{
+ @include clearfix;
+}
+
+@mixin col($width:1,$total:12,$padding:0,$margin:0,$left:0,$right:0){
+ float:left;
+ margin-left:$margin*1%;
+ padding:10px $padding*1%;
+ width: $width*100%/$total;
+ margin-left:$left*100%/$total;
+ margin-right:$right*100%/$total;
+}
+
+@mixin headings($color:white){
+ color:$color;
+ font-weight:bold;
+ font-family: $headingfont;
+ text-transform: uppercase;
+ letter-spacing:0.1em;
+ line-height:1;
+ margin: 0 0 0.2em;
+}
+
+@mixin links($color:white,$hovercolor:red,$background:$color){
+a,a:link,a:visited{
+ text-decoration: underline;
+ text-shadow: none;
+ color:$color;
+ &:hover{
+ background: $background;
+ color:$hovercolor;
+ }
+ }
+}
+
+@mixin text($color: $text){
+color:$color;
+font-size:1.4em;
+font-weight: bold;
+}
View
33 views/layout.slim
@@ -0,0 +1,33 @@
+doctype html
+html
+ head
+ meta charset="utf-8"
+ meta name="description" content="Made In Manchester by DAZ"
+ meta name="author" content="DAZ"
+ meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
+ title= @title || settings.name || "Untitled"
+ link rel="shortcut icon" href="/favicon.ico"
+ - (@javascripts?settings.javascripts+@javascripts:settings.javascripts).uniq.each do |link|
+ script src==link
+ /[if lt IE 9]
+ script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"
+ link href="http://fonts.googleapis.com/css?family=#{(@fonts?settings.fonts+@fonts:settings.fonts).uniq.*'|'}" rel='stylesheet'
+ link rel="stylesheet" media="screen, projection" href="/styles.css"
+ body
+ header role="banner"
+ hgroup
+ h1
+ a title="Home Sweet Home" href="/" = settings.name
+ h2 Made in Manchester
+ == slim @before.to_sym if @before
+ #main role='main'
+ .content
+ == yield
+ == slim @sidebar || :sidebar
+ == slim @after.to_sym if @after
+ footer role="contentinfo"
+ small
+ p &copy; 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>.
+ 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"))
View
14 views/reset.scss
@@ -0,0 +1,14 @@
+// reset
+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;line-height:1;}
+
+// html5 elements
+article,aside,canvas,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section,summary{display:block;}
+
+// standard elements
+h1{font-size:2.4em;}h2{font-size:2em;}h3{font-size:1.6em;}
+h4{font-size:1.4em;}h5{font-size:1.2em;}h6{font-size:1em;}
+p{font-size:1em;line-height:1.6;margin:0 0 1em}
+small{font-size:90%;}
+ul,ol{padding:0 2em;}
+li{font-size:1em;line-height:1.6;}
View
29 views/settings.scss
@@ -0,0 +1,29 @@
+$normalfont: "Courier New", "Nimbus Mono L", Monospace;
+$headingfont: Abel,"Liberation Sans",Helvetica ,Arial, "Nimbus Sans L", FreeSans, Sans-serif;
+$basefontsize: 13px;
+$thickness:8px;
+$width: 90%;
+$mainwidth: 62%;
+$sidebarwidth: 32%;
+
+//colors
+$olive:#6C7360;
+$grey:#A1A794;
+$yellow:#F1E166;
+$red:#d65c49;
+$blue:#788389;
+$brown:#D3BD90;
+$green:#859482;
+$orange:#F1BC66;
+$purple:#7A6577;
+$black:#444;
+$white:#ececec;
+
+$border:$white;
+$text:$black;
+$html:$olive;
+$header:$black;
+$quote:$yellow;
+$quotetext:$black;
+$main:$grey;
+$footer:$black;
View
171 views/styles.scss
@@ -0,0 +1,171 @@
+@import "reset";
+@import "settings";
+@import "mixins";
+
+html{
+ background:$html;
+}
+
+body{
+ 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.1),-5px 5px 5px rgba(0,0,0,0.1);
+}
+
+p,li{
+@include text;
+line-height:1.1;
+margin: 0.2em 0 0.8em;
+}
+
+h1,h2,h3,h4,h5,h6{@include headings($black);}
+
+h1{font-size:3.2em;}
+h2{font-size:2.6em;}
+h3{font-size:2em;}
+
+header{
+ background: $header;
+ border-bottom: $thickness solid $border;
+ padding:20px;
+ hgroup{
+ h1{
+ margin:0;
+ a{
+ display:block;
+ margin:0 auto;
+ background:url(/logo.png) transparent 0 0 no-repeat;
+ text-indent:-12345px;
+ height:120px;width:120px;
+ &:hover{ background:url(/logo.png) transparent -120px 0 no-repeat; }
+ &:active{ position: relative; top:4px;}
+ }
+ }
+
+ h2{
+ color: #fff;
+ margin: 10px 0 0;
+ text-align: center;
+ font-size:1.8em;
+ font-weight: normal;
+ letter-spacing:0.26em;
+ }
+ }
+}
+
+#banner{
+ background: $quote;
+ padding: 20px 100px;
+ border-bottom: $thickness solid $border;
+ blockquote{
+ @include headings($quotetext);
+ line-height: 0.96;
+ font-size:2.6em;
+ text-align:center;
+ }
+
+ cite{
+ color:$quotetext;
+ padding:0;margin:0;
+ font-style: italic;
+ font-size:1.3em;
+ font-weight: bold;
+ display: block;
+ text-align: center;
+ &:before{content:"* ";}
+ &:after{content:" *";}
+ }
+}
+
+#main{
+ @include clearfix;
+ padding: 20px 0 20px 5%;
+ background:$main;
+ border-bottom: $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{@include zero;}
+ li{border:0;list-style:square inside;}
+ }
+ h1{font-size:2.6em;color:$black;}
+ p{font-size: 1em;}
+ }
+ p{
+ max-width:26em;
+ text-shadow: 1px 1px 0 rgba($white,0.3);
+ }
+ form{
+ width:100%;
+ label{
+ display:block;
+ @include text;
+ text-shadow: 1px 1px 0 rgba($white,0.3);
+ }
+ textarea{
+ width:90%;
+ border: $thickness/2 solid $black;
+ font-family:$normalfont;
+ background: transparent;
+ display: block;
+ padding: 10px;
+ &:focus{outline:none;}
+ }
+ #send{
+ font-family:$normalfont;
+ background: $yellow;
+ border: $thickness/2 solid $black;
+ color: $black;
+ color:$text;
+ font-size:1.4em;
+ padding: 0.4em 0.3em;
+ font-weight: bold;
+ text-transform: uppercase;
+ }
+ }
+}
+
+footer{
+ background:$footer;
+ padding:20px;
+ small{font-size:0.85em;display:block;}
+ p{color: $white;}
+ @include links($yellow,$black);
+}
+
+//responsive layout
+@media screen and (max-width: 840px) {
+ body{width:auto;margin:0;}
+}
+
+@media screen and (max-width: 600px) {
+ #banner{
+ padding:20px 2px;
+ }
+ p,li,label{font-size:1em;}
+}
+
+
+// Landscape phones and down
+@media (max-width: 480px) { }
+
+// Landscape phone to portrait tablet
+@media (max-width: 768px) { }
+
+// Portrait tablet to landscape and desktop
+@media (min-width: 768px) and (max-width: 980px) { }
+
+// Large desktop
+@media (min-width: 1200px) { }
Please sign in to comment.
Something went wrong with that request. Please try again.