grav-theme-future2021/assets/sass/components/_post.scss

///
/// Future Imperfect by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Post */

	.post {
		@include padding(_size(section-spacing), _size(section-spacing));
		background: _palette(bg);
		border: solid 1px _palette(border);
		margin: 0 0 _size(section-spacing) 0;
		position: relative;

		> header {
			@include vendor('display', 'flex');
			border-bottom: solid 1px _palette(border);
			left: (_size(section-spacing) * -1);
			margin: (_size(section-spacing) * -1) 0 _size(section-spacing) 0;
			position: relative;
			width: calc(100% + #{_size(section-spacing) * 2});

			.title {
				@include vendor('flex-grow', '1');
				-ms-flex: 1;
				padding: (_size(section-spacing) * 1.25) _size(section-spacing) (_size(section-spacing) * 1.1) _size(section-spacing);

				h2 {
					font-weight: _font(weight-heading-extrabold);
					font-size: 1.5em;
				}

				> :last-child {
					margin-bottom: 0;
				}
			}

			.meta {
				@include padding(_size(section-spacing) * 1.25, _size(section-spacing));
				border-left: solid 1px _palette(border);
				min-width: 17em;
				text-align: right;
				width: 17em;

				> * {
					margin: 0 0 (_size(element-margin) * 0.5) 0;
				}

				> :last-child {
					margin-bottom: 0;
				}

				.published {
					color: _palette(fg-bold);
					display: block;
					font-family: _font(family-heading);
					font-size: 0.7em;
					font-weight: _font(weight-heading-bold);
					letter-spacing: _font(kerning-heading);
					margin-top: 0.5em;
					text-transform: uppercase;
					white-space: nowrap;
				}
			}
		}

		> a.image.featured {
			overflow: hidden;

			img {
				@include vendor('transition', 'transform #{_duration(transition)} ease-out');
			}

			&:hover {
				img {
					@include vendor('transform', 'scale(1.05)');
				}
			}
		}

		> footer {
			@include vendor('display', 'flex');
			@include vendor('align-items', 'center');

			.actions {
				@include vendor('flex-grow', '1');
			}

			.stats {
				cursor: default;
				list-style: none;
				padding: 0;

				li {
					border-left: solid 1px _palette(border);
					display: inline-block;
					font-family: _font(family-heading);
					font-size: 0.6em;
					font-weight: _font(weight-heading);
					letter-spacing: _font(kerning-heading);
					line-height: 1;
					margin: 0 0 0 2em;
					padding: 0 0 0 2em;
					text-transform: uppercase;

					&:first-child {
						border-left: 0;
						margin-left: 0;
						padding-left: 0;
					}

					.icon {
						border-bottom: 0;

						&:before {
							color: _palette(icon);
							margin-right: 0.75em;
						}
					}
				}
			}
		}

		@include breakpoint('<=medium') {
			border-left: 0;
			border-right: 0;
			left: _size(section-spacing) * -1;
			width: calc(100% + (#{_size(section-spacing)} * 2));

			> header {
				@include vendor('flex-direction', 'column');
				@include padding(_size(section-spacing) * 1.25, _size(section-spacing), (0, 0, -0.5em, 0));
				border-left: 0;

				.title {
					-ms-flex: 0 1 auto;
					margin: 0 0 _size(element-margin) 0;
					padding: 0;
					text-align: center;
				}

				.meta {
					@include vendor('align-items', 'center');
					@include vendor('display', 'flex');
					@include vendor('justify-content', 'center');
					border-left: 0;
					margin: 0 0 _size(element-margin) 0;
					padding-top: 0;
					padding: 0;
					text-align: left;
					width: 100%;

					> * {
						border-left: solid 1px _palette(border);
						margin-left: 2em;
						padding-left: 2em;
					}

					> :first-child {
						border-left: 0;
						margin-left: 0;
						padding-left: 0;
					}

					.published {
						margin-bottom: 0;
						margin-top: 0;
					}

					.author {
						@include vendor('flex-direction', 'row-reverse');
						margin-bottom: 0;

						.name {
							margin: 0 0 0 1.5em;
						}

						img {
							width: 3.5em;
						}
					}
				}
			}
		}

		@include breakpoint('<=small') {
			@include padding(_size(section-spacing-small), _size(section-spacing-small));
			left: _size(section-spacing-small) * -1;
			margin: 0 0 _size(element-margin) 0;
			width: calc(100% + (#{_size(section-spacing-small)} * 2));

			> header {
				@include padding(_size(section-spacing-small) * 2, _size(section-spacing-small), (0, 0, -0.5em, 0));
				left: (_size(section-spacing-small) * -1);
				margin: (_size(section-spacing-small) * -1) 0 _size(section-spacing-small) 0;
				width: calc(100% + #{_size(section-spacing-small) * 2});

				.title {
					h2 {
						font-size: 1.1em;
					}
				}
			}
		}

		@include breakpoint('<=xsmall') {
			> header {
				.meta {
					@include vendor('align-items', 'center');
					@include vendor('flex-direction', 'column');

					> * {
						border-left: 0;
						margin: (_size(element-margin) * 0.5) 0 0 0;
						padding-left: 0;
					}

					.author {
						.name {
							display: none;
						}
					}
				}
			}

			> .image.featured {
				margin-left: _size(section-spacing-small) * -1;
				margin-top: calc(#{_size(section-spacing-small) * -1} - 1px);
				width: calc(100% + #{_size(section-spacing-small) * 2});
			}

			> footer {
				@include vendor('align-items', 'stretch');
				@include vendor('flex-direction', 'column-reverse');

				.stats {
					text-align: center;

					li {
						margin: 0 0 0 1.25em;
						padding: 0 0 0 1.25em;
					}
				}
			}
		}
	}