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 }
  47
  48 /*
  49 |-------------------------------------------------------------------------------
  50 | Post view share - share on Twitter, Facebook and Google+
  51 |-------------------------------------------------------------------------------
  52 */
  53 .c-post-view-share {
  54   @extend .clear;
  55 }
  56
  57 .c-post-view-share__item {
  58   float: left;
  59   width: 100%;
  60   padding: 10px;
  61   margin: 1px 0;
  62   color: $c-white;
  63   font-size: 0.9em;
  64   font-weight: bold;
  65
  66   @media (min-width: 550px) {
  67     width: 33.333%;
  68   }
  69 }
  70
  71 .c-post-view-share__item:hover {
  72   opacity: 0.9;
  73   color: $c-white;
  74 }
  75
  76 .c-post-view-share__item--twitter {
  77   background: #4099FF;
  78 }
  79
  80 .c-post-view-share__item--facebook {
  81   background: #3B5998;
  82 }
  83
  84 .c-post-view-share__item--google {
  85   background: #d34836;
  86 }
  87
  88 /*
  89 |-------------------------------------------------------------------------------
  90 | Post view previous / next post
  91 |-------------------------------------------------------------------------------
  92 */
  93 .c-post-view-prev-next {
  94   @extend .clear;
  95   margin-top: 30px;
  96   padding-top: 30px;
  97   border-top: 1px solid $c-gray;
  98 }
  99
 100 .c-post-view-prev-next__item {
 101   @media (min-width: 700px) {
 102     @include post2Col();
 103   }
 104
 105   @media (max-width: 701px) {
 106     &:first-child {
 107       margin-bottom: 35px;
 108       padding-bottom: 20px;
 109       border-bottom: 1px solid $c-gray;
 110     }
 111   }
 112 }
 113
 114 // Image and image link
 115 .c-post-view-prev-next__image {
 116   margin-bottom: 15px;
 117   position: relative;
 118   display: block;
 119
 120   &:hover {
 121     opacity: 0.8;
 122   }
 123 }
 124
 125 .c-post-view-prev-next__image__img {
 126   width: 100%;
 127   display: block;
 128 }
 129
 130 .c-post-view-prev-next__image--placeholder {
 131   opacity: 0.8;
 132   padding-top: 50%;
 133   background: $c-gray;
 134 }
 135
 136 // Previous and Next labels
 137 .c-post-view-prev-next__image__label {
 138   top: 10px;
 139   color: $c-white;
 140   position: absolute;
 141   padding: 10px 15px;
 142   background: rgba($c-black, 0.5);
 143 }
 144
 145 .c-post-view-prev-next__image__label--next {
 146   left: 10px;
 147 }
 148
 149 .c-post-view-prev-next__image__label--previous {
 150   right: 10px;
 151 }