scss/style.scss

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