Added content warning dialog.

assets/components/container/warning.vue

@@ -0,0 +1,132 @@
+<template>
+	<div class="warning-container">
+		<div class="warning">
+			<strong class="title">This website contains sexually explicit content</strong>
+
+			<span class="copy">By entering, you agree to the following</span>
+
+			<ul class="rules">
+				<li class="rule">You are at least 18 years old, and a legal adult in your jurisdiction.</li>
+				<li class="rule">You are prepared see, hear and read erotic and sexual material, some of which could be considered obscene or offensive by some.</li>
+				<li class="rule">You understand that the majority of sexual acts on this website are fictional, performed by professional actors for entertainment purposes, and not representative of real-life interactions.</li>
+				<li class="rule">Respect your sexual partners, communicate about each other's fantasies and limits, and take precautions to prevent sexually transmitted infections and unintended pregnancies.</li>
+			</ul>
+
+			<div class="actions">
+				<a
+					href="https://www.google.com"
+					class="button leave"
+				>Leave</a>
+
+				<button
+					class="button enter"
+					@click="$emit('enter')"
+				>Enter</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.warning-container {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	z-index: 10;
+	background: var(--darken-extreme);
+	backdrop-filter: blur(.5rem);
+	overflow-y: auto;
+}
+
+.warning {
+	color: var(--text-light);
+	width: 50rem;
+	max-height: 100%;
+	max-width: 100%;
+	margin: 1rem;
+}
+
+.title,
+.copy,
+.rules {
+	padding: 1rem;
+}
+
+.title {
+	display: block;
+	font-size: 2rem;
+	margin: 0 0 1rem 0;
+	color: var(--text-light);
+}
+
+.copy {
+	display: block;
+	padding: 0 1rem;
+	font-weight: bold;
+}
+
+.rules {
+	margin: 0 0 0 1rem;
+	text-align: left;
+	text-shadow: 0 0 3px var(--darken-extreme);
+}
+
+.rule {
+	padding: .5rem 1rem;
+	line-height: 1.5;
+}
+
+.actions {
+	display: flex;
+	text-align: center;
+	padding: 1rem;
+	margin: 1rem 0 0 0;
+}
+
+.button {
+	display: inline-block;
+	padding: 1rem;
+	border: none;
+	font-size: 1.5rem;
+	cursor: pointer;
+	text-decoration: none;
+	color: var(--lighten-strong);
+
+	&.leave {
+		background: var(--darken-strong);
+		padding: 1rem 3rem;
+	}
+
+	&.enter {
+		background: var(--primary);
+		font-weight: bold;
+		flex-grow: 1;
+
+		&:hover {
+			color: var(--text-light);
+		}
+	}
+
+	&:hover {
+		color: var(--text-light);
+	}
+}
+
+@media(max-width: $breakpoint) {
+	.title {
+		font-size: 1.5rem;
+	}
+}
+
+@media(max-width: $breakpoint-micro) {
+	.button.leave {
+		padding: 1rem;
+		flex-grow: 1;
+	}
+}
+</style>