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