Fix styling

1 files changed, 85 insertions, 60 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 55167ef..8c7f075 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,5 +1,6 @@
 /* Basic */
 html {
+    font-size: 1.25rem;
     /* 1 */
     -ms-text-size-adjust: 100%;
     /* 2 */
@@ -26,7 +27,6 @@ html {
 
 body {
     margin: 0;
-    font-size: 1.2em;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
     color: var(--font-color);
@@ -128,7 +128,6 @@ pre {
 code,
 pre {
     font-family: monospace, monospace;
-    font-size: 1rem;
 }
 
 kbd {
@@ -171,11 +170,11 @@ hr {
 
 header {
     margin-top: 1em;
+    font-size: 1.25em;
 }
 
 header .site-title {
     color: var(--font-color);
-    font-size: 1em;
     margin-bottom: 0;
     font-weight: normal;
 }
@@ -289,7 +288,7 @@ h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visit
     margin-left: 1em;
 }
 
-article img {
+main img, article img {
     max-width: 100%;
     display: block;
     height: auto;
@@ -299,7 +298,6 @@ article img {
 article figcaption {
     color: grey;
     text-align: center;
-    font-size: 0.85em;
     margin-bottom: 2em;
 }
 
@@ -312,7 +310,7 @@ article figcaption {
     list-style: none;
     padding: 0;
     display: inline;
-    font-size: 14px;
+    font-size: 0.8rem;
 }
 
 .post-translations > li {
@@ -401,22 +399,54 @@ ul.language-select > li, ul.footer-menu > li {
         display: none;
     }
 }
+.container > #left {
+    grid-area: left;
+}
+.container > main {
+    grid-area: main;
+}
+.container > #right {
+    grid-area: right;
+}
 @media (min-width: 780px) {
-
     #toc {
         position: sticky;
         top: 10px;
     }
+    main {
+        max-width: 60vw;
+    }
     .container {
         display: grid;
-        grid-template-columns: 1fr 4fr 1fr;
-        grid-gap: 2rem;
+        grid-template-areas:
+            "left main main"
+            "left main main"
+            "right right right";
+        grid-gap: 5vw;
     }
     .common-footer-bottom {
         display: grid;
         grid-template-columns: 1fr 1fr;
     }
 }
+@media (700px < width < 1200px) {
+    #right div.articles {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-gap: 1.5rem;
+    }
+}
+
+@media (min-width: 1200px) {
+    .container {
+        display: grid;
+        grid-template-areas:
+            "left main right"
+            "left main right";
+        grid-template-columns: 1fr 3fr 1fr;
+        grid-gap: 5vw;
+    }
+}
 
 @media (max-width: 500px) {
     table.social-icons .inline-svg {
@@ -445,125 +475,120 @@ ul.language-select > li, ul.footer-menu > li {
 
 /* Webring---doesn't make sense if you don't use openring */
 
-.webring {
-  margin-top: 2rem;
-}
-
 .webring h2 {
-  font-size: 1.2rem;
+    font-size: 1.2rem;
 }
 
 .webring .articles {
-  width: 95%;
+    width: 95%;
 }
 
 .webring .title {
-  margin: 0;
+    margin: 0;
 }
 
 .webring .article {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid #333;
-  margin: 0.5rem 0;
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #333;
+    margin: 0.5rem 0;
 }
 
 @media (max-width: 640px) {
-  .webring .article {
-    margin: 0.5rem 0;
-  }
+    .webring .article {
+        margin: 0.5rem 0;
+    }
 }
 
 .webring .article:first-child {
-  margin-left: 0;
+    margin-left: 0;
 }
 
 .webring .article:last-child {
-  margin-right: 0;
+    margin-right: 0;
 }
 
 .webring .summary {
-  font-size: 1rem;
-  flex: 1 1 0;
+    flex: 1 1 0;
 }
 
 .webring .attribution {
-  float: right;
-  font-size: 0.8rem;
-  color: #555;
-  line-height: 3;
+    float: right;
+    font-size: 0.8rem;
+    color: #555;
+    line-height: 3;
 }
 
 dl dt {
-  font-weight: bold;
+    font-weight: bold;
 }
 dl dd {
-  text-indent: 1em;
+    text-indent: 1em;
 }
 
 /* Book data format */
 
 dl.data {
-  border: 3px double #ccc;
-  padding: 0.5em;
+    border: 3px double #ccc;
+    padding: 0.5em;
 }
 dl.data dt {
-  float: left;
-  clear: left;
-  max-width: 40%;
-  text-align: right;
-  font-weight: bold;
+    float: left;
+    clear: left;
+    max-width: 40%;
+    text-align: right;
+    font-weight: bold;
 }
 dl.data dd {
-  margin: 0 0 0 110px;
-  padding: 0 0 0.5em 0;
+    margin: 0 0 0 110px;
+    padding: 0 0 0.5em 0;
 }
 
 .text-red {
-  color: var(--red);
+    color: var(--red);
 }
 
 .text-green {
-  color: var(--green);
+    color: var(--green);
 }
 
 details {
-  margin-top: 1em;
-  margin-bottom: 1em;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  padding: .5em .5em 0;
+    margin-top: 1em;
+    margin-bottom: 1em;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    padding: .5em .5em 0;
 }
 
 summary {
-  font-weight: bold;
-  margin: -.5em -.5em 0;
-  padding: .5em;
+    font-weight: bold;
+    margin: -.5em -.5em 0;
+    padding: .5em;
 }
 
 details[open] {
-  padding: .5em;
+    padding: .5em;
 }
 
 details[open] summary {
-  border-bottom: 1px solid #aaa;
-  margin-bottom: .5em;
+    border-bottom: 1px solid #aaa;
+    margin-bottom: .5em;
 }
 
 a.site-title::before {
-  content: "[";
+    content: "[";
 }
 
 a.site-title::after {
-  content: "]";
+    content: "]";
 }
 
 a.prev-link::before {
-  content: "← ";
+    content: "← ";
 }
 
 a.next-link.float {
-  float: right;
+    float: right;
 }
 
 a.random-link::before {
@@ -571,5 +596,5 @@ a.random-link::before {
 }
 
 a.next-link::after {
-  content: " →";
+    content: " →";
 }