_sass/pages/_blog.scss
@use 'sass:color';
@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;

/** BLOG STYLES **/

section.blog .postpreview:nth-child(4){
	display: none;
}

section.blog,
section.upcoming-events,
.post-list .newstiles{
	.newswrap, .newstileswrap{
		margin-top: 70px;
		margin-bottom: 70px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		-webkit-box-pack: justify;
			-ms-flex-pack: justify;
				justify-content: space-between;
	}
	.postpreview{
		position: relative;
		width: calc(50% - 10px);
		border: 1px solid var(--main-blogpost-border-color, #F2F2F2);
		background: var(--main-blogpost-background-color, #FFF);
		-webkit-box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.12) inset;
				box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.12) inset;
		border-radius: 15px;
		overflow: hidden;
		.postdetails{
			padding: 30px;
			.tags{
				margin-bottom: 15px;
				line-height: 1;
				span{
					@include pre-title;
					color: var(--main-text-tertiary-color, #B2B2B2);
					margin-right: 20px;
				}
				.length{
					border-radius: 5px;
					border: 1px solid var(--Landing-Page---codebox-border-gradient-end-color, #D9D9D9);
					background: var(--main-codebox-main-background-color, rgba(250, 250, 250, 0.60));
					text-transform: none;
					padding: 0 .6em;
				}
			}
		}
		span.eventdate{
			display: none;
		}
		.postimg{
			aspect-ratio: 7/3;
			overflow: hidden;
			background-color: $duckDByellow;
			position: relative;
			a.blocklink{
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			>img{
				-webkit-transition: all .7s;
				-o-transition: all .7s;
				transition: all .7s;
				-o-object-fit: cover;
				   object-fit: cover;
				-o-object-position: center center;
				   object-position: center center;
				width: 100%;
				height: 100%;
			}
		}
		.meta{
			@include body-small();
			color: var(--main-text-secondary-color, #666);
			margin-top: 15px;
			margin-bottom: 5px;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-column-gap: 20px;
			   -moz-column-gap: 20px;
					column-gap: 20px;
			.external-source{
				color: var(--main-text-secondary-color, #666);
				white-space: nowrap;
				text-underline-offset: .15em;
				text-decoration: underline;
				&::after{
					content: "";
					display: inline-block;
					inline-size: .9em;
					aspect-ratio: 1;  
					margin-inline-start: .3em;
					translate: 0 .15em; 
					flex: none;
					background-color: var(--main-text-tertiary-color, #B2B2B2);
					-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13' fill='none' viewBox='0 0 12 13'%3E%3Cpath fill='%23b2b2b2' fill-rule='evenodd' d='M11.8.242H6.613v1.514h2.603L3.804 7.168l1.07 1.07 5.412-5.412V5.43H11.8zM5.922 1.528H0v10.514h10.33V6.12H8.815v4.408H1.514V3.042h4.408z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
					mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13' fill='none' viewBox='0 0 12 13'%3E%3Cpath fill='%23b2b2b2' fill-rule='evenodd' d='M11.8.242H6.613v1.514h2.603L3.804 7.168l1.07 1.07 5.412-5.412V5.43H11.8zM5.922 1.528H0v10.514h10.33V6.12H8.815v4.408H1.514V3.042h4.408z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
				}
			}
			.date{
				white-space: nowrap;
			}
			.author{
				-o-text-overflow: ellipsis;
				   text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}
		h3{
			margin-bottom: 15px;
			min-height: 2em;
			a{
				text-decoration: none;
				color: inherit;
			}
		}
	}
	.postpreview:hover{
		.postimg{
			> img{
				-webkit-transform: scale(1.05);
					-ms-transform: scale(1.05);
						transform: scale(1.05);
			}
		}
	}
	.postpreview.external-post {
		position: relative;
		border: 2px solid var(--lake-infobox-border-color, rgba(204, 235, 255, 0.60));
	
		&::after {
	
		}
	}
	.eventpreview{
		.meta .author{
			display: none;
		}
		span.eventdate{
			display: inline;
		}
		h3{
			height: auto;
		}
	}
}

.newswrap .postwrap .singleentry-science{
	h1{
		hyphens: auto;
	}
	.infoline .icon{
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' fill='none' viewBox='0 0 35 35'%3E%3Ccircle cx='17.75' cy='17.25' r='17.25' fill='%231A1A1A'/%3E%3Cpath fill='%23A899FF' d='M8.166 17.409a5.917 5.917 0 0 0 5.909 5.908 5.917 5.917 0 0 0 5.908-5.908 5.917 5.917 0 0 0-5.908-5.909 5.917 5.917 0 0 0-5.909 5.909ZM24.664 15.295h-2.797v4.22h2.797a2.14 2.14 0 0 0 2.123-2.123c0-1.168-.964-2.097-2.123-2.097Z'/%3E%3C/svg%3E");
	}
}

.science-tiles .sciencepreview.postpreview,
.everywhere-tiles .everywherepreview.postpreview {
	width: calc(33.333% - 15px);
	.postimg{
		aspect-ratio: 1/1;
		background-color: #9787f2;
	}
}

main.main-science .recentposts .newstileswrap .postpreview,
main.main-everywhere .recentposts .newstileswrap .postpreview {
	width: calc(33.333% - 15px);
	
	.postimg {
		aspect-ratio: 1/1;
		background-color: #9787f2;
	}
}


.filterbar{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-column-gap: 60px;
	   -moz-column-gap: 60px;
			column-gap: 60px;
	margin-bottom: 70px;
	#search-input {
		@include label-1();
		padding: 16px 16px 16px 40px;
		border: 1px solid var(--main-codebox-border-color, #E6E6E6);
		border-radius: 100px;
		width: 100%;
		max-width: calc(50% - 10px);
		background: transparent;
		position: relative;
		font-weight: 500;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' viewBox='0 0 15 15'%3E%3Cpath stroke='%23727272' stroke-width='1.5' d='M10.073 9.692 14 13.62'/%3E%3Ccircle cx='5.923' cy='6.303' r='5.173' stroke='%23727272' stroke-width='1.5'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: 18px 18px;
		color: var(--main-text-primary-color, #F2F2F2);
		&:focus{
			outline: var(--interactive-filter-selected-background-color, #D9D9D9);
		}
	}
	
	.filtertags {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
			-ms-flex-align: center;
				align-items: center;
		border-radius: 30px;
		border: 1px solid var(--main-codebox-border-color, #E6E6E6);
		padding: 5px;
		margin-left: auto;
	
		.filter-highlight {
			position: absolute;
			top: 5px;
			left: 0;
			height: calc(100% - 10px);
			background: var(--interactive-filter-selected-background-color, #D9D9D9);
			border-radius: 20px;
			-webkit-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
			transition: all 0.3s ease;
			z-index: 1;
		}
	
		.filter-btn {
			@include label-1;
			white-space: nowrap;
			position: relative;
			z-index: 2;
			background: none;
			border: none;
			padding: 11px 15px;
			color: var(--interactive-filter-unselected-text-color, #666);
			cursor: pointer;
			border-radius: 100px;
			-webkit-transition: color 0.3s ease;
			-o-transition: color 0.3s ease;
			transition: color 0.3s ease;
	
			&.active,
			&:hover {
				color: var(--interactive-filter-selected-text-color, #1A1A1A);
			}
		}
	}
}

img{
	margin: 0 auto;
	border:none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
}


body.post {
	table {
		min-width: 100%;
		max-width: 100%;
		width: 100%;
		-webkit-box-pack: center;
			-ms-flex-pack: center;
				justify-content: center;
		text-align: center;
		margin: 6px 0;
		font-variant-numeric: tabular-nums;
	}
	table td, table th {
		padding: 5px 10px;
	}
	  table tbody td {
		@include label-2();
		color: var(--main-text-primary-color, #0D0D0D);
	}
	code,
	pre {
		@include code-large;
	}

	h1, h2, h3, h4, h5 {
		code, pre {
			font-size: inherit;
		}
	}
}
div.small_code_block + .language-text code {
	font-size: 12px;
}
h4 {
	-webkit-margin-before:0em;
			margin-block-start:0em;
	-webkit-margin-after:0em;
			margin-block-end:0em;
	font-weight: bold;
}
h1 a {
	text-decoration: none;
	color: var(--main-text-primary-color, #0D0D0D);
}
h2 a {
	text-decoration: none;
	color: var(--main-text-primary-color, #0D0D0D);
}
h3 a {
	text-decoration: none;
	color: var(--main-text-primary-color, #0D0D0D);
}
h4 a {
	text-decoration: none;
	color: var(--main-text-primary-color, #0D0D0D);
}
h5 a {
	text-decoration: none;
	color: var(--main-text-primary-color, #0D0D0D);
}



.newswrap{
	min-height: calc(100vh - 111px);
	margin-top: 70px;
	width: 100%;
	.wrap{
		max-width: $maxContentWidth;
	}
	.postwrap{
		position: relative;
		.postcontent{
			margin: 0 auto;
			@include blog-typography;
			.video-container{
				margin: 30px 0;
				position: relative;
				padding-bottom: 56.25%;
				padding-top: 0;
				height: 0;
				overflow: hidden;
				iframe, object, embed{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
			video{
				max-width: 100%;
			}
			.toc_sidebar{
				position: fixed;
				top: 0px;
				right: 0;
				width: 22vw;
				padding: 100px 20px 20px 20px;
				z-index: 90;
				@media only screen and (max-width: 1280px) {
					display: none;
				}
				.toc_menu{
					height: calc(100vh - 100px);
					overflow: auto;
					-ms-overflow-style: none; 
					scrollbar-width: none;
					&::-webkit-scrollbar {
						display: none;
					}
					h5{
						@include pre-title();
						color: var(--main-text-tertiary-color, #B2B2B2);
						margin-left: 12px;
						margin-top: 0;
					}
					ul li{
						@include tiny();
					}
					ul#toc{
						list-style: none;
						padding: 0;
						margin: 0;
						margin-top: 15px;
						position: relative;
						ul{
							padding-left: 0px;
							margin-left: 15px;
							border-left: 1px solid #D9D9D9;
							margin-top: 2px;
							margin-bottom: 2px;
							li{
								list-style: none;
							}
							ul{
								display: none;
							}
						}
						li{
							line-height: 1;
						&.current > a{
								color: $purple;
							}
						}
						a{
							color: $black400;
							text-decoration: none;
							padding: 6px 12px;
							border-radius: 100px;
							display: inline-block;
							text-overflow: ellipsis; 
							overflow: hidden; 
							white-space: nowrap;
							max-width: 100%;
							line-height: 1;
						&:hover{
								color: var(--main-text-primary-color, #0D0D0D);
							}
						}
					}
				}
				
			}
			
			.supporterboard{
				margin-top: 25px;
				background-color: var(--doc-codebox-background-color, #F2F2F2);
				border-radius: 15px;
				border-top: 15px solid #979797;
				&:not(:first-of-type){
					
				}
				> ul{
					padding: 20px;
					-ms-grid-columns: 1fr 1fr 1fr 1fr;
					grid-template-columns: repeat(4, 1fr);
					list-style: none;
					display: -ms-grid;
					display: grid;
					row-gap: 70px;
					margin: 0;
					li{
						line-height: 1;
						height: 70px;
						text-align: center;
					}
					@media only screen and (max-width: 900px) {
						-ms-grid-columns: 1fr 1fr 1fr;
						grid-template-columns: repeat(3, 1fr);
					}
					@media only screen and (max-width: 700px) {
						-ms-grid-columns: 1fr 1fr;
						grid-template-columns: repeat(2, 1fr);
					}
					@media only screen and (max-width: 550px) {
						padding: 25px;
						row-gap: 40px;
						li{
							height: 60px;
						}
					}
				}
				ul li{
					img{
						height: 100%;
					}
				}
				&.silver{
					ul{
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						justify-content: center;
						flex-wrap: wrap;
						row-gap: 20px;
					}
				}
				&.gold{
					border-top: 15px solid #C09600;
					ul{
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-ms-flex-pack: distribute;
							justify-content: space-around;
						@media only screen and (max-width: 840px) {
							-webkit-box-pack: justify;
								-ms-flex-pack: justify;
									justify-content: space-between;
							-ms-flex-wrap: wrap;
								flex-wrap: wrap;
						}
						li{
							height: 100px;
							@media only screen and (max-width: 840px) {
								height: 80px;
							}
							@media only screen and (max-width: 650px) {
								width: 100%;
								height: 80px;
							}
						}
					}
				}
				&.technical{
					border-top: 15px solid $blue;
				}
			}
			
		}
		.recentposts{
			background: linear-gradient(180deg, var(--grey-95) -13.01%, var(--main-body-background-color) 65.33%);
			padding: 105px 15px;
			position: relative;
			z-index: 100;
			h1{
				@include display-1();
				margin-top: 0;
				margin-bottom: 0;
			}
			h3{
				margin-top: 0;
				margin-bottom: 0;
				@include headline-3();
			}
			.postpreview{
				margin-bottom: 0;
			}
		}
		.infoline{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
				-ms-flex-align: center;
					align-items: center;
			.icon{
				width: 40px;
				height: 40px;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' fill='none' viewBox='0 0 35 35'%3E%3Ccircle cx='17.75' cy='17.25' r='17.25' fill='%231A1A1A'/%3E%3Cpath fill='%23FFF100' d='M8.166 17.409a5.917 5.917 0 0 0 5.909 5.908 5.917 5.917 0 0 0 5.908-5.908 5.917 5.917 0 0 0-5.908-5.909 5.917 5.917 0 0 0-5.909 5.909Zm16.498-2.115h-2.797v4.22h2.797a2.14 2.14 0 0 0 2.123-2.122c0-1.168-.964-2.098-2.123-2.098Z'/%3E%3C/svg%3E");
				background-size: contain;
				background-repeat: no-repeat;
				margin-right: 15px;
				border-radius: 200px;
				overflow: hidden;
				>img{
					display: block;
					-o-object-fit: cover;
					   object-fit: cover;
					width: 100%;
					height: 100%;
				}
			}
			>div:not(.icon):not(.scheduled){
				display: flex;
				align-items: flex-start;
				flex-direction: column;
			}
			span{
				@include body-small();
			}
			.scheduled + .venue{
				margin-left: 25px;
			}
			span.bullet{
				margin: 0 5px;
			}
			.publishedinfo{
				color: var(--main-text-secondary-color, #666);
			}
		}
		.infoline + p > img{
			width: 100%;
		}
		.postpreview{
			margin-bottom: 75px;
		}
		
		a.backtoarchive,
		a.continue{
			text-decoration: none;
			-webkit-transition: color .3s;
			-o-transition: color .3s;
			transition: color .3s;
			@include textlink();
			span::after{
				line-height: 1.2;
			}
			&:hover{
				color: black;
			}
		}
		a.backtoarchive{
			margin-top: 15px;
			display: inline-block;
		}

		.singleentry{
			max-width: 720px;
			margin: 0 auto;
			padding-top: 75px;
			padding-bottom: 75px;
			h1{
				@include display-2();
				margin-bottom: 30px;
				margin-top: 0;
			}
			.highlight{
				border-radius: 10px;
			}
			.excerpt{
				em{
					font-weight: 600;
					font-family: $fontSans;
					font-style: normal;
				}
			}
			p > img{
				max-width: 100%;
				margin: 0;
				padding: 0;
				vertical-align: middle;
				text-align: center;
				border: none;
			}
		}
		.singleentry.contains_toc{
			display: flex;
			max-width: unset;
			.toc_sidebar{
				padding-top: 3px;
				position: relative;
				.toc_menu{
					position: sticky;
					top: 100px;
				}
			}
			> .content{
				width: 78vw;
				@media only screen and (max-width: 1280px){
					width: 100%;
				}
			}
			.contentwidth{
				max-width: 750px;
				margin: 0 auto;
			}
		}
		.post-list{
			h3{
				@include headline-3();
				margin-top: 0;
				margin-bottom: 0;
			}
			>section{
				padding: 105px 15px;
			}
			>section:nth-child(even){
				background-color: #F9F9F9;
			}
		}
	}
	/*
	.headlinebar{
		background-color: #f5f5f5;
		height: 52px;
		line-height: 52px;
		font-size: 32px;
		top: 70px;
		position: absolute;
		padding-left: 20px;
		left: 0;
		width: 100%;
	}
	*/
	/*
	.sidebar{
		width: 252px;
		background-color: $duckDByellow;
		padding: 30px;
		position: fixed;
		right: 0;
		height: 100vh;
		z-index: 800;
		.latestnews,
		.newsarchive{
			margin-top: 60px;
			h1{
				margin-bottom: 15px;
				font-size: 100%;
				a{
					color: black;
					text-decoration: none;
					&:hover{
						text-decoration: underline;
					}
				}
			}
			ul{
				list-style: none;
				padding: 0;
				margin: 0;
				padding-left: 20px;
				li{
					margin-bottom: 15px;
					margin-top: 15px;
					font-size: 14px;
					a{
						color: black;
						text-decoration: none;
					}
					a:hover{
						text-decoration: underline;
					}
				}
			}
		}
		.newsarchive{
			h1{
				margin-bottom: 15px;
				font-size: 100%;
			}
			ul li{
				margin: 4px 0px;
				-webkit-font-feature-settings: 'tnum' on;
						font-feature-settings: 'tnum' on;
			}
		}
	}
	*/
}

footer{
	position: relative;
}
@media only screen and (max-width: 1280px) {
	.postwrap {
		margin: 0 15px;
	}
	.recentposts {
		width: calc(100% + 30px);
		margin-left: -15px;
	}
}

@media only screen and (max-width: 940px) {

	.filterbar {
		gap: 20px;
		.filtertags {
			width: calc(50% - 10px);
			overflow: auto;
		}
		#search-input {
			width: calc(50% - 10px);
		}
	}
	
}

@media only screen and (max-width: 770px) {}

@media only screen and (max-width: 660px) {
	.newswrap .newstiles {
		row-gap: 0;
	}
	.newswrap .postwrap .infoline,
	.newswrap .postwrap .infoline > div:not(.icon):not(.scheduled){
		flex-wrap: wrap;
		.scheduled + .venue{
			margin-left: 0;
		}
	}
	.infoline .scheduled,
	.publishedinfo{
		width: 100%;
	}
	.newswrap .postwrap .postcontent .singleentry {
		padding-top: 50px;
		padding-bottom: 50px;
		p {
			margin: 20px 0;
		}
		h2 {
			margin: 35px 0 20px;
		}
		h3 {
			margin: 35px 0 20px;
			&:first-child {
				margin-top: 0;
			}
		}
		h4 {
			margin: 35px 0 20px;
			&:first-child {
				margin-top: 0;
			}
		}
		ul li {
			ul {
				margin-top: 0;
			}
		}
	}
	.newswrap .postwrap .postcontent iframe{
		width: 100%;
		height: auto;
	}
	.filterbar {
		flex-wrap: wrap;
		margin-bottom: 30px;
		#search-input {
			width: 100%;
			max-width: 100%;
		}
		.filtertags {
			display: none;
		}
	}
	
}

@media print {

	section.recentposts,
	div.toc_sidebar {
		display: none !important;
	}
}
