Trying out some bits with a post cover image

[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 ba6fd3dcf8b52a3d09606194826831211dd5651f..eafe5305a3fcb7833bea7bfa7902e86b6b191eca 100644 (file)
--- a/source/sass/components/_post-view.scss
+++ b/source/sass/components/_post-view.scss
@@ -8,6 +8,15 @@
   @extend .markdown;
 }
 
+// .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; } 
+img[src$="#right"] { max-width:30%; float: right; } 
+img[src$="#full"] { max-width:none;width:100vw }
+
+
 // Footer
 .c-post-view__footer {
   text-align: center;
@@ -16,6 +25,31 @@
   border-top: 1px solid $c-gray;
 }
 
+// Feature image
+.c-post-full-image {
+    height: 800px;
+    margin: 0 -10vw -165px;
+    background: var(--lightgrey) center center;
+    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