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