2 |-------------------------------------------------------------------------------
4 |-------------------------------------------------------------------------------
7 .c-post-view__content {
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 }
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 }
29 // position: relative;
32 // margin: auto calc(50% - 50vw);
33 // transform: translateX(calc(50vw - 50%));
37 // position: relative;
41 // margin-left: -50vw;
42 // margin-right: -50vw;
46 .c-post-view__content figcaption {
57 .kg-image-card figcaption,
58 .kg-gallery-card figcaption {
59 margin: -1.0em 0 1.5em;
64 flex-direction: column;
70 .kg-embed-card figcaption {
74 .kg-embed-card .fluid-width-video-wrapper {
79 .kg-image-full + figcaption {
83 .kg-gallery-container {
85 flex-direction: column;
94 justify-content: center;
97 .kg-gallery-image img {
104 .kg-gallery-row:not(:first-of-type) {
105 margin: 0.75em 0 0 0;
108 .kg-gallery-image:not(:first-of-type) {
109 margin: 0 0 0 0.75em;
119 .c-post-view__footer {
122 padding: 30px 0 10px;
123 border-top: 1px solid $c-gray;
129 margin: 0 -10vw -165px;
130 background: var(--lightgrey) center bottom;
131 background-size: cover;
136 @media (max-width: 1170px) {
139 margin: 0 -4vw -100px;
141 background-size: cover;
145 @media (max-width: 800px) {
152 |-------------------------------------------------------------------------------
153 | Post view meta - date & tags
154 |-------------------------------------------------------------------------------
163 .c-post-view-meta__tags {
164 text-transform: lowercase;
167 .c-page-title__heading + .c-post-view-meta {
169 padding: 10px 100px 35px 100px;
175 |-------------------------------------------------------------------------------
176 | Post view share - share on Twitter, Facebook and Google+
177 |-------------------------------------------------------------------------------
183 .c-post-view-share__item {
192 @media (min-width: 550px) {
197 .c-post-view-share__item:hover {
202 .c-post-view-share__item--twitter {
206 .c-post-view-share__item--facebook {
210 .c-post-view-share__item--google {
215 |-------------------------------------------------------------------------------
216 | Post view previous / next post
217 |-------------------------------------------------------------------------------
219 .c-post-view-prev-next {
223 border-top: 1px solid $c-gray;
226 .c-post-view-prev-next__item {
227 @media (min-width: 700px) {
231 @media (max-width: 701px) {
234 padding-bottom: 20px;
235 border-bottom: 1px solid $c-gray;
240 // Image and image link
241 .c-post-view-prev-next__image {
251 .c-post-view-prev-next__image__img {
256 .c-post-view-prev-next__image--placeholder {
262 // Previous and Next labels
263 .c-post-view-prev-next__image__label {
268 background: rgba($c-black, 0.5);
271 .c-post-view-prev-next__image__label--next {
275 .c-post-view-prev-next__image__label--previous {