css

48 files changed, 152 insertions, 53 deletions

diff --git a/client/datasetList/datasetList.container.js b/client/datasetList/datasetList.container.js
index f9b2c3b4..37749f11 100644
--- a/client/datasetList/datasetList.container.js
+++ b/client/datasetList/datasetList.container.js
@@ -17,7 +17,7 @@ const sortOptions = [
   { field: 'title', title: 'Name', type: 'string' },
   { field: 'year', title: 'Year', type: 'number' },
   { field: 'purpose', title: 'Purpose', type: 'string' },
-  { field: 'images', title: 'Images', type: 'number', reversed: true },
+  // { field: 'images', title: 'Images', type: 'number', reversed: true },
 ]
 
 class DatasetListContainer extends Component {
diff --git a/client/map/index.js b/client/map/index.js
index 4492a69a..af1c504e 100644
--- a/client/map/index.js
+++ b/client/map/index.js
@@ -103,10 +103,11 @@ class Map {
         this.el.removeChild(mapCover)
       }
     })
-    mapCover.querySelector('div').addEventListener('touchstart', (e) => {
-      e.preventDefault()
+    mapCover.querySelector('div').addEventListener('touchstart', e => {
+      e.stopPropagation()
     })
-    mapCover.querySelector('div').addEventListener('tap', () => {
+    mapCover.querySelector('div').addEventListener('tap', e => {
+      e.stopPropagation()
       this.map.scrollWheelZoom.enable()
       if (mapCover.parentNode === this.el) {
         this.el.removeChild(mapCover)
diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index 6e102c05..8c47e980 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -72,23 +72,25 @@ header .site_name {
   line-height: 11px;
   letter-spacing: 3px;
 }
-header .splash{
+header .page_name {
   font-size: 22px;
   font-weight: 400;
   color: #eee;
-  /*padding-left: 8px;*/
   opacity: 0;
   transition: 0.3s opacity cubic-bezier(0,0,1,1);
   margin-left:18px;
-  /*line-height: 22px;*/
 }
-.scrolled header .splash {
+.scrolled header .page_name {
   opacity: 1;
 }
-header .links{
+header .links {
   font-size: 18px;
   line-height: 18px;
 }
+.home header .links a {
+  background-color: rgba(0,0,0,0.9);
+  padding: 3px;
+}
 header .sub {
   margin-left: 4px;
   margin-top: 2px;
@@ -123,18 +125,18 @@ header .links a {
 }
 header .links a.active {
   color: #fff;
-  border-bottom: 2px solid rgba(255,255,255,255);
+  border-bottom: 2px solid rgba(255,255,255,1);
 }
 .desktop header .links a:hover {
   color: #fff;
-  border-bottom: 2px solid rgba(255,255,255,255);
+  border-bottom: 2px solid rgba(255,255,255,1);
 }
 .desktop header .links a.active:hover {
   color: #fff;
-  border-bottom: 2px solid rgba(255,255,255,255);
+  border-bottom: 2px solid rgba(255,255,255,1);
 }
-header .links.splash{
-  font-size:22px;
+header .links.splash {
+  font-size: 22px;
   font-weight: 400;
 }
 
@@ -165,32 +167,32 @@ footer > div:nth-child(2) {
 footer a {
   display: inline-block;
   color: #ccc;
-  transition: color 0.1s cubic-bezier(0,0,1,1);
-  border-bottom:1px solid #555;
+  transition: all 0.1s cubic-bezier(0,0,1,1);
+  border-bottom: 1px solid #555;
   padding-bottom: 1px;
   text-decoration: none;
 }
-
-footer a:hover {
-  color: #ccc;
+.desktop footer a:hover {
+  color: #fff;
   border-bottom:1px solid #999;
 }
 footer ul {
-  margin:0;
+  margin: 0;
 }
 footer div {
   color: #888;
   font-size: 12px;
 }
 footer ul li:last-child {
-  margin-right:0px;
+  margin-right: 0px;
 }
-footer div:first-child a {
+footer div:first-child > a {
   margin-right: 5px;
 }
 .desktop footer a:hover {
   color: #fff;
 }
+
 /* headings */
 
 h1 {
@@ -266,6 +268,36 @@ th, .gray {
   font-size: 9pt;
 }
 
+/* splash teaser */
+
+.teaser {
+  position: absolute;
+  top: 50%;
+  left: 25%;
+  transform: translateY(-50%);
+}
+.teaser b {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+  color: #fff;
+  font-size: 40px;
+  display: block;
+}
+.teaser tt {
+  font-family: 'Roboto Mono', monospace;
+  color: #ddd;
+  font-size: 16px;
+  display: block;
+  max-width: 400px;
+}
+.teaser .btn {
+  color: #ddd;
+  background: #444;
+  padding: 5px 10px;
+  font-size: 20px;
+  border-radius: 4px;
+}
+
 /* content */
 
 .content {
diff --git a/site/assets/css/mobile.css b/site/assets/css/mobile.css
index 6a742277..d6ded8d6 100644
--- a/site/assets/css/mobile.css
+++ b/site/assets/css/mobile.css
@@ -1,7 +1,17 @@
 /* MOBILE - iphone/ipad css */
 
+softbr {
+  display: none;
+}
+
 @media all and (max-device-width: 1024px) {
+  softbr {
+    display: block;
+    height: 10px;
+  }
+
   /* header / footer */
+
   .slogan {
     padding-left: 10px;
   }
@@ -59,7 +69,13 @@
     height: 360px;
   }
 
-  /* MOBILE datasets page */
+
+  .content td a {
+    text-overflow: ellipsis;
+    max-width: 100%;
+    overflow: hidden;
+    display: inline-block;
+  }
 }
 
 /* iphone-specific */
diff --git a/site/public/about/assets/LICENSE/index.html b/site/public/about/assets/LICENSE/index.html
index 0d3a7878..9d2d9e58 100644
--- a/site/public/about/assets/LICENSE/index.html
+++ b/site/public/about/assets/LICENSE/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/about/attribution/index.html b/site/public/about/attribution/index.html
index d3d38d3c..7c3de237 100644
--- a/site/public/about/attribution/index.html
+++ b/site/public/about/attribution/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/about/index.html b/site/public/about/index.html
index 61200d1b..550f8ccb 100644
--- a/site/public/about/index.html
+++ b/site/public/about/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/about/legal/index.html b/site/public/about/legal/index.html
index 9eb5dd5a..a55ce23b 100644
--- a/site/public/about/legal/index.html
+++ b/site/public/about/legal/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/about/press/index.html b/site/public/about/press/index.html
index 7b0a3e87..b8f64f57 100644
--- a/site/public/about/press/index.html
+++ b/site/public/about/press/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/datasets/50_people_one_question/index.html b/site/public/datasets/50_people_one_question/index.html
index dc7919f7..eb56baee 100644
--- a/site/public/datasets/50_people_one_question/index.html
+++ b/site/public/datasets/50_people_one_question/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>50 People One Question Dataset</div>
+      <div class='page_name'>50 People One Question Dataset</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/afad/index.html b/site/public/datasets/afad/index.html
index f2b0a5ba..0e8e906e 100644
--- a/site/public/datasets/afad/index.html
+++ b/site/public/datasets/afad/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>Asian Face Age Dataset</div>
+      <div class='page_name'>Asian Face Age Dataset</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/brainwash/index.html b/site/public/datasets/brainwash/index.html
index b17617a6..2d75d425 100644
--- a/site/public/datasets/brainwash/index.html
+++ b/site/public/datasets/brainwash/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>Brainwash Dataset</div>
+      <div class='page_name'>Brainwash Dataset</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/caltech_10k/index.html b/site/public/datasets/caltech_10k/index.html
index 04d63ee3..4be0c6fc 100644
--- a/site/public/datasets/caltech_10k/index.html
+++ b/site/public/datasets/caltech_10k/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>Brainwash Dataset</div>
+      <div class='page_name'>Brainwash Dataset</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/celeba/index.html b/site/public/datasets/celeba/index.html
index c72f3798..9c4ee5b1 100644
--- a/site/public/datasets/celeba/index.html
+++ b/site/public/datasets/celeba/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>CelebA Dataset</div>
+      <div class='page_name'>CelebA Dataset</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/cofw/index.html b/site/public/datasets/cofw/index.html
index eef8cf5e..11bc8538 100644
--- a/site/public/datasets/cofw/index.html
+++ b/site/public/datasets/cofw/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>COFW Dataset</div>
+      <div class='page_name'>COFW Dataset</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/duke_mtmc/index.html b/site/public/datasets/duke_mtmc/index.html
index 14e6bee0..703c636a 100644
--- a/site/public/datasets/duke_mtmc/index.html
+++ b/site/public/datasets/duke_mtmc/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>Duke MTMC Dataset</div>
+      <div class='page_name'>Duke MTMC Dataset</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/feret/index.html b/site/public/datasets/feret/index.html
index 387826b0..afd62a97 100644
--- a/site/public/datasets/feret/index.html
+++ b/site/public/datasets/feret/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>LFW</div>
+      <div class='page_name'>LFW</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/hrt_transgender/index.html b/site/public/datasets/hrt_transgender/index.html
index 6b9ae7be..e6e107e1 100644
--- a/site/public/datasets/hrt_transgender/index.html
+++ b/site/public/datasets/hrt_transgender/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>HRT Transgender</div>
+      <div class='page_name'>HRT Transgender</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/index.html b/site/public/datasets/index.html
index b463b378..aa302ddc 100644
--- a/site/public/datasets/index.html
+++ b/site/public/datasets/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/datasets/lfpw/index.html b/site/public/datasets/lfpw/index.html
index 45de2599..ac5fceff 100644
--- a/site/public/datasets/lfpw/index.html
+++ b/site/public/datasets/lfpw/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>LFWP</div>
+      <div class='page_name'>LFWP</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/lfw/index.html b/site/public/datasets/lfw/index.html
index ca17b1cd..77981f0f 100644
--- a/site/public/datasets/lfw/index.html
+++ b/site/public/datasets/lfw/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>LFW</div>
+      <div class='page_name'>LFW</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/market_1501/index.html b/site/public/datasets/market_1501/index.html
index 7c545335..4ccd7b74 100644
--- a/site/public/datasets/market_1501/index.html
+++ b/site/public/datasets/market_1501/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>Market 1501</div>
+      <div class='page_name'>Market 1501</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/msceleb/index.html b/site/public/datasets/msceleb/index.html
index fa485ac0..0e003c34 100644
--- a/site/public/datasets/msceleb/index.html
+++ b/site/public/datasets/msceleb/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>Microsoft Celeb</div>
+      <div class='page_name'>Microsoft Celeb</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
@@ -33,13 +34,13 @@
     <div>2016</div>
   </div><div class='meta'>
     <div class='gray'>Images</div>
-    <div>1,000,000 </div>
+    <div>10,000,000 </div>
   </div><div class='meta'>
     <div class='gray'>Identities</div>
     <div>100,000 </div>
   </div><div class='meta'>
     <div class='gray'>Purpose</div>
-    <div>Large-scale face recognition</div>
+    <div>Face recognition</div>
   </div><div class='meta'>
     <div class='gray'>Created by</div>
     <div>Microsoft Research</div>
diff --git a/site/public/datasets/oxford_town_centre/index.html b/site/public/datasets/oxford_town_centre/index.html
index 4fbcaccb..42cc9b69 100644
--- a/site/public/datasets/oxford_town_centre/index.html
+++ b/site/public/datasets/oxford_town_centre/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>TownCentre</div>
+      <div class='page_name'>TownCentre</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/pipa/index.html b/site/public/datasets/pipa/index.html
index 6c920b46..2dfa4097 100644
--- a/site/public/datasets/pipa/index.html
+++ b/site/public/datasets/pipa/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>PIPA Dataset</div>
+      <div class='page_name'>PIPA Dataset</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/pubfig/index.html b/site/public/datasets/pubfig/index.html
index e81e12bc..05a41d39 100644
--- a/site/public/datasets/pubfig/index.html
+++ b/site/public/datasets/pubfig/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>PubFig</div>
+      <div class='page_name'>PubFig</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/uccs/index.html b/site/public/datasets/uccs/index.html
index 23aeeff1..83b383d0 100644
--- a/site/public/datasets/uccs/index.html
+++ b/site/public/datasets/uccs/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>UCCS</div>
+      <div class='page_name'>UCCS</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/vgg_face2/index.html b/site/public/datasets/vgg_face2/index.html
index a9d318f1..9012af38 100644
--- a/site/public/datasets/vgg_face2/index.html
+++ b/site/public/datasets/vgg_face2/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>Brainwash Dataset</div>
+      <div class='page_name'>Brainwash Dataset</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/viper/index.html b/site/public/datasets/viper/index.html
index bc4ddd3d..9b48a7c7 100644
--- a/site/public/datasets/viper/index.html
+++ b/site/public/datasets/viper/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>VIPeR</div>
+      <div class='page_name'>VIPeR</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/datasets/youtube_celebrities/index.html b/site/public/datasets/youtube_celebrities/index.html
index 69b3a02e..758d2518 100644
--- a/site/public/datasets/youtube_celebrities/index.html
+++ b/site/public/datasets/youtube_celebrities/index.html
@@ -11,13 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      <div class='splash'>YouTube Celebrities</div>
+      <div class='page_name'>YouTube Celebrities</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/public/index.html b/site/public/index.html
index 118814be..9eff00f2 100644
--- a/site/public/index.html
+++ b/site/public/index.html
@@ -11,23 +11,32 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/splash.css' />
 </head>
-<body>
+<body class='home'>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
     </a>
-    <div class='links splash'>
+    <div class='links'>
       <a href="/datasets/" class='aboutLink'>DATASETS</a>
       <a href="/about/" class='aboutLink'>ABOUT</a>
     </div>
   </header>
   <div class="splash">
     <div id="three_container"></div>
+    <div class="teaser">
+      <b>MegaPixels</b>
+      <tt>is an art and research project
+      investigating the ethics, origins,
+      and individual privacy implications
+      of face recognition datasets
+      created "in the wild."</tt>
+      <a href="/datasets/" class='btn'>View Datasets</a>
+    </div>
   </div>
   <footer>
     <div>
-      MegaPixels is a research project by Adam Harvey about facial recognition datasets, developed in partnership with Mozilla.
+      <span><a href="/about/">MegaPixels</a> is a research project by Adam Harvey about <a href="/datasets/">facial recognition datasets</a>, developed in partnership with Mozilla.</span>
     </div>
     <div>
       MegaPixels &copy;2017-19 Adam R. Harvey /&nbsp;
diff --git a/site/public/info/index.html b/site/public/info/index.html
index 749c29ba..9fa1b8a9 100644
--- a/site/public/info/index.html
+++ b/site/public/info/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/research/00_introduction/index.html b/site/public/research/00_introduction/index.html
index 353e3270..3fa58dbf 100644
--- a/site/public/research/00_introduction/index.html
+++ b/site/public/research/00_introduction/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/research/01_from_1_to_100_pixels/index.html b/site/public/research/01_from_1_to_100_pixels/index.html
index 9426ef0f..ba0fad50 100644
--- a/site/public/research/01_from_1_to_100_pixels/index.html
+++ b/site/public/research/01_from_1_to_100_pixels/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/research/02_what_computers_can_see/index.html b/site/public/research/02_what_computers_can_see/index.html
index e870ea4b..f45f6d35 100644
--- a/site/public/research/02_what_computers_can_see/index.html
+++ b/site/public/research/02_what_computers_can_see/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/research/index.html b/site/public/research/index.html
index 1be8203f..b8ab9b03 100644
--- a/site/public/research/index.html
+++ b/site/public/research/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/test/chart/index.html b/site/public/test/chart/index.html
index e882ecc5..e93732d3 100644
--- a/site/public/test/chart/index.html
+++ b/site/public/test/chart/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/test/citations/index.html b/site/public/test/citations/index.html
index a8af41df..82b6a940 100644
--- a/site/public/test/citations/index.html
+++ b/site/public/test/citations/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/test/csv/index.html b/site/public/test/csv/index.html
index 2c2242b4..aff22b7a 100644
--- a/site/public/test/csv/index.html
+++ b/site/public/test/csv/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/test/datasets/index.html b/site/public/test/datasets/index.html
index bf08418f..da040ad8 100644
--- a/site/public/test/datasets/index.html
+++ b/site/public/test/datasets/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/test/face_search/index.html b/site/public/test/face_search/index.html
index 75bb907b..4ef0e8d5 100644
--- a/site/public/test/face_search/index.html
+++ b/site/public/test/face_search/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/test/gallery/index.html b/site/public/test/gallery/index.html
index 8958f369..9918460d 100644
--- a/site/public/test/gallery/index.html
+++ b/site/public/test/gallery/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/test/index.html b/site/public/test/index.html
index e660bb2d..bc78c33b 100644
--- a/site/public/test/index.html
+++ b/site/public/test/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/test/map/index.html b/site/public/test/map/index.html
index 21229ec1..1b7064e7 100644
--- a/site/public/test/map/index.html
+++ b/site/public/test/map/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/test/name_search/index.html b/site/public/test/name_search/index.html
index b0bdb86f..707860bb 100644
--- a/site/public/test/name_search/index.html
+++ b/site/public/test/name_search/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/public/test/pie_chart/index.html b/site/public/test/pie_chart/index.html
index 98a89ff4..28279fdd 100644
--- a/site/public/test/pie_chart/index.html
+++ b/site/public/test/pie_chart/index.html
@@ -11,6 +11,7 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
diff --git a/site/templates/home.html b/site/templates/home.html
index 118814be..4a7a5027 100644
--- a/site/templates/home.html
+++ b/site/templates/home.html
@@ -11,13 +11,13 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/splash.css' />
 </head>
-<body>
+<body class='home'>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
     </a>
-    <div class='links splash'>
+    <div class='links'>
       <a href="/datasets/" class='aboutLink'>DATASETS</a>
       <a href="/about/" class='aboutLink'>ABOUT</a>
     </div>
@@ -27,7 +27,7 @@
   </div>
   <footer>
     <div>
-      MegaPixels is a research project by Adam Harvey about facial recognition datasets, developed in partnership with Mozilla.
+      <span><a href="/about/">MegaPixels</a> is a research project by Adam Harvey about <a href="/datasets/">facial recognition datasets</a>, developed in partnership with Mozilla.</span>
     </div>
     <div>
       MegaPixels &copy;2017-19 Adam R. Harvey /&nbsp;
diff --git a/site/templates/layout.html b/site/templates/layout.html
index 8c1796f8..77f24ee1 100644
--- a/site/templates/layout.html
+++ b/site/templates/layout.html
@@ -11,14 +11,14 @@
   <link rel='stylesheet' href='/assets/css/css.css' />
   <link rel='stylesheet' href='/assets/css/leaflet.css' />
   <link rel='stylesheet' href='/assets/css/applets.css' />
-  <link rel='stylesheet' href='/assets/css/mobile.css' />
+  <link rel='stylesheet' href='/assets/css/mobile .css' />
 </head>
 <body>
   <header>
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
-      {% if metadata.meta.dataset %}<div class='splash'>{{ metadata.meta.dataset.name_display }}</div>{% endif %}
+      {% if metadata.meta.dataset %}<div class='page_name'>{{ metadata.meta.dataset.name_display }}</div>{% endif %}
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>