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