Update design

1 files changed, 15 insertions, 140 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 2a35a63..8b1d921 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,163 +1,38 @@
-* {
-  margin: 0;
-  padding: 0;
+h1 canvas {
+  width: 64px;
+  height: 64px;
+  display: inline-block;
+  background-color: gainsboro;
 }
 
-body {
-  background-image: url('/images/header_background.png');
-  background-size: auto 300px;
-  background-attachment: fixed;
-  line-height: 1.45em;
-
-  font-family: Times, 'Times New Roman', serif;
-}
-
-header {
-  background-image: url('/images/header_foreground.png');
-  background-repeat: no-repeat;
-  background-size: auto 300px;
-  height: 300px;
-}
-
-header a {
-  color: transparent;
-  display: block;
-  max-height: 500px;
-}
-
-main {
-  background-color: white;
-  padding: 1.414em 4.53em;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-}
-
-h1, h2, h3 {
-  font-weight: 400;
-  width: 100%;
-}
-h1 {
-  font-size: 2rem;
-  line-height: 1.05em;
-  max-width: 30rem;
-  margin: 0.5em 0 0.5em;
-  text-transform: uppercase;
-}
-h2, h3 {
-  max-width: 30rem;
-  font-size: 1rem;
-  margin: 2em 0;
+ul {
+  list-style: square;
 }
 
-h2 { font-variant: small-caps; }
-h3 { font-style: italic; }
-
-ul, ol, img {
-  width: 100%;
-  margin: 1.414em 0;
+h1, h2, h3, h4, p, ul {
   max-width: 30em;
 }
 
 p {
-  max-width: 30em;
-  text-align: justify;
-  text-indent: 1.5em;
-}
-
-hr + p,
-h1 + p,
-h2 + p,
-h3 + p {
-  text-indent: 0;
-}
-
-ul, ol { margin-left: 1.414em; }
-
-code {
-  background-color: whitesmoke;
-  padding: 0.2em 0.5em;
-}
-
-pre {
-  background-color: whitesmoke;
-  padding: 1em;
-  font-size: 1.231em;
-  max-width: 30em;
-  margin: 1.414em 0 1.414em -1em;
-}
-
-hr {
-  border: 0;
-  border-bottom: 1px solid #666;
-  width: 30em;
-  margin: 1.414em 0;
-}
-
-hr.separator {
-  width: 100%;
-  border-bottom: 10px solid #666;
-}
-
-footer,
-footer a {
-  color: #fff;
-  background-color: blue;
-}
-footer p {
-  font-family: arial, sans-serif;
-  text-align: left;
-  text-indent: 0;
-  padding: 1.414em;
-}
-
-/* Image and caption sttyles */
-
-p img {
-  margin-left: -1.125em;
-}
-
-hr + p img,
-h1 + p img,
-h2 + p img,
-h3 + p img {
-  margin-left: 0;
+  font-size: 1.125em;
 }
 
 img {
-  width: 100%;
-  max-width: 30em;
-}
-
-img + em {
-  color: #999;
-  display: block;
-  margin: -1.414em 0 1.414em;
-  text-align: right;
+  max-width: 100%;
 }
 
-/* Dark Mode Support */
-
 @media (prefers-color-scheme: dark) {
-  main {
-    background-color: black;
+  body {
     color: white;
-  }
-
-  code,
-  pre {
-    background-color: #444;
+    background-color: black;
   }
 
   a {
-    color: #53FFFF;
+    color: #5dc1fd;
   }
 
   a:visited {
-    color: #FF55FF;
-  }
-
-  hr.separator {
-    border-bottom: 10px solid #999;
+    color: #ed6eff;
   }
 }
+