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 .kg-width-wide img {
  20   max-width: 85vw;
  21 }
  22
  23 .kg-width-full img {
  24   max-width: 100vw;
  25 }
  26
  27
  28 // .kg-width-wide {
  29 //   position: relative;
  30 //   width: 85vw;
  31 //   min-width: 100%;
  32 //   margin: auto calc(50% - 50vw);
  33 //   transform: translateX(calc(50vw - 50%));
  34 // }
  35 //
  36 // .kg-width-full {
  37 //   position: relative;
  38 //   width: 100vw;
  39 //   left: 50%;
  40 //   right: 50%;
  41 //   margin-left: -50vw;
  42 //   margin-right: -50vw;
  43 // }
  44
  45
  46 .c-post-view__content figcaption {
  47     font-size: 80%;
  48     line-height: 1.6em;
  49     text-align: center;
  50 }
  51
  52 .kg-image-card,
  53 .kg-gallery-card {
  54     margin: 0 0 1.5em;
  55 }
  56
  57 .kg-image-card figcaption,
  58 .kg-gallery-card figcaption {
  59     margin: -1.0em 0 1.5em;
  60 }
  61
  62 .kg-embed-card {
  63     display: flex;
  64     flex-direction: column;
  65     align-items: center;
  66     margin: 1.5em 0 3em;
  67     min-width: 100%;
  68 }
  69
  70 .kg-embed-card figcaption {
  71     margin: 0.5em 0 0;
  72 }
  73
  74 .kg-embed-card .fluid-width-video-wrapper {
  75     margin: 0;
  76 }
  77
  78
  79 .kg-image-full + figcaption {
  80     padding: 0 1.5em;
  81 }
  82
  83 .kg-gallery-container {
  84     display: flex;
  85     flex-direction: column;
  86     margin: 1.5em auto;
  87     max-width: 1040px;
  88     width: 100vw;
  89 }
  90
  91 .kg-gallery-row {
  92     display: flex;
  93     flex-direction: row;
  94     justify-content: center;
  95 }
  96
  97 .kg-gallery-image img {
  98     display: block;
  99     margin: 0;
 100     width: 100%;
 101     height: 100%;
 102 }
 103
 104 .kg-gallery-row:not(:first-of-type) {
 105     margin: 0.75em 0 0 0;
 106 }
 107
 108 .kg-gallery-image:not(:first-of-type) {
 109     margin: 0 0 0 0.75em;
 110 }
 111
 112
 113
 114
 115
 116
 117
 118 // Footer
 119 .c-post-view__footer {
 120   text-align: center;
 121   margin-top: 30px;
 122   padding: 30px 0 10px;
 123   border-top: 1px solid $c-gray;
 124 }
 125
 126 // Feature image
 127 .c-post-full-image {
 128     height: 800px;
 129     margin: 0 -10vw -165px;
 130     background: var(--lightgrey) center bottom;
 131     background-size: cover;
 132     border-radius: 5px;
 133 }
 134
 135
 136 @media (max-width: 1170px) {
 137     .c-post-full-image {
 138         height: 600px;
 139         margin: 0 -4vw -100px;
 140         border-radius: 0;
 141         background-size: cover;
 142     }
 143 }
 144
 145 @media (max-width: 800px) {
 146     .c-post-full-image {
 147         height: 400px;
 148     }
 149 }
 150
 151 /*
 152 |-------------------------------------------------------------------------------
 153 | Post view meta - date & tags
 154 |-------------------------------------------------------------------------------
 155 */
 156 .c-post-view-meta {
 157   line-height: 2;
 158   font-size: 0.9em;
 159   font-style: italic;
 160   color: $c-grayDark;
 161 }
 162
 163 .c-post-view-meta__tags {
 164   text-transform: lowercase;
 165 }
 166
 167 .c-page-title__heading + .c-post-view-meta {
 168   // margin-top: 10px;
 169   padding: 10px 100px 35px 100px;
 170   margin-top: -200;
 171   background: c-white;
 172 }
 173
 174 /*
 175 |-------------------------------------------------------------------------------
 176 | Post view share - share on Twitter, Facebook and Google+
 177 |-------------------------------------------------------------------------------
 178 */
 179 .c-post-view-share {
 180   @extend .clear;
 181 }
 182
 183 .c-post-view-share__item {
 184   float: left;
 185   width: 100%;
 186   padding: 10px;
 187   margin: 1px 0;
 188   color: $c-white;
 189   font-size: 0.9em;
 190   font-weight: bold;
 191
 192   @media (min-width: 550px) {
 193     width: 33.333%;
 194   }
 195 }
 196
 197 .c-post-view-share__item:hover {
 198   opacity: 0.9;
 199   color: $c-white;
 200 }
 201
 202 .c-post-view-share__item--twitter {
 203   background: #4099FF;
 204 }
 205
 206 .c-post-view-share__item--facebook {
 207   background: #3B5998;
 208 }
 209
 210 .c-post-view-share__item--google {
 211   background: #d34836;
 212 }
 213
 214 /*
 215 |-------------------------------------------------------------------------------
 216 | Post view previous / next post
 217 |-------------------------------------------------------------------------------
 218 */
 219 .c-post-view-prev-next {
 220   @extend .clear;
 221   margin-top: 30px;
 222   padding-top: 30px;
 223   border-top: 1px solid $c-gray;
 224 }
 225
 226 .c-post-view-prev-next__item {
 227   @media (min-width: 700px) {
 228     @include post2Col();
 229   }
 230
 231   @media (max-width: 701px) {
 232     &:first-child {
 233       margin-bottom: 35px;
 234       padding-bottom: 20px;
 235       border-bottom: 1px solid $c-gray;
 236     }
 237   }
 238 }
 239
 240 // Image and image link
 241 .c-post-view-prev-next__image {
 242   margin-bottom: 15px;
 243   position: relative;
 244   display: block;
 245
 246   &:hover {
 247     opacity: 0.8;
 248   }
 249 }
 250
 251 .c-post-view-prev-next__image__img {
 252   width: 100%;
 253   display: block;
 254 }
 255
 256 .c-post-view-prev-next__image--placeholder {
 257   opacity: 0.8;
 258   padding-top: 50%;
 259   background: $c-gray;
 260 }
 261
 262 // Previous and Next labels
 263 .c-post-view-prev-next__image__label {
 264   top: 10px;
 265   color: $c-white;
 266   position: absolute;
 267   padding: 10px 15px;
 268   background: rgba($c-black, 0.5);
 269 }
 270
 271 .c-post-view-prev-next__image__label--next {
 272   left: 10px;
 273 }
 274
 275 .c-post-view-prev-next__image__label--previous {
 276   right: 10px;
 277 }