Improved consent warning layout.

assets/components/container/warning.vue

@@ -29,7 +29,7 @@
 					@click="$emit('enter', true)"
 				>
 					<span class="button-title">Enter</span>
-					<span class="button-sub">I like gay, bi and trans content</span>
+					<span class="button-sub">I want to see gay, bi and trans content</span>
 				</button>
 
 				<button
@@ -41,7 +41,7 @@
 				</button>
 			</div>
 
-			<span class="preferences">You can adjust your content preferences after entering</span>
+			<span class="preferences">You can adjust your content preferences later</span>
 		</div>
 	</div>
 </template>
@@ -119,14 +119,6 @@ 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;
@@ -134,21 +126,22 @@ export default {
 }
 
 .button {
-	display: inline-block;
+	display: inline-flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 	border: none;
 	font-size: 1.5rem;
 	padding: 0;
-	background: none;
 	border: solid 2px transparent;
+	color: var(--lighten-strong);
+	background: none;
 	cursor: pointer;
 	text-decoration: none;
 	flex-basis: 0;
 
 	&.leave {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--lighten-strong);
+		flex-direction: row;
 		padding: 1rem;
 
 		.icon {
@@ -161,13 +154,6 @@ export default {
 
 	&.enter {
 		flex-grow: 1;
-
-		&:hover {
-			.button-title,
-			.button-sub {
-				color: var(--text-light);
-			}
-		}
 	}
 
 	&.straight {
@@ -185,6 +171,10 @@ export default {
 	&:hover {
 		color: var(--text-light);
 
+		.button-sub {
+			color: var(--lighten-strong);
+		}
+
 		.icon {
 			fill: var(--text-light);
 		}
@@ -194,23 +184,30 @@ export default {
 .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);
+	padding: .5rem 0 .15rem 0;
 	font-weight: bold;
 }
 
 .button-sub {
-	font-size: .75rem;
+	display: block;
+	font-size: .8rem;
 	padding: .15rem .5rem .75rem .5rem;
 	color: var(--lighten);
 }
 
+.preferences {
+	color: var(--lighten);
+	display: block;
+	padding: .5rem 0 2rem 0;
+	text-align: center;
+	font-size: .9rem;
+}
+
 @media(max-width: $breakpoint) {
 	.title {
 		font-size: 1.5rem;
@@ -220,17 +217,15 @@ export default {
 @media(max-width: $breakpoint-small) {
 	.actions {
 		flex-direction: column-reverse;
+		padding: 0;
 
 		.button {
 			margin: 0 0 1rem 0;
 		}
-	}
-}
 
-@media(max-width: $breakpoint-micro) {
-	.button.leave {
-		padding: 1rem;
-		flex-grow: 1;
+		.button:first-child {
+			margin: 0;
+		}
 	}
 }
 </style>