assets/components/container/warning.vue

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

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.152.3",
+    "version": "1.152.2",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.152.3",
+    "version": "1.152.2",
     "description": "All the latest porn releases in one place",
     "main": "src/app.js",
     "scripts": {