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
  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       @include border-radius(20px);
 215     }
 216   }
 217
 218   @include breakpoint(desktop) {
 219     display: none;
 220   }
 221 }
 222
 223 /*
 224  | -----------------------------------------------------------------------------
 225  | 404 page
 226  | -----------------------------------------------------------------------------
 227 */
 228 .error-page {
 229   text-align: center;
 230   color: $c-baseLight;
 231   line-height: 2em;
 232 }
 233
 234 /*
 235  | -----------------------------------------------------------------------------
 236  | Content
 237  | -----------------------------------------------------------------------------
 238 */
 239 .content {
 240   background: $c-white;
 241   border-left: 1px solid $c-grayDark;
 242
 243   @include breakpoint(mobile) {
 244     padding: 20px;
 245   }
 246
 247   @include breakpoint(desktop) {
 248     padding: 30px;
 249     border-right: 1px solid $c-grayDark;
 250   }
 251
 252   /*
 253    | ---------------------------------------------------------------------------
 254    | Posts list
 255    | ---------------------------------------------------------------------------
 256   */
 257   .post-listed {
 258     margin-bottom: 35px;
 259     padding-bottom: 20px;
 260     border-bottom: 1px solid $c-grayDark;
 261
 262     h2 {
 263       font-size: 1.1em;
 264       line-height: 1.4em;
 265       margin-bottom: 10px;
 266     }
 267
 268     @media (min-width: 1200px) {
 269       @include post3Col();
 270     }
 271
 272     @media (max-width: 640px) and (min-width: 600px) {
 273       @include post2Col();
 274     }
 275
 276     @media (max-width: 1199px) and (min-width: 880px) {
 277       @include post2Col();
 278     }
 279   }
 280
 281   /*
 282    | ---------------------------------------------------------------------------
 283    | Single post
 284    | ---------------------------------------------------------------------------
 285   */
 286   .post-single {
 287     .post-header, .post-footer {
 288       margin: 50px 0 40px;
 289       padding: 40px 0;
 290       text-align: center;
 291       border-top: 1px solid $c-grayNormal;
 292       border-bottom: 1px solid $c-grayNormal;
 293
 294       h1 {
 295         font-size: 1.4em;
 296         line-height: normal;
 297         margin-bottom: 20px;
 298       }
 299     }
 300
 301     .post-header {
 302       margin-top: 0;
 303     }
 304   }
 305
 306   /*
 307    | ---------------------------------------------------------------------------
 308    | Main post image
 309    | ---------------------------------------------------------------------------
 310   */
 311   .post-image {
 312     display: block;
 313     margin-bottom: 15px;
 314
 315     &:not(div):hover {
 316       opacity: 0.8;
 317     }
 318
 319     img {
 320       width: 100%;
 321       display: block;
 322     }
 323   }
 324
 325   /*
 326    | ---------------------------------------------------------------------------
 327    | Post content - markdown
 328    | ---------------------------------------------------------------------------
 329   */
 330   .post-content {
 331     @extend .markdown;
 332   }
 333
 334   /*
 335    | ---------------------------------------------------------------------------
 336    | Post meta block - tags, share links, etc.
 337    | ---------------------------------------------------------------------------
 338   */
 339   .post-meta {
 340     font-size: 0.8em;
 341     font-style: italic;
 342     color: $c-baseLight;
 343
 344     .tags {
 345       a {
 346         text-transform: lowercase;
 347       }
 348     }
 349
 350     .share {
 351       a {
 352         font-weight: bold;
 353         padding: 0 5px 0 0;
 354       }
 355
 356       .share-twitter {
 357         color: #4099FF;
 358       }
 359
 360       .share-facebook {
 361         color: #3B5998;
 362       }
 363
 364       .share-google-plus {
 365         color: #d34836;
 366       }
 367
 368       .share-twitter,
 369       .share-facebook,
 370       .share-google-plus {
 371         &:hover {
 372           color: $c-baseLight;
 373         }
 374       }
 375     }
 376   }
 377
 378   /*
 379    | ---------------------------------------------------------------------------
 380    | Posts pagination
 381    | ---------------------------------------------------------------------------
 382   */
 383   .pagination {
 384     clear: both;
 385     @extend .clear;
 386
 387     .older-posts {
 388       float: right;
 389     }
 390   }
 391 }