source ⟩ hypertext ⟩ public ⟩ future ⟩ future.css

:root {
	--background: white;
	--text: black;
	--accent: var(--text);
}

body {
	font-family: var(--sans-serif);

	background: url("/future/deepfield.png");
}

.panel {
	margin-block-end: 1rem;
	filter: drop-shadow(0 0 1rem);
}

.panel.plain {
	--background: #ddd;
	--background-dark: #b8b8b8;

	display: grid;
	grid-template-columns: 0.75rem 1fr 0.75rem;
	grid-template-rows: 0.75rem 1fr 0.75rem;
	grid-template-areas:
		"slope-left  contents gutter-right"
		"gutter-left contents gutter-right"
		"gutter-left contents slope-right";

	& .gutter,
	& .slope {
		background-color: var(--background-dark);
	}
	& .gutter-left,
	& .slope-left {
		border-inline-end: 2px solid;
	}
	& .gutter-right,
	& .slope-right {
		border-inline-start: 2px solid;
	}
	& .slope {
		z-index: 100;
	}

	& .slope-left {
		grid-area: slope-left;
		transform: skewX(135deg) translateX(0.375rem);
	}
	& .slope-right {
		grid-area: slope-right;
		transform: skewX(-45deg) translateX(-0.375rem);
	}
	& .gutter-left {
		grid-area: gutter-left;
	}
	& .gutter-right {
		grid-area: gutter-right;
	}

	& .contents {
		grid-area: contents;

		z-index: 99;

		background-color: var(--background);

		& h1 {
			margin-block: 1rem;
		}
	}
}

.panel.tech {
	--background: #ff8;
	--background-dark: #bb6;

	display: grid;
	grid-template-columns: 2.5rem 0.75rem 1fr;
	grid-template-rows: 2.5rem 0.75rem 1fr;
	grid-template-areas:
		"dogear  dogear letterhead"
		"dogear  dogear ."
		"sidebar .      contents";

	& > .dogear {
		grid-area: dogear;

		background: linear-gradient(
				to right,
				transparent,
				transparent calc(80% + 1px),
				var(--background-dark) calc(80% + 1px)
			),
			linear-gradient(
				to bottom,
				transparent,
				transparent calc(80% + 1px),
				var(--background-dark) calc(80% + 1px)
			),
			linear-gradient(to right, transparent, transparent 80%, currentColor 80%),
			linear-gradient(to bottom, transparent, transparent 80%, currentColor 80%),
			var(--background);
		border-block-end: 2px solid;
		border-inline-end: 2px solid;
		clip-path: polygon(0 100%, 100% 100%, 100% 0);
	}

	& > .gutter {
		background-color: var(--background);
	}

	& > .letterhead {
		display: flex;
		grid-area: letterhead;
		align-items: center;

		padding-inline: 0.67rem;

		background-color: var(--background-dark);
		border-block-end: 2px solid;

		& h2 {
			margin-block: 0;

			text-transform: uppercase;
		}
	}

	& > .sidebar {
		display: flex;
		grid-area: sidebar;
		align-items: center;

		padding-inline: 0.67rem;

		writing-mode: vertical-rl;

		background-color: var(--background-dark);
		border-block-start: 2px solid;
	}

	& > .contents {
		padding-inline: 0.25rem 1rem;
		padding-block: 0.25rem 1rem;

		background: linear-gradient(-45deg, transparent, transparent 1rem, var(--background) 1rem);

		& figure {
			max-inline-size: min(50%, 10rem);
			padding-inline-start: 1em;

			& img {
				border: 2px solid;
			}
		}

		& p:first-of-type {
			margin-block-start: 0;
		}

		& p:last-of-type {
			margin-block-end: 0;
		}
	}
}