removed old css file

1 files changed, 62 insertions, 310 deletions

diff --git a/public/style.css b/public/style.css
index 8e771b0..81841e2 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,348 +1,100 @@
 :root {
-    --color-background: #ddd;
-    --color-table-row: #eee;
-    --color-head: #026;
-    --color-table-em: lightblue;
-    --color-table-em2: #d3dce3;
-    --color-warning: orange;
+  --jwm-color-back: #eee;
+  --jwm-color-front: #ddd;
 }
 
-/* GENERAL */
-
 body {
-    font-family: sans;
+  padding: 1rem;
 }
 
-a:link {
-    text-decoration: none;
-    color: blue;
-}
-a:visited {
-    text-decoration: none;
-    color: purple;
+a {
+  text-decoration-line: none;
 }
+
 a:hover {
-    text-decoration: underline;
-    color: red;
+  text-decoration-line: underline;
 }
 
 footer {
-    margin-top: 50px;
-    text-align: center;
-    font-size: small;
-}
-caption {
-    vertical-align: middle;
-    font-size: large;
-    background-color: var(--color-background);
-    text-align: center;
-    font-weight: bold;
+  text-align: center;
+  margin-top: 2rem;
 }
 
-.ow h1 {
-    color: var(--color-background);
-    background-color: var(--color-head);
-    width: 80%;
-    padding: 10px;
-    margin-left: auto;
-    margin-right: auto;
-}
-.ow form,
-.ow dl {
-    width: 80%;
-    background-color: var(--color-background);
-    padding: 10px;
-    margin-left: auto;
-    margin-right: auto;
+.jwm-base {
+  background-color: var(--jwm-color-back);
+  border-radius: 5px;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 1rem;
 }
-.ow p.warn {
-    background-color: var(--color-warning);
-    text-align: center;
-    width: 80%;
-    margin-left: auto;
-    margin-right: auto;
 
-    padding: 10px;
-}
+  .jwm-base > nav {
+    margin-top: 1rem;
+  }
 
-.ow nav {
-    margin-left: auto;
-    margin-right: auto;
-    width: 80%;
-    padding: 10px;
-    text-align: center;
-    background-color: var(--color-background);
+.jwm-warning {
+  background-color: orange;
+  padding: 1rem;
 }
 
-div.show-body {
-    width: 80%;
-    margin-left: auto;
-    margin-right: auto;
-}
-iframe.html-mail {
-    width: 100%;
-    height: 400px;
+.jwm-post {
+  background-color: var(--jwm-color-front);
+  border-radius: 5px;
+  padding: 0.5rem 1rem;
 }
 
-form.link-btn input {
-    padding: 5px;
-    /* margin: 4px; */
-    /* border-width: 5px; */
-    /* border-style: solid; */
-
-    color: var(--color-background);
-    background-color: var(--color-head);
-    border-color: var(--color-head);
-
-    text-align: center;
-    display: inline-block;
-    cursor: pointer;
-    text-decoration: none;
+.jwm-nav {
+  background-color: var(--jwm-color-back);
+  border-radius: 5px;
+  padding: 0 1rem;
 }
-form.link-btn input:hover {
-    background-color: #0060a0;
-    /* border-color: black; */
-}
-
-/* a.btn::before { content: '['; } */
-/* a.btn::after { content: ']'; } */
 
-
-/* NESTED */
-td.login-form input[type=text] {
-    width: 100%;
-    margin: 8px 0;
-    box-sizing: border-box;
+.jwm-mail-header {
+  background-color: var(--jwm-color-front);
+  padding: 1rem;
 }
 
-
-/* CLASSES */
-table.top {
-    margin-left: auto;
-    margin-right: auto;
-    padding: 10px;
-    width: 50%;
-    background-color: var(--color-background);
-}
-td.small-section {
-    text-align: center;
-    background-color: var(--color-background);
-}
-td.large-section {
-    vertical-align: middle;
-    background-color: var(--color-table-row);
-    width: 470;
-}
-p.center {
-    text-align: center;
-}
-td.login-form {
-    valign: middle;
-    align: center;
-    background-color: var(--color-table-row);
-}
-tr.submit-row {
-    text-align: right;
-}
-td.label-cell {
-    text-align: right;
-}
-td.warning {
-    background-color: var(--color-warning);
-    text-align: center;
-}
-p.languages {
-    color: var(--color-link);
-}
-td.sep {
-    bgcolor: #ffffff;
-}
-td.sort-param {
-    valign: middle;
-    width: 12%;
-    bgcolor: var(--color-table-em2);
-}
-input.field-with-error {
-    border: 2px solid red;
-    border-radius: 4px;
-}
-.alter-font {
-    font-family: serif;
-}
-strong.up {
-    text-transform: uppercase;
-    color: var(--color-background);
-}
-a.bright {
-    color: #ffffff;
-}
-td.folder-list {
-    align: left;
-    width: 33%;
-    color: #ffffff;
-    size: 3; 
-}
-em.msg-count {
-    color: #ffffff;
-    size: 3; 
-    font-family: serif;
+.jwm-mail-body {
+    width: 80%;
+    margin: 0rem auto;
 }
 
-ul.line {
-    list-style-type: none;
-    margin-top: 0px;
-    margin-bottom: 0px;
-    /* padding: 0; */
-}
-ul.line > li:not(:last-child)::after {
-    /* border-right: 2px solid var(--color-font); */
-    color: var(--color-background);
-    content: "|";
-    margin: 0 .25em;
-}
-ul.line > li {
-    /* float: left; */
-    display: inline;
-}
+  .jwm-mail-body > iframe.html-mail {
+    width: 100%;
+    height: 400px;
+  }
 
-div.show-body {
-    background-color: var(--color-table-row);
+/* make sure this lines up with pure-md class */
+@media screen and (max-width: 48em) {
+  .hide-small {
+    display: none;
+  }
 }
 
-td.new-mail > tr {
-    font-weight: bold;
+#displayheaders {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 1rem;
 }
 
+  #mail-headers {
+    width: 100%;
+  }
 
-/* IDS */
-th#top-section {
-    background-color: var(--color-background);
-}
-td#main-version {
-    font-size: large;
-    font-weight: bold;
-}
-table#noaction {
-    border: 0;
-    padding: 5px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 100px;
-    width: 300px;
-}
-tr#bottom-section {
-    background-color: var(--color-background);
-}
-table#displayheaders {
-    width: 95%;
-    cellpadding: 1;
-    cellspacing: 1;
-    border: 0;
-    padding: 5px;
-    margin-left: auto;
-    margin-right: auto;
-    /* margin-top: 100px; */
-    /* width: 300px; */
-}
-table#displayheaders tfoot {
-    background-color: var(--color-background);
-}
-tr#sort {
-    background-color: var(--color-table-em2);
-}
-td#loginmessage {
-    bgcolor: var(--color-table-em);
-    align: center;
-    size: 2;
-}
-td#navigation {
-    bgcolor: #dcdcdc;
-}
-
-table#bot-nav {
+  #empty-folder {
     text-align: center;
-    vertical-align: middle;
-}
+  }
 
-table#bot-nav > tbody > tr > td:nth-child(2) {
-    /* text-align: right; */
-    /* float: left; */
-    /* vertical-align: middle; */
+#login {
+  max-width: 640px;
 }
 
-table#display-folders {
-    background-color: var(--color-head);
-    align: center;
-}
-
-table#mail-headers {
-    border-collapse: collapse;
-}
-table#mail-headers td {
-    padding: 5px;
-}
-table#mail-headers > tbody > tr > td:nth-child(1) {
-    text-align: right;
-}
-table#mail-headers > tbody > tr > td:nth-child(3) {
-    text-align: center;
-}
-table#mail-headers > tbody > tr > td:nth-child(6) {
-    text-align: right;
-}
-table#mail-headers > tbody > tr > td:nth-child(7) {
+  #login > h1 {
     text-align: center;
-}
-table#mail-headers > tbody > tr {
-    background-color: var(--color-table-row);
-}
-table#mail-headers > tbody > tr:nth-child(even) {
-    background-color: var(--color-background);
-}
-
-td#pag2 {
-    white-space: nowrap;
-}
-
-dl#show-head {
-    background-color: var(--color-background);
-}
+  }
 
-form#move-mail {
-    display: inline;
-}
-
-#pag2 > form {
-    display: inline;
-}
-
-td#navigation {
-    background-color: var(--color-background);
-}
-
-form#write-form > label {
-    display: block;
-}
-
-p#empty {
-    background-color: var(--color-table-em2);
-    padding: 25px 0 25px 1cm;
-    margin: 0;
-}
-nav#read-nav {
-    margin-top: 10px;
-}
-
-
-/* ANIMATIONS */
-.flash-fade {
-    animation-duration: 5s;
-    animation-name: fade;
-    animation-iteration-count: 1;
-    animation-fill-mode: forwards;
-}
-@keyframes fade {
-    0%   { opacity: 1; }
-    90%  { opacity: 1; }
-    100% { opacity: 0; display: none; }
-}
+  #login > form {
+    background-color: var(--jwm-color-front);
+    padding-top: 1rem;
+    padding-left: 6px;
+  }