challenge-bot.com Git - challenge-bot/blob - challenge-bot.com/_sass/_base.scss

   1 /**
   2  * Reset some basic elements
   3  */
   4 body, h1, h2, h3, h4, h5, h6,
   5 p, blockquote, pre, hr,
   6 dl, dd, ol, ul, figure {
   7     margin: 0;
   8     padding: 0;
   9 }
  10
  11
  12
  13 /**
  14  * Basic styling
  15  */
  16 body {
  17     font-family: $base-font-family;
  18     font-size: $base-font-size;
  19     line-height: $base-line-height;
  20     font-weight: 300;
  21     color: $text-color;
  22     background-color: $background-color;
  23     -webkit-text-size-adjust: 100%;
  24 }
  25
  26
  27
  28 /**
  29  * Set `margin-bottom` to maintain vertical rhythm
  30  */
  31 h1, h2, h3, h4, h5, h6,
  32 p, blockquote, pre,
  33 ul, ol, dl, figure,
  34 %vertical-rhythm {
  35     margin-bottom: $spacing-unit / 2;
  36 }
  37
  38
  39
  40 /**
  41  * Images
  42  */
  43 img {
  44     max-width: 100%;
  45     vertical-align: middle;
  46 }
  47
  48
  49
  50 /**
  51  * Figures
  52  */
  53 figure > img {
  54     display: block;
  55 }
  56
  57 figcaption {
  58     font-size: $small-font-size;
  59 }
  60
  61
  62
  63 /**
  64  * Lists
  65  */
  66 ul, ol {
  67     margin-left: $spacing-unit;
  68 }
  69
  70 li {
  71     > ul,
  72     > ol {
  73          margin-bottom: 0;
  74     }
  75 }
  76
  77
  78
  79 /**
  80  * Headings
  81  */
  82 h1, h2, h3, h4, h5, h6 {
  83     font-weight: 300;
  84     font-family: $special-font;
  85 }
  86
  87 strong {
  88     font-weight: 800;
  89 }
  90
  91 h1 {
  92     color: darken($brand-color, 20%);
  93 }
  94
  95 h2 {
  96     color: darken($brand-color, 15%);
  97 }
  98
  99 h3 {
 100     color: darken($brand-color, 10%);
 101 }
 102
 103
 104
 105 /**
 106  * Links
 107  */
 108 a {
 109     color: $brand-color;
 110     font-family: $special-font;
 111     text-decoration: underline;
 112
 113     /*&:visited {
 114         color: darken($brand-color, 15%);
 115     }*/
 116
 117     &:hover {
 118         color: lighten($brand-color, 15%);
 119         text-decoration: none;
 120     }
 121 }
 122
 123
 124
 125 /**
 126  * Blockquotes
 127  */
 128 blockquote {
 129     color: $grey-color;
 130     border-left: 4px solid $grey-color-light;
 131     padding-left: $spacing-unit / 2;
 132     font-size: 18px;
 133     letter-spacing: -1px;
 134     font-style: italic;
 135
 136     > :last-child {
 137         margin-bottom: 0;
 138     }
 139 }
 140
 141
 142
 143 /**
 144  * Code formatting
 145  */
 146 pre,
 147 code {
 148     font-size: 15px;
 149     border: 1px solid $grey-color-light;
 150     border-radius: 3px;
 151     background-color: #eef;
 152 }
 153
 154 code {
 155     padding: 1px 5px;
 156 }
 157
 158 pre {
 159     padding: 8px 12px;
 160     overflow-x: scroll;
 161
 162     > code {
 163         border: 0;
 164         padding-right: 0;
 165         padding-left: 0;
 166     }
 167 }
 168
 169
 170
 171 /**
 172  * Wrapper
 173  */
 174 .wrapper {
 175     max-width: -webkit-calc(800px - (#{$spacing-unit} * 2));
 176     max-width:         calc(800px - (#{$spacing-unit} * 2));
 177     margin-right: auto;
 178     margin-left: auto;
 179     padding-right: $spacing-unit;
 180     padding-left: $spacing-unit;
 181     @extend %clearfix;
 182
 183     @include media-query($on-laptop) {
 184         max-width: -webkit-calc(800px - (#{$spacing-unit}));
 185         max-width:         calc(800px - (#{$spacing-unit}));
 186         padding-right: $spacing-unit / 2;
 187         padding-left: $spacing-unit / 2;
 188     }
 189 }
 190 .site-header {
 191     .wrapper {
 192         max-width: -webkit-calc(1000px - (#{$spacing-unit} * 2));
 193         max-width:         calc(1000px - (#{$spacing-unit} * 2));
 194         margin-right: auto;
 195         margin-left: auto;
 196         padding-right: $spacing-unit;
 197         padding-left: $spacing-unit;
 198         @extend %clearfix;
 199
 200         @include media-query($on-laptop) {
 201             max-width: -webkit-calc(800px - (#{$spacing-unit}));
 202             max-width:         calc(800px - (#{$spacing-unit}));
 203             padding-right: $spacing-unit / 2;
 204             padding-left: $spacing-unit / 2;
 205         }
 206     }
 207 }
 208
 209
 210
 211 /**
 212  * Clearfix
 213  */
 214 %clearfix {
 215
 216     &:after {
 217         content: "";
 218         display: table;
 219         clear: both;
 220     }
 221 }
 222
 223
 224
 225 /**
 226  * Icons
 227  */
 228 .icon {
 229
 230     > svg {
 231         display: inline-block;
 232         width: 16px;
 233         height: 16px;
 234         vertical-align: middle;
 235
 236         path {
 237             fill: $grey-color;
 238         }
 239     }
 240 }