redisignHEADmaster

1 files changed, 11 insertions, 269 deletions

diff --git a/public/css/index.css b/public/css/index.css
index a304ed4..e50cd61 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -1,280 +1,22 @@
-* {
-    --active: rgb(43, 43, 48);
-    --active-inner: #f3f3f3;
-    --focus: 2px rgba(39, 94, 254, .3);
-    --border: #a3a3a3;
-    --border-hover: #f3f3f3;
-    --background: rgb(255, 255, 255);
-    --background-secondary: rgb(230, 230, 230);
-    --disabled: rgb(43, 43, 48);
-    --disabled-inner: #rgb(43, 43, 48);
-    --text: #000;
-}
-
-@media (prefers-color-scheme: dark) {
-    * {
-        --active: rgb(43, 43, 48);
-        --active-inner: #f3f3f3;
-        --focus: 2px rgba(39, 94, 254, .3);
-        --border: #f3f3f3;
-        --border-hover: #f3f3f3;
-        --background: rgb(31, 32, 39);
-        --background-secondary: rgb(43, 43, 48);
-        --disabled: rgb(43, 43, 48);
-        --disabled-inner: #rgb(43, 43, 48);
-        --text: #f3f3f3;
+/* @media (prefers-color-scheme: dark) {
+    html, body>header, body>footer, .invert {
+        filter: invert(1) hue-rotate(180deg);
     }
-}
-
-html, body {
-    padding: 0;
-    margin: 0;
-    background-color: var(--background);
-    color: var(--text);
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    font-size: 16px;
-}
-
-.turbolinks-progress-bar {
-    height: 5px;
-    background-color: rgb(52, 52, 175);
-}
-
-a, a:hover, a:active, a:visited {
-    color: var(--text);
-}
+    img:not([src*=".svg"]), .dropimage {
+        filter: invert(1) hue-rotate(180deg) saturate(30%);
+    }
+} */
 
-body {
+.content {
     padding-top: 60px;
 }
 
-header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 50px;
-    width: 100%;
-    border-bottom: 1px solid var(--border);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    background-color: var(--background);
-}
-
-hr {
-    width: auto;
-    border-top: 0;
-    border-bottom: 1px solid var(--border);
-    margin: 16px 8px;
-}
-
-h1 {
-    margin: 16px 8px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid var(--border);
-}
-
-#header-logo {
-    display: block;
-    padding: 16px;
-    text-decoration: none;
-    font-family: 'Courier New', Courier, monospace;
-    cursor: pointer;
-}
-
-.header-menu {
-    list-style: none;
-    display: flex;
-    flex-direction: row;
-}
-
-.header-menu .header-menu--item {
-    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
-    display: inline-block;
-    padding: 16px;
-    text-decoration: none;
-}
-
-.header-menu .header-menu--item:hover {
-    background-color: var(--background-secondary);
-}
-
-.layout-center {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-}
-
-form {
-    display: flex;
-    flex-direction: column;
-    /* max-width: 50vh; */
-    width: 600px;
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 16px;
-}
-
-form .required {
-    font-size: 14px;
-    font-style: italic;
-    color: rgb(255, 100, 100);
-    align-self: flex-end;
-}
-
-form .optional {
-    font-size: 14px;
-    font-style: italic;
-    align-self: flex-end;
+.required {
+    text-align: right;
 }
 
-form label {
+label.row {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: center;
-}
-
-.form-row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-input, textarea, button {
-    background-color: var(--background-secondary);
-    color: var(--text);
-    border: 1px solid var(--border);
-    padding: 8px;
-    margin: 8px;
-    border-radius: 4px;
-}
-
-textarea {
-    resize: vertical;
-}
-
-label {
-    padding: 8px;
-}
-
-input:active, textarea:active, button:active {
-    background-color: rgb(33, 33, 38);
-}
-
-@supports (-webkit-appearance: none) or (-moz-appearance: none) {
-    input[type=checkbox], input[type=radio] {
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        height: 21px;
-        outline: none;
-        display: inline-block;
-        vertical-align: top;
-        position: relative;
-        margin: 0 8px 0 0;
-        cursor: pointer;
-        border: 1px solid var(--bc, var(--border));
-        background: var(--b, var(--background-secondary));
-        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
-    }
-    input[type=checkbox]:after, input[type=radio]:after {
-        content: "";
-        display: block;
-        left: 0;
-        top: 0;
-        position: absolute;
-        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
-    }
-    input[type=checkbox]:checked, input[type=radio]:checked {
-        --b: var(--active);
-        --bc: var(--active);
-        --d-o: .3s;
-        --d-t: .6s;
-        --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
-    }
-    input[type=checkbox]:disabled, input[type=radio]:disabled {
-        --b: var(--disabled);
-        cursor: not-allowed;
-        opacity: 0.9;
-    }
-    input[type=checkbox]:disabled:checked, input[type=radio]:disabled:checked {
-        --b: var(--disabled-inner);
-        --bc: var(--border);
-    }
-    input[type=checkbox]:disabled+label, input[type=radio]:disabled+label {
-        cursor: not-allowed;
-    }
-    input[type=checkbox]:hover:not(:checked):not(:disabled), input[type=radio]:hover:not(:checked):not(:disabled) {
-        --bc: var(--border-hover);
-    }
-    input[type=checkbox]:focus, input[type=radio]:focus {
-        box-shadow: 0 0 0 var(--focus);
-    }
-    input[type=checkbox]:not(.switch), input[type=radio]:not(.switch) {
-        width: 21px;
-    }
-    input[type=checkbox]:not(.switch):after, input[type=radio]:not(.switch):after {
-        opacity: var(--o, 0);
-    }
-    input[type=checkbox]:not(.switch):checked, input[type=radio]:not(.switch):checked {
-        --o: 1;
-    }
-    input[type=checkbox]+label, input[type=radio]+label {
-        font-size: 14px;
-        line-height: 21px;
-        display: inline-block;
-        vertical-align: top;
-        cursor: pointer;
-        margin-left: 4px;
-    }
-    input[type=checkbox]:not(.switch) {
-        border-radius: 7px;
-    }
-    input[type=checkbox]:not(.switch):after {
-        width: 5px;
-        height: 9px;
-        border: 2px solid var(--active-inner);
-        border-top: 0;
-        border-left: 0;
-        left: 7px;
-        top: 4px;
-        transform: rotate(var(--r, 20deg));
-    }
-    input[type=checkbox]:not(.switch):checked {
-        --r: 43deg;
-    }
-    input[type=checkbox].switch {
-        width: 38px;
-        border-radius: 11px;
-    }
-    input[type=checkbox].switch:after {
-        left: 2px;
-        top: 2px;
-        border-radius: 50%;
-        width: 15px;
-        height: 15px;
-        background: var(--ab, var(--border));
-        transform: translateX(var(--x, 0));
-    }
-    input[type=checkbox].switch:checked {
-        --ab: var(--active-inner);
-        --x: 17px;
-    }
-    input[type=checkbox].switch:disabled:not(:checked):after {
-        opacity: 0.6;
-    }
-    input[type=radio] {
-        border-radius: 50%;
-    }
-    input[type=radio]:after {
-        width: 19px;
-        height: 19px;
-        border-radius: 50%;
-        background: var(--active-inner);
-        opacity: 0;
-        transform: scale(var(--s, 0.7));
-    }
-    input[type=radio]:checked {
-        --s: .5;
-    }
 }