Actually update css

1 files changed, 174 insertions, 94 deletions

diff --git a/docs/css/org.css b/docs/css/org.css
index af01257..ade4bcf 100644
--- a/docs/css/org.css
+++ b/docs/css/org.css
@@ -1,8 +1,7 @@
 body {
-    width: 95%;
     font-size: 14px;
-    margin: 2% auto;
     font-family: "Alegreya", serif;
+    margin: 0;
     color: #333;
     background-color: #fdf6e3;
 }
@@ -15,86 +14,32 @@ body {
   background-color: #A5573E;
 }
 
-@media screen and (min-width: 600px) {
-    body {
-        font-size: 18px;
-    }
+.logo {
+    text-align: center;
 }
 
-@media screen and (min-width: 1200px) {
-    body {
-        margin: 2% 0;
-        margin-left: 27rem;
-    }
-
-    #left-bar {
-        position: fixed;
-        left: 0px;
-        top: 0px;
-        padding: 25px;
-        width: 20rem;
-        height: 100%;
-        background-color: #A5573E;
-    }
-
-    .logo {
-        text-align: center;
-        position: relative;
-    }
-
-    .logo > a {
-        color: #fdf6e3;
-        font-size: 5rem;
-        font-weight: bold;
-        text-decoration: none;
-    }
-
-    .logo > a:hover {
-        border-bottom: none;
-    }
-
-    #navbar {
-        text-align: center;
-        position: relative;
-    }
-
-    #navbar > span {
-        padding: 0 1em;
-    }
-
-    #navbar > span > a {
-        color: #fdf6e3;
-        font-size: 1.5rem;
-        font-weight: bold;
-    }
-
-    #navbar > span > a:hover {
-        border-bottom: none;
-        color: #003355;
-    }
+.logo > a {
+    color: #fdf6e3;
+    font-weight: bold;
+    text-decoration: none;
+}
 
-    a.toc-link {
-        color: #fdf6e3;
-    }
+.logo > a:hover {
+    border-bottom: none;
+}
 
-    header p {
-        color: #fdf6e3;
-        line-height: 1.3;
-    }
+#navbar {
+    text-align: center;
+}
 
-    #postamble {
-        float: left;
-        position: fixed;
-        left: 50px;
-        bottom: 0;
-        max-width: 20rem;
-    }
+#navbar > span > a {
+    color: #fdf6e3;
+    font-weight: bold;
 }
 
-@media screen and (min-width: 810px) {
-    body {
-        max-width: 800px;
-    }
+#navbar > span > a:hover {
+    border-bottom: none;
+    color: #003355;
 }
 
 ::selection {
@@ -204,24 +149,6 @@ h4,h5,h6 {
     font-size: 1em;
 }
 
-@media screen and (min-width: 600px) {
-    h1 {
-        font-size: 2em;
-    }
-    h2 {
-        font-size: 1.5em;
-    }
-    h3 {
-        font-size: 1.3em;
-    }
-    h1,h2,h3 {
-        line-height: 1.4em;
-    }
-    h4,h5,h6 {
-        font-size: 1.1em;
-    }
-}
-
 dt {
     font-weight: bold;
 }
@@ -683,9 +610,162 @@ p.verse {
 
 }
 
-@media screen and (min-width: 600px) {
+@media screen and (max-width: 699px) {
+
+    body {
+        font-size: 18px;
+    }
+
+    #content {
+        width: 90%;
+        margin: 0 auto;
+    }
+
+    header p {
+        display: none;
+    }
+
+    #toc {
+        display: none;
+    }
+
+    #left-bar {
+        width: 100%;
+        height: 3rem;
+        background-color: #A5573E;
+    }
+
+    .logo {
+        float: left;
+        margin: 0 0.3em;
+        font-size: 2em;
+    }
+
+    #navbar {
+        float: right;
+        margin: 1em 0.5em;
+    }
+
+    #navbar > span {
+        margin: 0 0.2em;
+    }
+
+    h1 {
+        font-size: 2em;
+    }
+
+    h2 {
+        font-size: 1.5em;
+    }
+
+    h3 {
+        font-size: 1.3em;
+    }
+
+    h1,h2,h3 {
+        line-height: 1.4em;
+    }
+
+    h4,h5,h6 {
+        font-size: 1.1em;
+    }
+
     .creator {
         display: inline;
         float: right;
     }
 }
+
+@media screen and (min-width: 700px) and (max-width: 1049px) {
+    body {
+        max-width: 700px;
+        margin-left: 15rem;
+        margin-right: 2.5rem;
+    }
+
+    #left-bar {
+        position: fixed;
+        left: 0px;
+        top: 0px;
+        padding: 1rem;
+        width: 10rem;
+        height: 100%;
+        background-color: #A5573E;
+    }
+
+    .logo {
+        font-size: 3.5em;
+    }
+
+    #navbar > span {
+        padding: 0 1em;
+    }
+
+    #navbar > span > a {
+        font-size: 1.5em;
+    }
+
+    a.toc-link {
+        color: #fdf6e3;
+    }
+
+    header p {
+        color: #fdf6e3;
+        line-height: 1.3;
+    }
+
+    #postamble {
+        float: left;
+        position: fixed;
+        left: 50px;
+        bottom: 0;
+        max-width: 20rem;
+    }
+}
+
+@media screen and (min-width: 1050px) {
+    body {
+        max-width: 700px;
+        margin-left: 20rem;
+        margin-right: 2.5rem;
+    }
+
+    #left-bar {
+        position: fixed;
+        left: 0px;
+        top: 0px;
+        padding: 1.5rem;
+        width: 15rem;
+        height: 100%;
+        background-color: #A5573E;
+    }
+
+    .logo {
+        font-size: 4rem;
+    }
+
+    #navbar > span {
+        padding: 0 1em;
+    }
+
+    #navbar > span > a {
+        font-size: 1.5rem;
+    }
+
+    a.toc-link {
+        color: #fdf6e3;
+    }
+
+    header p {
+        color: #fdf6e3;
+        line-height: 1.3;
+    }
+
+    #postamble {
+        float: left;
+        position: fixed;
+        left: 50px;
+        bottom: 0;
+        max-width: 20rem;
+    }
+}