305 lines
		
	
	
	
		
			4.8 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
		
		
			
		
	
	
			305 lines
		
	
	
	
		
			4.8 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
| 
								 | 
							
								.sticky {
							 | 
						||
| 
								 | 
							
									display: block;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.sticky-post {
							 | 
						||
| 
								 | 
							
									background: $color__background-button;
							 | 
						||
| 
								 | 
							
									color: #fff;
							 | 
						||
| 
								 | 
							
									display: inline-block;
							 | 
						||
| 
								 | 
							
									font-weight: bold;
							 | 
						||
| 
								 | 
							
									line-height: 1;
							 | 
						||
| 
								 | 
							
									padding: .25rem;
							 | 
						||
| 
								 | 
							
									position: absolute;
							 | 
						||
| 
								 | 
							
									text-transform: uppercase;
							 | 
						||
| 
								 | 
							
									top: -$size__spacing-unit;
							 | 
						||
| 
								 | 
							
									z-index: 1;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.updated:not(.published) {
							 | 
						||
| 
								 | 
							
									display: none;
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.page-links {
							 | 
						||
| 
								 | 
							
									clear: both;
							 | 
						||
| 
								 | 
							
									margin: 0 0 calc(1.5 * #{$size__spacing-unit});
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.entry {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									margin-top: calc(6 * #{$size__spacing-unit});
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									&:first-of-type {
							 | 
						||
| 
								 | 
							
										margin-top: 0;
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									.entry-header {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										margin: calc(3 * #{ $size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
							 | 
						||
| 
								 | 
							
										position: relative;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										@include media(tablet) {
							 | 
						||
| 
								 | 
							
											margin: calc(3 * #{ $size__spacing-unit}) $size__site-margins $size__spacing-unit;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									.entry-title {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										@include post-section-dash;
							 | 
						||
| 
								 | 
							
										margin: 0;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										a {
							 | 
						||
| 
								 | 
							
											color: inherit;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											&:hover {
							 | 
						||
| 
								 | 
							
												color: $color__text-hover;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									.entry-meta,
							 | 
						||
| 
								 | 
							
									.entry-footer {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										color: $color__text-light;
							 | 
						||
| 
								 | 
							
										font-weight: 500;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										> span {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											margin-right: $size__spacing-unit;
							 | 
						||
| 
								 | 
							
											display: inline-block;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											&:last-child {
							 | 
						||
| 
								 | 
							
												margin-right: 0;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										a {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											@include link-transition;
							 | 
						||
| 
								 | 
							
											color: currentColor;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											&:hover {
							 | 
						||
| 
								 | 
							
												text-decoration: none;
							 | 
						||
| 
								 | 
							
												color: $color__link;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										.svg-icon {
							 | 
						||
| 
								 | 
							
											position: relative;
							 | 
						||
| 
								 | 
							
											display: inline-block;
							 | 
						||
| 
								 | 
							
											vertical-align: middle;
							 | 
						||
| 
								 | 
							
											margin-right: 0.5em;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									.entry-meta {
							 | 
						||
| 
								 | 
							
										margin: $size__spacing-unit 0;
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									.entry-footer {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										@include media(tablet) {
							 | 
						||
| 
								 | 
							
											margin: $size__spacing-unit $size__site-margins calc(3 * #{$size__spacing-unit});
							 | 
						||
| 
								 | 
							
											max-width: $size__site-tablet-content;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										@include media(tablet) {
							 | 
						||
| 
								 | 
							
											max-width: $size__site-desktop-content;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									.post-thumbnail {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										margin: $size__spacing-unit;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										@include media(tablet) {
							 | 
						||
| 
								 | 
							
											margin: $size__spacing-unit $size__site-margins;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										&:focus {
							 | 
						||
| 
								 | 
							
											outline: none;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										.post-thumbnail-inner {
							 | 
						||
| 
								 | 
							
											display: block;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											img {
							 | 
						||
| 
								 | 
							
												position: relative;
							 | 
						||
| 
								 | 
							
												display: block;
							 | 
						||
| 
								 | 
							
												width: 100%;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									.image-filters-enabled & {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										.post-thumbnail {
							 | 
						||
| 
								 | 
							
											position: relative;
							 | 
						||
| 
								 | 
							
											display: block;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											.post-thumbnail-inner {
							 | 
						||
| 
								 | 
							
												filter: grayscale(100%);
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
												&:after {
							 | 
						||
| 
								 | 
							
													background: rgba(0, 0, 0, 0.35);
							 | 
						||
| 
								 | 
							
													content: "";
							 | 
						||
| 
								 | 
							
													display: block;
							 | 
						||
| 
								 | 
							
													height: 100%;
							 | 
						||
| 
								 | 
							
													opacity: .5;
							 | 
						||
| 
								 | 
							
													pointer-events: none;
							 | 
						||
| 
								 | 
							
													position: absolute;
							 | 
						||
| 
								 | 
							
													top: 0;
							 | 
						||
| 
								 | 
							
													width: 100%;
							 | 
						||
| 
								 | 
							
													z-index: 4;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
													@supports (mix-blend-mode: multiply) {
							 | 
						||
| 
								 | 
							
														display: none;
							 | 
						||
| 
								 | 
							
													}
							 | 
						||
| 
								 | 
							
												}
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											&:before,
							 | 
						||
| 
								 | 
							
											&:after, {
							 | 
						||
| 
								 | 
							
												position: absolute;
							 | 
						||
| 
								 | 
							
												display: block;
							 | 
						||
| 
								 | 
							
												width: 100%;
							 | 
						||
| 
								 | 
							
												height: 100%;
							 | 
						||
| 
								 | 
							
												top: 0; left: 0;
							 | 
						||
| 
								 | 
							
												content: "\020";
							 | 
						||
| 
								 | 
							
												pointer-events: none;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											@include filter-duotone;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									.entry-content,
							 | 
						||
| 
								 | 
							
									.entry-summary {
							 | 
						||
| 
								 | 
							
										max-width: calc(100% - (2 * #{ $size__spacing-unit }));
							 | 
						||
| 
								 | 
							
										margin: 0 $size__spacing-unit;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										@include media(tablet) {
							 | 
						||
| 
								 | 
							
											max-width: 80%;
							 | 
						||
| 
								 | 
							
											margin: 0 10%;
							 | 
						||
| 
								 | 
							
											padding: 0 60px;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									.entry-content {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										p {
							 | 
						||
| 
								 | 
							
											word-wrap: break-word;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										.more-link {
							 | 
						||
| 
								 | 
							
											@include link-transition;
							 | 
						||
| 
								 | 
							
											display: inline;
							 | 
						||
| 
								 | 
							
											color: inherit;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											&:after {
							 | 
						||
| 
								 | 
							
												content: "\02192";
							 | 
						||
| 
								 | 
							
												display: inline-block;
							 | 
						||
| 
								 | 
							
												margin-left: 0.5em;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											&:hover {
							 | 
						||
| 
								 | 
							
												color: $color__link;
							 | 
						||
| 
								 | 
							
												text-decoration: none;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										a {
							 | 
						||
| 
								 | 
							
											text-decoration: underline;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											&.button,
							 | 
						||
| 
								 | 
							
											&:hover {
							 | 
						||
| 
								 | 
							
												text-decoration: none;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											&.button {
							 | 
						||
| 
								 | 
							
												display: inline-block;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											&.button:hover {
							 | 
						||
| 
								 | 
							
												background: $color__background-button-hover;
							 | 
						||
| 
								 | 
							
												color: $color__background-body;
							 | 
						||
| 
								 | 
							
												cursor: pointer;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										// Overwrite iframe embeds that have inline styles.
							 | 
						||
| 
								 | 
							
										> iframe[style] {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											margin: 32px 0 !important;
							 | 
						||
| 
								 | 
							
											max-width: 100% !important;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											@include media(tablet) {
							 | 
						||
| 
								 | 
							
												max-width: $size__site-tablet-content !important;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											@include media(desktop) {
							 | 
						||
| 
								 | 
							
												max-width: $size__site-desktop-content !important;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										// Page links
							 | 
						||
| 
								 | 
							
										.page-links a {
							 | 
						||
| 
								 | 
							
											margin: calc(0.5 * #{$size__spacing-unit});
							 | 
						||
| 
								 | 
							
											text-decoration: none;
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										// Classic editor audio embeds.
							 | 
						||
| 
								 | 
							
										.wp-audio-shortcode {
							 | 
						||
| 
								 | 
							
											max-width: calc(100vw - (2 * #{ $size__spacing-unit }));
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											@include media(tablet) {
							 | 
						||
| 
								 | 
							
												max-width: $size__site-tablet-content;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											@include media(desktop) {
							 | 
						||
| 
								 | 
							
												max-width: $size__site-desktop-content;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/* Author description */
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								.author-bio {
							 | 
						||
| 
								 | 
							
									margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									@include postContentMaxWidth();
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									@include media(tablet) {
							 | 
						||
| 
								 | 
							
										margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									@include media(desktop) {
							 | 
						||
| 
								 | 
							
										margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									.author-title {
							 | 
						||
| 
								 | 
							
										@include post-section-dash;
							 | 
						||
| 
								 | 
							
										display: inline;
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									.author-description {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										display: inline;
							 | 
						||
| 
								 | 
							
										color: $color__text-light;
							 | 
						||
| 
								 | 
							
										font-size: $font__size-md;
							 | 
						||
| 
								 | 
							
										line-height: $font__line-height-heading;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										.author-link {
							 | 
						||
| 
								 | 
							
											display: inline-block;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											&:hover {
							 | 
						||
| 
								 | 
							
												color: $color__link-hover;
							 | 
						||
| 
								 | 
							
												text-decoration: none;
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
									}
							 | 
						||
| 
								 | 
							
								}
							 |