main.less

// the threshold at which we consider the screen "mobile"
@mobile_threshold: 700px;
// the threshold at which we consider the screen "wide", i.e. display the preview on the
// side instead of at the bottom
@wide_threshold: 1700px;
// the border around the options in the fieldset-select-like things
@option_border: .3rem;
// the minimum size of the left area in the form layout
@label-width: 90px;

* {
	box-sizing: border-box;
	font-family: sans-serif;
}

body {
	margin: 0;
	padding: 0;

	// adjust colors for light theme here
	--bg: #fff;
	--fg: #000;
	--fg-dark: #bbb;
	--accent: #80f;
	--accent2: #c4f;

	@media (prefers-color-scheme: dark) {
		// adjust colors for dark theme here
		--bg: #222;
		--fg: #fff;
		--fg-dark: #888;
	}
}

@inputs: ~'input[type = "text"], input[type = "number"], textarea, select';
@buttons: ~'input[type = "submit"], button, a.button';

body, @{inputs}, @{buttons} {
	&, &:hover, &:visited {
		background-color: var(--bg);
		color: var(--fg);
		// ja, user agents haben lack gesoffen
		font-size: 1rem;
	}
}

@{inputs}, @{buttons}, fieldset {
	border: .15rem solid var(--fg-dark);
	border-radius: .25rem;
}

@{inputs} {
	padding: .2rem .3rem;
	&.error {
		border-color: red;
	}
}

.input-error {
	width: 100%;
	font-size: .875em;
	color: red;
	grid-column-start: 2;
}

@{buttons} {
	padding: .2rem .6rem;

	&:hover {
		border-color: var(--accent2);
		cursor: pointer;
		text-decoration: none;
	}
}

a {
	&, &:hover, &:visited {
		color: var(--fg);
	}
	&, &:visited {
		text-decoration: none;
	}
	&:hover {
		text-decoration: underline;
		cursor: pointer;
	}
}

nav {
	&, #nav-links {
		background-color: var(--accent);

		display: flex;
		justify-content: flex-start;
		align-items: stretch;

		& > * {
			margin: 0;
			padding: 0.5rem 1rem;

			font-weight: bold;
			font-size: 1.5rem;
		}
	}

	.active {
		background-color: var(--accent2);
	}

	#title {
		@media screen and (max-width: @mobile_threshold) {
			flex-grow: 1;
		}
	}

	#burger_checkbox {
		display: none;
	}

	#burger {
		height: 2rem;
		width: 2rem;
		padding: 0;
		margin-right: 1rem;

		flex-grow: 0;
		flex-shrink: 0;
		align-self: center;

		@media screen and (min-width: (@mobile_threshold + 1)) {
			visibility: hidden;
			display: none;
		}
	}

	#nav-links {
		padding: 0;
	}

	@media screen and (max-width: @mobile_threshold) {
		position: relative;

		#burger_checkbox:not(:checked) ~ #nav-links {
			display: none;
		}

		#burger_checkbox:checked ~ #nav-links {
			position: absolute;
			right: 0;
			top: 100%;

			flex-direction: column;
		}
	}
}

main {
	width: min(95vw, 100rem);
	margin: 2rem auto;
}

.sign-grid {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fill, 15rem);

	.sign img {
		width: 100%;
	}

	& div {
		display: flex;
		flex-direction: column;
	}
}

.section-container {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: 1fr;

	.section {
		grid-column-start: 1;
	}

	@media screen and (min-width: @wide_threshold) {
		grid-template-columns: 1fr 1fr;

		.preview-section {
			grid-column-start: 2;
			grid-row: 1/span 3;
		}
	}
}

.preview {
	/* A4 aspect ratio: √2:1 */
	aspect-ratio: 1.4142135623730951;
}

.preview-container .preview {
	width: 100%;
}

// this is the form layout row container thingy
.box {
	display: grid;
	grid-template-columns: min(@label-width, auto) 1fr;
	align-items: baseline;

	label.for-text {
		display: inline-block;
		justify-self: end;
		font-size: 1.1rem;
	}

	input[type = "text"], textarea {
		justify-self: stretch;
	}

	textarea {
		height: 5rem;
	}
}

// this is the form layout row with buttons in it
.buttons {
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
}

.box, .buttons {
	margin: .5rem 0;
	gap: 1ch;
}

// these are the fieldsets containing select-like options modeled with radio buttons
.select {
	display: flex;
	flex-wrap: wrap;
	gap: 2 * @option_border;

	.option {
		display: flex;
		flex-direction: column;
		gap: .5rem;

		.preview {
			width: 15rem;
			cursor: pointer;
		}

		.preview-label {
			place-self: center;
		}

		img {
			width: 10rem;
			background-color: #fff;
		}

		.option-border {
			border: @option_border solid var(--fg-dark);
			border-radius: 3 * @option_border;

			// iframe's behave nicely
			&.preview {
				padding: @option_border;
			}

			// label>img doesn't
			& > img {
				border: @option_border solid var(--bg);
				border-radius: 2 * @option_border;
				object-fit: contain;
			}
		}

		input[type = "radio"] {
			display: none;

			&:checked + .option-border {
				border-color: var(--accent2);
			}
		}

		label {
			flex-grow: 1;
			// firefox hat hier lack gesoffen und erfindet 5px wenn das hier block oder
			// inline ist
			display: flex;
		}
	}

	input[type = "radio"] {
		display: none;
	}
}

.flash {
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 0.5rem 1rem;

	position: relative;

	.flash-background {
		opacity: 0.5;
		z-index: -1;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	&.flash-error {
		border-color: red;
		.flash-background {
			background-color: red;
		}
	}

	&.flash-message {
		border-color: var(--accent2);
		.flash-background {
			background-color: var(--accent2);
		}
	}

	& > div {
		opacity: 1;
	}
}