From 020c015cbca3224f023e44ee72ec11b65f9f80b1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 18 Apr 2019 16:12:00 +0200 Subject: modal css --- site/assets/css/css.css | 124 +++++------------------------- site/assets/css/mobile.css | 91 ++++++++++++++++++++++ site/assets/img/arrow-left-black.png | Bin 0 -> 3336 bytes site/assets/img/arrow-left.png | Bin 0 -> 2183 bytes site/assets/img/arrow-right-black.png | Bin 0 -> 3380 bytes site/assets/img/arrow-right.png | Bin 0 -> 2183 bytes site/assets/img/close-black.png | Bin 0 -> 1511 bytes site/assets/img/close.png | Bin 0 -> 3738 bytes site/content/pages/datasets/uccs/index.md | 2 +- 9 files changed, 112 insertions(+), 105 deletions(-) create mode 100644 site/assets/css/mobile.css create mode 100644 site/assets/img/arrow-left-black.png create mode 100644 site/assets/img/arrow-left.png create mode 100644 site/assets/img/arrow-right-black.png create mode 100644 site/assets/img/arrow-right.png create mode 100644 site/assets/img/close-black.png create mode 100644 site/assets/img/close.png (limited to 'site') 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 Binary files /dev/null and b/site/assets/img/arrow-left-black.png differ diff --git a/site/assets/img/arrow-left.png b/site/assets/img/arrow-left.png new file mode 100644 index 00000000..3ddd4781 Binary files /dev/null and b/site/assets/img/arrow-left.png differ 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 Binary files /dev/null and b/site/assets/img/arrow-right-black.png differ diff --git a/site/assets/img/arrow-right.png b/site/assets/img/arrow-right.png new file mode 100644 index 00000000..0cb2588f Binary files /dev/null and b/site/assets/img/arrow-right.png differ diff --git a/site/assets/img/close-black.png b/site/assets/img/close-black.png new file mode 100644 index 00000000..191442ac Binary files /dev/null and b/site/assets/img/close-black.png differ diff --git a/site/assets/img/close.png b/site/assets/img/close.png new file mode 100644 index 00000000..529d7302 Binary files /dev/null and b/site/assets/img/close.png differ 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) -- cgit v1.2.3-70-g09d2