rm rotation on homepage, add dataset list

2 files changed, 78 insertions, 14 deletions

diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css
index 315d72e0..9c37354a 100644
--- a/site/assets/css/applets.css
+++ b/site/assets/css/applets.css
@@ -65,12 +65,17 @@
 }
 .cta {
   padding-left: 20px;
-  font-size: 11pt;
+  font-size: 10pt;
 }
 .cta ol {
   margin: 0;
   padding: 0 0 20px 20px;
 }
+
+.searchContainer {
+  padding-top: 20px;
+}
+
 .uploadContainer > div {
   position: relative;
   width: 300px;
@@ -98,3 +103,20 @@
 .uploadContainer img {
   max-width: 40px;
 }
+
+
+/* tabulator */
+
+.tabulator-row {
+  transition: background-color 100ms cubic-bezier(0,0,1,1);
+  background-color: rgba(255,255,255,0.0);
+}
+.desktop .tabulator-row:hover {
+  background-color: rgba(255,255,255,0.2);
+}
+.tabulator-row.tabulator-row-odd {
+  background-color: rgba(255,255,255,0.05);
+}
+.tabulator-row.tabulator-row-even {
+  background-color: rgba(255,255,255,0.1);
+}
\ No newline at end of file
diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index 003ac4a3..7e354a4c 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -1,4 +1,4 @@
-* { box-sizing: border-box; }
+* { box-sizing: border-box; outline: 0; }
 html, body {
   margin: 0;
   padding: 0;
@@ -27,7 +27,7 @@ header {
   left: 0;
   width: 100%;
   height: 70px;
-  z-index: 1;
+  z-index: 2;
   background: #1e1e1e;
   display: flex;
   flex-direction: row;
@@ -44,11 +44,11 @@ header .slogan {
 }
 header .logo {
   background-image: url(../img/megapixels_logo_white.svg);
-  background-size: cover;
+  background-size: contain;
   background-repeat: no-repeat;
   margin-top: 7px;
-  margin-right: 14px;
-  width: 49px;
+  margin-right: 10px;
+  width: 39px;
   height: 30px;
 }
 header .site_name {
@@ -175,13 +175,16 @@ th, .gray {
   line-height: 1.5;
 }
 section {
-  width: 640px;
+  width: 960px;
   margin: 0 auto;
 }
 .content .first_paragraph {
   font-weight: 300;
-  font-size: 18pt;
-  color: #ccc;
+  font-size: 16pt;
+  color: #ddd;
+  margin-bottom: 50px;
+  margin-top: 30px;
+  line-height: 36px;
 }
 p {
   margin: 0 0 20px 0;
@@ -212,6 +215,16 @@ p {
   padding-bottom: 4px;
 }
 
+/* lists */
+
+ul {
+  list-style-type: none;
+  margin: 0 0 30px 0;
+  padding: 0;
+}
+ul li {
+  margin-bottom: 8px;
+}
 /* misc formatting */
 
 code {
@@ -368,18 +381,19 @@ section.wide .image {
 }
 .intro .headline {
   font-family: 'Roboto Mono', monospace;
-  font-size: 16pt;  
+  font-size: 28pt;
+  line-height: 40pt;
 }
 .intro .buttons {
   margin: 40px 0;
 }
 .intro button {
   font-family: 'Roboto', sans-serif;
-  padding: 8px 12px;
-  border-radius: 6px;
+  padding: 15px 20px;
+  border-radius: 8px;
   border: 1px solid transparent;
   cursor: pointer;
-  font-size: 11pt;
+  font-size: 12pt;
   margin-right: 10px;
   transition: color 0.1s cubic-bezier(0,0,1,1), background-color 0.1s cubic-bezier(0,0,1,1);
 }
@@ -406,4 +420,32 @@ section.wide .image {
 }
 .desktop .intro .under a:hover {
   color: #fff;
-}
\ No newline at end of file
+}
+
+/* intro - list of datasets */
+
+.dataset-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.dataset-list a {
+  text-decoration: none;
+  transition: background-color 0.1s cubic-bezier(0,0,1,1);
+  background: black;
+  margin: 0 20px 20px 0;
+}
+.dataset-list .dataset {
+  width: 220px;
+  height: 140px;
+  padding: 10px;
+  color: white;
+}
+.dataset-list a:nth-child(3n+1) { background-color: rgba(255, 0, 0, 0.1); }
+.desktop .dataset-list a:nth-child(3n+1):hover { background-color: rgba(255, 0, 0, 0.2); }
+
+.dataset-list a:nth-child(3n+2) { background-color: rgba(255, 128, 0, 0.1); }
+.desktop .dataset-list a:nth-child(3n+2):hover { background-color: rgba(255, 128, 0, 0.2); }
+
+.dataset-list .dataset: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); }
\ No newline at end of file