X-Git-Url: https://git.njae.me.uk/?a=blobdiff_plain;f=source%2Fsass%2Fcomponents%2F_post-view.scss;h=231ecf08c072d97339711fb0b7d3bf66d306f336;hb=HEAD;hp=913cf1273faabcbea15863c61b030892fda9a257;hpb=5b79b48789f9f19aeeabbb51bdef17bf2ad7f74c;p=ghost-theme-willow.git

diff --git a/source/sass/components/_post-view.scss b/source/sass/components/_post-view.scss
index 913cf12..231ecf0 100644
--- a/source/sass/components/_post-view.scss
+++ b/source/sass/components/_post-view.scss
@@ -3,38 +3,275 @@
 | Post view
 |-------------------------------------------------------------------------------
 */
-.c-post-view--narrow {
-  text-align: center;
-  max-width: 610px;
-  margin: 0 auto;
+// Content
+.c-post-view__content {
+  @extend .markdown;
 }
 
-// Header
-.c-post-view__header {
-  text-align: center;
-  padding: 10px 0 40px 0;
-  margin-bottom: 40px;
-  border-bottom: 1px solid $c-grayMedium;
+// .c-post-view__content img[src$="#left"] { max-width:50vw; float: left; } 
+// .c-post-view__content img[src$="#right"] { max-width:50vw; float: right; } 
+// .c-post-view__content img[src$="#full"] { max-width:none;width:100vw }
+
+img[src$="#left"]  { max-width:30%; float: left;  margin: 1rem; } 
+img[src$="#right"] { max-width:30%; float: right; margin: 1rem; } 
+img[src$="#full"]  { max-width:none; width:100vw; margin: 1rem; }
+
+.kg-width-wide img {
+  max-width: 85vw;
 }
 
-.c-post-view__header__title {
-  line-height: 1.5em;
-  margin-bottom: 20px;
+.kg-width-full img {
+  max-width: 100vw;
 }
 
-.c-post-view__header__title--no-meta {
-  margin-bottom: 0;
+
+// .kg-width-wide {
+//   position: relative;
+//   width: 85vw;
+//   min-width: 100%;
+//   margin: auto calc(50% - 50vw);
+//   transform: translateX(calc(50vw - 50%));
+// }
+// 
+// .kg-width-full {
+//   position: relative;
+//   width: 100vw;
+//   left: 50%;
+//   right: 50%;
+//   margin-left: -50vw;
+//   margin-right: -50vw;
+// }
+
+
+.c-post-view__content figcaption {
+    font-size: 80%;
+    line-height: 1.6em;
+    text-align: center;
 }
 
-  // Content
-.c-post-view__content {
-  @extend .markdown;
+.kg-image-card,
+.kg-gallery-card {
+    margin: 0 0 1.5em;
+}
+
+.kg-image-card figcaption,
+.kg-gallery-card figcaption {
+    margin: -1.0em 0 1.5em;
+}
+
+.kg-embed-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 1.5em 0 3em;
+    min-width: 100%;
+}
+
+.kg-embed-card figcaption {
+    margin: 0.5em 0 0;
+}
+
+.kg-embed-card .fluid-width-video-wrapper {
+    margin: 0;
+}
+
+
+.kg-image-full + figcaption {
+    padding: 0 1.5em;
+}
+
+.kg-gallery-container {
+    display: flex;
+    flex-direction: column;
+    margin: 1.5em auto;
+    max-width: 1040px;
+    width: 100vw;
 }
 
+.kg-gallery-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.kg-gallery-image img {
+    display: block;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.kg-gallery-row:not(:first-of-type) {
+    margin: 0.75em 0 0 0;
+}
+
+.kg-gallery-image:not(:first-of-type) {
+    margin: 0 0 0 0.75em;
+}
+
+
+
+
+
+
+
 // Footer
 .c-post-view__footer {
   text-align: center;
-  margin-top: 40px;
-  padding: 40px 0 10px;
-  border-top: 1px solid $c-grayMedium;
-}
\ No newline at end of file
+  margin-top: 30px;
+  padding: 30px 0 10px;
+  border-top: 1px solid $c-gray;
+}
+
+// Feature image
+.c-post-full-image {
+    height: 800px;
+    margin: 0 -10vw -165px;
+    background: var(--lightgrey) center bottom;
+    background-size: cover;
+    border-radius: 5px;
+}
+
+
+@media (max-width: 1170px) {
+    .c-post-full-image {
+        height: 600px;
+        margin: 0 -4vw -100px;
+        border-radius: 0;
+        background-size: cover; 
+    }
+}
+
+@media (max-width: 800px) {
+    .c-post-full-image {
+        height: 400px;
+    }
+}
+
+/*
+|-------------------------------------------------------------------------------
+| Post view meta - date & tags
+|-------------------------------------------------------------------------------
+*/
+.c-post-view-meta {
+  line-height: 2;
+  font-size: 0.9em;
+  font-style: italic;
+  color: $c-grayDark;
+}
+
+.c-post-view-meta__tags {
+  text-transform: lowercase;
+}
+
+.c-page-title__heading + .c-post-view-meta {
+  // margin-top: 10px;
+  padding: 10px 100px 35px 100px;
+  margin-top: -200;
+  background: c-white;
+}
+
+/*
+|-------------------------------------------------------------------------------
+| Post view share - share on Twitter, Facebook and Google+
+|-------------------------------------------------------------------------------
+*/
+.c-post-view-share {
+  @extend .clear;
+}
+
+.c-post-view-share__item {
+  float: left;
+  width: 100%;
+  padding: 10px;
+  margin: 1px 0;
+  color: $c-white;
+  font-size: 0.9em;
+  font-weight: bold;
+
+  @media (min-width: 550px) {
+    width: 33.333%;
+  }
+}
+
+.c-post-view-share__item:hover {
+  opacity: 0.9;
+  color: $c-white;
+}
+
+.c-post-view-share__item--twitter {
+  background: #4099FF;
+}
+
+.c-post-view-share__item--facebook {
+  background: #3B5998;
+}
+
+.c-post-view-share__item--google {
+  background: #d34836;
+}
+
+/*
+|-------------------------------------------------------------------------------
+| Post view previous / next post
+|-------------------------------------------------------------------------------
+*/
+.c-post-view-prev-next {
+  @extend .clear;
+  margin-top: 30px;
+  padding-top: 30px;
+  border-top: 1px solid $c-gray;
+}
+
+.c-post-view-prev-next__item {
+  @media (min-width: 700px) {
+    @include post2Col();
+  }
+
+  @media (max-width: 701px) {
+    &:first-child {
+      margin-bottom: 35px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid $c-gray;
+    }
+  }
+}
+
+// Image and image link
+.c-post-view-prev-next__image {
+  margin-bottom: 15px;
+  position: relative;
+  display: block;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.c-post-view-prev-next__image__img {
+  width: 100%;
+  display: block;
+}
+
+.c-post-view-prev-next__image--placeholder {
+  opacity: 0.8;
+  padding-top: 50%;
+  background: $c-gray;
+}
+
+// Previous and Next labels
+.c-post-view-prev-next__image__label {
+  top: 10px;
+  color: $c-white;
+  position: absolute;
+  padding: 10px 15px;
+  background: rgba($c-black, 0.5);
+}
+
+.c-post-view-prev-next__image__label--next {
+  left: 10px;
+}
+
+.c-post-view-prev-next__image__label--previous {
+  right: 10px;
+}