added compass support and imported our old styles
This commit is contained in:
Gibheer
parent
d26133da61
commit
d6f230d15f
1
Gemfile
1
Gemfile
|
|
@ -1,6 +1,7 @@
|
|||
source :rubygems
|
||||
|
||||
gem 'sinatra'
|
||||
gem 'sinatra-support'
|
||||
gem 'haml'
|
||||
gem 'sass'
|
||||
gem 'compass'
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ GEM
|
|||
sinatra (1.2.6)
|
||||
rack (~> 1.1)
|
||||
tilt (>= 1.2.2, < 2.0)
|
||||
sinatra-support (1.2.0)
|
||||
sinatra (>= 1.0)
|
||||
stringex (1.2.1)
|
||||
tilt (1.3.2)
|
||||
uuidtools (2.1.2)
|
||||
|
|
@ -78,3 +80,4 @@ DEPENDENCIES
|
|||
haml
|
||||
sass
|
||||
sinatra
|
||||
sinatra-support
|
||||
|
|
|
|||
1
libs.rb
1
libs.rb
|
|
@ -7,6 +7,7 @@ require 'haml'
|
|||
require 'sass'
|
||||
require 'compass'
|
||||
require 'sinatra'
|
||||
require 'sinatra/support'
|
||||
|
||||
# markups
|
||||
require 'redcloth'
|
||||
|
|
|
|||
1
page.rb
1
page.rb
|
|
@ -1,5 +1,6 @@
|
|||
class Blog < Sinatra::Base
|
||||
set $settings
|
||||
register Sinatra::CompassSupport
|
||||
|
||||
get '/' do
|
||||
@posts = Post.all(:released => true, :order => [:written.desc])
|
||||
|
|
|
|||
|
|
@ -0,0 +1,117 @@
|
|||
header, article, section, aside, footer {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
html {
|
||||
font-size: $font-size-base;
|
||||
background: $background2; }
|
||||
|
||||
body {
|
||||
font-size: $font-size;
|
||||
font-family: $font-family;
|
||||
color: $font-color1;
|
||||
line-height: $font-size * 1.3;
|
||||
min-width: $body-min-width;
|
||||
max-width: $body-max-width;
|
||||
margin: auto;
|
||||
margin-top: $top-gap;
|
||||
margin-bottom: $top-gap;
|
||||
padding: 2em;
|
||||
padding-top: 0;
|
||||
background-color: $background1;
|
||||
@include set-border-radius;
|
||||
a {
|
||||
color: $link-color1;
|
||||
padding: 0.25em;
|
||||
&:visited {
|
||||
color: $link-color1; }
|
||||
&:hover, &:active {
|
||||
background-color: $highlight-color1;
|
||||
@include set-border-radius;
|
||||
@include background-image(linear-gradient($highlight-gradient)); } }
|
||||
code {
|
||||
font-family: $font-family-code; }
|
||||
#wrapper {
|
||||
margin-top: 5em; }
|
||||
#header {
|
||||
position: absolute;
|
||||
width: 800px;
|
||||
top: 0;
|
||||
h1 {
|
||||
> img {
|
||||
margin-top: 2em; }
|
||||
a {
|
||||
font: {
|
||||
size: $font-size * 4;
|
||||
weight: bold; };
|
||||
text-decoration: none;
|
||||
padding: 0;
|
||||
float: left;
|
||||
text-shadow: 2px 5px 8px darken($background1, 10);
|
||||
color: $link-color1;
|
||||
&:hover, &:active {
|
||||
background: none;
|
||||
text-shadow: 3px 5px 8px darken($link-color1, 20); } } } }
|
||||
#linklist {
|
||||
border: 1px solid black;
|
||||
float: right;
|
||||
width: 250px; }
|
||||
#content {
|
||||
padding-top: $top-gap;
|
||||
article {
|
||||
clear: both;
|
||||
margin-bottom: 1em;
|
||||
padding-bottom: 0.5em;
|
||||
@include set-border-with-radius;
|
||||
@include clearfix;
|
||||
section {
|
||||
padding: 1em;
|
||||
clear: left;
|
||||
p {
|
||||
margin-bottom: 1em; } }
|
||||
header {
|
||||
float: left;
|
||||
margin: 1em;
|
||||
margin-bottom: 0;
|
||||
h1 {
|
||||
font-size: $font-size * 1.5;
|
||||
font-weight: bold; } }
|
||||
footer {
|
||||
float: right;
|
||||
width: 6.85em;
|
||||
padding: 0.75em;
|
||||
margin-left: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
text-align: center;
|
||||
// set the border
|
||||
@include set-border-radius;
|
||||
border-bottom: $border-width solid $border-color;
|
||||
border-left: $border-width solid $border-color;
|
||||
@include background-image(linear-gradient($background-gradient));
|
||||
.author {
|
||||
padding-bottom: 5px;
|
||||
font-weight: bold; }
|
||||
.date {
|
||||
.day {
|
||||
font-weight: bold;
|
||||
font-size: $font-size * 1.2; }
|
||||
.month, .year {
|
||||
font-size: $font-size * 0.75;
|
||||
display: inline; } }
|
||||
.time {
|
||||
font-size: $font-size * 0.75;
|
||||
.hour {
|
||||
display: inline;
|
||||
margin-right: -4px;
|
||||
&:after {
|
||||
content: ":"; } }
|
||||
.minute {
|
||||
display: inline; } } } } }
|
||||
#footer {
|
||||
padding: 1em;
|
||||
overflow: hidden;
|
||||
font-size: $font-size * 0.85;
|
||||
@include set-border-with-radius;
|
||||
p {
|
||||
text-align: center; } } }
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
.CodeRay {
|
||||
font-family: $font-family-code;
|
||||
//line-height: $font-size * 1.2;
|
||||
background-color: #232323;
|
||||
border: 1px solid black;
|
||||
color: #E6E0DB;
|
||||
padding: 3px 5px;
|
||||
overflow: auto;
|
||||
margin: 12px 0;
|
||||
pre {
|
||||
margin: 0px;
|
||||
padding: 0px; }
|
||||
.an {
|
||||
color: #E7BE69; }
|
||||
.c {
|
||||
color: #BC9358;
|
||||
font-style: italic; }
|
||||
.ch {
|
||||
color: #509E4F; }
|
||||
.cl, .co {
|
||||
color: #FFF; }
|
||||
.fl {
|
||||
color: #A4C260; }
|
||||
.fu {
|
||||
color: #FFC56D; }
|
||||
.gv {
|
||||
color: #D0CFFE; }
|
||||
.i {
|
||||
color: #A4C260; }
|
||||
.il {
|
||||
background: #151515; }
|
||||
.iv {
|
||||
color: #D0CFFE; }
|
||||
.pp {
|
||||
color: #E7BE69; }
|
||||
.r {
|
||||
color: #CB7832; }
|
||||
.rx, .s {
|
||||
color: #A4C260; }
|
||||
.sy {
|
||||
color: #6C9CBD; }
|
||||
.ta {
|
||||
color: #E7BE69; }
|
||||
.pc {
|
||||
color: #6C9CBD; } }
|
||||
|
||||
/* html attribute */
|
||||
/* comment */
|
||||
/* escaped character */
|
||||
/* class */
|
||||
/* constant */
|
||||
/* float */
|
||||
/* function */
|
||||
/* global variable */
|
||||
/* integer */
|
||||
/* inline code */
|
||||
/* instance variable */
|
||||
/* doctype */
|
||||
/* keyword */
|
||||
/* regex */
|
||||
/* string */
|
||||
/* symbol */
|
||||
/* html tag */
|
||||
/* boolean */
|
||||
|
|
@ -1,4 +1,46 @@
|
|||
body {
|
||||
color: white;
|
||||
background: black;
|
||||
}
|
||||
//colors
|
||||
$font-color1: hsl(0, 0%, 95%);
|
||||
$link-color1: hsl(32, 100%, 50%);
|
||||
$highlight-color1: hsl(204, 33%, 45%);
|
||||
$highlight-gradient: color-stops(lighten($highlight-color1, 5), $highlight-color1 30%, darken($highlight-color1, 15));
|
||||
$border-color: black;
|
||||
$background1: hsl(204, 25%, 35%);
|
||||
$background2: hsl(0, 0%, 20%);
|
||||
$background-gradient: color-stops(lighten($background1, 5), $background1 25%, darken($background1, 5));
|
||||
|
||||
// font
|
||||
$font-size: 100%;
|
||||
$font-size-base: 14px;
|
||||
$font-family: "DejaVu Sans", Verdana, Arial, sans-serif;
|
||||
$font-family-code: monospace;
|
||||
|
||||
//$font-family: 'Droid Serif', 'DejaVu Serif', 'Bitstream Vera Serif', Serif
|
||||
//$font-family-code: 'Droid Mono', 'Courier New', 'Terminal', monospace
|
||||
// sizes
|
||||
// -- body
|
||||
$body-min-width: 400px;
|
||||
$body-max-width: 900px;
|
||||
$top-gap: 95px;
|
||||
|
||||
// -- border stuff
|
||||
$border-width: 1px;
|
||||
$border-radius: 4px;
|
||||
|
||||
//imports
|
||||
@import "compass/reset";
|
||||
@import "compass/css3";
|
||||
@import "compass/utilities";
|
||||
|
||||
// build own mixins
|
||||
@mixin set-border {
|
||||
border: $border-width solid $border-color; }
|
||||
|
||||
@mixin set-border-radius {
|
||||
@include border-radius($border-radius, $border-radius); }
|
||||
|
||||
@mixin set-border-with-radius {
|
||||
@include set-border;
|
||||
@include set-border-radius; }
|
||||
|
||||
@import "base";
|
||||
@import "coderay";
|
||||
|
|
|
|||
Loading…
Reference in New Issue