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