static/scss/screen.scss

   1 @import "http://fonts.googleapis.com/css?family=Expletus+Sans",
   2                 "reset",
   3                 "var",
   4                 "compass/typography/vertical_rhythm",
   5                 "compass/css3/images",
   6                 "compass/css3/border-radius",
   7                 "compass/css3/box-shadow",
   8                 "compass/css3/transition",
   9                 "compass/utilities/general/clearfix";
  10
  11 @include establish-baseline;
  12
  13 body{
  14         background:$page-background;
  15         @include body-text;
  16 }
  17
  18 a{
  19         color: darken($foreground, 20%);
  20         text-decoration:none;
  21         background: darken($page-background, 15%);
  22         padding:3px;
  23         @include border-radius(3px);
  24         &:hover{
  25                 background: desaturate(darken($page-background, 25%), 10%);
  26                 text-shadow: 0 1px 0 rgba(255,255,255,.65);
  27         };
  28 }
  29
  30 #container{
  31         width: $page-width;
  32         margin:20px auto;
  33         background: $content-background;
  34         color: $foreground;
  35 }
  36
  37 #nameplate{
  38         @include adjust-font-size-to(60px);
  39         margin-bottom:25px;
  40         padding-bottom:5px;
  41         border-bottom:5px solid $foreground;
  42         @include box-shadow(0 1px 0 #FFF);
  43         font-family:$headingfonts;
  44 }
  45
  46 #content{
  47         p, ul, ol, header{
  48                 @include margin-trailer;
  49         }
  50         h1, h2, h3, h4, h5, h6{
  51                 font-weight:bold;
  52                 @include margin-trailer(.5);
  53         }
  54         h2{
  55                 @include adjust-font-size-to(20px);
  56         }
  57         code{
  58                 background: darken($page-background, 10%);
  59                 padding:3px;
  60                 margin:-4px 0;
  61                 border: 1px solid darken($page-background, 15%);
  62                 @include border-radius(3px);
  63                 @include box-inset;
  64                 font-family:Menlo, monospace;
  65                 @include adjust-font-size-to(13px);
  66         }
  67 }
  68
  69 .three-up{
  70         $pad: 10px;
  71         $width: $page-width + $pad;
  72         background: $foreground;
  73         margin:$base-line-height #{-$pad};
  74         padding:$pad;
  75         @include border-radius(5px);
  76         @include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
  77
  78         figure{
  79                 $border: 1px;
  80                 border:$border solid darken($foreground, 10%);
  81                 float:left;
  82                 width: ($width / 3) - $pad - 2 * $border;
  83                 margin-right: $pad;
  84                 overflow:hidden;
  85                 position:relative;
  86                 @include transition(width, .25s, linear);
  87                 @include box-inset($outset:rgba(255,255,255,.35));
  88                 @include border-radius(3px);
  89
  90                 &.shrunk{
  91                         width: ($width - 610px) / 2 - $pad - 3 * $border;
  92                 }
  93                 &.expanded{
  94                         width:600px;
  95                 }
  96
  97                 &:last-child{
  98                         margin-right: 0;
  99                         float:right; /* keeps the right margin from wiggling */
 100                 }
 101
 102                 img{
 103                         display:block;
 104                 }
 105         }
 106
 107         figcaption{
 108                 position:absolute;
 109                 bottom:0;
 110                 left:0;
 111                 right:0;
 112                 background: rgba(0,0,0,.75);
 113                 text-shadow:1px 1px 0 #000;
 114                 padding:0 5px;
 115                 color:#FFF;
 116                 width:600px;
 117                 @include adjust-font-size-to(13px);
 118         }
 119
 120         @include clearfix;
 121 }
 122
 123 #modelList{
 124         margin-left: 1.5em;
 125         li{
 126                 @include margin-trailer(.5);
 127                 list-style-type:disc;
 128         }
 129         .name{
 130                 font-weight:bold;
 131         }
 132 }
 133
 134 #contribList{
 135         $pad: 10px;
 136         $width: $page-width + $pad;
 137         background: $foreground;
 138         margin:$base-line-height #{-$pad};
 139         padding:#{2*$pad} $pad;
 140         @include border-radius(5px);
 141         @include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
 142         @include clearfix;
 143         text-shadow:none;
 144         color:lighten($foreground, 80%);
 145         -webkit-font-smoothing: antialiased;
 146
 147         li{
 148                 $border: 1px;
 149                 width: $page-width/2 - $pad * 3 - $border * 2;
 150                 float:left;
 151                 margin: 0 $pad/2 $pad $pad/2;
 152                 padding: $pad;
 153                 background: darken($foreground, 5%);
 154                 border:$border solid darken($foreground, 10%);
 155                 @include box-inset(rgba(0,0,0,.35), rgba(255,255,255,.15));
 156                 @include clearfix;
 157                 @include border-radius(3px);
 158         }
 159         .name, .description, .status{
 160                 display:block;
 161         }
 162         .name{
 163                 font-weight:bold;
 164         }
 165         .description{
 166                 color:lighten($foreground, 40%);
 167         }
 168         .status{
 169                 font-style:italic;
 170                 @include adjust-font-size-to(13px);
 171                 float:right;
 172         }
 173 }