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 // Feature image
  29 .c-post-full-image {
  30     height: 800px;
  31     margin: 0 -10vw -165px;
  32     background: var(--lightgrey) center center;
  33     background-size: cover;
  34     border-radius: 5px;
  35 }
  36
  37
  38 @media (max-width: 1170px) {
  39     .c-post-full-image {
  40         height: 600px;
  41         margin: 0 -4vw -100px;
  42         border-radius: 0;
  43         background-size: cover;
  44     }
  45 }
  46
  47 @media (max-width: 800px) {
  48     .c-post-full-image {
  49         height: 400px;
  50     }
  51 }
  52
  53 /*
  54 |-------------------------------------------------------------------------------
  55 | Post view meta - date & tags
  56 |-------------------------------------------------------------------------------
  57 */
  58 .c-post-view-meta {
  59   line-height: 2;
  60   font-size: 0.9em;
  61   font-style: italic;
  62   color: $c-grayDark;
  63 }
  64
  65 .c-post-view-meta__tags {
  66   text-transform: lowercase;
  67 }
  68
  69 .c-page-title__heading + .c-post-view-meta {
  70   // margin-top: 10px;
  71   padding: 10px 100px 35px 100px;
  72   margin-top: -200;
  73   background: c-white;
  74 }
  75
  76 /*
  77 |-------------------------------------------------------------------------------
  78 | Post view share - share on Twitter, Facebook and Google+
  79 |-------------------------------------------------------------------------------
  80 */
  81 .c-post-view-share {
  82   @extend .clear;
  83 }
  84
  85 .c-post-view-share__item {
  86   float: left;
  87   width: 100%;
  88   padding: 10px;
  89   margin: 1px 0;
  90   color: $c-white;
  91   font-size: 0.9em;
  92   font-weight: bold;
  93
  94   @media (min-width: 550px) {
  95     width: 33.333%;
  96   }
  97 }
  98
  99 .c-post-view-share__item:hover {
 100   opacity: 0.9;
 101   color: $c-white;
 102 }
 103
 104 .c-post-view-share__item--twitter {
 105   background: #4099FF;
 106 }
 107
 108 .c-post-view-share__item--facebook {
 109   background: #3B5998;
 110 }
 111
 112 .c-post-view-share__item--google {
 113   background: #d34836;
 114 }
 115
 116 /*
 117 |-------------------------------------------------------------------------------
 118 | Post view previous / next post
 119 |-------------------------------------------------------------------------------
 120 */
 121 .c-post-view-prev-next {
 122   @extend .clear;
 123   margin-top: 30px;
 124   padding-top: 30px;
 125   border-top: 1px solid $c-gray;
 126 }
 127
 128 .c-post-view-prev-next__item {
 129   @media (min-width: 700px) {
 130     @include post2Col();
 131   }
 132
 133   @media (max-width: 701px) {
 134     &:first-child {
 135       margin-bottom: 35px;
 136       padding-bottom: 20px;
 137       border-bottom: 1px solid $c-gray;
 138     }
 139   }
 140 }
 141
 142 // Image and image link
 143 .c-post-view-prev-next__image {
 144   margin-bottom: 15px;
 145   position: relative;
 146   display: block;
 147
 148   &:hover {
 149     opacity: 0.8;
 150   }
 151 }
 152
 153 .c-post-view-prev-next__image__img {
 154   width: 100%;
 155   display: block;
 156 }
 157
 158 .c-post-view-prev-next__image--placeholder {
 159   opacity: 0.8;
 160   padding-top: 50%;
 161   background: $c-gray;
 162 }
 163
 164 // Previous and Next labels
 165 .c-post-view-prev-next__image__label {
 166   top: 10px;
 167   color: $c-white;
 168   position: absolute;
 169   padding: 10px 15px;
 170   background: rgba($c-black, 0.5);
 171 }
 172
 173 .c-post-view-prev-next__image__label--next {
 174   left: 10px;
 175 }
 176
 177 .c-post-view-prev-next__image__label--previous {
 178   right: 10px;
 179 }