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 @-webkit-keyframes glow{
  20         0% {
  21                 text-shadow: 0 0 3px rgba(255,255,255,0);
  22         }
  23         100% {
  24                 text-shadow: 0 0 3px rgba(255,255,255,.5);
  25         }
  26 }
  27
  28 body{
  29         background:$page-background;
  30         @include background(
  31                 linear-gradient(top, desaturate(darken($page-background, 15%), 10%) 0, $page-background 250px)
  32         );
  33         @include body-text;
  34 }
  35
  36 #container{
  37         width: $page-width;
  38         margin:20px auto;
  39         background: $content-background;
  40         color: $foreground;
  41 }
  42
  43 #nameplate{
  44         @include adjust-font-size-to(60px);
  45         font-family:$headingfonts;
  46         position:relative;
  47 }
  48
  49 .installButton{
  50         height:30px;
  51         $buttoncolor:#EEE;
  52         $buttonbottom:darken($buttoncolor, 10%);
  53         $buttonfore:darken($buttoncolor, 80%);
  54         color:$buttonfore;
  55         text-decoration:none;
  56         font-size:25px;
  57         line-height:36px;
  58         font-family:$headingfonts;
  59         text-transform:uppercase;
  60         letter-spacing:2px;
  61         float:right;
  62         width:160px;
  63         @include border-radius(5px);
  64         @include box-shadow(0 1px 3px 0 rgba(0,0,0,.15));
  65         @include background(linear-gradient($buttoncolor, $buttonbottom));
  66         text-shadow: #FFF 0 1px 0;
  67         border:1px solid $buttoncolor;
  68         padding:5px 10px;
  69         position:absolute;
  70         top:10px;
  71         right:0;
  72         &::after{
  73                 content: '\2b07';
  74                 font-size:20px;
  75                 line-height:20px;
  76                 padding:7px 1px 3px 4px;
  77                 width:25px;
  78                 @include border-radius(15px);
  79                 @include box-shadow(0 1px 0 0 #FFF, 0 1px 2px 0 rgba(0,0,0,.15) inset);
  80                 background:darken($buttoncolor,20%);
  81                 float:left;
  82                 text-align:center;
  83                 margin-right:10px;
  84                 font-family:Helvetica, Arial, sans-serif;
  85         }
  86         &:hover{
  87                 @include background(linear-gradient($buttoncolor, darken($buttonbottom, 5%)));
  88         }
  89         &:active{
  90                 @include background(linear-gradient(darken($buttonbottom, 5%), $buttoncolor));
  91                 @include box-shadow(0 1px 3px 0 rgba(0,0,0,.15), 0 0 16px 0 rgba(0,0,0,.15) inset);
  92                 color:darken($buttonfore, 10%);
  93                 &::after{
  94                         background:darken($buttoncolor, 30%);
  95                 }
  96         }
  97 }
  98
  99 #content{
 100         a{
 101                 color: darken($page-background, 60%);;
 102                 border-bottom:1px solid darken($page-background, 20%);
 103                 @include box-shadow(0 1px 0 0 #FFF);
 104                 text-decoration:none;
 105                 &:hover{
 106                         color: darken($page-background, 60%);
 107                         border-bottom:1px solid darken($page-background, 60%);
 108                 }
 109         }
 110         p, ul, ol, header{
 111                 @include margin-trailer;
 112         }
 113         h1, h2, h3, h4, h5, h6{
 114                 font-weight:bold;
 115                 @include margin-trailer(.5);
 116         }
 117         h2{
 118                 @include adjust-font-size-to(20px);
 119         }
 120         code{
 121                 background: darken($page-background, 10%);
 122                 padding:3px;
 123                 margin:-4px 0;
 124                 border: 1px solid darken($page-background, 15%);
 125                 @include border-radius(3px);
 126                 @include box-inset;
 127                 font-family:Menlo, monospace;
 128                 @include adjust-font-size-to(13px);
 129         }
 130         .codeblock{
 131                 @extend code;
 132                 @include margin-trailer;
 133                 padding: 10px;
 134                 display:block;
 135                 code{
 136                         margin:0;
 137                         padding:0;
 138                         @include box-shadow(none);
 139                         @include border-radius(0);
 140                         border:none;
 141                         display:block;
 142                 }
 143                 &.shell code::before{
 144                         content: "$ ";
 145                         color:lighten($foreground, 10%);
 146                 }
 147         }
 148         .pname{
 149                 color:darken($page-background, 60%);
 150         }
 151 }
 152
 153 .three-up{
 154         $pad: 10px;
 155         $width: $page-width + $pad;
 156         background: $foreground;
 157         margin:$base-line-height #{-$pad};
 158         padding:$pad;
 159         @include border-radius(5px);
 160         @include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
 161
 162         figure{
 163                 $border: 1px;
 164                 border:$border solid darken($foreground, 10%);
 165                 float:left;
 166                 width: ($width / 3) - $pad - 2 * $border;
 167                 margin-right: $pad;
 168                 overflow:hidden;
 169                 position:relative;
 170                 @include transition(width, .25s, linear);
 171                 @include box-inset($outset:rgba(255,255,255,.35));
 172                 @include border-radius(3px);
 173
 174                 &.shrunk{
 175                         width: ($width - 610px) / 2 - $pad - 3 * $border;
 176                 }
 177                 &.expanded{
 178                         width:600px;
 179                 }
 180
 181                 &:last-child{
 182                         margin-right: 0;
 183                         float:right; /* keeps the right margin from wiggling */
 184                 }
 185
 186                 img{
 187                         display:block;
 188                 }
 189         }
 190
 191         figcaption{
 192                 position:absolute;
 193                 bottom:0;
 194                 left:0;
 195                 right:0;
 196                 background: rgba(0,0,0,.75);
 197                 text-shadow:1px 1px 0 #000;
 198                 padding:0 5px;
 199                 color:#FFF;
 200                 width:600px;
 201                 @include adjust-font-size-to(13px);
 202         }
 203
 204         @include clearfix;
 205 }
 206
 207 #whatIs{
 208         padding:10px;
 209         background:$foreground;
 210         margin-bottom:20px;
 211         line-height:30px;
 212         font-size:20px;
 213         @include box-inset(rgba(0,0,0,.35), #FFF);
 214         @include border-radius(5px);
 215         text-shadow: 0 -1px 0 #000;
 216         text-align:center;
 217         -webkit-font-smoothing: antialiased;
 218         color:lighten($foreground, 60%);
 219         :last-child{
 220                 margin-bottom:0;
 221         }
 222         .w1{
 223                 font-weight:bold;
 224         }
 225         .s1{
 226                 color:lighten($foreground, 80%);
 227                 display:block;
 228         }
 229         a{
 230                 background:transparent;
 231                 padding:0;
 232                 color:lighten($accent, 20%);
 233                 border-width:0;
 234                 @include box-shadow(none);
 235                 &:hover{
 236                         background:transparent;
 237                         color:lighten($accent, 20%);
 238                 }
 239         }
 240 }
 241
 242 #modelList{
 243         margin-left: 1.5em;
 244         li{
 245                 @include margin-trailer(.5);
 246                 list-style-type:disc;
 247         }
 248         .name{
 249                 font-weight:bold;
 250         }
 251 }
 252
 253 #contribList{
 254         $pad: 10px;
 255         $width: $page-width + $pad;
 256         background: $foreground;
 257         margin:$base-line-height #{-$pad};
 258         padding:#{2*$pad} $pad $pad $pad;
 259         @include border-radius(5px);
 260         @include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
 261         @include clearfix;
 262         text-shadow:none;
 263         color:lighten($foreground, 80%);
 264         -webkit-font-smoothing: antialiased;
 265
 266         li{
 267                 $border: 1px;
 268                 width: $page-width/2 - $pad * 3 - $border * 2;
 269                 float:left;
 270                 margin: 0 $pad/2 $pad $pad/2;
 271                 padding: $pad;
 272                 background: darken($foreground, 5%);
 273                 border:$border solid darken($foreground, 10%);
 274                 @include box-inset(rgba(0,0,0,.35), rgba(255,255,255,.15));
 275                 @include clearfix;
 276                 @include border-radius(3px);
 277         }
 278         .name, .description, .status{
 279                 display:block;
 280         }
 281         .name{
 282                 font-weight:bold;
 283         }
 284         .description{
 285                 color:lighten($foreground, 40%);
 286         }
 287         .status{
 288                 font-style:italic;
 289                 @include adjust-font-size-to(13px);
 290                 float:right;
 291                 &.dev{
 292                         -webkit-animation-name: glow;
 293                         -webkit-animation-duration: 1s;
 294                         -webkit-animation-timing-function: ease;
 295                         -webkit-animation-iteration-count: infinite;
 296                         -webkit-animation-direction: alternate;
 297                 }
 298                 &.pla{
 299                         opacity:.5;
 300                 }
 301         }
 302         a{
 303                 color:#CCC;
 304                 border:none;
 305         }
 306 }
 307
 308 footer{
 309         margin-top: 25px;
 310         padding-top: 20px;
 311         border-top:5px solid $foreground;
 312         @include box-shadow(0 1px 0 0 #FFF inset);
 313         @include adjust-font-size-to(13px);
 314         color:lighten($foreground, 20%);
 315         a{
 316                 text-decoration:none;
 317                 color:darken($page-background, 40%);
 318                 &:hover{
 319                         color:darken($page-background, 80%);
 320                 }
 321         }
 322 }