style.scss

   1 ---
   2 ---
   3
   4 //
   5 // IMPORTS
   6 //
   7
   8 @import "_reset";
   9 @import "_variables";
  10 // Syntax highlighting @import is at the bottom of this file
  11
  12 /**************/
  13 /* BASE RULES */
  14 /**************/
  15
  16 html {
  17   font-size: 100%;
  18 }
  19
  20 body {
  21         background: $white;
  22   font: 18px/1.4 $helvetica;
  23   color: $darkGray;
  24 }
  25
  26 .container {
  27   margin: 0 auto;
  28   max-width: 740px;
  29   padding: 0 10px;
  30   width: 100%;
  31 }
  32
  33 h1, h2, h3, h4, h5, h6 {
  34   font-family: $helveticaNeue;
  35   color: $darkerGray;
  36   font-weight: 600;
  37
  38   line-height: 1.7;
  39   margin: 1em 0 15px;
  40   padding: 0;
  41
  42   @include mobile {
  43     line-height: 1.4;
  44   }
  45 }
  46
  47 h1 {
  48   font-weight: 500;
  49   font-size: 32px;
  50   a {
  51     color: inherit;
  52   }
  53 }
  54
  55 h2 {
  56   font-weight: 400;
  57   font-size: 24px;
  58 }
  59
  60 h3 {
  61   font-size: 18px;
  62 }
  63
  64 h4 {
  65   font-size: 18px;
  66   color: $gray;
  67 }
  68
  69 p {
  70   margin: 15px 0;
  71 }
  72
  73 a {
  74   color: $blue;
  75   text-decoration: none;
  76         cursor: pointer;
  77   &:hover, &:active {
  78     color: $blue;
  79   }
  80 }
  81
  82 ul, ol {
  83   margin: 15px 0;
  84   padding-left: 30px;
  85 }
  86
  87 ul {
  88   list-style-type: disc;
  89 }
  90
  91 ol {
  92   list-style-type: decimal;
  93 }
  94
  95 ol ul, ul ol, ul ul, ol ol {
  96   margin: 0;
  97 }
  98
  99 ul ul, ol ul {
 100   list-style-type: circle;
 101 }
 102
 103 em, i {
 104   font-style: italic;
 105 }
 106
 107 strong, b {
 108   font-weight: 600;
 109 }
 110
 111 img {
 112   max-width: 100%;
 113 }
 114
 115 .date {
 116   font-style: italic;
 117   color: $gray;
 118 }
 119
 120 // Specify the color of the selection
 121 ::-moz-selection {
 122   color: $black;
 123   background: $lightGray;
 124 }
 125 ::selection {
 126   color: $black;
 127   background: $lightGray;
 128 }
 129
 130 // Nicolas Gallagher's micro clearfix hack
 131 // http://nicolasgallagher.com/micro-clearfix-hack/
 132 .clearfix:before,
 133 .clearfix:after {
 134     content: " ";
 135     display: table;
 136 }
 137
 138 .clearfix:after {
 139     clear: both;
 140 }
 141
 142 /*********************/
 143 /* LAYOUT / SECTIONS */
 144 /*********************/
 145
 146 //
 147 // .masthead
 148 //
 149
 150 .wrapper-masthead {
 151   margin-bottom: 50px;
 152 }
 153
 154 .masthead {
 155   padding: 20px 0;
 156   border-bottom: 1px solid $lightGray;
 157
 158   @include mobile {
 159     text-align: center;
 160   }
 161 }
 162
 163 .site-avatar {
 164   float: left;
 165   width: 70px;
 166   height: 70px;
 167   margin-right: 15px;
 168
 169   @include mobile {
 170     float: none;
 171     display: block;
 172     margin: 0 auto;
 173   }
 174
 175   img {
 176     border-radius: 5px;
 177   }
 178 }
 179
 180 .site-info {
 181   float: left;
 182
 183   @include mobile {
 184     float: none;
 185     display: block;
 186     margin: 0 auto;
 187   }
 188 }
 189
 190 .site-name {
 191   margin: 0;
 192   color: $darkGray;
 193   cursor: pointer;
 194   font-family: $helveticaNeue;
 195   font-weight: 300;
 196   font-size: 28px;
 197   letter-spacing: 1px;
 198 }
 199
 200 .site-description {
 201   margin: -5px 0 0 0;
 202   color: $gray;
 203   font-size: 16px;
 204
 205   @include mobile {
 206     margin: 3px 0;
 207   }
 208 }
 209
 210 nav {
 211   float: right;
 212   margin-top: 23px; // @TODO: Vertically middle align
 213   font-family: $helveticaNeue;
 214   font-size: 18px;
 215
 216   @include mobile {
 217     float: none;
 218     margin-top: 9px;
 219     display: block;
 220     font-size: 16px;
 221   }
 222
 223   a {
 224     margin-left: 20px;
 225     color: $darkGray;
 226     text-align: right;
 227     font-weight: 300;
 228     letter-spacing: 1px;
 229
 230     @include mobile {
 231       margin: 0 10px;
 232       color: $blue;
 233     }
 234   }
 235 }
 236
 237 //
 238 // .main
 239 //
 240
 241 .posts > .post {
 242   padding-bottom: 2em;
 243   border-bottom: 1px solid $lightGray;
 244 }
 245
 246 .posts > .post:last-child {
 247   padding-bottom: 1em;
 248   border-bottom: none;
 249 }
 250
 251 .post {
 252   blockquote {
 253     margin: 1.8em .8em;
 254     border-left: 2px solid $gray;
 255     padding: 0.1em 1em;
 256     color: $gray;
 257     font-size: 22px;
 258     font-style: italic;
 259   }
 260
 261   .comments {
 262     margin-top: 10px;
 263   }
 264
 265   .read-more {
 266     text-transform: uppercase;
 267     font-size: 15px;
 268   }
 269 }
 270
 271 .wrapper-footer {
 272   margin-top: 50px;
 273   border-top: 1px solid #ddd;
 274   border-bottom: 1px solid #ddd;
 275   background-color: $lightGray;
 276 }
 277
 278 footer {
 279   padding: 20px 0;
 280   text-align: center;
 281 }
 282
 283 // Settled on moving the import of syntax highlighting to the bottom of the CSS
 284 // ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
 285 @import "_highlights";