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