Added style support for blockquotes and tables. Improved sizing according to device. Removed usage of logos (except for mine). Did some slight modifications to content of some pages. Removed drafts.

1 files changed, 127 insertions, 27 deletions

diff --git a/src/styles.css b/src/styles.css
index 30c21c1..ab43068 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -13,6 +13,7 @@
 }
 
 .header {
+  min-width: 716px;
   margin-top: 17px;
   text-align: center;
   font: 21px Arial;
@@ -33,6 +34,7 @@
 }
 
 .footer {
+  min-width: 716px;
   text-align: center;
   line-height: 39px;
   border-top: 5px solid var(--link-tab-bg-color);
@@ -45,39 +47,137 @@ a {
 }
 
 article {
-  margin-left: 25%;
-  margin-right: 25%;
+  min-width: 716px;
+  margin: 0;
+  overflow: auto;
+}
+
+@media (min-width: 760px) {
+  article {
+    margin-left: 5%;
+    margin-right: 5%;
+  }
+}
+
+@media (min-width: 960px) {
+  article {
+    margin-left: 10%;
+    margin-right: 10%;
+  }
+}
+
+@media (min-width: 1100px) {
+  article {
+    margin-left: 15%;
+    margin-right: 15%;
+  }
+}
+
+@media (min-width: 1300px) {
+  article {
+    margin-left: 20%;
+    margin-right: 20%;
+  }
+}
+
+@media (min-width: 1560px) {
+  article {
+    margin-left: 25%;
+    margin-right: 25%;
+  }
+}
+
+/* The following CSS is a slightly modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */
+
+code,
+pre {
+  font-family: monospace,monospace;
+  font-size: 1em;
 }
 
 code {
-  font: 12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
-  color: #52595d;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
+  padding: .2em .4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: rgba(27,31,35,.05);
   border-radius: 3px;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  border: 1px solid #ccc;
-  background-color: #f9f9f9;
-  padding: 0px 3px;
-  display: inline-block;
-  margin: 0px;
 }
 
 pre > code {
-  border: 1px solid #cacaca;
-  line-height: 1.2em;
-  font: 12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
-  padding: 10px;
-  overflow:auto;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
+  padding: 0;
+  margin: 0;
+  font-size: 100%;
+  word-break: normal;
+  white-space: pre;
+  background: transparent;
+  border: 0;
+}
+
+pre code {
+  display: inline;
+  max-width: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: initial;
+  border: 0;
+}
+
+pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: #f6f8fa;
   border-radius: 3px;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  background-color: #FAFAFB;
-  color: #393939;
-  margin: 0px;
+  margin: 0;
+  word-break: normal;
+  word-wrap: normal;
+}
+
+article > table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 100%;
+  overflow: auto;
+}
+
+article > table th {
+  font-weight: 600;
+}
+
+article > table td,
+article > table th {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+}
+
+article > table tr {
+  background-color: #fff;
+  border-top: 1px solid #c6cbd1;
+}
+
+article > table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+blockquote {
+  margin: 0;
+  margin-top: 0;
+  margin-bottom: 16px;
+  padding: 0 1em;
+  color: #6a737d;
+  border-left: .25em solid #dfe2e5;
+}
+
+blockquote > :first-child {
+  margin-top: 0;
+}
+
+blockquote > :last-child {
+  margin-bottom: 0;
 }