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