style.scss

:root {
	--lightmode-main-text-color: #303132;
	--lightmode-main-bg-color: #f0f0f0;
	--lightmode-panel-bg-color: #ffffff;

	--darkmode-main-text-color: #f0f0f0;
	--darkmode-panel-bg-color: #202020;
	--darkmode-main-bg-color: #303030;

	--lightmode-meteorik-nominee-bg-color: #e5e5e5;
	--lightmode-meteorik-runnerup-bg-color: #aae5ff;
	--lightmode-meteorik-winner-bg-color:  #ffe5aa;

	--darkmode-meteorik-nominee-bg-color:  #555555;
	--darkmode-meteorik-runnerup-bg-color:  #205064;
	--darkmode-meteorik-winner-bg-color:   #645020;

	--lightmode-dropdown-bg-color: #ffffff;
	--lightmode-dropdown-divider-color: #d0d0d0;
	--lightmode-dropdown-hover-color: #f0f0f0;

	--darkmode-dropdown-bg-color: #404040;
	--darkmode-dropdown-divider-color: #101010;
	--darkmode-dropdown-hover-color: #383838;

	--lightmode-outline-color: #000000;
	--darkmode-outline-color: #ffffff;

	--main-text-color: var(--lightmode-main-text-color);
	--panel-bg-color:  var(--lightmode-panel-bg-color);
	--main-bg-color:   var(--lightmode-main-bg-color);

	--meteorik-nominee-bg-color:     var(--lightmode-meteorik-nominee-bg-color);
	--meteorik-runnerup-bg-color:    var(--lightmode-meteorik-runnerup-bg-color);
	--meteorik-winner-bg-color:      var(--lightmode-meteorik-winner-bg-color);

	--dropdown-bg-color:      var(--lightmode-dropdown-bg-color);
	--dropdown-divider-color: var(--lightmode-dropdown-divider-color);
	--dropdown-hover-color:   var(--lightmode-dropdown-hover-color);

	--outline-color: var(--lightmode-outline-color);

	--image-margin: 0px;

	--theme-transition-duration: 150ms;
	--theme-transition-easing: ease-in-out;
}

[data-theme="dark"] {
	--main-text-color: var(--darkmode-main-text-color);
	--panel-bg-color:  var(--darkmode-panel-bg-color);
	--main-bg-color:   var(--darkmode-main-bg-color);

	--meteorik-nominee-bg-color:     var(--darkmode-meteorik-nominee-bg-color);
	--meteorik-runnerup-bg-color:    var(--darkmode-meteorik-runnerup-bg-color);
	--meteorik-winner-bg-color:      var(--darkmode-meteorik-winner-bg-color);

	--dropdown-bg-color:      var(--darkmode-dropdown-bg-color);
	--dropdown-divider-color: var(--darkmode-dropdown-divider-color);
	--dropdown-hover-color:   var(--darkmode-dropdown-hover-color);

	--outline-color: var(--darkmode-outline-color);
}

* {
	box-sizing: border-box;
}

html {
	height: 100%;
	font-family: 'Muli', sans-serif;
}

body {
	margin: 0 auto;
	height: 100%;
	background: var(--main-bg-color);
	text-align: center;
	padding: 12px;
	transition: background-color var(--theme-transition-duration) var(--theme-transition-easing);
}

a {
	text-decoration: none;
}

img {
	width: auto;
	height: auto;
}


.navbar,
.content {
	width: 100%;
}

.content {
	margin: 24px auto;
}

.navbar {
	margin-left: auto;
	margin-right: auto;
	padding: 8px 16px;

	.entry {
		padding: 8px 16px;
		color: var(--main-text-color);
		transition: color var(--theme-transition-duration) var(--theme-transition-easing);
		
		&.active {
			font-weight: 600;
		}

		&.active,
		&:hover,
		&:focus {
			border-bottom: 1px solid var(--main-text-color);
			transition:
				color var(--theme-transition-duration) var(--theme-transition-easing),
				border-color var(--theme-transition-duration) var(--theme-transition-easing);
		}
	}
}


.switch {
	position: absolute;
	top: 12px;

	.label {
		/* vertically center text */
		display: flex;
		align-items: center;

		padding: 4px;
		cursor: pointer;
		text-transform: lowercase;

		color: var(--main-text-color);
		transition: color var(--theme-transition-duration) var(--theme-transition-easing);

		span {
			opacity: 0;
			transition: opacity 150ms ease-in-out;
		}
	}
}


/* show the text label... */
.switch:hover .label span { /* ...on mouseover */
	opacity: 0.75;
}
.switch:focus-visible .label span, /* ...on tab-highlight */
.switch-dropdown:focus-within .label span, /* ...on tab-highlight of a dropdown child */
.switch-toggle input[type=checkbox]:focus-visible + .label span { /* ...on tab-highlight of an invisible checkbox */
	opacity: 0.75;
}
/*
a brief aside:
"Why's the :hover one separate?", I hear you ask.
It seems that macOS Safari doesn't support :focus-visible, at least as of version 15.1 (17612.2.9.1.20)
Which in turn means the :hover doesn't work if it's part of the multi-rule block containing :focus-visible,
because the lack of support for :focus-visible invalidates the entire selector.
*/



/* hide the actual checkbox */
/* but keep it *technically* visible for tab-navigation */
.switch-toggle input[type=checkbox] {
	opacity: 0.00001;
	width: 0;
	height: 0;
	position: absolute;
	margin: 0;
}

/* override the focus-visible outline style
   so we can make the hacky theme toggle
   look somewhat visually consistent */
.switch {
	outline: none;
}
.switch .label,
.switch-dropdown .dropdown .item,
.navbar .entry {
	outline-style: solid;
	outline-color: var(--outline-color);
	outline-width: 0px;
	transition: outline-color var(--theme-transition-duration) var(--theme-transition-easing);
}
.switch-dropdown .dropdown .item {
	outline-offset: -4px;
}
.switch-toggle input[type=checkbox]:focus-visible + .label,
.switch-dropdown:focus-visible .label,
.switch-dropdown .dropdown .item:focus-visible,
.navbar .entry:focus-visible {
	outline-width: 2px;
}
.switch-right { right: 12px; }
.switch-left { left: 12px; }
.switch-right .label span { padding-right: 8px; }
.switch-left .label span { padding-left: 8px; }




/* CSS-only dropdown */
/* loosely based on https://stackoverflow.com/a/20058341 */
/* with accessibility notes from https://css-tricks.com/solved-with-css-dropdown-menus/ */
.switch .mousetrap {
	display: none;
	position: absolute;
	top: 40px;
	left: 8px;
	outline: none;
}
.switch:active .mousetrap,
.switch:focus .mousetrap,
.switch:focus-within .mousetrap {
	display: block;
}
@media (hover: none) {
	/* kinda hacky, but this stops the dropdown from flickering in on iOS Safari */
	.switch:hover .mousetrap {
		display: block;
	}
}
.switch .dropdown {
	margin: 0;
	padding: 0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0px 10px 30px rgba(0,0,0,0.15);
}
.switch .dropdown .item {
	display: block;
	background-color: var(--dropdown-bg-color);
	list-style: none;
	color: var(--main-text-color);
	padding: 8px 12px;
	border-bottom: 1px solid var(--dropdown-divider-color);
}
.switch .dropdown .item:last-child {
	border: none;
}
.switch .dropdown .item:hover,
.switch .dropdown .item:focus {
	background: var(--dropdown-hover-color);
}




.content-thing {
	text-align: left;
	font-size: 12pt;
	margin: 0 auto 32px;
	background-color: var(--panel-bg-color);
	box-shadow:
		0px 1px 2px rgba(0,0,0,0.3),
		0px 2px 5px rgba(0,0,0,0.05);
	width: fit-content;
	width: -moz-fit-content;
	max-width: 100%;
	transition: background-color var(--theme-transition-duration) var(--theme-transition-easing);

	&.slim {
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}

	.meteorik {
		padding: 8px;
		text-align: center;
		font-weight: 600;
		float: right;
		border: 0px solid transparent;
		border-bottom-width: 1px;
		border-left-width:   1px;
		margin-top: -4px;
		margin-right: 12px;
		box-shadow:
			0px 1px 2px rgba(0,0,0,0.3),
			0px 2px 5px rgba(0,0,0,0.05);
		color: var(--main-text-color);
		transition:
			color var(--theme-transition-duration) var(--theme-transition-easing),
			background-color var(--theme-transition-duration) var(--theme-transition-easing);

		&.meteorik-nominee {
			background: var(--meteorik-nominee-bg-color);
		}
		&.meteorik-runnerup {
			background: var(--meteorik-runnerup-bg-color);
		}
		&.meteorik-winner {
			background: var(--meteorik-winner-bg-color);
		}
	}

	.image {
		padding: var(--image-margin);
		padding-top: 0;

		img {
			display: block;
			max-width: 100%;
			max-height: 80vh;
		}
	}

	.text {
		padding: 12px;
		color: var(--main-text-color);
		transition: color var(--theme-transition-duration) var(--theme-transition-easing);

		a {
			color: inherit;
		}

		.author {
			font-weight: 400;
		}

		.title {
			font-size: 15pt;
			font-weight: 800;
			font-style: italic;
		}

		.author,
		.title,
		.party,
		.subtitle {
			margin-bottom: 0.3em;
			display: inline-block;
		}

		& > *:last-child {
			margin-bottom: 0;
		}

		.question {
			font-size: 14pt;
			font-weight: 600;
		}

		.answer p {
			margin-block-end: 0;

			a[href] {
				text-decoration: underline;
				text-decoration-style: dotted;
				text-decoration-thickness: from-font;

				&:hover,
				&:focus {
					text-decoration-style: solid;
				}
			}
		}
	}
}

.content-thing:hover .text .title,
.content-thing a:focus .text .title {
	text-decoration: underline;
}

.footer {
	padding-bottom: 24px;
	color: var(--main-text-color);
	transition: color var(--theme-transition-duration) var(--theme-transition-easing);

	.pouet-credit {
		display: none;
	}
}

@media only screen and (max-width: 600px) {
	* {
		transition: none !important;
	}

	/* hide text labels for toggles on smaller screens */
	.switch .label span {
		display: none;
	}

	/* more compact navbar for smaller screens */
	.navbar .entry {
		padding: 8px 8px;
	}

	/* new-style corner banner with reduced font size */
	.content-thing .meteorik {
		font-size: 10pt;
		padding: 4px;
		max-width: 120px;
	}
}


/* disable animated effects for users who prefer reduced motion */
@media (prefers-reduced-motion) {
	* {
		transition: none !important;
	}
}

/* larger hit area for devices without fine-grained pointer control (i.e. mobile touchscreens) */
@media (any-pointer: coarse) {
	.switch .dropdown .item {
		padding: 10px 14px;
	}
}



/* silly rounded-corner mode */
/*:root {
	--content-thing-border-radius: 10px;
	--image-margin: 5px;
}
.navbar .entry {
	&.active,
	&:hover,
	&:focus {
		border: none;
		border-radius: 5px;
		background-color: var(--panel-bg-color);
		box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
		transition: background-color var(--theme-transition-duration) var(--theme-transition-easing);
	}
}
.content-thing {
	border-radius: var(--content-thing-border-radius);
	.meteorik {
		border-radius: calc(var(--content-thing-border-radius) - var(--image-margin));
		border-width: 0px;
		margin: var(--image-margin);
		box-shadow: none;
	}
	img {
		border-radius: calc(var(--content-thing-border-radius) - var(--image-margin));
	}
	.text {
		padding: 10px;
	}
}*/


/* april fools theme */
[data-theme="pouet"] {
	--main-text-color: #ffffff;
	--panel-bg-color:  #446688;
	--main-bg-color:   #3a6ea5;
	--dropdown-bg-color: #224488;
	--dropdown-hover-color: #224488;
	--dropdown-divider-color: #000000;
	font-family: 'Tahoma', 'Verdana', 'Arial', 'Helvetica', sans-serif;
	font-size: 9pt;

	body {
		padding: 12px 0px;
		background: var(--main-bg-color) url('https://content.pouet.net/styles/001/gfx/trumpet.svg');
	}

	#switch-theme {
		display: none;
	}

	#switch-lang svg {
		display: none;
	}

	#switch-lang span {
		opacity: 1;
		font-weight: bold;
		text-transform: none;
		display: inline-block !important;
	}

	.switch-dropdown .mousetrap {
		top: 100%;
	}

	.switch-dropdown .dropdown {
		border: 1px solid #000000;
		border-top: none;
		border-radius: 0px;
		box-shadow: none;
	}

	.switch-dropdown .dropdown .item {
		color: #9FCFFF;
		font-weight: bold;
		padding: 4px;
	}

	.switch-dropdown .dropdown .item:hover,
	.switch-dropdown .dropdown .item:focus {
		text-decoration: underline;
	}

	.navbar {
		background-color: #224488;
		border-top: 1px solid #ffffff;
		border-bottom: 1px solid #ffffff;
		padding: 0px;
	
		.entry {
			display: inline-block;
			border: none;
			font-weight: bold;
			padding: 3px 4px;

			&:hover,
			&:focus {
				text-decoration: underline;
			}

			&:first-letter {
				color: #9FCFFF;
			}
		}
	}

	.content {
		padding: 0px 12px;
	}

	.content-thing {
		box-shadow: none;
		border: 2px solid #000000;
		max-width: 760px;

		&.slim {
			max-width: 500px;
		}

		.text {
			padding: 3px;

			&,
			.author,
			.title,
			.party,
			.subtitle,
			.question {
				font-size: 9pt;
				font-weight: normal;
				font-style: normal;
			}

			a[href] {
				font-weight: bold;
				color: #9FCFFF;
				text-decoration: none;

				&:hover,
				&:focus {
					text-decoration: underline;
					text-decoration-style: solid;
				}
			}

			.title,
			.question {
				font-weight: bold;
			}

			.question {
				display: block;
				margin: -4px;
				padding: 3px;
				border: 1px solid #000000;
				background: #224488;
			}

			.answer p {
				margin-block-start: 6px;
			}
		}

		.image {
			border-top: 1px solid #000000;
		}

		.meteorik {
			background-color: transparent;
			background-position: top right;
			background-repeat: no-repeat;
			font-size: 11px;
			border: 0;
			padding: 0;
			padding-top: 2px;
			padding-right: 22px;
			margin: 8px;
			height: 16px;
			box-shadow: none;
	
			&.meteorik-winner {
				background-image: url('https://content.pouet.net/gfx/sceneorg/meteorikwinner.gif');
			}
	
			&.meteorik-nominee {
				background-image: url('https://content.pouet.net/gfx/sceneorg/meteoriknominee.gif');
			}
		}

		&:not(.slim) .text {
			background: #224488;
		}
	}

	.footer .pouet-credit {
		display: block;
	}
}