source/sass/components/_site-sidebar.scss

   1 /*
   2 |-------------------------------------------------------------------------------
   3 | Site sidebar
   4 |-------------------------------------------------------------------------------
   5 */
   6 .c-site-sidebar {
   7   width: $sidebarWidth;
   8   height: 100%;
   9   position: absolute;
  10   top: 0;
  11   z-index: 1;
  12   text-align: center;
  13
  14   // Visible by default on desktop
  15   @include breakpoint(desktop) {
  16     left: 0;
  17   }
  18
  19   // Off canvas by default on mobile
  20   @include breakpoint(mobile) {
  21     left: -$sidebarWidth;
  22   }
  23 }
  24
  25 /*
  26 |-------------------------------------------------------------------------------
  27 | Sidebar header
  28 |-------------------------------------------------------------------------------
  29 */
  30 // Cover
  31 .c-sidebar-header {
  32   height: 100px;
  33   position: relative;
  34   margin-bottom: 65px;
  35   @include bg-size(cover);
  36   background-position: 50% 50%;
  37 }
  38
  39 // Logo and link
  40 .c-sidebar-header__link,
  41 .c-sidebar-header__image {
  42   width: 80px;
  43   height: 80px;
  44   display: block;
  45 }
  46
  47 // Logo
  48 .c-sidebar-header__image {
  49   @include border-radius(40px);
  50   border: 2px solid $c-white;
  51 }
  52
  53 // Link {
  54 .c-sidebar-header__link {
  55   left: 50%;
  56   bottom: -40px;
  57   z-index: 1;
  58   position: absolute;
  59   margin-left: -40px;
  60 }
  61
  62 /*
  63 |-------------------------------------------------------------------------------
  64 | Sidebar blog description
  65 |-------------------------------------------------------------------------------
  66 */
  67 .c-sidebar-blog-description {
  68   padding: 0 20px;
  69   font-size: 0.9em;
  70   color: $c-grayDark;
  71   margin-bottom: 20px;
  72   font-weight: normal;
  73 }
  74
  75 /*
  76 |-------------------------------------------------------------------------------
  77 | Sidebar blog title
  78 |-------------------------------------------------------------------------------
  79 */
  80 .c-sidebar-blog-title {
  81   padding: 0 15px;
  82   font-size: 1.25em;
  83   margin-bottom: 20px;
  84 }
  85
  86 /*
  87 |-------------------------------------------------------------------------------
  88 | Sidebar contact links - github, linkedin, twitter, etc.
  89 |-------------------------------------------------------------------------------
  90 */
  91 .c-sidebar-contact-links {
  92   font-size: 0.9em;
  93   margin-bottom: 20px;
  94   padding: 0 15px 20px;
  95   border-bottom: 1px solid $c-gray;
  96 }
  97
  98 .c-sidebar-contact-links__item {
  99   padding: 0 5px;
 100 }
 101
 102 /*
 103 |-------------------------------------------------------------------------------
 104 | Sidebar navigation
 105 |-------------------------------------------------------------------------------
 106 */
 107 .c-sidebar-navigation {
 108   font-size: 0.9em;
 109   margin-bottom: 20px;
 110   padding: 0 15px 20px;
 111   border-bottom: 1px solid $c-gray;
 112 }
 113
 114 .c-sidebar-navigation__item {
 115   padding: 5px;
 116   font-weight: bold;
 117   display: inline-block;
 118 }
 119
 120 /*
 121 |-------------------------------------------------------------------------------
 122 | Sidebar promotion links
 123 |-------------------------------------------------------------------------------
 124 */
 125 .c-sidebar-promotion-links {
 126   font-size: 0.9em;
 127   margin-bottom: 20px;
 128   padding-bottom: 20px;
 129   border-bottom: 1px solid $c-gray;
 130 }
 131
 132 .c-sidebar-promotion-links__item {
 133   padding: 5px 15px;
 134   display: block;
 135 }