assets/src/sass/styles.scss

   1 /*
   2  | -----------------------------------------------------------------------------
   3  | Variables
   4  | -----------------------------------------------------------------------------
   5 */
   6 $sidebarWidth : 290px;
   7 $maxPageWidth : 1000px;
   8
   9 $c-white      : #ffffff;
  10 $c-baseNormal : #555555;
  11 $c-grayNormal : #f7f7f7;
  12
  13 $c-grayDark   : darken($c-grayNormal, 5);
  14 $c-baseLight  : lighten($c-baseNormal, 20);
  15
  16 /*
  17  | -----------------------------------------------------------------------------
  18  | Imports
  19  | -----------------------------------------------------------------------------
  20 */
  21 @import "vendor/normalize";
  22 @import "helpers/mixins";
  23 @import "helpers/classes";
  24
  25 /*
  26  | -----------------------------------------------------------------------------
  27  | Resets and html + body styles
  28  | -----------------------------------------------------------------------------
  29 */
  30 * {
  31   box-sizing: border-box;
  32 }
  33
  34 h1, h2, h3, p, ul, blockquote, pre {
  35   margin: 0;
  36   padding: 0;
  37 }
  38
  39 html, body {
  40   height: 100%;
  41 }
  42
  43 html, body {
  44   min-width: 320px;
  45   background: $c-grayNormal;
  46   font-size: 16px;
  47   line-height: 1.2em;
  48   color: $c-baseNormal;
  49   font-family: 'Merriweather', serif;
  50 }
  51
  52 /*
  53  | -----------------------------------------------------------------------------
  54  | Anchors
  55  | -----------------------------------------------------------------------------
  56 */
  57 a {
  58   outline: none;
  59   color: $c-baseNormal;
  60   text-decoration: none;
  61   @include transition();
  62
  63   &:hover {
  64     color: $c-baseLight;
  65   }
  66 }
  67
  68 /*
  69  | -----------------------------------------------------------------------------
  70  | Layout
  71  | -----------------------------------------------------------------------------
  72 */
  73 .wrapper {
  74   width: 100%;
  75   height: 100%;
  76   overflow-x: hidden;
  77
  78   /* Fix iOS Safari scroll bug */
  79   overflow-y: scroll;
  80   -webkit-overflow-scrolling: touch;
  81 }
  82
  83 .viewport {
  84   width: 100%;
  85   @include translateX(0);
  86
  87   @include breakpoint(mobile) {
  88     @include transition(300ms);
  89   }
  90 }
  91
  92 @include breakpoint(mobile) {
  93   .wrapper[data-menu-visible="1"] .viewport {
  94     @include translateX($sidebarWidth);
  95   }
  96 }
  97
  98 .sidebar {
  99   width: $sidebarWidth;
 100   position: absolute;
 101   height: 100%;
 102   z-index: 1;
 103   top : 0;
 104
 105   @include breakpoint(desktop) {
 106     left: 0;
 107   }
 108
 109   @include breakpoint(mobile) {
 110     left: -$sidebarWidth;
 111   }
 112 }
 113
 114 .content {
 115   min-height: 100vh;
 116   max-width: $maxPageWidth;
 117
 118   @include breakpoint(desktop) {
 119     margin-left: $sidebarWidth;
 120   }
 121 }
 122
 123 /*
 124  | -----------------------------------------------------------------------------
 125  | Sidebar
 126  | -----------------------------------------------------------------------------
 127 */
 128 .sidebar {
 129   text-align: center;
 130
 131   .sidebar-header {
 132     background-position: 50% 50%;
 133     background-size: cover;
 134     margin-bottom: 70px;
 135     position: relative;
 136     height: 100px;
 137
 138     a, img {
 139       width: 80px;
 140       height: 80px;
 141     }
 142
 143     a {
 144       left: 50%;
 145       bottom: -40px;
 146       position: absolute;
 147       margin-left: -40px;
 148     }
 149
 150     img {
 151       display: block;
 152       border: 2px solid $c-white;
 153       @include border-radius(40px);
 154     }
 155   }
 156
 157   h1, h2, .sidebar-menu, .sidebar-links {
 158     margin: 0 auto 20px;
 159     max-width: 265px;
 160   }
 161
 162   h1 {
 163     font-size: 1.2em;
 164   }
 165
 166   h2 {
 167     font-size: 0.8em;
 168     color: $c-baseLight;
 169     font-weight: normal;
 170   }
 171
 172   .sidebar-links {
 173     font-size: 0.8em;
 174     padding-bottom: 20px;
 175     border-bottom: 1px solid $c-grayDark;
 176
 177     a {
 178       padding: 0 5px;
 179     }
 180   }
 181
 182   .sidebar-menu {
 183     a {
 184       display: block;
 185       padding: 5px 0;
 186       font-size: 0.9em;
 187       font-weight: bold;
 188     }
 189   }
 190 }
 191
 192 /*
 193  | -----------------------------------------------------------------------------
 194  | Mobile header
 195  | -----------------------------------------------------------------------------
 196 */
 197 .mobile-header {
 198   margin-bottom: 20px;
 199
 200   .mobile-menu,
 201   .mobile-logo {
 202     height: 40px;
 203     cursor: pointer;
 204     display: inline-block;
 205   }
 206
 207   .mobile-menu {
 208     font-weight: bold;
 209     line-height: 40px;
 210   }
 211
 212   .mobile-logo {
 213     width: 40px;
 214     float: right;
 215
 216     img {
 217       max-width: 100%;
 218       @include border-radius(20px);
 219     }
 220   }
 221
 222   @include breakpoint(desktop) {
 223     display: none;
 224   }
 225 }
 226
 227 /*
 228  | -----------------------------------------------------------------------------
 229  | 404 page
 230  | -----------------------------------------------------------------------------
 231 */
 232 .error-page {
 233   text-align: center;
 234   color: $c-baseLight;
 235   line-height: 2em;
 236 }
 237
 238 /*
 239  | -----------------------------------------------------------------------------
 240  | Content
 241  | -----------------------------------------------------------------------------
 242 */
 243 .content {
 244   background: $c-white;
 245   border-left: 1px solid $c-grayDark;
 246
 247   @include breakpoint(mobile) {
 248     padding: 20px;
 249   }
 250
 251   @include breakpoint(desktop) {
 252     padding: 30px;
 253     border-right: 1px solid $c-grayDark;
 254   }
 255
 256   /*
 257    | ---------------------------------------------------------------------------
 258    | Posts list
 259    | ---------------------------------------------------------------------------
 260   */
 261   .post-listed {
 262     margin-bottom: 35px;
 263     padding-bottom: 20px;
 264     border-bottom: 1px solid $c-grayDark;
 265
 266     h2 {
 267       font-size: 1.1em;
 268       line-height: 1.4em;
 269       margin-bottom: 10px;
 270     }
 271
 272     @media (min-width: 1200px) {
 273       @include post3Col();
 274     }
 275
 276     @media (max-width: 640px) and (min-width: 600px) {
 277       @include post2Col();
 278     }
 279
 280     @media (max-width: 1199px) and (min-width: 880px) {
 281       @include post2Col();
 282     }
 283   }
 284
 285   /*
 286    | ---------------------------------------------------------------------------
 287    | Single post
 288    | ---------------------------------------------------------------------------
 289   */
 290   .post-single {
 291     .post-header, .post-footer {
 292       margin: 50px 0 40px;
 293       padding: 40px 0;
 294       text-align: center;
 295       border-top: 1px solid $c-grayNormal;
 296       border-bottom: 1px solid $c-grayNormal;
 297
 298       h1 {
 299         font-size: 1.4em;
 300         line-height: normal;
 301         margin-bottom: 20px;
 302       }
 303     }
 304
 305     .post-header {
 306       margin-top: 0;
 307     }
 308   }
 309
 310   /*
 311    | ---------------------------------------------------------------------------
 312    | Main post image
 313    | ---------------------------------------------------------------------------
 314   */
 315   .post-image {
 316     display: block;
 317     margin-bottom: 15px;
 318
 319     &:not(div):hover {
 320       opacity: 0.8;
 321     }
 322
 323     img {
 324       width: 100%;
 325       display: block;
 326     }
 327   }
 328
 329   /*
 330    | ---------------------------------------------------------------------------
 331    | Post content - markdown
 332    | ---------------------------------------------------------------------------
 333   */
 334   .post-content {
 335     @extend .markdown;
 336   }
 337
 338   /*
 339    | ---------------------------------------------------------------------------
 340    | Post meta block - tags, share links, etc.
 341    | ---------------------------------------------------------------------------
 342   */
 343   .post-meta {
 344     font-size: 0.8em;
 345     font-style: italic;
 346     color: $c-baseLight;
 347
 348     .tags {
 349       a {
 350         text-transform: lowercase;
 351       }
 352     }
 353
 354     .share {
 355       a {
 356         font-weight: bold;
 357         padding: 0 5px 0 0;
 358       }
 359
 360       .share-twitter {
 361         color: #4099FF;
 362       }
 363
 364       .share-facebook {
 365         color: #3B5998;
 366       }
 367
 368       .share-google-plus {
 369         color: #d34836;
 370       }
 371
 372       .share-twitter,
 373       .share-facebook,
 374       .share-google-plus {
 375         &:hover {
 376           color: $c-baseLight;
 377         }
 378       }
 379     }
 380   }
 381
 382   /*
 383    | ---------------------------------------------------------------------------
 384    | Posts pagination
 385    | ---------------------------------------------------------------------------
 386   */
 387   .pagination {
 388     clear: both;
 389     @extend .clear;
 390
 391     .older-posts {
 392       float: right;
 393     }
 394   }
 395 }