9 files changed, 112 insertions, 105 deletions
diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index a5e36542..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;
@@ -227,7 +233,7 @@ h5 {
   text-transform: uppercase;
   letter-spacing: 2px;
 }
-.right-sidebar ul li a{
+.right-sidebar ul li a {
   border-bottom: 0;
 }
 th, .gray {
@@ -796,30 +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;
   font-size: 16px;
-}
-.dataset-list .sort-options li:before {
-  content: '_';
-  opacity: 0;
-  margin-right: 10px;
+  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;
@@ -1131,92 +1136,3 @@ li p {
   border-radius: 5px;
   transition: all 0.1s;
 }
-
-/* 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: 10px;
-  }
-
-  /* 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;
-  }
-}
-
-/* iphone-specific */
-@media all and (max-device-width: 640px) {
-  .right-sidebar {
-    float: none;
-    width: 100%;
-    border: 0;
-    margin: 0;
-    padding: 0 2px;
-    border-bottom: 1px solid #333;
-  }
-  .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/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/content/pages/datasets/uccs/index.md b/site/content/pages/datasets/uccs/index.md
index b6073384..de2cec4d 100644
--- a/site/content/pages/datasets/uccs/index.md
+++ b/site/content/pages/datasets/uccs/index.md
@@ -28,7 +28,7 @@ The UCCS dataset includes over 1,700 unique identities, most of which are studen
 ![caption: The location at University of Colorado Colorado Springs where students were surreptitiously photographed with a long-range surveillance camera for use in a defense and intelligence agency funded research project on face recognition. Image: Google Maps](assets/uccs_map_aerial.jpg)
 
 
-The long-range surveillance images in the UnContsrained College Students dataset were taken using a Canon 7D 18-megapixel digital camera fitted with a Sigma 800mm F5.6 EX APO DG HSM telephoto lens and pointed out an office window across the university's West Lawn. The students were photographed from a distance of approximately 150 meters through an office window. "The camera [was] programmed to start capturing images at specific time intervals between classes to maximize the number of faces being captured."[^sapkota_boult]
+The long-range surveillance images in the UnConsrained College Students dataset were taken using a Canon 7D 18-megapixel digital camera fitted with a Sigma 800mm F5.6 EX APO DG HSM telephoto lens and pointed out an office window across the university's West Lawn. The students were photographed from a distance of approximately 150 meters through an office window. "The camera [was] programmed to start capturing images at specific time intervals between classes to maximize the number of faces being captured."[^sapkota_boult]
 Their setup made it impossible for students to know they were being photographed, providing the researchers with realistic surveillance images to help build face recognition systems for real world applications for defense, intelligence, and commercial partners.
 
 ![caption: Example images from the UnConstrained College Students Dataset. ](assets/uccs_grid.jpg)