palette ref page

assets/styles/palette.css

@@ -0,0 +1,44 @@
+.color {
+	border: solid var(--color-text);
+	border-radius: 0 2rem 0 2rem;
+	width: 50%;
+	margin: 1rem auto;
+	text-align: center;
+	padding: .5rem;
+	font-weight: 900;
+}
+
+@media (max-width: 1050px) {
+	.color {
+		width: 70%;
+	}
+}
+
+@media (max-width: 650px) {
+	.color {
+		width: 100%;
+	}
+}
+
+#dark { background-color: var(--color-dark); }
+#light { background-color: var(--color-light); }
+#purple-dark { background-color: var(--color-purple-dark); }
+#purple-light { background-color: var(--color-purple-light); }
+#pink-dark { background-color: var(--color-pink-dark); }
+#pink-light { background-color: var(--color-pink-light); }
+#orange-dark { background-color: var(--color-orange-dark); }
+#orange-light { background-color: var(--color-orange-light); }
+
+#dark,
+#purple-dark,
+#pink-dark,
+#orange-dark {
+	color: var(--color-light);
+}
+
+#light,
+#purple-light,
+#pink-light,
+#orange-light {
+	color: var(--color-dark);
+}