From 276c16e1055c23350abd3d9d071cfce9b4f1b27f Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 4 Jan 2019 23:37:34 +0100
Subject: rm rotation on homepage, add dataset list

---
 site/assets/css/css.css | 68 +++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 55 insertions(+), 13 deletions(-)

(limited to 'site/assets/css/css.css')

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
-- 
cgit v1.2.3-70-g09d2