scss/style.scss

   1
   2 //
   3 // IMPORTS
   4 //
   5
   6 @import "_reset";
   7 @import "_variables";
   8 @import "_highlights";
   9 // TODO - Tempted to move this to the end of the file, so that it shows up at the end of the .css. Or remove it entirely and find a better way to include highlighting.
  10
  11 //
  12 // BASE RULES
  13 //
  14
  15 html {
  16   font-size: 100%;
  17 }
  18
  19 body {
  20         background: $white;
  21   font: 18px/1.4 $helvetica;
  22   color: $darkGray;
  23 }
  24
  25 .container {
  26   margin: 0 auto;
  27   max-width: 740px;
  28   //padding: 0 20px;
  29   width: 100%;
  30 }
  31
  32 h1, h2, h3, h4, h5, h6 {
  33   font-family: $helveticaNeue;
  34   color: $darkerGray;
  35   font-weight: 500;
  36
  37   line-height: 1.7;
  38   margin: 1em 0 15px;
  39   padding: 0;
  40
  41   @include mobile {
  42     line-height: 1.4;
  43   }
  44 }
  45
  46 h1 {
  47   font-weight: 400;
  48   font-size: 32px;
  49   a {
  50     color: inherit;
  51   }
  52 }
  53
  54 h2 {
  55   font-size: 22px;
  56 }
  57
  58 h3 {
  59   font-size: 18px;
  60   font-weight: 600;
  61 }
  62
  63 h4 {
  64   font-size: 18px;
  65   color: $gray;
  66   font-weight: 600;
  67 }
  68
  69 p {
  70   margin: 15px 0;
  71 }
  72
  73 a {
  74   text-decoration: none;
  75         cursor: pointer;
  76   color: $blue;
  77   &:hover, &:active {
  78     text-decoration: underline;
  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 {
 104   font-style: italic;
 105 }
 106
 107 strong {
 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: $lighterGray;
 124 }
 125 ::selection {
 126   color: $black;
 127   background: $lighterGray;
 128 }
 129
 130
 131 //
 132 // LAYOUT / SECTIONS
 133 //
 134
 135 //
 136 // .masthead
 137 //
 138
 139 .wrapper-masthead {
 140   //background-color: #e8e8f2;
 141   margin-bottom: 40px;
 142 }
 143
 144 .masthead {
 145   padding: 20px 0;
 146   border-bottom: 1px solid $lighterGray;
 147   @include mobile {
 148     text-align: center;
 149   }
 150
 151   // @TODO: OMG this is so bad, I just can't
 152   br {
 153     visibility: none;
 154   }
 155 }
 156
 157 .avatar {
 158   float: left;
 159   width: 70px;
 160   height: 70px;
 161   margin-right: 15px;
 162
 163   @include mobile {
 164     float: none;
 165     display: block;
 166     margin: 0 auto;
 167   }
 168
 169   img {
 170     border-radius: 5px;
 171   }
 172 }
 173
 174 .site-name {
 175   float: left;
 176
 177   font-family: $helveticaNeue;
 178   font-weight: 300;
 179   font-size: 28px;
 180   letter-spacing: 1px;
 181   @include mobile {
 182     float: none;
 183     display: block;
 184   }
 185
 186   text-decoration: none;
 187   cursor: pointer;
 188   color: $darkGray;
 189   &:hover, &:active {
 190     text-decoration: none;
 191
 192   }
 193 }
 194
 195 .site-description {
 196   float: left;
 197   font-size: 16px;
 198   margin: 0;
 199   margin-top: -5px;
 200   color: #777;
 201
 202   @include mobile {
 203     float: none;
 204     display: block;
 205     margin: 3px 0;
 206   }
 207 }
 208
 209 nav {
 210   float: right;
 211   margin-top: -25px; // @TODO - containers for nav and content blocks in header
 212
 213   font-family: $helveticaNeue;
 214   font-size: 18px;
 215   @include mobile {
 216     float: none;
 217     display: block;
 218     margin-top: 15px;
 219     font-size: 16px;
 220   }
 221
 222   // nav has it's own link highlighting
 223   a {
 224     margin-left: 25px;
 225     text-align: right;
 226     font-weight: 300;
 227     letter-spacing: 1px;
 228     color: $darkGray;
 229
 230     &:hover, &:active {
 231       text-decoration: none;
 232       cursor: pointer;
 233       color: $darkGray;
 234     }
 235
 236     @include mobile {
 237       margin: 0 10px;
 238     }
 239   }
 240 }
 241
 242 .logo, nav {
 243   @include mobile {
 244     float: none;
 245     width: 100%;
 246     text-align: center;
 247   }
 248 }
 249
 250 //
 251 // .main
 252 //
 253
 254 .wrapper-posts {
 255
 256 }
 257
 258 .posts > .post {
 259   padding-bottom: 2em;
 260   border-bottom: 1px solid $lighterGray;
 261 }
 262
 263 .posts > .post:last-child {
 264   padding-bottom: 1em;
 265   border-bottom: none;
 266 }
 267
 268 .post {
 269   h1 a {
 270     cursor: pointer;
 271     &:hover, &:active {
 272       color: $blue;
 273       text-decoration: none;
 274     }
 275   }
 276
 277   blockquote {
 278     border-left: 2px solid $gray;
 279     font-size: 22px;
 280     font-style: italic;
 281     margin: 1.8em .8em;
 282     padding: 0.1em 1em;
 283     color: $gray;
 284   }
 285 }
 286
 287 .wrapper-footer {
 288   margin-top: 50px;
 289   background-color: #eee;
 290   border-top: 1px solid #ddd;
 291 }
 292
 293 footer {
 294   padding: 20px 0;
 295   text-align: center;
 296 }