www.franconian.net/assets/style.scss

@import 'animations';
@import 'breakpoints';
@import 'variables';
@import 'fonts';
@import 'mixins';

:root {
	--aberration-offset: 0.1em;
}

html {
	font-family: 'Space Mono', sans-serif;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

*, *::before, *::after {
	box-sizing: inherit;
}

body {
	background: $color-background;
	background-image:
		url('layout/bg_pixels.gif'),
		url('layout/grid.png'),
		linear-gradient(-45deg, $color-gradient-community-start, $color-gradient-community-end),
		url('layout/background_mobile_01.jpg');
	background-blend-mode:
		normal,
		normal,
		multiply,
		normal;
	background-attachment:
		scroll,
		fixed,
		scroll,
		fixed;
	background-size:
		auto,
		cover,
		100% 100%,
		cover;
	background-repeat:
		repeat-y,
		no-repeat,
		no-repeat,
		no-repeat;
	background-position:
		50% calc(50% + 1px * 0.5 * var(--scrollTop, 0)),
		50% 50%,
		50% 50%,
		50% 50%;
	color: $color-text;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	align-items: center;
	margin: 0;

	&::after {
		content: '';
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		pointer-events: none;
		background-image:
			url('layout/vcr_overlay.png'),
			radial-gradient(transparent, transparent, rgba(0, 0, 0, 0.5));
	}

	&::before {
		content: '';
		display: block;
		position: fixed;
		opacity: 0.3;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		pointer-events: none;
		background-image: url('layout/fg_pixels.gif');
		background-repeat: repeat-y;
		background-position: 50% calc(50% + -1.4px * var(--scrollTop));
	}

	@media (min-width: $small) {
		background-image:
			url('layout/bg_pixels.gif'),
			url('layout/grid.png'),
			linear-gradient(-45deg, $color-gradient-community-start, $color-gradient-community-end)
			url('layout/background_desktop_01.jpg');
	}
}

h1, h2, h3, h4, h5, h6, p, ul {
	margin-bottom: 1em;
	margin-top: 1em;
}

h1, h2, h3, h4, h5, h6 {
	@include heading;
}

h1 {
	font-size: 3em;
	text-align: center;
}

a {
	text-decoration: underline;
	color: inherit;
	transition: filter 0.2s ease 0s;

	&:hover, &:focus {
		@include aberration(0.05em, 0.001em)
	}
}

.block-link {
	display: block;
}

.read-more-link {
	font-size: 1.2em;
	font-weight: bold;
	text-transform: lowercase;
}

header {
	width: 100%;
	padding: $gap-vertical $gap-horizontal;
	max-width: $large;
}

main {
	width: 100%;
	padding: $gap-vertical $gap-horizontal;
	max-width: $large;
	flex-grow: 1;
}

footer {
	font-size: 0.9em;
	width: 100%;
	max-width: $large;
	padding: $gap-vertical $gap-horizontal;
	display: flex;
	align-items: center;
	flex-direction: column;

	@media screen and (min-width: $small) {
		flex-direction: row;

		& > :first-child {
			margin-left: auto;
		}
	}
}

figure {
	margin: 1rem 0;

	img, video {
		max-width: 100%;
		display: block;
		margin: 0 auto;

		&.invert {
			filter: invert(100%);
		}

		&.cclogo {
			width: 200px;
			height: 48px;
		}

		&.fill {
			background: $color-fill;
			padding: 0.5em;
		}
	}

	figcaption {
		display: none;
	}
}

ul, ol {
	padding-left: 1.5em;

	li {
		padding: 0.2em 0;

	}
}

iframe {
	border: none;

	width: 100%;
	height: 100vh;
	display: block;
	margin: 1rem 0;

	&.aspect-178 {
		height: 56.25vw;
		max-height: $large * 0.5625;
	}
}

table {
	border-collapse: collapse;
	margin: 1rem 0;

	thead th {
		@include heading;
		font-weight: bold;
		white-space: nowrap;
	}

	thead tr, {
	}

	tr:not(:last-child) {
		border-bottom: 1px solid currentColor;
	}

	td, th {
		padding: 0.2em 0.5em;
		text-align: left;
	}
}

.nav {
	display: flex;
	flex-flow: column wrap;
	justify-content: flex-end;

	hr {
		margin: 0.5em 40%;
	}

	.nav-logo {
		@include heading;
		text-decoration: none;
		color: currentColor;
		margin: 0 auto;
		animation: animate-aberration 2s linear infinite !important;

		img {
			width: 48px;
			margin-right: 1em;
			vertical-align: middle;
		}

		.logotype {
			font-size: 1.3em;
			vertical-align: middle;
			display: inline-block;
			width: 3.5em;
			line-height: 1;
			text-align: center;

			:nth-child(1) {
				letter-spacing: 0.2em;
			}
			:nth-child(2) {
				letter-spacing: 0.14em;
			}
			:nth-child(3) {
				letter-spacing: 0.39em;
			}
		}

		@media screen and (min-width: $small) {
			margin-left: 0;
		}
	}

	.nav-link {
		align-self: center;
		margin: 0 0.5em;
		padding: 0.5em 0;
		font-weight: bold;
		font-size: 1.2em;
		text-decoration: none;
		text-transform: lowercase;

		&.nav-link-active {
			@include aberration(0.05em, 0.001em)
		}
	}

	@media screen and (min-width: $small) {
		flex-direction: row;

		hr {
			margin: 0 0.5em;
			align-self: center;
		}
	}
}

.box {
	margin: 0;
	padding: 0;
	border: 1px solid $color-box-frame;
	background: $color-box-background;
	display: flex;
	flex-direction: column;

	.box-header {
		font-size: 1.2em;
		margin: 0;
		padding: 0 $gap-horizontal;
		text-align: center;
		background: $color-box-frame;
		color: $color-box-header;

		a {
			text-decoration: none;
		}
	}

	.box-content {
		padding: $gap-vertical $gap-horizontal;
		flex-grow: 1;
		flex-shrink: 1;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.box-footer {
		padding: ($gap-vertical / 2) $gap-horizontal;
	}
}

.box-grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	grid-gap: $gap-vertical $gap-horizontal;

	.box {
		max-width: 100%;
		min-width: 0;
	}
}

.date {
	font-style: italic;
}

.overflow-x-auto {
	overflow-x: auto;
}


.infobeamer {
	h1 {
		margin: $gap-vertical 0;
	}

	main {
		max-width: 1700px;
	}

	.box-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: minmax(10px, 1fr);
		max-height: 75vh;
	}
}

.progress {
	@include aberration(0.1em);
	border: 1px solid $color-box-frame;
	height: 1em;

	.fill {
		background: $color-box-frame;
		height: 100%;
	}
}