public/assets/css/scss/screen.scss

   1 /* ----------------------------------------------------------------
   2
   3 Title: Master styles for screen media
   4 Author: Jordan Cooperman, jordan@vectormediagroup.com
   5 Year: 2012
   6
   7 ----------------------------------------------------------------
   8
   9 Oh, I didn't see you there, friend.
  10
  11 Please have a look around, I hope you enjoy your stay.
  12
  13 ----------------------------------------------------------------
  14
  15 [Table of contents] - a map of our grounds.
  16
  17         0.General
  18                 a.elements
  19                 b.classes
  20
  21         1.Layout
  22                 a.header
  23                 b.content
  24                 c.footer
  25
  26         2.Forms
  27         3.Extensible Classes
  28
  29         *.Pages, modules, sprites and media queries imported at end
  30
  31 ----------------------------------------------------------------
  32
  33 [Prefixes] - some patterns that you may observe.
  34
  35         g: global
  36         s: state
  37
  38 ---------------------------------------------------------------- */
  39
  40 $blue: #0ca6ff;
  41 $dark: #1f1e1c;
  42 $gold: #ffcd58;
  43 $mustard: #e8a200;
  44
  45
  46 /* 0.`General
  47 ---------------------------------------------- */
  48
  49 @import "partials/mixins";
  50
  51 @import "partials/grid";
  52
  53 @import "partials/type";
  54
  55 /* a.`elements
  56 -------------------------- */
  57
  58 h1, h2, h3, h4, h5, h6 { margin: 0; margin-bottom: $base/4; }
  59
  60 h1 {
  61     @extend .gigantic;
  62     @extend .futura-light;
  63 }
  64
  65 h2 {
  66     @extend .huge;
  67 }
  68
  69 h3 {
  70     @extend .large;
  71 }
  72
  73 h4 {
  74         @extend .big;
  75 }
  76
  77 a {
  78     @include transition( color );
  79     color: $mustard;
  80
  81     &:hover {
  82         color: $mustard;
  83     }
  84 }
  85
  86 p {
  87     @extend .futura;
  88     @extend .big;
  89     margin: 0;
  90     margin-bottom: $base/2;
  91     color: #444;
  92 }
  93
  94 img {
  95     max-width: 100%;
  96 }
  97
  98 button {
  99         padding: $base/4 $base/2;
 100         border: 0;
 101         background: none;
 102         background-color: #333;
 103         border: 1px solid #000;
 104         color: #fff;
 105         // color: #fff;
 106 }
 107
 108 ::-moz-selection { background: #44a1dd; color: #fff; text-shadow: none; }
 109 ::selection { background: #44a1dd; color: #fff; text-shadow: none; }
 110
 111
 112 /* b.`classes
 113 -------------------------- */
 114
 115 // for asychronous typekit loading
 116 @each $element in h1, h2, h3, h4, h5, h6, p, li {
 117     .wf-loading #{$element} {
 118         opacity: 0;
 119     }
 120
 121     #{$element} {
 122         @include transition( opacity );
 123         opacity: 1;
 124     }
 125 }
 126
 127
 128 /* 1.`Layout
 129 ---------------------------------------------- */
 130
 131 html,
 132 body {
 133   height: 100%;
 134   margin: 0;
 135 }
 136
 137 body {
 138     background-position: 20% 0;
 139 }
 140
 141 .sidebar {
 142         @extend .grid-3;
 143
 144         form {
 145                 margin-left: $base;
 146         }
 147 }
 148
 149
 150 /* a.`header
 151 -------------------------- */
 152
 153 #g-masthead {
 154     @extend .futura;
 155     background-color: #262626;
 156
 157     .wrapper {
 158         background-color: #262626;
 159     }
 160 }
 161
 162 #g-logo {
 163     @extend .grid-3;
 164
 165     a {
 166         display: block;
 167     }
 168 }
 169
 170 #g-nav-user {
 171     @extend .grid-8;
 172     padding: 0 0 $base/2;
 173     text-align: right;
 174     @extend .small;
 175
 176     > ul {
 177         @extend .tight-line-height;
 178
 179                                 > li {
 180                                         float: right;
 181
 182                                                 &.first, &.first a {
 183                                                                 border: 0;
 184                                                 }
 185
 186                                                 > a {
 187                                                                 display: block;
 188                                                                 padding: $base/4 $base/2;
 189                                                                 color: $gold;
 190
 191                                                                 &#live-courses-link {
 192                                                                         padding-right: $base;
 193                                                                         color: #fff;
 194
 195                                                                         &.s-active {
 196                                                                                 background-color: #333333;
 197                                                                         }
 198                                                                 }
 199                                                 }
 200                                 }
 201     }
 202 }
 203
 204 #g-nav-main {
 205     @extend .grid-5;
 206     @extend .group;
 207
 208     ul {
 209         float: right;
 210         padding: $base/4 0;
 211     }
 212
 213     li { @include inline-block; }
 214
 215     a {
 216         position: relative;
 217         display: block;
 218         padding: $base/4 0;
 219         margin-left: $base;
 220         @extend .big;
 221         color: #fff;
 222
 223         &:hover {
 224             color: $gold;
 225         }
 226
 227         .icon {
 228             position: absolute;
 229             left: 0;
 230         }
 231     }
 232
 233     #school_link {
 234         padding-left: $base*1.1;
 235
 236         &:hover .icon { @extend .paperclip-active; }
 237
 238         .icon {
 239             @extend .paperclip;
 240             top: 50%;
 241             margin-top: -10px;
 242         }
 243     }
 244
 245     #blog_link {
 246         padding-left: $base*1.2;
 247
 248         &:hover .icon { @extend .align-lines-active; }
 249
 250         .icon {
 251             top: 50%;
 252             margin-top: -9px;
 253             @extend .align-lines;
 254         }
 255     }
 256
 257     #archive_link {
 258         padding-left: $base*1.1;
 259
 260         &:hover {
 261
 262             .icon { @extend .book-active; }
 263         }
 264
 265         .icon { @extend .book; }
 266     }
 267 }
 268
 269 #g-masthead-hr {
 270     position: absolute;
 271                 z-index: 10;
 272     margin-top: 0;
 273     margin-bottom: 0;
 274     @extend .grid-8;
 275     top: 100%;
 276     height: 3px;
 277     border: 0;
 278     background-color: $gold;
 279 }
 280
 281
 282 /* b.`content
 283
 284 -------------------------- */
 285
 286 #g-page {
 287     background-color: #fff;
 288     margin-bottom: $base*2;
 289 }
 290
 291 .page {
 292         display: none;
 293         @extend .group;
 294         margin-bottom: $base;
 295         margin-top: 3px;
 296         color: #333;
 297 }
 298
 299 .breadcrumb {
 300         position: relative;
 301         @extend .grid-8;
 302         @extend .big;
 303         @extend .group;
 304         border-bottom: 1px solid #f8f8f8;
 305         background-color: #fafafa;
 306
 307         a {
 308                 display: block;
 309                 float: left;
 310                 padding: $base/4;
 311                 opacity: 0.7;
 312                 @include transition( opacity );
 313
 314                 .action {
 315                         color: $mustard;
 316                 }
 317
 318                 .location {
 319                         color: #666;
 320                 }
 321
 322                 &:hover {
 323                         opacity: 1;
 324                 }
 325
 326                 span {
 327                                 @include transition( color );
 328                 }
 329         }
 330
 331         .action {
 332                 color: #666;
 333         }
 334
 335         .location {
 336                 @extend .futura-oblique;
 337                 color: #bbb;
 338         }
 339 }
 340
 341 $rgba-gold: rgba(255, 205, 88, 0.1);
 342
 343 .subheader {
 344     @extend .grid-8;
 345     padding: $base*1.5 0 $base*2;
 346                 margin-bottom: $base*1.5;
 347                 border-top: 1px solid #f7f7f7;
 348                 border-bottom: 1px solid #fbf7eb;
 349                 border-bottom: 1px solid $rgba-gold;
 350                 background-color: #fcfcfc;
 351
 352     h1, h3 {
 353         margin: 0;
 354         @extend .tight-line-height;
 355     }
 356
 357     h1 {
 358         color: #333;
 359     }
 360
 361     h2 {
 362         @extend .futura-light;
 363     }
 364 }
 365
 366 .main-content {
 367     @extend .grid-8;
 368 }
 369
 370 /* c.`footer
 371 -------------------------- */
 372
 373
 374 #g-footer {
 375     @extend .grid-8;
 376     text-align: center;
 377 }
 378
 379 #g-nav-footer {
 380     margin-bottom: $base/2;
 381     text-align: center;
 382
 383     li {
 384         display: inline;
 385         text-align: center;
 386         @extend .mini;
 387     }
 388
 389     a {
 390         padding: 0 $base/2;
 391     }
 392 }
 393
 394 #g-footer-copyright {
 395     @extend .tiny;
 396
 397     img {
 398         margin: 0 auto;
 399         margin-bottom: $base/2;
 400     }
 401
 402 }
 403 .footer {
 404   color: #444;
 405   padding-top: 24px;
 406   #footer-nav {
 407     float: right;
 408     margin-right: -16px;
 409
 410     li {
 411       display: inline-block;
 412       *display: inline;
 413     }
 414     a {
 415       @include transition(color);
 416       padding: 5px 16px;
 417       color: #999;
 418       &:hover {
 419         color: #fff;
 420       }
 421     }
 422   }
 423   p {
 424     float: right;
 425     clear: both;
 426     margin-top: 24px;
 427   }
 428   .creative_commons {
 429     .section {
 430       clear: both;
 431       float: right;
 432     }
 433     float: right;
 434     clear: both;
 435     a {
 436       color: #777;
 437     }
 438   }
 439 }
 440
 441 /* 2.`Forms
 442 ---------------------------------------------- */
 443
 444 input.text {
 445         padding: $base/4;
 446         background-color: #e5e5e5;
 447         border: 1px solid #ccc;
 448
 449         &:focus {
 450                 border: 1px solid #aaa;
 451                 outline: 0;
 452         }
 453 }
 454
 455 .form-header {
 456
 457         h4 {
 458                 color: $mustard;
 459                 @extend .futura;
 460         }
 461
 462         p {
 463                 @extend .small;
 464         }
 465 }
 466
 467 .form-section {
 468         margin-bottom: $base*2;
 469 }
 470
 471 form {
 472
 473         .row {
 474                 margin-bottom: $base/2;
 475
 476                 button {
 477                         margin-top: $base/2;
 478                 }
 479         }
 480 }
 481
 482
 483 /* 3.`Extensible Classes
 484 ---------------------------------------------- */
 485
 486 .group {
 487     &:after {
 488     content: ".";
 489     display: block;
 490     height: 0;
 491     clear: both;
 492     visibility: hidden;
 493     }
 494 }
 495
 496 .right { float: right !important; }
 497 .left { float: left !important; }
 498
 499 .spacer {
 500   padding-top: 16px;
 501   padding-bottom: 32px;
 502 }
 503
 504 .half-width { width: 50%; }
 505 .centered { text-align: center;}
 506 .centered-rt-parent { margin: 0 auto;}
 507
 508 .light {
 509         color: #444;
 510 }
 511
 512 .info {
 513         @extend .futura-bold;
 514         color: #6bcf77;
 515 }
 516
 517 .error {
 518         @extend .futura-bold;
 519         color: #b7300b;
 520 }
 521
 522 @import "partials/sprites"; // A
 523 @import "partials/pages";   // B
 524 @import "partials/modules"; // C
 525 @import "partials/mixins"; // C
 526 @import "partials/media";   // D