static/scss/screen.scss

   1 @import "reset",
   2                 "var",
   3                 "compass/typography/vertical_rhythm",
   4                 "compass/css3/images",
   5                 "compass/css3/border-radius",
   6                 "compass/css3/box-shadow",
   7                 "compass/css3/transition",
   8                 "compass/utilities/general/clearfix";
   9
  10 @include establish-baseline;
  11
  12 body{
  13         @include background(
  14                 linear-gradient(top, $page-background, darken($page-background, 10%)) no-repeat fixed
  15         );
  16         @include body-text;
  17 }
  18
  19 a{
  20         color: darken($foreground, 20%);
  21         text-decoration:none;
  22         background: darken($page-background, 15%);
  23         padding:3px;
  24         @include border-radius(3px);
  25         &:hover{
  26                 background: desaturate(darken($page-background, 25%), 10%);
  27                 text-shadow: 0 1px 0 rgba(255,255,255,.65);
  28         };
  29 }
  30
  31 #container{
  32         width: $page-width;
  33         margin:20px auto;
  34         background: $content-background;
  35         color: $foreground;
  36 }
  37
  38 #nameplate{
  39         @include adjust-font-size-to(40px);
  40         border-bottom:5px solid $foreground;
  41         @include box-shadow(0 1px 0 #FFF);
  42         margin-bottom:15px;
  43 }
  44
  45 #content{
  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 }
  54
  55 .three-up{
  56         $pad: 10px;
  57         $width: $page-width + $pad;
  58         background: $foreground;
  59         margin:$base-line-height #{-$pad};
  60         padding:$pad;
  61         @include border-radius(5px);
  62         @include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
  63
  64         figure{
  65                 $border: 1px;
  66                 border:$border solid lighten($foreground, 10%);
  67                 float:left;
  68                 width: ($width / 3) - $pad - 2 * $border;
  69                 margin-right: $pad;
  70                 overflow:hidden;
  71                 position:relative;
  72                 @include transition(width, .25s, linear);
  73
  74                 &.shrunk{
  75                         width: ($width - 610px) / 2 - $pad - 3 * $border;
  76                 }
  77                 &.expanded{
  78                         width:600px;
  79                 }
  80
  81                 &:last-child{
  82                         margin-right: 0;
  83                         float:right; /* keeps the right margin from wiggling */
  84                 }
  85
  86                 img{
  87                         display:block;
  88                 }
  89         }
  90
  91         figcaption{
  92                 position:absolute;
  93                 bottom:0;
  94                 left:0;
  95                 right:0;
  96                 background: rgba(0,0,0,.75);
  97                 text-shadow:1px 1px 0 #000;
  98                 padding:0 5px;
  99                 color:#FFF;
 100                 width:600px;
 101                 @include adjust-font-size-to(13px);
 102         }
 103
 104         @include clearfix;
 105 }
 106
 107 #contribList{
 108         $pad: 10px;
 109         $width: $page-width + $pad;
 110         background: $foreground;
 111         margin:$base-line-height #{-$pad};
 112         padding:#{2*$pad} $pad;
 113         @include border-radius(5px);
 114         @include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
 115         @include clearfix;
 116         text-shadow:none;
 117         color:lighten($foreground, 80%);
 118         -webkit-font-smoothing: antialiased;
 119
 120         li{
 121                 width: $page-width/2 - $pad * 2;
 122                 float:left;
 123                 padding: 0 $pad;
 124                 @include margin-trailer;
 125         }
 126         .name, .description, .status{
 127                 display:block;
 128         }
 129         .name{
 130                 font-weight:bold;
 131         }
 132         .description{
 133                 color:lighten($foreground, 40%);
 134         }
 135         .status{
 136                 font-style:italic;
 137                 @include adjust-font-size-to(13px);
 138         }
 139 }