Added content warning dialog.

assets/components/container/container.vue

@@ -3,6 +3,12 @@
 		class="container"
 		:class="theme"
 	>
+		<Warning
+			v-if="showWarning"
+			class="warning-container"
+			@enter="closeWarning"
+		/>
+
 		<transition name="slide">
 			<Sidebar
 				v-if="showSidebar"
@@ -23,6 +29,7 @@ import { mapState } from 'vuex';
 
 import EventBus from '../../js/event-bus';
 
+import Warning from './warning.vue';
 import Header from '../header/header.vue';
 import Sidebar from '../sidebar/sidebar.vue';
 
@@ -34,6 +41,11 @@ function toggleSidebar(state) {
 	this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
 }
 
+function closeWarning() {
+	this.showWarning = false;
+	sessionStorage.setItem('warning', 'warned');
+}
+
 function mounted() {
 	document.addEventListener('click', () => {
 		EventBus.$emit('blur');
@@ -44,10 +56,12 @@ export default {
 	components: {
 		Header,
 		Sidebar,
+		Warning,
 	},
 	data() {
 		return {
 			showSidebar: false,
+			showWarning: sessionStorage.getItem('warning') !== 'warned',
 		};
 	},
 	computed: {
@@ -58,6 +72,7 @@ export default {
 	mounted,
 	methods: {
 		toggleSidebar,
+		closeWarning,
 	},
 };
 </script>

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>

assets/css/_theme.scss

@@ -7,6 +7,7 @@ $breakpoint4: 1500px;
 :root {
 	/* --primary: #ff886c; */
     --primary: #ff6c88;
+    --primary-strong: #ff4166;
 
     --text-dark: #222;
     --text-light: #fff;