update cards

2 files changed, 75 insertions, 22 deletions

diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index c76476e2..488a35f2 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -27,6 +27,9 @@ img { border: 0; }
 html.desktop .content,
 html.mobile .content {
   opacity: 1;
+  margin-top: 50px;
+}
+html.mobile .content{
 }
 
 /* header */
@@ -172,7 +175,6 @@ footer a {
   display: inline-block;
   color: #aaa;
   transition: all 0.1s cubic-bezier(0,0,1,1);
-  border-bottom: 1px solid #555;
   padding-bottom: 1px;
   text-decoration: none;
 }
@@ -212,7 +214,7 @@ h1 {
   color: #eee;
   font-weight: 400;
   font-size: 34pt;
-  margin: 75px auto 10px auto;
+  margin: 20px auto 10px auto;
   padding: 0;
   transition: color 0.1s cubic-bezier(0,0,1,1);
   font-family: 'Roboto Mono', monospace;
@@ -333,7 +335,7 @@ th, .gray {
   padding-top: 28px;
   padding-bottom: 100px;
   min-height: calc(100vh - 55px);
-  line-height: 1.5;
+  line-height: 1.8;
 }
 section {
   width: 960px;
@@ -352,7 +354,7 @@ section {
 }
 section p {
   margin: 10px auto 20px auto;
-  line-height: 1.85rem;
+  line-height: 1.9rem;
   font-size: 17px;
   font-weight: 400;
   color: #cdcdcd;
@@ -403,6 +405,10 @@ p.subp{
   padding-bottom: 5px;
   line-height: 14px
 }
+.mobile .meta .gray {
+  font-size: 10px;
+  padding-bottom: 0px;
+}
 .right-sidebar {
   float: right;
   width: 200px;
@@ -430,6 +436,13 @@ p.subp{
 .left-sidebar .meta, .right-sidebar .meta {
   flex-direction: column;
 }
+.mobile .left-sidebar .meta, .right-sidebar .meta {
+  display: inline-block;
+  border-bottom: 1px solid #333;
+  padding:10px 10px 10px 0;
+  margin: 0 4px 4px 0;
+  color: #bbb;
+}
 .right-sidebar ul {
   margin-bottom: 10px;
   color: #aaa;
@@ -813,6 +826,7 @@ section.fullwidth .image {
 }
 .content .dataset-intro .first_paragraph {
   margin-top: 10px;
+  font-size: 18px;
 }
 
 /* intro - list of datasets */
@@ -820,7 +834,7 @@ section.fullwidth .image {
 .dataset-heading {
   /*background: #000;*/
   width: 100%;
-  padding: 10px;
+  padding: 0 25px;
 }
 .dataset-heading p{
   max-width: none;
@@ -836,34 +850,41 @@ section.fullwidth .image {
 }
 .dataset-list a {
   text-decoration: none;
-  transition: background-color 0.1s cubic-bezier(0,0,1,1);
-  background: black;
-  margin: 0 11px 11px 0;
-  border: 0;
+  transition: border 0.1s cubic-bezier(0,0,1,1);
+  margin: 0 11px 22px 0;
+  border: 1px solid #333;
+  border-radius: 4px;
 }
 .dataset-list .dataset {
   width: 300px;
-  padding: 10px;
+  padding: 12px;
   color: white;
   font-weight: 400;
   font-family: 'Roboto';
   position: relative;
-  background: black;
 }
 .dataset-list .dataset-image {
   background-size: cover;
-  width: 300px;
+  width: auto;
   height: 178px;
 }
 .desktop .content .dataset-list a {
-  border: none;
+  border: 1px solid #333;
+
 }
 .desktop .dataset-list a:hover {
-  border: none;
+  border: 1px solid #666;
 }
-
 .dataset-list .fields {
   font-size: 12px;
+  color: #ccc;
+}
+.dataset-list .dataset .title{
+  font-size: 16px;
+  line-height: 20px;
+  margin-bottom: 4px;
+  font-weight: 400;
+  display: block;
 }
 .dataset-list .fields div {
   display: block;
@@ -888,7 +909,7 @@ section.fullwidth .image {
   color: #fff;
   padding: 7px 11px;
   border-radius: 4px;
-  font-weight: 500;
+  font-weight: 400;
   font-size: 14px;
   cursor: pointer;
   user-select: none;
@@ -923,13 +944,14 @@ section.intro_section {
   width: 100%;
   background-size: cover;
   background-position: center left;
-  padding: 50px 0;
+  /*padding: 50px 0;*/
   min-height: 40vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #111111;
-  margin-bottom: 30px;
+  margin-bottom: 20px;
+  padding: 0;
 }
 .intro_section .inner {
   max-width: 960px;
@@ -942,6 +964,11 @@ section.intro_section {
   color: #ddd;
   font-weight: 400;
 }
+.mobile .intro_section .hero_desc{
+  font-size: 16px;
+  line-height: 32px;
+  margin-bottom: 20px;
+}
 .intro_section .hero_desc .dataset-name{
   color:#fff;
 }
@@ -952,6 +979,10 @@ section.intro_section {
   font-weight: 400;
   color: #ddd;
 }
+.mobile .intro_section .hero_subdesc {
+  font-size: 14px;
+  line-height: 28px;
+}
 .intro_section .hero_desc .bgpad {
   box-shadow: -10px -10px #181818, 10px -10px #181818, 10px 10px #181818, -10px 10px #181818;
   background: #181818;
@@ -960,6 +991,14 @@ section.intro_section {
   box-shadow: -10px -10px #181818, 10px -10px #181818, 10px 10px #181818, -10px 10px #181818;
   background: #181818;
 }
+.mobile .intro_section .hero_desc .bgpad {
+  box-shadow: -6px -6px #181818, 6px -6px #181818, 6px 6px #181818, -6px 6px #181818;
+  background: #181818;
+}
+.mobile .intro_section .hero_subdesc .bgpad {
+  box-shadow: -6px -6px #181818, 6px -6px #181818, 6px 6px #181818, -6px 6px #181818;
+  background: #181818;
+}
 
 
 .firefox .intro_section div > span {
diff --git a/site/assets/css/mobile.css b/site/assets/css/mobile.css
index 825a7012..124b9d42 100644
--- a/site/assets/css/mobile.css
+++ b/site/assets/css/mobile.css
@@ -48,7 +48,8 @@ softbr {
     flex-wrap: wrap;
   }
   h1 {
-    font-size: 34px;
+    font-size: 32px;
+    line-height: 44px;
   }
 
   /* MOBILE content */
@@ -74,13 +75,23 @@ softbr {
   }
   section {
     width: 100%;
-    padding: 0 10px;
+    padding: 0 25px;
+  }
+  section p{
+    font-size: 15px;
   }
   section.about-menu {
     padding: 0;
   }
+  .content-about .about-menu ul li{
+    font-size: 12px;
+  }
+  .content-about .team-member p{
+    font-size: 13px;
+    line-height: 26px;
+  }
   .content-about section:first-of-type > p:first-of-type {
-    font-size: 18px;
+    font-size: 16px;
     line-height: 30px;
   }
   .meta {
@@ -89,6 +100,7 @@ softbr {
   }
   .modal img {
     max-width: 100%;
+    display: block;
   }
   th {
     overflow: hidden;
@@ -119,7 +131,8 @@ softbr {
 
   .content-about .team-member {
     margin: 0 0 10px 0;
-    padding: 10px;
+    padding: 15px;
+    margin-bottom: 25px;
   }
   .page_name {
     display: none;
@@ -146,6 +159,7 @@ softbr {
   }
   .columns .column {
     margin: 0;
+    margin-bottom: 25px;
   }
   .columns-2 .column,
   .columns-3 .column,