Merge branch 'master' of asdf.us:megapixels_dev

10 files changed, 255 insertions, 63 deletions

diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css
index 7fac3e27..ef9f09e2 100644
--- a/site/assets/css/applets.css
+++ b/site/assets/css/applets.css
@@ -9,7 +9,7 @@
   min-height: 0;
 }
 .applet {
-  margin-bottom: 40px;
+  margin-bottom: 60px;
   transition: opacity 0.2s cubic-bezier(0,0,1,1);
   opacity: 0;
 }
@@ -28,8 +28,9 @@
 }
 .q {
   width: 100%;
-  padding: 5px;
-  font-size: 14pt;
+  padding: 8px 12px;
+  font-size: 13pt;
+  color:#333;
 }
 .timing {
   font-size: 9pt;
diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index 824819a9..48816fef 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -1,4 +1,10 @@
 * { box-sizing: border-box; outline: 0; }
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.001s !important;
+    transition-duration: 0.001s !important;
+  }
+}
 html, body {
   margin: 0;
   padding: 0;
@@ -43,7 +49,8 @@ header .slogan {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding-left: 56px;
+  /*padding-left: 56px;*/
+  padding-left: 36px;
   text-decoration: none;
 }
 header .logo {
@@ -54,6 +61,7 @@ header .logo {
   margin-right: 8px;
   width: 20px;
   height: 20px;
+  flex: 0 0 20px;
 }
 header .site_name {
   font-family: 'Roboto', sans-serif;
@@ -65,12 +73,14 @@ header .site_name {
   letter-spacing: 3px;
 }
 header .splash{
-  font-size: 15px;
+  font-size: 22px;
   font-weight: 400;
-  color: #888;
-  padding-left: 8px;
+  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 {
   opacity: 1;
@@ -138,7 +148,8 @@ footer {
   justify-content: space-between;
   color: #888;
   font-size: 9pt;
-  padding: 20px 0 20px;
+  line-height: 17px;
+  padding: 20px 20px;
   font-family: "Roboto", sans-serif;
 }
 footer > div {
@@ -157,7 +168,7 @@ footer a {
   transition: color 0.1s cubic-bezier(0,0,1,1);
   margin-right: 5px;
 }
-footer a:hover {
+.desktop footer a:hover {
   color: #ddd;
 }
 
@@ -167,7 +178,7 @@ h1 {
   color: #eee;
   font-weight: 400;
   font-size: 34pt;
-  margin: 75px 0 10px;
+  margin: 75px auto 10px auto;
   padding: 0;
   transition: color 0.1s cubic-bezier(0,0,1,1);
   font-family: 'Roboto Mono', monospace;
@@ -175,25 +186,32 @@ h1 {
 h2 {
   color: #eee;
   font-weight: 400;
-  font-size: 32px;
+  font-size: 34px;
   line-height: 43px;
-  margin: 20px 0 20px;
+  margin: 20px auto 20px auto;
   padding: 0;
   transition: color 0.1s cubic-bezier(0,0,1,1);
   font-family: 'Roboto Mono', monospace;
 }
 h3 {
-  margin: 0 0 20px 0;
-  padding: 20px 0 0 0;
-  font-size: 22pt;
+  margin: 20px auto 10px auto;
+  font-size: 28px;
   font-weight: 400;
   transition: color 0.1s cubic-bezier(0,0,1,1);
   font-family: 'Roboto Mono', monospace;
 }
 h4 {
-  margin: 0 0 10px 0;
+  margin: 6px auto 10px auto;
   padding: 0;
-  font-size: 11pt;
+  font-size: 18pt;
+  font-weight: 400;
+  transition: color 0.1s cubic-bezier(0,0,1,1);
+  font-family: 'Roboto Mono', monospace;
+}
+h5 {
+  margin: 6px auto 10px auto;
+  padding: 0;
+  font-size: 14pt;
   font-weight: 400;
   transition: color 0.1s cubic-bezier(0,0,1,1);
   font-family: 'Roboto Mono', monospace;
@@ -215,7 +233,7 @@ h4 {
   text-transform: uppercase;
   letter-spacing: 2px;
 }
-.right-sidebar ul li a{
+.right-sidebar ul li a {
   border-bottom: 0;
 }
 th, .gray {
@@ -252,12 +270,24 @@ section {
   margin-top: 30px;
   line-height: 36px;
 }
-p {
-  margin: 0 10px 20px 0;
-  line-height: 2;
-  font-size: 18px;
-  font-weight: 300;
-  color: #dedede;
+section p {
+  margin: 10px auto 20px auto;
+  line-height: 1.85rem;
+  font-size: 17px;
+  font-weight: 400;
+  color: #cdcdcd;
+}
+section ul {
+  margin: 10px auto 20px auto;
+  max-width: 720px;
+}
+section h1, section h2, section h3, section h4, section h5, section h6, section p{
+  max-width: 720px;
+}
+
+.content-dataset section:nth-child(2) p:first-child{
+  font-size:19px;
+  color:red;
 }
 p.subp{
   font-size: 14px;
@@ -265,12 +295,13 @@ p.subp{
 .content a {
   color: #fff;
   text-decoration: none;
-  border-bottom: 1px dashed;
+  border-bottom: 2px solid #666;
+  padding-bottom: 1px;
   transition: color 0.1s cubic-bezier(0,0,1,1);
 }
 .desktop .content a:hover {
   color: #fff;
-  border-bottom: 1px solid;
+  border-bottom: 2px solid #ccc;
 }
 
 /* top of post metadata */
@@ -294,11 +325,11 @@ p.subp{
 }
 .right-sidebar {
   float: right;
-  width: 240px;
-  margin-left: 20px;
-  padding-top: 10px;
+  width: 200px;
+  margin: 0px 20px 20px 20px;
+  padding-top: 12px;
   padding-left: 20px;
-  border-left: 1px solid #444;
+  border-left: 1px solid #333;
   font-family: 'Roboto';
   font-size: 14px;
   font-weight: 400;
@@ -335,6 +366,13 @@ p.subp{
   text-decoration: none;
   border-bottom: 1px solid;
 }
+.left-sidebar a, .right-sidebar a {
+  border-bottom: 1px solid #666;
+}
+.desktop .content .left-sidebar a:hover,
+.desktop .content .right-sidebar a:hover {
+  border-bottom: 1px solid #ccc;
+}
 
 /* lists */
 
@@ -347,7 +385,7 @@ ul li {
   margin-bottom: 8px;
   color: #dedede;
   font-weight: 300;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 /* misc formatting */
@@ -359,9 +397,14 @@ code {
   background: rgba(255,255,255,0.1);
 }
 pre {
-  margin: 0 0 40px 0;
+  margin: 0 auto 20px auto;
+  max-width: 720px;
   border: 1px solid #666;
   border-radius: 2px;
+  padding: 10px;
+  display: block;
+  background: #333;
+  overflow: auto
 }
 pre code {
   display: block;
@@ -413,18 +456,51 @@ hr.supp{
   margin:70px 0 30px 0;
 }
 blockquote {
-  margin-left: 28px;
+  margin: 0 auto;
+  max-width: 720px;
   padding: 0 0 0 10px;
   border-left: 2px solid #555;
 }
 
+/* Buttons */
+
+.citation-opts {
+}
+.citation-opts li{
+  display: inline-block;
+  margin-right:10px;
+}
+.desktop .content a.btn{
+  display: inline-block;
+  background: #333;
+  padding: 6px 10px;
+  font-size: 10px;
+  border-radius: 6px;
+  font-weight: 400;
+  border:0px;
+}
+.desktop .content a.btn:hover{
+  background: #444;
+  border:0px;
+}
+
 /* footnotes */
 
 .footnotes hr {
   display: none;
 }
-ul.footnotes li, ul.footnotes p{
-  font-size:12px;
+ul.footnotes {
+  max-width: 720px;
+  margin: 0 auto;
+  font-size: 12px;
+}
+ul.footnotes li {
+  font-size: 12px;
+  list-style-type: none;
+  margin-bottom: 12px;
+}
+ul.footnotes p {
+  font-size: 12px;
 }
 .footnotes ol:before {
   content: 'Footnotes';
@@ -445,6 +521,9 @@ section img {
   display: block;
   margin: 0 auto;
 }
+.image img {
+  cursor: pointer;
+}
 section .image {
   margin-bottom: 20px;
 }
@@ -506,12 +585,12 @@ section.fullwidth .image {
   margin: 10px auto 10px auto;
   font-family: 'Roboto';
 }
-.caption a{
-  color:#ccc;
+.caption a {
+  color: #ccc;
   border: 0;
 }
-.caption a:hover{
-  color:#fff;
+.desktop .caption a:hover {
+  color: #fff;
   border: 0;
 }
 
@@ -671,8 +750,8 @@ section.fullwidth .image {
   border: 0;
 }
 .dataset-list .dataset {
-  width: 220px;
-  height: 140px;
+  width: 300px;
+  height: 178px;
   padding: 10px;
   color: white;
   font-weight: 400;
@@ -682,7 +761,7 @@ section.fullwidth .image {
 .desktop .content .dataset-list a {
   border: none;
 }
-.dataset-list a:hover{
+.desktop .dataset-list a:hover {
   border: none;
 }
 .dataset-list a:nth-child(3n+1) { background-color: rgba(255, 0, 0, 0.1); }
@@ -701,6 +780,8 @@ section.fullwidth .image {
 }
 .dataset-list .title {
   margin-bottom: 10px;
+  padding: 2px 4px;
+
 }
 .dataset-list .fields {
   display: block;
@@ -721,29 +802,29 @@ section.fullwidth .image {
   padding: 0;
 }
 .dataset-list .sort-options:before {
-  content: 'Browse list by ';
+  content: 'Browse list by:';
   opacity: 0.7;
-  margin-right: 0px;
+  display: block;
+  padding-bottom: 10px;
 }
 .dataset-list .sort-options li {
   display: inline-block;
   margin: 0;
-  padding: 0;
   cursor: pointer;
   margin-right: 20px;
-}
-.dataset-list .sort-options li:before {
-  content: '_';
-  opacity: 0;
-  margin-right: 10px;
+  font-size: 16px;
+  transition: background 0.2s;
+  background: #888;
+  color: #fff;
+  padding: 4px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
 }
 .dataset-list .sort-options li.active {
-  border-bottom: 1px solid;
-}
-.dataset-list .sort-options li.active:before {
-  content: '>';
-  opacity: 1;
-  margin-right: 10px;
+  background: #fff;
+  color: #222;
 }
 .dataset_list .applet {
   margin-bottom: 15px;
@@ -870,6 +951,12 @@ ul.map-legend li.source:before {
 }
 
 /* about */
+.desktop a.ahrefmoz{
+  color:#DE5825;
+}
+.desktop a.ahrefmoz:hover{
+  color:#EF6D3B;
+}
 
 .content-about {
   color: #fff;
@@ -882,8 +969,8 @@ ul.map-legend li.source:before {
  font-weight: 300; 
 }
 .content-about section:first-of-type > p:first-of-type {
-  font-size: 23px;
-  line-height: 39px;
+  font-size: 22px;
+  line-height: 40px;
 }
 .content-about .about-menu ul li {
   display: inline-block;
@@ -977,7 +1064,7 @@ ul.map-legend li.source:before {
   display: block;
 }
 .content-about .team-member h3{
-  font-size:18px;
+  font-size:20px;
 }
 
 
@@ -1009,6 +1096,7 @@ a.footnote_shim {
 .desktop a.footnote:hover {
   /*background-color: #ff8;*/
   color: #fff;
+  border: 0;
 }
 .backlinks {
   margin-right: 10px;
@@ -1023,9 +1111,8 @@ a.footnote_shim {
   bottom: 5px;
   margin-right: 2px;
 }
-ul.footnotes {
-  list-style-type: decimal;
-  margin-left: 30px;
+.content .footnotes .backlinks a {
+  bottom: 3px;
 }
 li p {
   margin: 0; padding: 0;
@@ -1035,5 +1122,17 @@ li p {
 /* citation browser */
 
 .citationHeader {
+  max-width: 720px;
+  margin: 10px auto;
   padding-bottom: 10px
-}
\ No newline at end of file
+}
+.download-btn {
+  display: inline-block;
+  font-size: 13px;
+  color: #ddd;
+  cursor: pointer;
+  background: #333;
+  padding: 8px 10px;
+  border-radius: 5px;
+  transition: all 0.1s;
+}
diff --git a/site/assets/css/mobile.css b/site/assets/css/mobile.css
new file mode 100644
index 00000000..6a742277
--- /dev/null
+++ b/site/assets/css/mobile.css
@@ -0,0 +1,91 @@
+/* MOBILE - iphone/ipad css */
+
+@media all and (max-device-width: 1024px) {
+  /* header / footer */
+  .slogan {
+    padding-left: 10px;
+  }
+  header .splash {
+    display: none;
+  }
+  header .links a {
+    margin-right: 14px;
+    font-size: 14px;
+  }
+
+  /* MOBILE content */
+
+  .intro_section {
+    padding: 50px 0 20px 0;
+  }
+  .intro_section .hero_desc {
+    font-size: 28px;
+    line-height: 50px;
+    margin-bottom: 20px;
+  }
+  .intro_section .inner {
+    margin: 0;
+    max-width: 100%;
+    padding: 20px;
+  }
+  .intro_section .hero_subdesc {
+    max-width: 100%;
+  }
+  section h1, section h2, section h3, section h4, section h5, section h6, section p {
+    max-width: 100%;
+  }
+  section {
+    width: 100%;
+    padding: 0 10px;
+  }
+  .meta {
+    margin-right: 0px;
+    margin-bottom: 10px;
+  }
+  .modal img {
+    max-width: 100%;
+  }
+  th {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .citationHeader {
+
+  }
+  section.wide {
+    width: 100%;
+  }
+  .map, .map .applet {
+    height: 360px;
+  }
+
+  /* MOBILE datasets page */
+}
+
+/* iphone-specific */
+@media all and (max-device-width: 640px) {
+  .right-sidebar {
+    float: none;
+    width: 100%;
+    border: 0;
+    margin: 0 0 14px 0;
+    padding: 0 2px;
+  }
+  .map, .map .applet {
+    height: 360px;
+  }
+  .citationBrowser input.q {
+    max-width: 180px;
+  }
+  .columns {
+    flex-direction: column;
+  }
+  .columns .column {
+    margin: 0;
+  }
+  .columns-2 .column,
+  .columns-3 .column,
+  .columns-4 .column {
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/site/assets/img/arrow-left-black.png b/site/assets/img/arrow-left-black.png
new file mode 100644
index 00000000..377a696f
--- /dev/null
+++ b/site/assets/img/arrow-left-black.png
diff --git a/site/assets/img/arrow-left.png b/site/assets/img/arrow-left.png
new file mode 100644
index 00000000..3ddd4781
--- /dev/null
+++ b/site/assets/img/arrow-left.png
diff --git a/site/assets/img/arrow-right-black.png b/site/assets/img/arrow-right-black.png
new file mode 100644
index 00000000..12dbe37c
--- /dev/null
+++ b/site/assets/img/arrow-right-black.png
diff --git a/site/assets/img/arrow-right.png b/site/assets/img/arrow-right.png
new file mode 100644
index 00000000..0cb2588f
--- /dev/null
+++ b/site/assets/img/arrow-right.png
diff --git a/site/assets/img/close-black.png b/site/assets/img/close-black.png
new file mode 100644
index 00000000..191442ac
--- /dev/null
+++ b/site/assets/img/close-black.png
diff --git a/site/assets/img/close.png b/site/assets/img/close.png
new file mode 100644
index 00000000..529d7302
--- /dev/null
+++ b/site/assets/img/close.png
diff --git a/site/assets/js/app/prototypes.js b/site/assets/js/app/prototypes.js
new file mode 100644
index 00000000..a7da2e46
--- /dev/null
+++ b/site/assets/js/app/prototypes.js
@@ -0,0 +1 @@
+prototypes.js
\ No newline at end of file