X-Git-Url: https://git.njae.me.uk/?a=blobdiff_plain;f=source%2Fsass%2Fcomponents%2F_post-view.scss;h=c50da6c127e6260448eceda7c6070ee19832b51c;hb=99027e686d6a5c2184ca8c000e12f96c92b27faa;hp=ba6fd3dcf8b52a3d09606194826831211dd5651f;hpb=492ea3abec317c9bca6d456037402ffaba12e8c7;p=ghost-theme-willow.git diff --git a/source/sass/components/_post-view.scss b/source/sass/components/_post-view.scss index ba6fd3d..c50da6c 100644 --- a/source/sass/components/_post-view.scss +++ b/source/sass/components/_post-view.scss @@ -8,6 +8,113 @@ @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 } + +.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 .c-post-view__footer { text-align: center; @@ -16,6 +123,31 @@ 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 @@ -33,7 +165,10 @@ } .c-page-title__heading + .c-post-view-meta { - margin-top: 10px; + // margin-top: 10px; + padding: 10px 100px 35px 100px; + margin-top: -200; + background: c-white; } /*