1 files changed, 170 insertions, 22 deletions

diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index 7544fd9d..ab3bb4a7 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -1,22 +1,23 @@
-* { box-sizing: border-box; outline: 0; }
+da* { box-sizing: border-box; outline: 0; }
 html, body {
   margin: 0;
   padding: 0;
   width: 100%;
   min-height: 100%;
-  font-family: 'Roboto', sans-serif;
-  color: #b8b8b8;
+  font-family: 'Roboto Mono', sans-serif;
+  color: #eee;
   overflow-x: hidden;
 }
 html {
-  background: #191919;
+  background: #181818;
 }
 
 .content {
   opacity: 0;
   transition: opacity 0.2s cubic-bezier(0,1,1,1);
 }
-html.desktop .content, html.mobile .content {
+html.desktop .content,
+html.mobile .content {
   opacity: 1;
 }
 
@@ -28,7 +29,7 @@ header {
   left: 0;
   width: 100%;
   height: 70px;
-  z-index: 2;
+  z-index: 9999;
   background: #1e1e1e;
   display: flex;
   flex-direction: row;
@@ -53,8 +54,10 @@ header .logo {
   height: 30px;
 }
 header .site_name {
+  font-family: 'Roboto', sans-serif;
   font-weight: bold;
   color: #fff;
+  font-size: 14px;
 }
 header .sub {
   margin-left: 4px;
@@ -109,12 +112,19 @@ footer {
   justify-content: space-between;
   color: #888;
   font-size: 9pt;
-  padding: 20px 75px 20px;
+  padding: 20px 0 20px;
+  font-family: "Roboto", sans-serif;
 }
 footer > div {
   display: flex;
   flex-direction: row;
 }
+footer > div:nth-child(1) {
+  padding-left: 75px;
+}
+footer > div:nth-child(2) {
+  padding-right: 75px;
+}
 footer a {
   display: inline-block;
   color: #888;
@@ -145,8 +155,8 @@ h2 {
 }
 h3 {
   margin: 0 0 20px 0;
-  padding: 0;
-  font-size: 11pt;
+  padding: 20px 0 0 0;
+  font-size: 14pt;
   font-weight: 500;
   transition: color 0.2s cubic-bezier(0,0,1,1);
 }
@@ -165,8 +175,17 @@ h4 {
   color: #fff;
   text-decoration: underline;
 }
+.right-sidebar h3 {
+  margin: 0;
+  padding: 0 0 10px 0;
+  font-family: 'Roboto Mono';
+  font-weight: 400;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
 
-th, .gray, h3, h4 {
+th, .gray {
   font-family: 'Roboto Mono', monospace;
   font-weight: 400;
   text-transform: uppercase;
@@ -185,7 +204,7 @@ th, .gray {
   line-height: 1.5;
 }
 section {
-  width: 640px;
+  width: 960px;
   margin: 0 auto;
 }
 .home section {
@@ -201,13 +220,18 @@ section {
 }
 p {
   margin: 0 0 20px 0;
+  line-height: 2;
+  font-size: 15px;
+  font-weight: 400;
 }
 .content a {
-  color: #ddd;
+  color: #fff;
+  text-decoration: none;
+  border-bottom: 1px dashed;
   transition: color 0.2s cubic-bezier(0,0,1,1);
 }
-.content a:hover {
-  color: #fff;
+.desktop .content a:hover {
+  color: #ff8;
 }
 
 /* top of post metadata */
@@ -219,6 +243,7 @@ p {
   align-items: flex-start;
   font-size: 10pt;
   margin-bottom: 20px;
+  font-family: 'Roboto', sans-serif;
 }
 .meta > div {
   margin-right: 30px;
@@ -229,10 +254,13 @@ p {
 }
 .right-sidebar {
   float: right;
-  width: 200px;
+  width: 240px;
   margin-left: 20px;
+  padding-top: 10px;
   padding-left: 20px;
   border-left: 1px solid #444;
+  font-family: 'Roboto';
+  font-size: 14px;
 }
 .right-sidebar .meta {
   flex-direction: column;
@@ -240,6 +268,14 @@ p {
 .right-sidebar .meta > div {
   margin-bottom: 10px;
 }
+.right-sidebar ul {
+  margin-bottom: 10px;
+  color: #aaa;
+}
+.right-sidebar ul:first-child a {
+  text-decoration: none;
+  border-bottom: 1px solid;
+}
 
 /* lists */
 
@@ -251,6 +287,7 @@ ul {
 ul li {
   margin-bottom: 8px;
 }
+
 /* misc formatting */
 
 code {
@@ -267,7 +304,7 @@ pre {
 pre code {
   display: block;
   max-height: 400px;
-  max-width: 640px;
+  max-width: 960px;
   overflow: scroll;
   padding: 4px 10px;
 }
@@ -318,6 +355,7 @@ section.images {
   flex-direction: row;
   align-items: flex-start;
   justify-content: center;
+  clear: both;
 }
 .image:only-child {
   width: 100%;
@@ -350,11 +388,24 @@ section.fullwidth .image {
   max-width: 100%;
 }
 .caption {
-  text-align: center;
+  text-align: left;
   font-size: 9pt;
-  color: #888;
-  max-width: 620px;
+  color: #999;
+  max-width: 960px;
   margin: 10px auto 0 auto;
+  font-family: 'Roboto';
+}
+.sideimage {
+  margin: 10px 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.sideimage img {
+  margin-right: 10px;
+  width: 200px;
+  height: 200px;
 }
 
 /* blog index */
@@ -416,7 +467,7 @@ section.fullwidth .image {
   font-size: 26px;
 }
 .intro {
-  max-width: 640px;
+  max-width: 960px;
   padding: 75px 0 75px 10px;
   z-index: 1;
 }
@@ -481,7 +532,8 @@ section.fullwidth .image {
   text-decoration: none;
   transition: background-color 0.1s cubic-bezier(0,0,1,1);
   background: black;
-  margin: 0 20px 20px 0;
+  margin: 0 11px 11px 0;
+  border: 0;
 }
 .dataset-list .dataset {
   width: 220px;
@@ -496,4 +548,100 @@ section.fullwidth .image {
 .desktop .dataset-list a:nth-child(3n+2):hover { background-color: rgba(255, 128, 0, 0.2); }
 
 .dataset-list a:nth-child(3n+3) { background-color: rgba(255, 255, 0, 0.1); }
-.desktop .dataset-list .dataset:nth-child(3n+3):hover { background-color: rgba(255, 255, 0, 0.2); }
+.desktop .dataset-list a:nth-child(3n+3):hover { background-color: rgba(255, 255, 0, 0.2); }
+
+.dataset-list span {
+  box-shadow: -3px -3px #181818, 3px -3px #181818, -3px 3px #181818, 3px 3px #181818;
+  background-color: #181818;
+  box-decoration-break: clone;
+}
+
+/* intro section for datasets */
+
+section.intro_section {
+  font-family: 'Roboto Mono';
+  width: 100%;
+  background-size: cover;
+  background-position: bottom left;
+  padding: 50px 0;
+  min-height: 60vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #111111;
+}
+.intro_section .inner {
+  max-width: 960px;
+  margin: 0 auto;
+}
+.intro_section .hero_desc {
+  font-size: 38px;
+  line-height: 60px;
+  margin-bottom: 30px;
+  color: #ddd;
+  font-weight: 300;
+}
+.intro_section .hero_subdesc {
+  font-size: 18px;
+  line-height: 36px;
+  max-width: 640px;
+  font-weight: 300;
+  color: #ddd;
+}
+.intro_section div > span {
+  box-shadow: -10px -10px #181818, 10px -10px #181818, 10px 10px #181818, -10px 10px #181818;
+  background: #181818;
+}
+.firefox .intro_section div > span {
+  box-decoration-break: clone;
+}
+
+/* footnotes */
+
+a.footnote {
+  font-size: 10px;
+  position: relative;
+  display: inline-block;
+  bottom: 10px;
+  text-decoration: none;
+  color: #ff8;
+  border: 0;
+  left: 2px;
+  transition-duration: 0s;
+}
+a.footnote_shim {
+  display: inline-block;
+  width: 1px; height: 1px;
+  overflow: hidden;
+  position: relative;
+  top: -90px;
+  visibility: hidden;
+}
+.right-sidebar a.footnote {
+  bottom: 8px;
+}
+.desktop a.footnote:hover {
+  background-color: #ff8;
+  color: #000;
+}
+.backlinks {
+  margin-right: 10px;
+}
+.content .backlinks a {
+  color: #ff8;
+  font-size: 10px;
+  text-decoration: none;
+  border: 0;
+  font-weight: bold;
+  position: relative;
+  bottom: 5px;
+  margin-right: 2px;
+}
+ul.footnotes {
+  list-style-type: decimal;
+  margin-left: 30px;
+}
+li p {
+  margin: 0; padding: 0;
+  display: inline;
+}
\ No newline at end of file