source/sass/components/_post-view.scss

   1 /*
   2 |-------------------------------------------------------------------------------
   3 | Post view
   4 |-------------------------------------------------------------------------------
   5 */
   6 // Content
   7 .c-post-view__content {
   8   @extend .markdown;
   9 }
  10
  11 // .c-post-view__content img[src$="#left"] { max-width:50vw; float: left; }
  12 // .c-post-view__content img[src$="#right"] { max-width:50vw; float: right; }
  13 // .c-post-view__content img[src$="#full"] { max-width:none;width:100vw }
  14
  15 img[src$="#left"] { max-width:30%; float: left; }
  16 img[src$="#right"] { max-width:30%; float: right; }
  17 img[src$="#full"] { max-width:none;width:100vw }
  18
  19
  20 // Footer
  21 .c-post-view__footer {
  22   text-align: center;
  23   margin-top: 30px;
  24   padding: 30px 0 10px;
  25   border-top: 1px solid $c-gray;
  26 }
  27
  28 /*
  29 |-------------------------------------------------------------------------------
  30 | Post view meta - date & tags
  31 |-------------------------------------------------------------------------------
  32 */
  33 .c-post-view-meta {
  34   line-height: 2;
  35   font-size: 0.9em;
  36   font-style: italic;
  37   color: $c-grayDark;
  38 }
  39
  40 .c-post-view-meta__tags {
  41   text-transform: lowercase;
  42 }
  43
  44 .c-page-title__heading + .c-post-view-meta {
  45   // margin-top: 10px;
  46   padding: 10px 100px 35px 100px;
  47   margin-top: -200;
  48   background: c-white;
  49 }
  50
  51 /*
  52 |-------------------------------------------------------------------------------
  53 | Post view share - share on Twitter, Facebook and Google+
  54 |-------------------------------------------------------------------------------
  55 */
  56 .c-post-view-share {
  57   @extend .clear;
  58 }
  59
  60 .c-post-view-share__item {
  61   float: left;
  62   width: 100%;
  63   padding: 10px;
  64   margin: 1px 0;
  65   color: $c-white;
  66   font-size: 0.9em;
  67   font-weight: bold;
  68
  69   @media (min-width: 550px) {
  70     width: 33.333%;
  71   }
  72 }
  73
  74 .c-post-view-share__item:hover {
  75   opacity: 0.9;
  76   color: $c-white;
  77 }
  78
  79 .c-post-view-share__item--twitter {
  80   background: #4099FF;
  81 }
  82
  83 .c-post-view-share__item--facebook {
  84   background: #3B5998;
  85 }
  86
  87 .c-post-view-share__item--google {
  88   background: #d34836;
  89 }
  90
  91 /*
  92 |-------------------------------------------------------------------------------
  93 | Post view previous / next post
  94 |-------------------------------------------------------------------------------
  95 */
  96 .c-post-view-prev-next {
  97   @extend .clear;
  98   margin-top: 30px;
  99   padding-top: 30px;
 100   border-top: 1px solid $c-gray;
 101 }
 102
 103 .c-post-view-prev-next__item {
 104   @media (min-width: 700px) {
 105     @include post2Col();
 106   }
 107
 108   @media (max-width: 701px) {
 109     &:first-child {
 110       margin-bottom: 35px;
 111       padding-bottom: 20px;
 112       border-bottom: 1px solid $c-gray;
 113     }
 114   }
 115 }
 116
 117 // Image and image link
 118 .c-post-view-prev-next__image {
 119   margin-bottom: 15px;
 120   position: relative;
 121   display: block;
 122
 123   &:hover {
 124     opacity: 0.8;
 125   }
 126 }
 127
 128 .c-post-view-prev-next__image__img {
 129   width: 100%;
 130   display: block;
 131 }
 132
 133 .c-post-view-prev-next__image--placeholder {
 134   opacity: 0.8;
 135   padding-top: 50%;
 136   background: $c-gray;
 137 }
 138
 139 // Previous and Next labels
 140 .c-post-view-prev-next__image__label {
 141   top: 10px;
 142   color: $c-white;
 143   position: absolute;
 144   padding: 10px 15px;
 145   background: rgba($c-black, 0.5);
 146 }
 147
 148 .c-post-view-prev-next__image__label--next {
 149   left: 10px;
 150 }
 151
 152 .c-post-view-prev-next__image__label--previous {
 153   right: 10px;
 154 }