Fixed the fork me on github link.

[philo.git] / static / scss / screen.scss

diff --git a/static/scss/screen.scss b/static/scss/screen.scss
index bfabe3d..ab4b7bf 100644 (file)
--- a/static/scss/screen.scss
+++ b/static/scss/screen.scss
@@ -1,56 +1,172 @@
-@import "reset",
+@import "http://fonts.googleapis.com/css?family=Expletus+Sans",
+               "reset",
                "var",
+               "compass/typography/vertical_rhythm",
                "compass/css3/images",
                "compass/css3/border-radius",
-               "compass/css3/box-shadow";
+               "compass/css3/box-shadow",
+               "compass/css3/transition",
+               "compass/utilities/general/clearfix";
+               
+@include establish-baseline;
                
-html{
-       background: $bgcolor;
-       height:100%;
-}
-
 body{
-       @include background(
-               image-url("bg.png"),
-               radial-gradient(rgba(0,0,0,0), rgba(0,0,0,.5) 800px, rgba(0,0,0,.9) 900px)
-       );
-       padding:1px;
-       margin:-1px;
-       min-height:100%;
-       font-family:Helvetica, Arial, sans-serif;
-       font-size:13px;
-       line-height:15px;
+       background:$page-background;
+       @include body-text;
 }
 
 #container{
-       width: $containerwidth;
-       margin:40px auto;
+       width: $page-width;
+       margin:20px auto;
+       background: $content-background;
+       color: $foreground;
 }
 
 #nameplate{
-       color:#FFF;
-       font-size:80px;
-       line-height:80px;
-       text-align:center;
-       text-shadow:1px 1px 0 rgba(0,0,0,.6);
+       @include adjust-font-size-to(60px);
+       margin-bottom:25px;
+       padding-bottom:5px;
+       border-bottom:5px solid $foreground;
+       @include box-shadow(0 1px 0 #FFF);
+       font-family:$headingfonts;
 }
 
 #content{
-       background:$contentbg;
-       @include border-radius(4px);
-       @include box-shadow(rgba(0,0,0,.35) 0 0 36px, rgba(0,0,0,.1) 0 10px 10px inset);
-       border:$contentborderwidth solid $contentbg;
-       padding:$contentpadding;
-       margin-top:20px;
+       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;
+       }
+       h1, h2, h3, h4, h5, h6{
+               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);
+       }
 }
 
-#pagefooter{
-       font-size:12px;
-       color: lighten($bgcolor, 40%);
-       text-shadow:0 -1px 0 rgba(0,0,0,.5);
-       width:600px;
-       margin:20px auto;
-       p{
-               margin-bottom:15px;
+.three-up{
+       $pad: 10px;
+       $width: $page-width + $pad;
+       background: $foreground;
+       margin:$base-line-height #{-$pad};
+       padding:$pad;
+       @include border-radius(5px);
+       @include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
+
+       figure{
+               $border: 1px;
+               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;
+               }
+               &.expanded{
+                       width:600px;
+               }
+               
+               &:last-child{
+                       margin-right: 0;
+                       float:right; /* keeps the right margin from wiggling */
+               }
+
+               img{
+                       display:block;
+               }
+       }
+       
+       figcaption{
+               position:absolute;
+               bottom:0;
+               left:0;
+               right:0;
+               background: rgba(0,0,0,.75);
+               text-shadow:1px 1px 0 #000;
+               padding:0 5px;
+               color:#FFF;
+               width:600px;
+               @include adjust-font-size-to(13px);
+       }
+       
+       @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;
+       background: $foreground;
+       margin:$base-line-height #{-$pad};
+       padding:#{2*$pad} $pad;
+       @include border-radius(5px);
+       @include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
+       @include clearfix;
+       text-shadow:none;
+       color:lighten($foreground, 80%);
+       -webkit-font-smoothing: antialiased;
+       
+       li{
+               $border: 1px;
+               width: $page-width/2 - $pad * 3 - $border * 2;
+               float:left;
+               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;
+       }
+       .name{
+               font-weight:bold;
+       }
+       .description{
+               color:lighten($foreground, 40%);
+       }
+       .status{
+               font-style:italic;
+               @include adjust-font-size-to(13px);
+               float:right;
        }
 }
\ No newline at end of file