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 }
  72
  73 /*
  74 |-------------------------------------------------------------------------------
  75 | Post view share - share on Twitter, Facebook and Google+
  76 |-------------------------------------------------------------------------------
  77 */
  78 .c-post-view-share {
  79   @extend .clear;
  80 }
  81
  82 .c-post-view-share__item {
  83   float: left;
  84   width: 100%;
  85   padding: 10px;
  86   margin: 1px 0;
  87   color: $c-white;
  88   font-size: 0.9em;
  89   font-weight: bold;
  90
  91   @media (min-width: 550px) {
  92     width: 33.333%;
  93   }
  94 }
  95
  96 .c-post-view-share__item:hover {
  97   opacity: 0.9;
  98   color: $c-white;
  99 }
 100
 101 .c-post-view-share__item--twitter {
 102   background: #4099FF;
 103 }
 104
 105 .c-post-view-share__item--facebook {
 106   background: #3B5998;
 107 }
 108
 109 .c-post-view-share__item--google {
 110   background: #d34836;
 111 }
 112
 113 /*
 114 |-------------------------------------------------------------------------------
 115 | Post view previous / next post
 116 |-------------------------------------------------------------------------------
 117 */
 118 .c-post-view-prev-next {
 119   @extend .clear;
 120   margin-top: 30px;
 121   padding-top: 30px;
 122   border-top: 1px solid $c-gray;
 123 }
 124
 125 .c-post-view-prev-next__item {
 126   @media (min-width: 700px) {
 127     @include post2Col();
 128   }
 129
 130   @media (max-width: 701px) {
 131     &:first-child {
 132       margin-bottom: 35px;
 133       padding-bottom: 20px;
 134       border-bottom: 1px solid $c-gray;
 135     }
 136   }
 137 }
 138
 139 // Image and image link
 140 .c-post-view-prev-next__image {
 141   margin-bottom: 15px;
 142   position: relative;
 143   display: block;
 144
 145   &:hover {
 146     opacity: 0.8;
 147   }
 148 }
 149
 150 .c-post-view-prev-next__image__img {
 151   width: 100%;
 152   display: block;
 153 }
 154
 155 .c-post-view-prev-next__image--placeholder {
 156   opacity: 0.8;
 157   padding-top: 50%;
 158   background: $c-gray;
 159 }
 160
 161 // Previous and Next labels
 162 .c-post-view-prev-next__image__label {
 163   top: 10px;
 164   color: $c-white;
 165   position: absolute;
 166   padding: 10px 15px;
 167   background: rgba($c-black, 0.5);
 168 }
 169
 170 .c-post-view-prev-next__image__label--next {
 171   left: 10px;
 172 }
 173
 174 .c-post-view-prev-next__image__label--previous {
 175   right: 10px;
 176 }