X-Git-Url: http://git.ithinksw.org/philo.git/blobdiff_plain/6bdd2a52cc124b8ff4637d3a4b685033cd17e892..7090529aa8b2e8c2866c6092c267635ef9d8b2b7:/static/scss/screen.scss?ds=inline diff --git a/static/scss/screen.scss b/static/scss/screen.scss index 18caecd..d6a043c 100644 --- a/static/scss/screen.scss +++ b/static/scss/screen.scss @@ -1,4 +1,5 @@ -@import "reset", +@import "http://fonts.googleapis.com/css?family=Expletus+Sans", + "reset", "var", "compass/typography/vertical_rhythm", "compass/css3/images", @@ -8,26 +9,21 @@ "compass/utilities/general/clearfix"; @include establish-baseline; - + +::selection{ + background: darken(saturate(adjust-hue($page-background, 90deg), 100%), 20%); + text-shadow: none !important; + color:#FFF !important; +} + body{ + background:$page-background; @include background( - linear-gradient(top, $page-background, darken($page-background, 10%)) no-repeat fixed + linear-gradient(top, desaturate(darken($page-background, 15%), 10%) 0, $page-background 250px) ); @include body-text; } -a{ - color: darken($foreground, 20%); - text-decoration:none; - background: darken($page-background, 15%); - padding:3px; - @include border-radius(3px); - &:hover{ - background: desaturate(darken($page-background, 25%), 10%); - text-shadow: 0 1px 0 rgba(255,255,255,.65); - }; -} - #container{ width: $page-width; margin:20px auto; @@ -36,13 +32,26 @@ a{ } #nameplate{ - @include adjust-font-size-to(40px); + @include adjust-font-size-to(60px); + margin-bottom:25px; + padding-bottom:5px; border-bottom:5px solid $foreground; @include box-shadow(0 1px 0 #FFF); - margin-bottom:15px; + font-family:$headingfonts; } #content{ + a{ + color: darken($foreground, 20%); + text-decoration:none; + background: darken($page-background, 15%); + padding:3px; + @include border-radius(3px); + &:hover{ + background: desaturate(darken($page-background, 25%), 10%); + text-shadow: 0 1px 0 rgba(255,255,255,.65); + }; + } p, ul, ol, header{ @include margin-trailer; } @@ -50,6 +59,36 @@ a{ font-weight:bold; @include margin-trailer(.5); } + h2{ + @include adjust-font-size-to(20px); + } + code{ + background: darken($page-background, 10%); + padding:3px; + margin:-4px 0; + border: 1px solid darken($page-background, 15%); + @include border-radius(3px); + @include box-inset; + font-family:Menlo, monospace; + @include adjust-font-size-to(13px); + } + .codeblock{ + @extend code; + padding: 10px; + display:block; + code{ + margin:0; + padding:0; + @include box-shadow(none); + @include border-radius(0); + border:none; + display:block; + } + &.shell code::before{ + content: "$ "; + color:lighten($foreground, 10%); + } + } } .three-up{ @@ -63,14 +102,16 @@ a{ figure{ $border: 1px; - border:$border solid lighten($foreground, 10%); + border:$border solid darken($foreground, 10%); float:left; width: ($width / 3) - $pad - 2 * $border; margin-right: $pad; overflow:hidden; position:relative; @include transition(width, .25s, linear); - + @include box-inset($outset:rgba(255,255,255,.35)); + @include border-radius(3px); + &.shrunk{ width: ($width - 610px) / 2 - $pad - 3 * $border; } @@ -104,6 +145,17 @@ a{ @include clearfix; } +#modelList{ + margin-left: 1.5em; + li{ + @include margin-trailer(.5); + list-style-type:disc; + } + .name{ + font-weight:bold; + } +} + #contribList{ $pad: 10px; $width: $page-width + $pad; @@ -118,10 +170,16 @@ a{ -webkit-font-smoothing: antialiased; li{ - width: $page-width/2 - $pad * 2; + $border: 1px; + width: $page-width/2 - $pad * 3 - $border * 2; float:left; - padding: 0 $pad; - @include margin-trailer; + margin: 0 $pad/2 $pad $pad/2; + padding: $pad; + background: darken($foreground, 5%); + border:$border solid darken($foreground, 10%); + @include box-inset(rgba(0,0,0,.35), rgba(255,255,255,.15)); + @include clearfix; + @include border-radius(3px); } .name, .description, .status{ display:block; @@ -135,5 +193,22 @@ a{ .status{ font-style:italic; @include adjust-font-size-to(13px); + float:right; + } +} + +footer{ + margin-top: 25px; + padding-top: 20px; + border-top:5px solid $foreground; + @include box-shadow(0 1px 0 0 #FFF inset); + @include adjust-font-size-to(13px); + color:lighten($foreground, 20%); + a{ + text-decoration:none; + color:darken($page-background, 40%); + &:hover{ + color:darken($page-background, 80%); + } } } \ No newline at end of file