X-Git-Url: https://git.njae.me.uk/?a=blobdiff_plain;f=source%2Fsass%2Fcomponents%2F_post-view.scss;h=231ecf08c072d97339711fb0b7d3bf66d306f336;hb=HEAD;hp=ee85398d41c2b95b522aabb1044177c4c4334ff9;hpb=9af009b8613354db0fde091633171162dfbaaf79;p=ghost-theme-willow.git diff --git a/source/sass/components/_post-view.scss b/source/sass/components/_post-view.scss index ee85398..231ecf0 100644 --- a/source/sass/components/_post-view.scss +++ b/source/sass/components/_post-view.scss @@ -12,9 +12,107 @@ // .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 } +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; +} + +.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 @@ -25,6 +123,31 @@ img[src$="#full"] { max-width:none;width:100vw } 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 @@ -42,7 +165,10 @@ img[src$="#full"] { max-width:none;width:100vw } } .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; } /*