assets/scss/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
  79 .viewport {
  80   width: 100%;
  81   @include translateX(0);
  82
  83   @include breakpoint(mobile) {
  84     @include transition(300ms);
  85   }
  86 }
  87
  88 @include breakpoint(mobile) {
  89   .wrapper[data-menu-visible="1"] .viewport {
  90     @include translateX($sidebarWidth);
  91   }
  92 }
  93
  94 .sidebar {
  95   width: $sidebarWidth;
  96   position: absolute;
  97   height: 100%;
  98   z-index: 1;
  99   top : 0;
 100
 101   @include breakpoint(desktop) {
 102     left: 0;
 103   }
 104
 105   @include breakpoint(mobile) {
 106     left: -$sidebarWidth;
 107   }
 108 }
 109
 110 .content {
 111   min-height: 100vh;
 112   max-width: $maxPageWidth;
 113
 114   @include breakpoint(desktop) {
 115     margin-left: $sidebarWidth;
 116   }
 117 }
 118
 119 /*
 120  | -----------------------------------------------------------------------------
 121  | Sidebar
 122  | -----------------------------------------------------------------------------
 123 */
 124 .sidebar {
 125   text-align: center;
 126
 127   .sidebar-header {
 128     background-position: 50% 50%;
 129     background-size: cover;
 130     margin-bottom: 70px;
 131     position: relative;
 132     height: 100px;
 133
 134     a, img {
 135       width: 80px;
 136       height: 80px;
 137     }
 138
 139     a {
 140       left: 50%;
 141       bottom: -40px;
 142       position: absolute;
 143       margin-left: -40px;
 144     }
 145
 146     img {
 147       display: block;
 148       border: 2px solid $c-white;
 149       @include border-radius(40px);
 150     }
 151   }
 152
 153   h1, h2, .sidebar-menu, .sidebar-links {
 154     margin: 0 auto 20px;
 155     max-width: 265px;
 156   }
 157
 158   h1 {
 159     font-size: 1.2em;
 160   }
 161
 162   h2 {
 163     font-size: 0.8em;
 164     color: $c-baseLight;
 165     font-weight: normal;
 166   }
 167
 168   .sidebar-links {
 169     font-size: 0.8em;
 170     padding-bottom: 20px;
 171     border-bottom: 1px solid $c-grayDark;
 172
 173     a {
 174       padding: 0 5px;
 175     }
 176   }
 177
 178   .sidebar-menu {
 179     a {
 180       display: block;
 181       padding: 5px 0;
 182       font-size: 0.9em;
 183       font-weight: bold;
 184     }
 185   }
 186 }
 187
 188 /*
 189  | -----------------------------------------------------------------------------
 190  | Mobile header
 191  | -----------------------------------------------------------------------------
 192 */
 193 .mobile-header {
 194   margin-bottom: 20px;
 195
 196   .mobile-menu,
 197   .mobile-logo {
 198     height: 40px;
 199     cursor: pointer;
 200     display: inline-block;
 201   }
 202
 203   .mobile-menu {
 204     font-weight: bold;
 205     line-height: 40px;
 206   }
 207
 208   .mobile-logo {
 209     width: 40px;
 210     float: right;
 211
 212     img {
 213       max-width: 100%;
 214     }
 215   }
 216
 217   @include breakpoint(desktop) {
 218     display: none;
 219   }
 220 }
 221
 222 /*
 223  | -----------------------------------------------------------------------------
 224  | 404 page
 225  | -----------------------------------------------------------------------------
 226 */
 227 .error-page {
 228   text-align: center;
 229   color: $c-baseLight;
 230   line-height: 2em;
 231 }
 232
 233 /*
 234  | -----------------------------------------------------------------------------
 235  | Content
 236  | -----------------------------------------------------------------------------
 237 */
 238 .content {
 239   background: $c-white;
 240   border-left: 1px solid $c-grayDark;
 241
 242   @include breakpoint(mobile) {
 243     padding: 20px;
 244   }
 245
 246   @include breakpoint(desktop) {
 247     padding: 30px;
 248     border-right: 1px solid $c-grayDark;
 249   }
 250
 251   /*
 252    | ---------------------------------------------------------------------------
 253    | Posts list
 254    | ---------------------------------------------------------------------------
 255   */
 256   .post-listed {
 257     margin-bottom: 35px;
 258     padding-bottom: 20px;
 259     border-bottom: 1px solid $c-grayDark;
 260
 261     h2 {
 262       font-size: 1.1em;
 263       line-height: 1.4em;
 264       margin-bottom: 10px;
 265     }
 266
 267     @media (min-width: 1200px) {
 268       @include post3Col();
 269     }
 270
 271     @media (max-width: 640px) and (min-width: 600px) {
 272       @include post2Col();
 273     }
 274
 275     @media (max-width: 1199px) and (min-width: 880px) {
 276       @include post2Col();
 277     }
 278   }
 279
 280   /*
 281    | ---------------------------------------------------------------------------
 282    | Single post
 283    | ---------------------------------------------------------------------------
 284   */
 285   .post-single {
 286     .post-header, .post-footer {
 287       margin: 50px 0 40px;
 288       padding: 40px 0;
 289       text-align: center;
 290       border-top: 1px solid $c-grayNormal;
 291       border-bottom: 1px solid $c-grayNormal;
 292
 293       h1 {
 294         font-size: 1.4em;
 295         line-height: normal;
 296         margin-bottom: 20px;
 297       }
 298     }
 299
 300     .post-header {
 301       margin-top: 0;
 302     }
 303   }
 304
 305   /*
 306    | ---------------------------------------------------------------------------
 307    | Main post image
 308    | ---------------------------------------------------------------------------
 309   */
 310   .post-image {
 311     display: block;
 312     margin-bottom: 15px;
 313
 314     &:not(div):hover {
 315       opacity: 0.8;
 316     }
 317
 318     img {
 319       width: 100%;
 320       display: block;
 321     }
 322   }
 323
 324   /*
 325    | ---------------------------------------------------------------------------
 326    | Post content - markdown
 327    | ---------------------------------------------------------------------------
 328   */
 329   .post-content {
 330     @extend .markdown;
 331   }
 332
 333   /*
 334    | ---------------------------------------------------------------------------
 335    | Post meta block - tags, share links, etc.
 336    | ---------------------------------------------------------------------------
 337   */
 338   .post-meta {
 339     font-size: 0.8em;
 340     font-style: italic;
 341     color: $c-baseLight;
 342
 343     .tags {
 344       a {
 345         text-transform: lowercase;
 346       }
 347     }
 348
 349     .share {
 350       a {
 351         font-weight: bold;
 352         padding: 0 5px 0 0;
 353       }
 354
 355       .share-twitter {
 356         color: #4099FF;
 357       }
 358
 359       .share-facebook {
 360         color: #3B5998;
 361       }
 362
 363       .share-google-plus {
 364         color: #d34836;
 365       }
 366
 367       .share-twitter,
 368       .share-facebook,
 369       .share-google-plus {
 370         &:hover {
 371           color: $c-baseLight;
 372         }
 373       }
 374     }
 375   }
 376
 377   /*
 378    | ---------------------------------------------------------------------------
 379    | Posts pagination
 380    | ---------------------------------------------------------------------------
 381   */
 382   .pagination {
 383     clear: both;
 384     @extend .clear;
 385
 386     .older-posts {
 387       float: right;
 388     }
 389   }
 390 }