Updated theme to Ghost 2.1

[ghost-theme-willow.git] / source / sass / components / _post-view.scss

diff --git a/source/sass/components/_post-view.scss b/source/sass/components/_post-view.scss
index aeaa58f54204303253d6d75f5157320b60267c00..c50da6c127e6260448eceda7c6070ee19832b51c 100644 (file)
--- a/source/sass/components/_post-view.scss
+++ b/source/sass/components/_post-view.scss
@@ -14,7 +14,105 @@
 
 img[src$="#left"] { max-width:30%; float: left; } 
 img[src$="#right"] { max-width:30%; float: right; } 
-img[src$="#full"] { max-width:none;width:100vw }
+img[src$="#full"] { max-width:none; width:100vw }
+
+.kg-width-wide img {
+  max-width: 85vw;
+}
+
+.kg-width-full img {
+  max-width: 100vw;
+}
+
+
+// .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;
+}
+
+.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
@@ -29,7 +127,7 @@ img[src$="#full"] { max-width:none;width:100vw }
 .c-post-full-image {
     height: 800px;
     margin: 0 -10vw -165px;
-    background: var(--lightgrey) center center;
+    background: var(--lightgrey) center bottom;
     background-size: cover;
     border-radius: 5px;
 }