traxxx/assets/components/container/warning.vue

<template>
	<div class="warning-container">
		<div class="warning">
			<div
				class="logo"
				v-html="logo"
			/>

			<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 legally permitted to view adult material in your jurisdiction.</li>
				<li class="rule">You are prepared see, hear and read erotic and sexual material, and do not regard such content as obscene or offensive.</li>
				<li class="rule">You understand that most sexual scenarios depicted on this website are fictional, performed by professional actors for the purpose of entertainment, and not representative of real-life interactions.</li>
				<li class="rule">Respect your sexual partners, communicate about each other's desires 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>

<script>
import logo from '../../img/logo.svg';

export default {
	data() {
		return {
			logo,
		};
	},
};
</script>

<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 1rem 2rem 1rem;
}

.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);
	}
}

.logo {
	width: 8rem;
    display: flex;
	fill: var(--primary);
	margin: 1rem auto 0 auto;
}

@media(max-width: $breakpoint) {
	.title {
		font-size: 1.5rem;
	}
}

@media(max-width: $breakpoint-micro) {
	.button.leave {
		padding: 1rem;
		flex-grow: 1;
	}
}
</style>