Added filter presets to consent warning. Updating scenes when tag filter changes.

assets/components/container/warning.vue

@@ -8,7 +8,7 @@
 
 			<strong class="title">This website contains sexually explicit content</strong>
 
-			<span class="copy">By entering, you agree to the following</span>
+			<span class="copy agree">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>
@@ -22,13 +22,26 @@
 					href="https://www.google.com"
 					class="button leave"
 					@click="$emit('leave')"
-				>Leave</a>
+				><Icon icon="arrow-left16" />Leave</a>
 
 				<button
-					class="button enter"
-					@click="$emit('enter')"
-				>Enter</button>
+					class="button enter queer"
+					@click="$emit('enter', true)"
+				>
+					<span class="button-title">Enter</span>
+					<span class="button-sub">I like gay, bi and trans content</span>
+				</button>
+
+				<button
+					class="button enter straight"
+					@click="$emit('enter', false)"
+				>
+					<span class="button-title">Enter</span>
+					<span class="button-sub">I prefer straight content</span>
+				</button>
 			</div>
+
+			<span class="preferences">You can adjust your content preferences after entering</span>
 		</div>
 	</div>
 </template>
@@ -42,6 +55,7 @@ export default {
 			logo,
 		};
 	},
+	emits: ['enter'],
 };
 </script>
 
@@ -68,6 +82,13 @@ export default {
 	margin: 1rem;
 }
 
+.logo {
+	width: 8rem;
+    display: flex;
+	fill: var(--primary);
+	margin: 1rem auto 0 auto;
+}
+
 .title,
 .copy,
 .rules {
@@ -98,52 +119,106 @@ export default {
 	line-height: 1.5;
 }
 
+.preferences {
+	color: var(--lighten);
+	display: block;
+	padding: .5rem 0 1rem 0;
+	text-align: center;
+	font-size: .9rem;
+}
+
 .actions {
 	display: flex;
 	text-align: center;
-	padding: 1rem 1rem 2rem 1rem;
+	padding: 1rem 0;
 }
 
 .button {
 	display: inline-block;
-	padding: 1rem;
 	border: none;
 	font-size: 1.5rem;
+	padding: 0;
+	background: none;
+	border: solid 2px transparent;
 	cursor: pointer;
 	text-decoration: none;
-	color: var(--lighten-strong);
+	flex-basis: 0;
 
 	&.leave {
-		background: var(--darken-strong);
-		padding: 1rem 3rem;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--lighten-strong);
+		padding: 1rem;
+
+		.icon {
+			width: 1.5rem;
+			height: 1.5rem;
+			margin: 0 1rem 0 0;
+			fill: var(--lighten);
+		}
 	}
 
 	&.enter {
-		background: var(--primary);
-		font-weight: bold;
 		flex-grow: 1;
 
 		&:hover {
-			color: var(--text-light);
+			.button-title,
+			.button-sub {
+				color: var(--text-light);
+			}
 		}
 	}
 
+	&.straight {
+		border-color: var(--primary);
+	}
+
+	&.queer {
+		border-image: linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #00f, #a0f, #fff, #f8f, #0ff) 1;
+	}
+
+	&:not(:last-child) {
+		margin: 0 2rem 0 0;
+	}
+
 	&:hover {
 		color: var(--text-light);
+
+		.icon {
+			fill: var(--text-light);
+		}
 	}
 }
 
-.logo {
-	width: 8rem;
-    display: flex;
-	fill: var(--primary);
-	margin: 1rem auto 0 auto;
+.button-title,
+.button-sub {
+	width: 100%;
+	display: block;
+	box-sizing: border-box;
+}
+
+.button-title {
+	font-size: 1.5rem;
+	padding: .5rem .5rem .15rem .5rem;
+	color: var(--lighten-strong);
+	font-weight: bold;
+}
+
+.button-sub {
+	font-size: .75rem;
+	padding: .15rem .5rem .75rem .5rem;
+	color: var(--lighten);
 }
 
 @media(max-width: $breakpoint) {
 	.title {
 		font-size: 1.5rem;
 	}
+
+	.button:not(:last-child) {
+		margin: 0 1rem 0 0;
+	}
 }
 
 @media(max-width: $breakpoint-micro) {