Added effective date column. Changed warning page theme.

assets/components/container/warning.vue

@@ -67,12 +67,13 @@ export default {
 	justify-content: center;
 	position: absolute;
 	z-index: 10;
-	background: var(--darken-censor);
+	background: var(--background-censor);
+	backdrop-filter: blur(.25rem);
 	overflow-y: auto;
 }
 
 .warning {
-	color: var(--text-light);
+	color: var(--text);
 	width: 50rem;
 	max-height: 100%;
 	max-width: 100%;
@@ -87,8 +88,8 @@ export default {
 .title {
 	display: block;
 	font-size: 2rem;
-	margin: 1rem 0 0 0;
-	color: var(--text-light);
+	margin: 1rem 0;
+	color: var(--text);
 	text-align: center;
 }
 
@@ -113,7 +114,7 @@ export default {
 .rules {
 	margin: 0 0 0 1rem;
 	text-align: left;
-	text-shadow: 0 0 3px var(--darken-extreme);
+	text-shadow: 0 0 3px var(--highlight-strong);
 }
 
 .rule {
@@ -134,16 +135,16 @@ export default {
 	align-items: center;
 	justify-content: center;
 	border: none;
+	border-radius: .25rem;
 	padding: 0;
 	position: relative;
-	border-radius: 1rem;
-	color: var(--lighten-strong);
 	cursor: pointer;
 	font-size: 1.5rem;
 	text-decoration: none;
-	transition: border .5s ease;
+	transition: border-radius .2s ease;
 
 	&.leave {
+		color: var(--shadow-strong);
 		flex-direction: row;
 		padding: 1rem;
 
@@ -151,7 +152,11 @@ export default {
 			width: 1.5rem;
 			height: 1.5rem;
 			margin: 0 1rem 0 0;
-			fill: var(--lighten);
+			fill: var(--shadow);
+		}
+
+		&:hover {
+			color: var(--text);
 		}
 	}
 
@@ -161,6 +166,7 @@ export default {
 
 	&.straight,
 	&.queer {
+		color: var(--lighten-strong);
 		background: var(--darken-censor);
 
 		&:before {
@@ -169,10 +175,18 @@ export default {
 			height: calc(100% + .25rem);
 			position: absolute;
 			z-index: -1;
-			border-radius: 1.1rem;
 			filter: blur(.25rem);
 			transition: filter .2s ease;
 		}
+
+		&:hover {
+			color: var(--text-light);
+			border-radius: 0;
+
+			.button-sub {
+				color: var(--text-light);
+			}
+		}
 	}
 
 	&.straight:before {
@@ -188,14 +202,8 @@ export default {
 	}
 
 	&:hover {
-		color: var(--text-light);
-
-		.button-sub {
-			color: var(--lighten-strong);
-		}
-
 		.icon {
-			fill: var(--text-light);
+			fill: var(--text);
 		}
 
 		&.straight:before,
@@ -225,7 +233,7 @@ export default {
 }
 
 .preferences {
-	color: var(--lighten);
+	color: var(--shadow);
 	display: block;
 	padding: .5rem 0 1rem 0;
 	text-align: center;
@@ -234,11 +242,11 @@ export default {
 
 @media(max-width: $breakpoint) {
 	.title {
-		font-size: 1.5rem;
+		font-size: 1.75rem;
 	}
 
 	.logo {
-		width: 5rem;
+		width: 5.75rem;
 		margin: 0 .5rem 0 0;
 	}
 }

assets/css/_theme.scss

@@ -21,16 +21,17 @@ $breakpoint4: 1500px;
     --background-dark: #222;
 
     --darken: rgba(0, 0, 0, .5);
-    --darken-strong: rgba(0, 0, 0, .7);
-    --darken-extreme: rgba(0, 0, 0, .9);
     --darken-censor: rgba(0, 0, 0, .95);
+    --darken-extreme: rgba(0, 0, 0, .9);
+    --darken-strong: rgba(0, 0, 0, .7);
     --darken-weak: rgba(0, 0, 0, .2);
     --darken-hint: rgba(0, 0, 0, .1);
     --darken-touch: rgba(0, 0, 0, .05);
 
-    --lighten: rgba(255, 255, 255, .5);
-    --lighten-strong: rgba(255, 255, 255, .7);
+    --lighten-censor: rgba(255, 255, 255, .95);
     --lighten-extreme: rgba(255, 255, 255, .9);
+    --lighten-strong: rgba(255, 255, 255, .7);
+    --lighten: rgba(255, 255, 255, .5);
     --lighten-weak: rgba(255, 255, 255, .2);
     --lighten-hint: rgba(255, 255, 255, .05);
     --lighten-touch: rgba(255, 255, 255, .03);
@@ -58,6 +59,7 @@ $breakpoint4: 1500px;
     --text-contrast: #fff;
 
     --background: var(--background-light);
+    --background-censor: rgba(255, 255, 255, .95);
     --background-dim: #f5f5f5;
     --background-soft: #fdfdfd;
 
@@ -71,6 +73,7 @@ $breakpoint4: 1500px;
 	--crease: #eaeaea;
 
     --shadow: rgba(0, 0, 0, .5);
+    --shadow-censor: rgba(0, 0, 0, .95);
     --shadow-extreme: rgba(0, 0, 0, .9);
     --shadow-strong: rgba(0, 0, 0, .7);
     --shadow-modest: rgba(0, 0, 0, .3);
@@ -91,6 +94,7 @@ $breakpoint4: 1500px;
     --text-contrast: #222;
 
     --background: #181818;
+    --background-censor: rgba(0, 0, 0, .95);
     --background-dim: #111;
     --background-soft: #000;
 

assets/js/get-date-range.js

@@ -26,6 +26,31 @@ const dateRanges = {
 	}),
 };
 
+/* requires PostgreSQL 12.x> not available in production yet
+const dateRanges = {
+	latest: () => ({
+		after: '1900-01-01',
+		before: dayjs.utc().toDate(),
+		orderBy: ['EFFECTIVE_DATE_DESC'],
+	}),
+	upcoming: () => ({
+		after: dayjs.utc().toDate(),
+		before: '2100-01-01',
+		orderBy: ['EFFECTIVE_DATE_DESC'],
+	}),
+	new: () => ({
+		after: '1900-01-01 00:00:00',
+		before: '2100-01-01',
+		orderBy: ['CREATED_AT_DESC', 'EFFECTIVE_DATE_ASC'],
+	}),
+	all: () => ({
+		after: '1900-01-01',
+		before: '2100-01-01',
+		orderBy: ['EFFECTIVE_DATE_DESC'],
+	}),
+};
+*/
+
 function getDateRange(range) {
 	return (dateRanges[range] || dateRanges.all)();
 }