Merge pull request 'add optional light color theme to style.css' (#51) from reese/capsul-flask:main into main

Reviewed-on: https://git.cyberia.club/cyberia/capsul-flask/pulls/51

capsulflask/static/style.css

···
+@media (prefers-color-scheme: light) {
+  .yellow {
+    color: rgba(221, 169, 56, 1) !important;
+  }
+
+  html {
+    color: #241e1e !important;
+    background-color: #eaeed9 !important;
+  }
+
+  a {
+    color:#2ea1d2 !important;
+    text-shadow: 1px 1px 0px #0001 !important;
+  }
+  input[type=submit].form-submit-link {
+    color:#2ea1d2 !important;
+  }
+  a:hover, a:active, a:visited {
+    color: #94a12d !important;
+  }
+  h1, h2, h3, h4, h5 {
+    text-shadow: 2px 2px 0px #0001 !important;
+  }
+
+  main {
+    border-color: #777e73 !important;
+  }
+
+  input, select, textarea {
+    color: #241e1e !important;
+    background-color: #fff3 !important;
+  }
+
+  thead {
+    background: #dbe5d6 !important;
+  }
+  th {
+    border-color: #eaf4e5 !important;
+  }
+
+  .code {
+    background: #fff3 !important;
+  }
+
+  .metric img, .metrics img {
+    filter: brightness(50%) saturate(250%);
+  }
+}
+
+
 html {
   color: #bdc7b8;
   font: calc(0.40rem + 1vmin) monospace;
···
   margin-left: auto;
   min-width: 33rem;
   max-width: 53rem;
-} 
+}
 
 @media only screen and (max-width: 53rem) {
   body {
···
 
 a:hover, a:active, a:visited {
   color: #b5bd68;
-} 
+}
 
 .nav-links  a {
   margin: 0 1em;
···
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background-image: url(/static/dropdown-handle.png); 
+  background-image: url(/static/dropdown-handle.png);
   background-repeat: no-repeat;
   background-position: bottom 0.65em right 0.8em;
   background-size: 0.5em;
···
 
 input[type=submit].form-submit-link {
   border: none;
-  background-color: initial;
+  background-color: #0000 !important;
   color: #6CF;
   padding: 0;
   margin: 0;
···
   margin-left: 1.2rem;
 }
 
-.long-form p, 
+.long-form p,
 .long-form li,
 .long-form blockquote {
   line-height: 2em;
 }
 
 
-.long-form p .code, 
+.long-form p .code,
 .long-form li .code,
 .long-form blockquote .code
 {
···
 }
 td {
   font: calc(0.35rem + 0.95vmin) monospace;
-  border-bottom: 2px dotted #777e7355;
+  border-bottom: 2px dotted #777e7388;
   padding-top: 0.4rem;
   padding-bottom: 0.4rem;
 }
···
 
 form.megaphone {
   margin-top: 1rem;
-  width: 640px; 
+  width: 640px;
   max-width: 100%;
 }
 
 form.megaphone input[type=text],
 form.megaphone textarea {
-  width: 100%; 
+  width: 100%;
 }
 form.megaphone textarea {
-  height: 360px; 
-}
+  height: 360px;
+}