challenge-bot.com Git - challenge-bot/blob - challenge-bot.com/css/main.scss

   1 ---
   2 # Only the main Sass file needs front matter (the dashes are enough)
   3 ---
   4 @charset "utf-8";
   5
   6
   7
   8 // Our variables
   9 $base-font-family: monospace;//Helvetica, Arial, sans-serif;
  10 $special-font: monospace;
  11 $base-font-size:   12px;
  12 $small-font-size:  $base-font-size * 0.875;
  13 $base-line-height: 1.5;
  14
  15 $spacing-unit:     30px;
  16
  17 $text-color:       #111;
  18 $background-color: #fdfdfd;
  19 $brand-color:      #00CC00;
  20 $highlight-color:       #00ff00;
  21
  22 $grey-color:       #828282;
  23 $grey-color-light: lighten($grey-color, 40%);
  24 $grey-color-dark:  darken($grey-color, 25%);
  25
  26 $on-palm:          999px;
  27 $on-laptop:        1000px;
  28
  29 $h1-color:              #267F26;
  30 $h2-color:              #007F00;
  31
  32
  33
  34 // Using media queries with like this:
  35 // @include media-query($palm) {
  36 //     .wrapper {
  37 //         padding-right: $spacing-unit / 2;
  38 //         padding-left: $spacing-unit / 2;
  39 //     }
  40 // }
  41 @mixin media-query($device) {
  42     @media screen and (max-width: $device) {
  43         @content;
  44     }
  45 }
  46
  47
  48
  49 // Import partials from `sass_dir` (defaults to `_sass`)
  50 @import
  51         "base",
  52         "layout",
  53         "syntax-highlighting"
  54 ;
  55
  56 .main {
  57         width: 90%;
  58 }
  59 .person {
  60         width: 30%;
  61 }
  62
  63 iframe {
  64         width: 560;
  65         height: 315;
  66 }