| 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; }
+img[src$="#right"] { max-width:30%; float: right; }
+img[src$="#full"] { max-width:none; width:100vw }
+
+.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;
+}
projects / ghost-theme-willow.git / blobdiff