Basic Style and Fonts

assets/css/main.css

@@ -1,22 +1,106 @@
+@import url('/css/fonts.css');
+
+:root {
+  --bg-color: #fff;
+  --text-color: #2d3436;
+  --text-highlight: #00b894;
+  --text-highlight-secondary: #16a085;
+  --table-header: #ecf0f1;
+  --table-gridlines: #bdc3c7;
+  --table-gridlines-secondary: #000;
+}
+
+html {
+  display: flex;
+  justify-content: center;
+}
+
 body {
-  color: #222;
-  font-family: sans-serif;
+  color: var(--text-color);
+  background-color: var(--bg-color);
+  font-family: 'Noto Sans';
   line-height: 1.5;
+  text-align: justify;
   margin: 1rem;
+  width: 100%;
   max-width: 768px;
 }
 
 header {
-  border-bottom: 1px solid #222;
   margin-bottom: 1rem;
 }
 
 footer {
-  border-top: 1px solid #222;
   margin-top: 1rem;
 }
 
 a {
-  color: #00e;
+  color: var(--text-highlight);
   text-decoration: none;
 }
+
+nav {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+nav > ul {
+  margin: 0;
+  padding: 0.5rem 0 0.5rem 0;
+  list-style: none;
+  display: flex;
+  background-color: var(--text-highlight-secondary);
+}
+
+nav > ul > li > a {
+  padding: 0.5rem;
+  border-right: var(--text-highlight-secondary) 2px solid;
+  background-color: var(--text-highlight);
+  color: var(--bg-color);
+}
+
+nav > ul > li > a:hover {
+  background-color: var(--text-highlight-secondary);
+}
+
+/* Code */
+
+code { font-family: 'IBM Plex Mono', monospace; }
+
+div.highlight pre {
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+}
+
+/* Tables */
+
+table { 
+  display: block;
+  overflow-x: auto; 
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+thead > tr > th {
+  background-color: var(--table-header);
+  border: var(--table-gridlines) 2px solid;
+  border-bottom: var(--table-gridlines-secondary) 2px solid;
+  border-top: 0;
+  text-align: center;
+  padding: 0.5rem;
+}
+
+tbody > tr > td {
+  border: var(--table-gridlines) 2px solid;
+  padding: 0.5rem;
+}
+
+td:first-child,
+th:first-child {
+  border-left: none;
+}
+
+td:last-child,
+th:last-child {
+  border-right: none;
+}