Add controls to hide combinations not meeting a contrast threshold

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+.DS_Store?
+.vscode

css/base.css

@@ -2,7 +2,7 @@
   --color-primary: #0f6292;
   --color-primary-light: #0d77b5;
   --default-container-padding: 10px;
-  --sidebar-width: 350px;
+  --sidebar-width: 550px;
   --gap: 20px;
   --scrollbar-width: 16px;
 }
@@ -47,7 +47,7 @@ a:focus {
 header {
   position: sticky;
   left: var(--default-container-padding);
-  max-width: 100ch;
+  max-width: min(100ch, calc(95vw - var(--gap)));
   padding: var(--default-container-padding);
 }
 
@@ -65,7 +65,7 @@ main {
   padding: var(--default-container-padding);
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 1200px) {
   main {
     flex-direction: row;
   }
@@ -80,6 +80,7 @@ main a {
   padding: 20px;
   background: #f1f4f7;
   font-size: 18px;
+  max-width: calc(95vw - var(--gap));
 }
 
 /* Footer styles. */
@@ -90,7 +91,7 @@ footer {
   color: white;
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 1200px) {
   footer {
     padding: 40px var(--default-container-padding) 40px calc(var(--default-container-padding) + var(--sidebar-width) + var(--gap));
   }
@@ -105,7 +106,7 @@ footer a {
   display: none;
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 1200px) {
   .show-large {
     display: revert;
   }

css/form.css

@@ -1,21 +1,22 @@
 /* Form styles. */
-form {
+form,
+.contrast-range {
   position: sticky;
   left: var(--default-container-padding);
-  max-width: 100vw;
   flex-shrink: 0;
   flex-direction: row;
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
   align-items: flex-end;
+  max-width: calc(95vw - var(--gap));
 }
 
 form > label {
   flex-basis: 100%;
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 1200px) {
   form {
     flex-direction: row;
     position: static;
@@ -55,7 +56,7 @@ textarea {
   cursor: pointer;
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 1200px) {
   .button-reverse {
     flex-basis: auto;
   }
@@ -69,33 +70,103 @@ textarea {
   background-color: #ddd;
 }
 
-.button-submit {
+.button-submit,
+.datalist-buttons > button[data-value] {
   border: solid 1px transparent;
   background: var(--color-primary);
   appearance: none;
   color: white;
-  padding: 15px 20px;
+  padding-inline: 15px;
   font-weight: bold;
   font-size: 16px;
   cursor: pointer;
   border-radius: 2px;
+  min-height: 24px;
+  min-width: 24px;
 }
 
-textarea:focus,
-.button-submit:focus {
+.button-submit {
+  min-height: 3rem;
+}
+
+.color-input-form input {
+  accent-color: var(--color-primary);
+}
+
+.color-input-form :focus {
   outline: solid 4px var(--color-primary);
   outline-offset: 2px;
 }
 
-.button-submit:hover {
+.button-submit:hover,
+.datalist-buttons > button[data-value]:hover {
   background-color: var(--color-primary-light);
 }
 
-.button-submit:active {
+.button-submit:active,
+.datalist-buttons > button[data-value]:active {
   background: var(--color-primary);
 }
 
 .overflow {
   max-width: 80vw;
   overflow: auto;
 }
+
+.contrast-range {
+  padding-top: var(--gap);
+}
+
+#contrast {
+	width: 100%;
+}
+
+.datalist-buttons {
+  display: flex;
+  margin-block: 0rem 4rem;
+  position: relative;
+  width: 100%;
+}
+
+.datalist-buttons > button[data-value] {
+  border-radius: 4px;
+  padding: 1px 5px;
+  position: absolute;
+}
+
+/* Use :where() to lower specificity */
+.datalist-buttons > button[data-value]:where(:not(:first-child):not(:last-child)) {
+  transform: rotate(45deg);
+}
+
+.datalist-buttons > button[data-value="1"] {
+  left: 0;
+}
+
+.datalist-buttons > button[data-value="3"] {
+  left: calc(100% * calc(3 / 20) - 5% - 1rem);;
+}
+
+/* Make room for Large button to be shifted above input */
+@media (max-width: 35rem) {
+  label[for="contrast"] {
+      margin-bottom: 3rem;
+  }
+
+  .datalist-buttons > button[data-value="3"] {
+      left: calc(100% * calc(3 / 20) - 5% - 2rem);
+      transform: translateY(-5.2rem) rotate(45deg);
+  }
+}
+
+.datalist-buttons > button[data-value="4.5"] {
+  left: calc(100% * calc(4.5 / 20) - 5% - 1rem);;
+}
+
+.datalist-buttons > button[data-value="7"] {
+  left: calc(100% * calc(7 / 20) - 5% - 1rem);;
+}
+
+.datalist-buttons > button[data-value="21"] {
+  right: 0;
+}

css/table.css

@@ -109,6 +109,10 @@ tr:hover :is(th, td):after {
   font-size: 16px;
 }
 
+.doesNotMeet {
+  visibility: hidden;
+}
+
 dialog#popover {
   position: fixed;
   inset: 2rem 2rem auto auto;