From b3ed0f95eb94a4e7cb5e137bb8196db8c36aa50d Mon Sep 17 00:00:00 2001 From: Adam Harvey Date: Wed, 5 Jun 2019 10:44:12 -0500 Subject: fix? --- site/public/assets/css/applets.css | 246 +++++++ site/public/assets/css/css.css | 1270 ++++++++++++++++++++++++++++++++++ site/public/assets/css/fonts.css | 41 ++ site/public/assets/css/leaflet.css | 635 +++++++++++++++++ site/public/assets/css/mobile.css | 172 +++++ site/public/assets/css/splash.css | 134 ++++ site/public/assets/css/tabulator.css | 759 ++++++++++++++++++++ 7 files changed, 3257 insertions(+) create mode 100644 site/public/assets/css/applets.css create mode 100644 site/public/assets/css/css.css create mode 100644 site/public/assets/css/fonts.css create mode 100644 site/public/assets/css/leaflet.css create mode 100644 site/public/assets/css/mobile.css create mode 100644 site/public/assets/css/splash.css create mode 100755 site/public/assets/css/tabulator.css (limited to 'site/public/assets/css') diff --git a/site/public/assets/css/applets.css b/site/public/assets/css/applets.css new file mode 100644 index 00000000..ef9f09e2 --- /dev/null +++ b/site/public/assets/css/applets.css @@ -0,0 +1,246 @@ +/* applets */ + +.applet_container { + min-height: 340px; + clear: left; + margin: 20px auto 40px auto; +} +.applet_container.autosize { + min-height: 0; +} +.applet { + margin-bottom: 60px; + transition: opacity 0.2s cubic-bezier(0,0,1,1); + opacity: 0; +} +.applet.map { + width: 100vw; + height: 50vh; +} +.applet.loaded { + opacity: 1; +} + +.row { + display: flex; + flex-direction: row; + justify-content: flex-start; +} +.q { + width: 100%; + padding: 8px 12px; + font-size: 13pt; + color:#333; +} +.timing { + font-size: 9pt; + padding-top: 10px; +} + +/* search results */ + +.name_search, .face_search { + box-shadow: inset 0 0 40px #000; + background: #111; + padding: 20px 0; + /*background: black;*/ + width: 100%; +} +.name_search { + margin-top: 0px; + margin-bottom: 20px; +} +.face_search .applet { + max-width: 640px; + margin: 0 auto; +} +.name_search .applet { + max-width: 640px; + margin: 0 auto; +} +.results { + margin-top: 10px; + padding-bottom: 10px; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.results > div { + width: 200px; + margin-left: 20px; + margin-bottom: 40px; + font-size: 8pt; + background: #000; + padding: 5px; + font-weight: 500; +} +.results > div img { + display: block; + margin-bottom: 4px; + width: 190px; + height: 190px; + background: rgba(255,255,255,0.05); +} +.results > div:nth-child(3n+1) { + margin-left: 0; +} +.applet h2 { + font-size: 20pt; +} +.query h2 { + margin-top: 0; padding-top: 0; +} +.img { + position: relative; +} +.img .bbox { + position: absolute; + color: rgba(255,255,255,1); + background: rgba(255,255,255,0.05); + border: 1px solid; +} +.cta { + padding-left: 20px; + font-size: 10pt; +} +.cta ol { + margin: 0; + padding: 0 0 20px 20px; +} + +.searchContainer { + padding-top: 20px; +} + +.uploadContainer > div { + position: relative; + width: 300px; + height: 300px; + display: flex; + align-items: center; + justify-content: center; + background: #333; + border: 3px dashed #fff; + border-radius: 10px; + opacity: 0.3; + transition: opacity 0.2s cubic-bezier(0,0,1,1); +} +.uploadContainer.active, +.desktop .uploadContainer > div:hover { + opacity: 1; +} +.uploadContainer input { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + opacity: 0; + cursor: pointer; +} +.uploadContainer img { + max-width: 40px; +} + +/* map */ + +.map, .map .applet { + height: 500px; +} +.map { + margin-bottom: 20px; +} +.map_cover { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: pointer; + background: rgba(0,0,0,0.8); + z-index: 9998; /* site header is 9999 */ + display: flex; + justify-content: center; + align-items: center; + font-size: 36px; + transition: opacity 0.4s cubic-bezier(0,0,1,1); + opacity: 1; +} +.desktop .map_cover { + opacity: 0; +} +.desktop .map_cover:hover { + opacity: 1; +} +.leaflet-popup-content-wrapper { + max-height: 230px; + overflow-y: auto; +} +.leaflet-popup-content a { + color: #0078A8; + border-bottom: 1px solid rgba(0, 128, 160, 0.4); +} +.desktop .leaflet-popup-content a:hover { + color: #0078A8; + border-bottom: 1px solid rgba(0, 128, 160, 0.9); +} + +/* tabulator */ + +.tabulator { + font-family: 'Roboto', sans-serif; +} +.tabulator-row { + transition: background-color 100ms cubic-bezier(0,0,1,1); + background-color: rgba(255,255,255,0.0); +} +.desktop .tabulator-row:hover { + background-color: rgba(255,255,255,0.2); +} +.tabulator-row.tabulator-row-odd { + background-color: rgba(255,255,255,0.05); +} +.tabulator-row.tabulator-row-even { + background-color: rgba(255,255,255,0.1); +} + +/* analysis results */ + +.analysisContainer .results div { + width: 256px; + text-align: center; + padding: 10px; + margin: 10px; +} +.analysisContainer .results div img { + max-width: 100%; +} + +/* chart */ + +.piechart .chart { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: flex-start; +} +.piechart .chart > div { + width: 50%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} +.piechart .chart .c3-chart-arc text { + fill: #fff; +} +.piechart .chart .c3-chart-arc.c3-target-Academic text { + fill: #333; +} +.piechart .c3 path, .piechart .c3 line { + stroke: rgba(64,64,64,0.3); +} +.piechart .chartCaption { + color: #888; + font-size: 12px; + font-family: 'Roboto', sans-serif; + font-weight: 400; +} diff --git a/site/public/assets/css/css.css b/site/public/assets/css/css.css new file mode 100644 index 00000000..f59556f8 --- /dev/null +++ b/site/public/assets/css/css.css @@ -0,0 +1,1270 @@ +* { 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; + width: 100%; + min-height: 100%; + /*font-family: 'Roboto Mono', sans-serif;*/ + font-family: 'Roboto', sans-serif; + color: #eee; + overflow-x: hidden; +} +html { + background: #181818; +} +a { outline: none; } +img { border: 0; } +.content { + opacity: 0; + transition: opacity 0.1s cubic-bezier(0,1,1,1); +} +html.desktop .content, +html.mobile .content { + opacity: 1; + margin-top: 50px; +} +html.mobile .content{ +} + +/* header */ + +header { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 70px; + z-index: 9999; + background: #1e1e1e; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + box-shadow: 0 0 4px rgba(0,0,0,0.3); +} +header .slogan { + display: flex; + flex-direction: row; + align-items: center; + /*padding-left: 56px;*/ + padding-left: 36px; + text-decoration: none; +} +header .logo { + background-image: url(../img/megapixels_logo_white.svg); + background-size: contain; + background-repeat: no-repeat; + margin-top: 0px; + margin-right: 8px; + width: 20px; + height: 20px; + flex: 0 0 20px; +} +header .site_name { + font-family: 'Roboto', sans-serif; + font-weight: 600; + text-transform: uppercase;; + color: #fff; + font-size: 11px; + line-height: 11px; + letter-spacing: 3px; +} +header .page_name { + font-size: 22px; + font-weight: 400; + color: #eee; + opacity: 0; + transition: 0.3s opacity cubic-bezier(0,0,1,1); + margin-left:18px; +} +.scrolled header .page_name { + opacity: 1; +} +header .links { + font-size: 18px; + line-height: 18px; +} +.home header .links a { + background-color: rgba(24,24,24,0.9); + border-bottom: 2px solid transparent; + padding: 3px; +} +header .sub { + margin-left: 4px; + margin-top: 2px; + transition: color 0.1s cubic-bezier(0,0,1,1); +} +.sub { + color: #666; + font-size: 10pt; +} +.desktop header .slogan:hover .site_name { + color: #fff; +} +.desktop header .slogan:hover .sub { + color: #666; +} +header .links { + display: flex; + flex-direction: row; + font-family: 'Roboto Mono', monospace; +} +header .links span, +header .links a { + display: block; + color: #dedede; + text-decoration: none; + text-transform: uppercase; + margin-right: 32px; + transition: color 0.1s cubic-bezier(0,0,1,1), border-color 0.05s cubic-bezier(0,0,1,1); + border-bottom: 1px solid rgba(255,255,255,0); + padding-bottom: 3px; + padding-top: 2px; + font-weight: 400; +} +header .links a.active { + color: #fff; + border-bottom: 2px solid rgba(255,255,255,1); +} +.desktop header .links a:hover { + color: #fff; + 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,1); +} +.home header .links a { + margin-right: 26px; + margin-left: 0; +} +.home header .links a:last-child { + margin-right: 29px; +} +/* footer */ + +footer { + width: 100%; + background: #000; + display: flex; + flex-direction: row; + justify-content: space-between; + color: #666; + font-size: 13px; + /*line-height: 17px;*/ + padding: 15px; + font-family: "Roboto", sans-serif; +} +footer > div { + display: flex; + flex-direction: row; +} +footer > div:nth-child(1) { + padding-left: 75px; +} +footer > div:nth-child(2) { + padding-right: 75px; +} +footer a { + display: inline-block; + color: #aaa; + transition: all 0.1s cubic-bezier(0,0,1,1); + padding-bottom: 1px; + text-decoration: none; +} +.desktop footer a:hover { + color: #fff; + border-bottom:1px solid #999; +} +footer ul { + margin: 0; + display: flex; + flex-direction: row; + color: #888; + font-size: 11px; +} +footer ul li { + margin-bottom: 0; + font-size: 11px; + font-weight: 400; + color:#666; +} +footer ul li:last-child { + margin-right: 0px; +} +footer ul:first-child li { + margin-right: 8px; +} +footer ul:last-child li { + margin-left: 8px; +} +.desktop footer a:hover { + color: #fff; +} + +/* headings */ + +h1 { + color: #eee; + font-weight: 400; + font-size: 34pt; + margin: 20px auto 10px auto; + padding: 0; + transition: color 0.1s cubic-bezier(0,0,1,1); + font-family: 'Roboto Mono', monospace; +} +h2 { + color: #eee; + font-weight: 400; + font-size: 34px; + line-height: 43px; + margin: 20px auto 20px auto; + padding: 0; + transition: color 0.1s cubic-bezier(0,0,1,1); + font-family: 'Roboto Mono', monospace; +} +h3 { + 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: 6px auto 10px auto; + padding: 0; + 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; +} +.content h3 a { + color: #888; + text-decoration: none; +} +.desktop .content h3 a:hover { + color: #fff; + text-decoration: underline; +} +.right-sidebar h3 { + margin: 0; + padding: 0 0 10px 0; + font-family: 'Roboto Mono'; + font-weight: 400; + font-size: 13px; + text-transform: uppercase; + letter-spacing: 2px; +} +.right-sidebar ul li a { + border-bottom: 0; +} +th, .gray { + font-family: 'Roboto', monospace; + font-weight: 500; + text-transform: uppercase; + letter-spacing: .15rem; + color: #777; +} +th, .gray { + font-size: 9pt; +} + +/* splash teaser */ + +.teaser { + position: absolute; + top: 50%; + left: 100px; + transform: translateY(-50%); +} +.teaser b { + font-family: 'Roboto', sans-serif; + font-weight: 500; + color: #fff; + font-size: 40px; + background: #181818; + box-shadow: -3px -3px #181818, 3px -3px #181818, -3px 3px #181818, 3px 3px #181818; + box-decoration-break: clone; +} +.teaser tt { + font-family: 'Roboto Mono', monospace; + color: #ddd; + font-size: 16px; + line-height: 1.7; + display: block; + max-width: 340px; + margin: 10px 0 30px 0; +} +.teaser tt span { + background: #181818; + box-shadow: -3px -3px #181818, 3px -3px #181818, -3px 3px #181818, 3px 3px #181818; + box-decoration-break: clone; +} +.teaser .btn { + color: #ddd; + background: #444; + padding: 14px 20px; + font-size: 16px; + border-radius: 4px; + text-decoration: none; + box-shadow: 0 1px 2px #181818; + transition: all 0.1s; +} +.desktop .teaser .btn:hover { + color: #fff; + background: #666; +} + +/* content */ + +.content { + padding-top: 20px; + padding-bottom: 100px; + min-height: calc(100vh - 55px); + line-height: 1.8; +} +section { + width: 960px; + margin: 0 auto; +} +.home section { + width: 960px; +} +.content .first_paragraph { + font-weight: 300; + font-size: 16pt; + color: #ddd; + margin-bottom: 20px; + margin-top: 30px; + line-height: 36px; +} +section p { + margin: 10px auto 20px auto; + line-height: 1.9rem; + 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; +} +.content a { + color: #dedede; + text-decoration: none; + 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: 2px solid #ccc; +} + +/* top of post metadata */ + +.meta { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + font-size: 12px; + color: #ccc; + margin-bottom: 20px; + font-family: 'Roboto', sans-serif; + margin-right: 20px; + line-height: 17px +} +.meta .gray { + font-size: 9pt; + padding-bottom: 5px; + line-height: 14px +} +.mobile .meta .gray { + font-size: 10px; + padding-bottom: 0px; +} +.right-sidebar { + float: right; + width: 200px; + margin: 0px 20px 20px 20px; + padding-top: 12px; + padding-left: 20px; + border-left: 1px solid #333; + font-family: 'Roboto'; + font-size: 14px; + font-weight: 400; +} +.left-sidebar { + float: left; + width: 200px; + padding-top: 10px; + padding-right: 20px; + /*margin-right: 20px;*/ + margin-bottom: 10px; + /*border-right: 1px solid #444;*/ + font-family: 'Roboto'; + font-size: 14px; + font-weight: 400; + clear:left; +} +.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; +} +.left-sidebar ul { + margin-bottom: 10px; + color: #aaa; +} +.right-sidebar ul:first-child a { + text-decoration: none; + border-bottom: 1px solid; +} +.left-sidebar ul:first-child a { + 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 */ + +ul { + list-style-type: none; + margin: 0 0 30px 0; + padding: 0; +} +ul li { + margin-bottom: 8px; + color: #dedede; + font-weight: 400; + font-size: 14px; +} + +/* misc formatting */ + +code { + font-family: 'Roboto Mono', monospace; + font-size: 9pt; + padding: 2px 4px; + background: rgba(255,255,255,0.1); +} +pre { + 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; + max-height: 400px; + max-width: 960px; + overflow: scroll; + padding: 4px 10px; +} +table { + margin-bottom: 40px; +} +table thead{ + text-align: left; +} +table, tr, td, th { + border: none; + border-collapse:collapse; +} +.chart table tr{ + width: auto; +} +table tr{ + display:table; + table-layout: fixed; + width:100%; +} +table td, table th{ + padding:10px; + +} +table tr td{ + font-size:12px; +} +table tbody tr:nth-child(odd){ + background-color:#292929; +} +table tbody tr:nth-child(even){ + background-color:#333; +} + +hr { + height: 1px; + background: #888; + border: 0; + width: 80px; +} +hr.supp{ + width:100%; + margin:70px 0 30px 0; +} +blockquote { + 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 { + 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'; + margin: 0 0 10px -40px; + padding-bottom: 0; + display: block; + font-family: 'Roboto Mono', monospace; + font-weight: 400; + text-transform: uppercase; + color: #666; + font-size: 11pt; +} + +/* images */ + +section img { + max-width: 100%; + display: block; + margin: 0 auto; +} +.image img { + cursor: pointer; +} +section .image { + margin-bottom: 20px; +} +section.images { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: center; + clear: both; +} +.image:only-child { + width: 100%; +} +.image:first-child { + margin-left: 0; + /*margin-top:10px;*/ +} +.image:nth-child(2), +.image:nth-child(3) { + margin-left: 40px; +} +.image:nth-child(4) { + margin-left: 20px; +} +.image:first-child:nth-last-child(2), +.image:first-child:nth-last-child(2) ~ .image { + width: 300px; +} +.image:first-child:nth-last-child(3), +.image:first-child:nth-last-child(3) ~ .image { + width: 186px; +} +.image:first-child:nth-last-child(4) ~ .image { + width: 100px; +} +section.wide { + width: 960px; +} +section.wide .image { + max-width: 960px; +} +section.fullwidth { + width: 100%; +} +section.fullwidth .image { + max-width: 100%; +} +.image .caption{ + text-align: center; +} +.image .caption.intro-caption{ + text-align: center; +} +.caption { + text-align: center; + font-size: 10pt; + color: #999; + max-width: 960px; + margin: 10px auto 10px auto; + font-family: 'Roboto'; +} +.caption a { + color: #ccc; + border: 0; +} +.desktop .caption a:hover { + color: #fff; + border: 0; +} + + + +.sideimage { + margin: 0px 0 40px 0; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; +} +.sideimage p{ + margin-top:0px; + padding-top:0px; + font-size:14px; +} +.sideimage strong{ + display: block; + font-size:26px; + line-height: 26px; + font-weight: 400; + font-family: 'Roboto'; + margin-bottom: 16px; +} +.sideimage img { + margin-right: 40px; + width: 200px; + height: 200px; +} + +/* blog index */ + +.research_index { + margin-top: 40px; +} +.research_index a { + text-decoration: none; +} +.research_index h1 { + margin-top: 20px; + text-decoration: underline; +} +.desktop .research_index section:hover h1 { + color: #fff; +} +.research_index section:hover h2 { + color: #ddd; +} + +/* home page */ + +.hero { + width: 100%; + background: black; + background: linear-gradient(#000,#222); + height: 50vw; + max-height: 70vh; +} +.hero .inner { + position: relative; + width: 100%; + max-width: 1200px; + height: 100%; + display: flex; + align-items: center; + margin: 0 auto; +} +#face_container { + pointer-events: none; + position: absolute; + width: 66vw; + height: 50vw; + max-height: 70vh; + top: 0; + right: -16vw; + z-index: 0; + text-align: center; + perspective: 500px; + perspective-origin: 50% 80%; +} +.currentFace { + position: absolute; + bottom: 50px; + width: 100%; + left: 0; + text-align: center; + font-size: 26px; +} +.intro { + max-width: 960px; + padding: 75px 0 75px 10px; + z-index: 1; +} +.intro .headline { + font-family: 'Roboto Mono', monospace; + font-size: 24pt; + line-height: 40pt; +} +.intro .buttons { + margin: 40px 0; +} +.intro button { + font-family: 'Roboto', sans-serif; + padding: 15px 20px; + border-radius: 8px; + border: 1px solid transparent; + cursor: pointer; + font-size: 12pt; + margin-right: 10px; + transition: color 0.1s cubic-bezier(0,0,1,1), background-color 0.1s cubic-bezier(0,0,1,1); +} +.intro button.normal { + background: #191919; + border-color: #444; + color: #ddd; +} +.intro button.important { + background: #444; + border-color: #444; + color: #ddd; +} +.desktop .intro button:hover { + background: #666; + border-color: #666; + color: #fff; +} +.intro .under { + font-size: 12px; + color: #888; +} +.intro .under a { + color: #bbb; +} +.desktop .intro .under a:hover { + color: #fff; +} +.dataset-intro h2 { + margin-top: 40px; +} +.content .dataset-intro .first_paragraph { + margin-top: 10px; + font-size: 18px; +} + +/* intro - list of datasets */ + +.dataset-heading { + /*background: #000;*/ + width: 100%; + padding: 0 25px; +} +.dataset-heading p{ + max-width: none; +} +.dataset-heading h1{ + max-width: none; +} +.dataset-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 20px 0 0 0; +} +.dataset-list a { + text-decoration: none; + 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: 12px; + color: white; + font-weight: 400; + font-family: 'Roboto'; + position: relative; +} +.dataset-list .dataset-image { + background-size: cover; + width: auto; + height: 178px; +} +.desktop .content .dataset-list a { + border: 1px solid #333; + +} +.desktop .dataset-list a:hover { + 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; +} +.dataset-list .sort-options { + margin: 0; + padding: 0; +} +.dataset-list .sort-options:before { + content: 'Browse list by:'; + opacity: 0.7; + display: block; + padding-bottom: 10px; +} +.dataset-list .sort-options li { + display: inline-block; + margin: 0; + cursor: pointer; + margin-right: 10px; + transition: background 0.2s; + background: #555; + color: #fff; + padding: 7px 11px; + border-radius: 4px; + font-weight: 400; + font-size: 14px; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; +} +.dataset-list .sort-options li:last-child { + margin-right:0; +} +.dataset-list .sort-options li.active { + background: #fff; + color: #000; +} +.desktop .dataset-list .sort-options li:hover { + background: #888; +} +.desktop .dataset-list .sort-options li.active:hover { + background: #fff; +} +.dataset_list .applet { + margin-bottom: 15px; +} + + + +/* intro section for datasets */ + +section.intro_section { + font-family: 'Roboto Mono'; + width: 100%; + background-size: cover; + background-position: center left; + /*padding: 50px 0;*/ + min-height: 40vh; + display: flex; + justify-content: center; + align-items: center; + background-color: #111111; + margin-bottom: 20px; + padding: 0; +} +.intro_section .inner { + max-width: 960px; + margin: 3rem auto; +} +.intro_section .hero_desc { + font-size: 38px; + line-height: 60px; + margin-bottom: 30px; + 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; +} +.intro_section .hero_subdesc { + font-size: 17px; + line-height: 36px; + max-width: 80%; + 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; +} +.intro_section .hero_subdesc .bgpad { + 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 { + box-decoration-break: clone; +} + +/* ----------------------------------------------------- +page-specific formatting +----------------------------------------------------- */ + +/* Dataset */ + +.leaflet-container{ + margin-bottom: 10px +} + +.hr-wave-holder { + /* Clip edges, as some of the lines don't terminate nicely. */ + overflow: hidden; + position: relative; + width: 100%; + height: 50px; + margin-top:50px; +} + +.hr-wave-line1 { + background: linear-gradient(45deg, transparent, transparent 49%, #fff 49%, transparent 51%); +} +.hr-wave-line2 { + background: linear-gradient(-45deg, transparent, transparent 49%, #fff 49%, transparent 51%); +} +.hr-wave-line { + background-size: 20px 20px; + position: absolute; + width: 100%; + height: 10px; +} + + +/* map */ + +ul.map-legend{ + display: inline-block; + margin: 0; + font-size: 14px; +} +ul.map-legend li { + margin-right: 10px; + padding-top: 4px; + display: inline-block; + cursor: pointer; +} +.desktop ul.map-legend li:hover { + text-decoration: underline; +} +ul.map-legend li:before { + content: ''; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 6px; +} +ul.map-legend li.active { + text-decoration: underline; + color: #fff; +} +ul.map-legend li.edu:before { + background-color: #f2f293; +} +ul.map-legend li.com:before { + background-color: #3264f6; +} +ul.map-legend li.gov:before { + background-color: #f30000; +} +ul.map-legend li.source:before { + content: none; + display: inline-block; + width: 0px; + margin-right: 10px; +} + +/* about */ +.desktop a.ahrefmoz{ + color:#DE5825; +} +.desktop a.ahrefmoz:hover{ + color:#EF6D3B; +} + +.content-about { + color: #fff; +} +.content-about p { + font-size: 16px; +} +.content-about ul{ + font-size: 14px; + font-weight: 300; +} +.content-about section:first-of-type > p:first-of-type { + font-size: 22px; + line-height: 40px; +} +.content-about .about-menu ul li { + display: inline-block; + font-size: 14px; + font-weight: 400; + text-transform: uppercase; + margin-right: 15px; + font-family: 'Roboto'; +} +.content-about .about-menu ul li a { + border-bottom: 0; + color: #aaa; +} + +.content-about .about-menu ul li a.current { + border-bottom: 1px solid #ddd; + color: #ddd; +} + +/* columns */ + +.columns { + display: flex; + flex-direction: row; + justify-content: flex-start; +} +.content-about .columns .column{ + /* on the about page use padding and bg color */ + background: #202020; + padding: 20px; +} +.columns .column { + font-family: Roboto, sans-serif; + font-weight: 400; + margin: 10px; +} +.columns .column:first-of-type { + margin-left: 0; +} +.columns-2 .column { + width: 50%; +} +.columns-3 .column { + width: 33%; +} +.columns-4 .column { + width: 25%; +} + +/* about page */ + + +.flex-container { + padding: 0; + margin: 0; + list-style: none; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + justify-content: space-around; +} + +.content-about .team-photos-container{ + margin:40px 0; +} +.content-about .team-member { + height: auto; + margin-top: 10px; + color: white; + width: 400px; + font-weight: bold; + flex-grow: 1; + margin:0 40px 0 0; + padding:20px; + border-radius:6px; + background: #202020; +} +.content-about .team-member&:last-child{ + margin:0 0 0 40px; +} +.content-about .team-member p{ + font-size:16px; +} +.content-about .team-member img{ + margin:0; + display: block; +} +.content-about .team-member h3{ + font-size:20px; +} + + + +/* footnotes */ + +a.footnote { + font-size: 9px; + line-height: 0px; + position: relative; + /*display: inline-block;*/ + bottom: 7px; + text-decoration: none; + color: #ff8; + border: 0; + left: -1px; + transition-duration: 0s; +} +a.footnote_shim { + /*display: inline-block;*/ + width: 1px; height: 1px; + overflow: hidden; + position: relative; + top: -90px; + visibility: hidden; +} +.right-sidebar a.footnote { + bottom: 8px; +} +.desktop a.footnote:hover { + /*background-color: #ff8;*/ + color: #fff; + border: 0; +} +.backlinks { + margin-right: 10px; +} +.content .backlinks a { + color: #ff8; + font-size: 10px; + text-decoration: none; + border: 0; + font-weight: bold; + position: relative; + bottom: 5px; + margin-right: 2px; +} +.content .footnotes .backlinks a { + bottom: 3px; +} +li p { + margin: 0; padding: 0; + display: inline; +} + +/* citation browser */ + +.citationHeader { + max-width: 720px; + margin: 10px auto; + padding-bottom: 10px +} +.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/public/assets/css/fonts.css b/site/public/assets/css/fonts.css new file mode 100644 index 00000000..8db01fbd --- /dev/null +++ b/site/public/assets/css/fonts.css @@ -0,0 +1,41 @@ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + src: url("../fonts/Roboto_300.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto_300.woff") format("woff"), url("../fonts/Roboto_300.woff2") format("woff2"), url("../fonts/Roboto_300.svg#Roboto") format("svg"), url("../fonts/Roboto_300.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: url("../fonts/Roboto_400.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto_400.woff") format("woff"), url("../fonts/Roboto_400.woff2") format("woff2"), url("../fonts/Roboto_400.svg#Roboto") format("svg"), url("../fonts/Roboto_400.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: url("../fonts/Roboto_500.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto_500.woff") format("woff"), url("../fonts/Roboto_500.woff2") format("woff2"), url("../fonts/Roboto_500.svg#Roboto") format("svg"), url("../fonts/Roboto_500.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 300; + src: url("../fonts/Roboto_Mono_300.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto_Mono_300.woff") format("woff"), url("../fonts/Roboto_Mono_300.woff2") format("woff2"), url("../fonts/Roboto_Mono_300.svg#RobotoMono") format("svg"), url("../fonts/Roboto_Mono_300.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 400; + src: url("../fonts/Roboto_Mono_400.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto_Mono_400.woff") format("woff"), url("../fonts/Roboto_Mono_400.woff2") format("woff2"), url("../fonts/Roboto_Mono_400.svg#RobotoMono") format("svg"), url("../fonts/Roboto_Mono_400.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 500; + src: local("Roboto-Mono Medium"), local("RobotoMono-Medium"), url("../fonts/Roboto_Mono_500.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto_Mono_500.woff") format("woff"), url("../fonts/Roboto_Mono_500.woff2") format("woff2"), url("../fonts/Roboto_Mono_500.svg#RobotoMono") format("svg"), url("../fonts/Roboto_Mono_500.ttf") format("truetype"); +} diff --git a/site/public/assets/css/leaflet.css b/site/public/assets/css/leaflet.css new file mode 100644 index 00000000..a0932d57 --- /dev/null +++ b/site/public/assets/css/leaflet.css @@ -0,0 +1,635 @@ +/* required styles */ + +.leaflet-pane, +.leaflet-tile, +.leaflet-marker-icon, +.leaflet-marker-shadow, +.leaflet-tile-container, +.leaflet-pane > svg, +.leaflet-pane > canvas, +.leaflet-zoom-box, +.leaflet-image-layer, +.leaflet-layer { + position: absolute; + left: 0; + top: 0; + } +.leaflet-container { + overflow: hidden; + } +.leaflet-tile, +.leaflet-marker-icon, +.leaflet-marker-shadow { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + -webkit-user-drag: none; + } +/* Safari renders non-retina tile on retina better with this, but Chrome is worse */ +.leaflet-safari .leaflet-tile { + image-rendering: -webkit-optimize-contrast; + } +/* hack that prevents hw layers "stretching" when loading new tiles */ +.leaflet-safari .leaflet-tile-container { + width: 1600px; + height: 1600px; + -webkit-transform-origin: 0 0; + } +.leaflet-marker-icon, +.leaflet-marker-shadow { + display: block; + } +/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ +/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */ +.leaflet-container .leaflet-overlay-pane svg, +.leaflet-container .leaflet-marker-pane img, +.leaflet-container .leaflet-shadow-pane img, +.leaflet-container .leaflet-tile-pane img, +.leaflet-container img.leaflet-image-layer, +.leaflet-container .leaflet-tile { + max-width: none !important; + max-height: none !important; + } + +.leaflet-container.leaflet-touch-zoom { + -ms-touch-action: pan-x pan-y; + touch-action: pan-x pan-y; + } +.leaflet-container.leaflet-touch-drag { + -ms-touch-action: pinch-zoom; + /* Fallback for FF which doesn't support pinch-zoom */ + touch-action: none; + touch-action: pinch-zoom; +} +.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom { + -ms-touch-action: none; + touch-action: none; +} +.leaflet-container { + -webkit-tap-highlight-color: transparent; +} +.leaflet-container a { + -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4); +} +.leaflet-tile { + filter: inherit; + visibility: hidden; + } +.leaflet-tile-loaded { + visibility: inherit; + } +.leaflet-zoom-box { + width: 0; + height: 0; + -moz-box-sizing: border-box; + box-sizing: border-box; + z-index: 800; + } +/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ +.leaflet-overlay-pane svg { + -moz-user-select: none; + } + +.leaflet-pane { z-index: 400; } + +.leaflet-tile-pane { z-index: 200; } +.leaflet-overlay-pane { z-index: 400; } +.leaflet-shadow-pane { z-index: 500; } +.leaflet-marker-pane { z-index: 600; } +.leaflet-tooltip-pane { z-index: 650; } +.leaflet-popup-pane { z-index: 700; } + +.leaflet-map-pane canvas { z-index: 100; } +.leaflet-map-pane svg { z-index: 200; } + +.leaflet-vml-shape { + width: 1px; + height: 1px; + } +.lvml { + behavior: url(#default#VML); + display: inline-block; + position: absolute; + } + + +/* control positioning */ + +.leaflet-control { + position: relative; + z-index: 800; + pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ + pointer-events: auto; + } +.leaflet-top, +.leaflet-bottom { + position: absolute; + z-index: 1000; + pointer-events: none; + } +.leaflet-top { + top: 0; + } +.leaflet-right { + right: 0; + } +.leaflet-bottom { + bottom: 0; + } +.leaflet-left { + left: 0; + } +.leaflet-control { + float: left; + clear: both; + } +.leaflet-right .leaflet-control { + float: right; + } +.leaflet-top .leaflet-control { + margin-top: 10px; + } +.leaflet-bottom .leaflet-control { + margin-bottom: 10px; + } +.leaflet-left .leaflet-control { + margin-left: 10px; + } +.leaflet-right .leaflet-control { + margin-right: 10px; + } + + +/* zoom and fade animations */ + +.leaflet-fade-anim .leaflet-tile { + will-change: opacity; + } +.leaflet-fade-anim .leaflet-popup { + opacity: 0; + -webkit-transition: opacity 0.2s linear; + -moz-transition: opacity 0.2s linear; + transition: opacity 0.2s linear; + } +.leaflet-fade-anim .leaflet-map-pane .leaflet-popup { + opacity: 1; + } +.leaflet-zoom-animated { + -webkit-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; + } +.leaflet-zoom-anim .leaflet-zoom-animated { + will-change: transform; + } +.leaflet-zoom-anim .leaflet-zoom-animated { + -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); + -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); + transition: transform 0.25s cubic-bezier(0,0,0.25,1); + } +.leaflet-zoom-anim .leaflet-tile, +.leaflet-pan-anim .leaflet-tile { + -webkit-transition: none; + -moz-transition: none; + transition: none; + } + +.leaflet-zoom-anim .leaflet-zoom-hide { + visibility: hidden; + } + + +/* cursors */ + +.leaflet-interactive { + cursor: pointer; + } +.leaflet-grab { + cursor: -webkit-grab; + cursor: -moz-grab; + cursor: grab; + } +.leaflet-crosshair, +.leaflet-crosshair .leaflet-interactive { + cursor: crosshair; + } +.leaflet-popup-pane, +.leaflet-control { + cursor: auto; + } +.leaflet-dragging .leaflet-grab, +.leaflet-dragging .leaflet-grab .leaflet-interactive, +.leaflet-dragging .leaflet-marker-draggable { + cursor: move; + cursor: -webkit-grabbing; + cursor: -moz-grabbing; + cursor: grabbing; + } + +/* marker & overlays interactivity */ +.leaflet-marker-icon, +.leaflet-marker-shadow, +.leaflet-image-layer, +.leaflet-pane > svg path, +.leaflet-tile-container { + pointer-events: none; + } + +.leaflet-marker-icon.leaflet-interactive, +.leaflet-image-layer.leaflet-interactive, +.leaflet-pane > svg path.leaflet-interactive { + pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ + pointer-events: auto; + } + +/* visual tweaks */ + +.leaflet-container { + background: #ddd; + outline: 0; + } +.leaflet-container a { + color: #0078A8; + } +.leaflet-container a.leaflet-active { + outline: 2px solid orange; + } +.leaflet-zoom-box { + border: 2px dotted #38f; + background: rgba(255,255,255,0.5); + } + + +/* general typography */ +.leaflet-container { + font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; + } + + +/* general toolbar styles */ + +.leaflet-bar { + box-shadow: 0 1px 5px rgba(0,0,0,0.65); + border-radius: 4px; + } +.leaflet-bar a, +.leaflet-bar a:hover { + background-color: #fff; + border-bottom: 1px solid #ccc; + width: 26px; + height: 26px; + line-height: 26px; + display: block; + text-align: center; + text-decoration: none; + color: black; + } +.leaflet-bar a, +.leaflet-control-layers-toggle { + background-position: 50% 50%; + background-repeat: no-repeat; + display: block; + } +.leaflet-bar a:hover { + background-color: #f4f4f4; + } +.leaflet-bar a:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } +.leaflet-bar a:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom: none; + } +.leaflet-bar a.leaflet-disabled { + cursor: default; + background-color: #f4f4f4; + color: #bbb; + } + +.leaflet-touch .leaflet-bar a { + width: 30px; + height: 30px; + line-height: 30px; + } +.leaflet-touch .leaflet-bar a:first-child { + border-top-left-radius: 2px; + border-top-right-radius: 2px; + } +.leaflet-touch .leaflet-bar a:last-child { + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + } + +/* zoom control */ + +.leaflet-control-zoom-in, +.leaflet-control-zoom-out { + font: bold 18px 'Lucida Console', Monaco, monospace; + text-indent: 1px; + } + +.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { + font-size: 22px; + } + + +/* layers control */ + +.leaflet-control-layers { + box-shadow: 0 1px 5px rgba(0,0,0,0.4); + background: #fff; + border-radius: 5px; + } +.leaflet-control-layers-toggle { + background-image: url(images/layers.png); + width: 36px; + height: 36px; + } +.leaflet-retina .leaflet-control-layers-toggle { + background-image: url(images/layers-2x.png); + background-size: 26px 26px; + } +.leaflet-touch .leaflet-control-layers-toggle { + width: 44px; + height: 44px; + } +.leaflet-control-layers .leaflet-control-layers-list, +.leaflet-control-layers-expanded .leaflet-control-layers-toggle { + display: none; + } +.leaflet-control-layers-expanded .leaflet-control-layers-list { + display: block; + position: relative; + } +.leaflet-control-layers-expanded { + padding: 6px 10px 6px 6px; + color: #333; + background: #fff; + } +.leaflet-control-layers-scrollbar { + overflow-y: scroll; + overflow-x: hidden; + padding-right: 5px; + } +.leaflet-control-layers-selector { + margin-top: 2px; + position: relative; + top: 1px; + } +.leaflet-control-layers label { + display: block; + } +.leaflet-control-layers-separator { + height: 0; + border-top: 1px solid #ddd; + margin: 5px -10px 5px -6px; + } + +/* Default icon URLs */ +.leaflet-default-icon-path { + background-image: url(images/marker-icon.png); + } + + +/* attribution and scale controls */ + +.leaflet-container .leaflet-control-attribution { + background: #fff; + background: rgba(255, 255, 255, 0.7); + margin: 0; + } +.leaflet-control-attribution, +.leaflet-control-scale-line { + padding: 0 5px; + color: #333; + } +.leaflet-control-attribution a { + text-decoration: none; + } +.leaflet-control-attribution a:hover { + text-decoration: underline; + } +.leaflet-container .leaflet-control-attribution, +.leaflet-container .leaflet-control-scale { + font-size: 11px; + } +.leaflet-left .leaflet-control-scale { + margin-left: 5px; + } +.leaflet-bottom .leaflet-control-scale { + margin-bottom: 5px; + } +.leaflet-control-scale-line { + border: 2px solid #777; + border-top: none; + line-height: 1.1; + padding: 2px 5px 1px; + font-size: 11px; + white-space: nowrap; + overflow: hidden; + -moz-box-sizing: border-box; + box-sizing: border-box; + + background: #fff; + background: rgba(255, 255, 255, 0.5); + } +.leaflet-control-scale-line:not(:first-child) { + border-top: 2px solid #777; + border-bottom: none; + margin-top: -2px; + } +.leaflet-control-scale-line:not(:first-child):not(:last-child) { + border-bottom: 2px solid #777; + } + +.leaflet-touch .leaflet-control-attribution, +.leaflet-touch .leaflet-control-layers, +.leaflet-touch .leaflet-bar { + box-shadow: none; + } +.leaflet-touch .leaflet-control-layers, +.leaflet-touch .leaflet-bar { + border: 2px solid rgba(0,0,0,0.2); + background-clip: padding-box; + } + + +/* popup */ + +.leaflet-popup { + position: absolute; + text-align: center; + margin-bottom: 20px; + } +.leaflet-popup-content-wrapper { + padding: 1px; + text-align: left; + border-radius: 12px; + } +.leaflet-popup-content { + margin: 13px 19px; + line-height: 1.4; + } +.leaflet-popup-content p { + margin: 18px 0; + } +.leaflet-popup-tip-container { + width: 40px; + height: 20px; + position: absolute; + left: 50%; + margin-left: -20px; + overflow: hidden; + pointer-events: none; + } +.leaflet-popup-tip { + width: 17px; + height: 17px; + padding: 1px; + + margin: -10px auto 0; + + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } +.leaflet-popup-content-wrapper, +.leaflet-popup-tip { + background: white; + color: #333; + box-shadow: 0 3px 14px rgba(0,0,0,0.4); + } +.leaflet-container a.leaflet-popup-close-button { + position: absolute; + top: 0; + right: 0; + padding: 4px 4px 0 0; + border: none; + text-align: center; + width: 18px; + height: 14px; + font: 16px/14px Tahoma, Verdana, sans-serif; + color: #c3c3c3; + text-decoration: none; + font-weight: bold; + background: transparent; + } +.leaflet-container a.leaflet-popup-close-button:hover { + color: #999; + } +.leaflet-popup-scrolled { + overflow: auto; + border-bottom: 1px solid #ddd; + border-top: 1px solid #ddd; + } + +.leaflet-oldie .leaflet-popup-content-wrapper { + zoom: 1; + } +.leaflet-oldie .leaflet-popup-tip { + width: 24px; + margin: 0 auto; + + -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; + filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); + } +.leaflet-oldie .leaflet-popup-tip-container { + margin-top: -1px; + } + +.leaflet-oldie .leaflet-control-zoom, +.leaflet-oldie .leaflet-control-layers, +.leaflet-oldie .leaflet-popup-content-wrapper, +.leaflet-oldie .leaflet-popup-tip { + border: 1px solid #999; + } + + +/* div icon */ + +.leaflet-div-icon { + background: #fff; + border: 1px solid #666; + } + + +/* Tooltip */ +/* Base styles for the element that has a tooltip */ +.leaflet-tooltip { + position: absolute; + padding: 6px; + background-color: #fff; + border: 1px solid #fff; + border-radius: 3px; + color: #222; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + pointer-events: none; + box-shadow: 0 1px 3px rgba(0,0,0,0.4); + } +.leaflet-tooltip.leaflet-clickable { + cursor: pointer; + pointer-events: auto; + } +.leaflet-tooltip-top:before, +.leaflet-tooltip-bottom:before, +.leaflet-tooltip-left:before, +.leaflet-tooltip-right:before { + position: absolute; + pointer-events: none; + border: 6px solid transparent; + background: transparent; + content: ""; + } + +/* Directions */ + +.leaflet-tooltip-bottom { + margin-top: 6px; +} +.leaflet-tooltip-top { + margin-top: -6px; +} +.leaflet-tooltip-bottom:before, +.leaflet-tooltip-top:before { + left: 50%; + margin-left: -6px; + } +.leaflet-tooltip-top:before { + bottom: 0; + margin-bottom: -12px; + border-top-color: #fff; + } +.leaflet-tooltip-bottom:before { + top: 0; + margin-top: -12px; + margin-left: -6px; + border-bottom-color: #fff; + } +.leaflet-tooltip-left { + margin-left: -6px; +} +.leaflet-tooltip-right { + margin-left: 6px; +} +.leaflet-tooltip-left:before, +.leaflet-tooltip-right:before { + top: 50%; + margin-top: -6px; + } +.leaflet-tooltip-left:before { + right: 0; + margin-right: -12px; + border-left-color: #fff; + } +.leaflet-tooltip-right:before { + left: 0; + margin-left: -12px; + border-right-color: #fff; + } diff --git a/site/public/assets/css/mobile.css b/site/public/assets/css/mobile.css new file mode 100644 index 00000000..124b9d42 --- /dev/null +++ b/site/public/assets/css/mobile.css @@ -0,0 +1,172 @@ +/* MOBILE - iphone/ipad css */ + +softbr { + display: none; +} + +@media all and (max-device-width: 1024px) { + softbr { + display: block; + height: 10px; + } + + /* header / footer */ + + header .slogan { + padding-left: 10px; + } + header .splash { + display: none; + } + .home header .links a { + margin-right: 0; + } + header .links a { + padding-right: 0; + margin-right: 14px; + font-size: 14px; + } + footer { + font-size: 14px; + line-height: 1.6; + } + footer > div:nth-child(1) { + padding: 0; + color: #ccc; + margin-bottom: 15px; + } + footer > div:nth-child(2) { + padding: 0; + color: #ccc; + margin-bottom: 15px; + } + footer a { + color: #eee; + border-color: #ccc; + } + footer ul { + flex-wrap: wrap; + } + h1 { + font-size: 32px; + line-height: 44px; + } + + /* 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 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: 16px; + line-height: 30px; + } + .meta { + margin-right: 0px; + margin-bottom: 10px; + } + .modal img { + max-width: 100%; + display: block; + } + th { + overflow: hidden; + text-overflow: ellipsis; + } + section.wide { + width: 100%; + } + .map, .map .applet { + height: 360px; + } + .dataset-heading section { + padding: 0; + } + .dataset-list .dataset { + width: 100%; + } + .dataset-list a { + width: 100%; + } + + .content td a { + text-overflow: ellipsis; + max-width: 100%; + overflow: hidden; + display: inline-block; + } + + .content-about .team-member { + margin: 0 0 10px 0; + padding: 15px; + margin-bottom: 25px; + } + .page_name { + display: none; + } +} + +/* 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; + margin-bottom: 25px; + } + .columns-2 .column, + .columns-3 .column, + .columns-4 .column { + width: 100%; + } + .teaser { + display: none; + } +} \ No newline at end of file diff --git a/site/public/assets/css/splash.css b/site/public/assets/css/splash.css new file mode 100644 index 00000000..6089f10d --- /dev/null +++ b/site/public/assets/css/splash.css @@ -0,0 +1,134 @@ +/* splash */ + +html, body { + overflow: hidden; + width: 100%; height: 100%; +} +header { + position: absolute; + background: transparent; + box-shadow: none; +} +footer { + background: transparent; + position: absolute; + bottom: 0; left: 0; + padding: 20px; +} +footer div { + z-index: 2; +} +footer { + background: #111; +} +header .links a.activeLink { + color: white; + border-bottom-color: white; +} +.splash { +} +#three_container { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; +} + +.about.open { + pointer-events: auto; + opacity: 1; + cursor: pointer; +} +.about { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0,0,0,0.5); + opacity: 0; + pointer-events: none; + transition: opacity 400ms; + overflow-y: scroll; +} +.about .inner { + padding: 40px; + background: #000; + color: #eee; + max-width: 600px; + line-height: 1.5; + cursor: text; +} +.about .inner b { + color: #fff; +} +.about a { + color: #fff; +} +p { + margin: 0 10px 20px 0; + line-height: 1.5; + font-size: 14px; + font-weight: 300; +} + +@media screen and (max-width: 700px) { + header, footer { + transition: background 0.4s; + } + .modalOpen header, + .modalOpen footer { + background: rgba(25, 25, 25, 1.0); + } + header .slogan { + padding-left: 10px; + } + footer { + display: block; + background: rgba(25, 25, 25, 0.8); + padding: 10px 20px; + } + footer div { + background: transparent; + text-align: center; + width: 100%; + display: block; + padding: 0; + } + header .links { + display: block; + text-align: right; + padding: 0; + padding-right: 10px; + } + header .links span, + header .links a { + display: inline-block; + text-align: right; + margin: 0; + font-size: 12px; + background: rgba(25, 25, 25, 0.5); + text-shadow: 0 0 0 rgba(0,0,0,0); + border-bottom: 0; + } + .about { + display: block; + } + .about .inner { + max-width: 100%; + padding: 20px; + padding-top: 80px; + padding-bottom: 50px; + } +} +@media screen and (max-height: 500px) { + .about { + display: block; + } + .about .inner { + max-width: 100%; + padding: 20px; + padding-top: 70px; + padding-bottom: 50px; + } +} diff --git a/site/public/assets/css/tabulator.css b/site/public/assets/css/tabulator.css new file mode 100755 index 00000000..d26b5cfc --- /dev/null +++ b/site/public/assets/css/tabulator.css @@ -0,0 +1,759 @@ +/* Tabulator v4.1.3 (c) Oliver Folkerd */ +.tabulator { + position: relative; + font-size: 13px; + text-align: left; + overflow: hidden; + -ms-transform: translatez(0); + transform: translatez(0); +} + +.tabulator[tabulator-layout="fitDataFill"] .tabulator-tableHolder .tabulator-table { + min-width: 100%; +} + +.tabulator.tabulator-block-select { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.tabulator .tabulator-header { + position: relative; + box-sizing: border-box; + width: 100%; + border-bottom: 1px solid #333; + color: #ddd; + white-space: nowrap; + overflow: hidden; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; +} + +.tabulator .tabulator-header .tabulator-col { + display: inline-block; + position: relative; + box-sizing: border-box; + border-right: 1px solid #333; + text-align: left; + vertical-align: bottom; + overflow: hidden; + padding: 5px 0; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-moving { + position: absolute; + border: 1px solid #333; + background: rgba(80,20,10,0.2); + pointer-events: none; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-col-content { + box-sizing: border-box; + position: relative; + padding: 4px; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title { + box-sizing: border-box; + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: bottom; + /* AH */ + font-weight: 500; + font-size:14px; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor { + box-sizing: border-box; + width: 100%; + border: 1px solid #333; + padding: 1px; + background: #fff; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow { + display: inline-block; + position: absolute; + top: 11px; + right: 8px; + width: 0; + height: 0; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #666; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols { + position: relative; + display: -ms-flexbox; + display: flex; + border-top: 1px solid #333; + overflow: hidden; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols .tabulator-col:last-child { + margin-right: -1px; +} + +.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-resize-handle.prev { + display: none; +} + +.tabulator .tabulator-header .tabulator-col.ui-sortable-helper { + position: absolute; + border: 1px solid #333; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-header-filter { + position: relative; + box-sizing: border-box; + margin-top: 2px; + width: 100%; + text-align: center; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea { + height: auto !important; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg { + margin-top: 3px; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input::-ms-clear { + width: 0; + height: 0; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title { + padding-right: 25px; + padding-left: 6px; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { + cursor: pointer; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow { + border-top: none; + border-bottom: 6px solid #666; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow { + border-top: none; + border-bottom: 6px solid #666; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow { + border-top: 6px solid #666; + border-bottom: none; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical .tabulator-col-content .tabulator-col-title { + -webkit-writing-mode: vertical-rl; + -ms-writing-mode: tb-rl; + writing-mode: vertical-rl; + text-orientation: mixed; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-col-vertical-flip .tabulator-col-title { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-title { + padding-right: 0; + padding-top: 20px; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable.tabulator-col-vertical-flip .tabulator-col-title { + padding-right: 0; + padding-bottom: 20px; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-arrow { + right: calc(50% - 6px); +} + +.tabulator .tabulator-header .tabulator-frozen { + display: inline-block; + position: absolute; + z-index: 10; +} + +.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left { + border-right: 2px solid #333; +} + +.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right { + border-left: 2px solid #333; +} + +.tabulator .tabulator-header .tabulator-calcs-holder { + box-sizing: border-box; + min-width: 400%; + background: rgba(80,20,10,0.2); + border-top: 1px solid #333; + border-bottom: 1px solid #333; + overflow: hidden; +} + +.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row { + background: rgba(80,20,10,0.2); +} + +.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle { + display: none; +} + +.tabulator .tabulator-header .tabulator-frozen-rows-holder { + min-width: 400%; +} + +.tabulator .tabulator-header .tabulator-frozen-rows-holder:empty { + display: none; +} + +.tabulator .tabulator-tableHolder { + position: relative; + width: 100%; + white-space: nowrap; + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +.tabulator .tabulator-tableHolder:focus { + outline: none; +} + +.tabulator .tabulator-tableHolder .tabulator-placeholder { + box-sizing: border-box; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + width: 100%; +} + +.tabulator .tabulator-tableHolder .tabulator-placeholder[tabulator-render-mode="virtual"] { + position: absolute; + top: 0; + left: 0; + height: 100%; +} + +.tabulator .tabulator-tableHolder .tabulator-placeholder span { + display: inline-block; + margin: 0 auto; + padding: 10px; + color: #ccc; + font-weight: bold; + font-size: 20px; +} + +.tabulator .tabulator-tableHolder .tabulator-table { + position: relative; + display: inline-block; + white-space: nowrap; + overflow: visible; +} + +.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs { + font-weight: bold; + background: rgba(80,20,10,0.2); +} + +.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top { + border-bottom: 2px solid #333; +} + +.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom { + border-top: 2px solid #333; +} + +.tabulator .tabulator-footer { + padding: 5px 10px; + border-top: 1px solid #999; + text-align: right; + color: #555; + font-weight: bold; + white-space: nowrap; + -ms-user-select: none; + user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; +} + +.tabulator .tabulator-footer .tabulator-calcs-holder { + box-sizing: border-box; + width: calc(100% + 20px); + margin: -5px -10px 5px -10px; + text-align: left; + background: rgba(80,20,10,0.2); + border-bottom: 1px solid #333; + border-top: 1px solid #333; + overflow: hidden; +} + +.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row { + background: rgba(80,20,10,0.2); +} + +.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle { + display: none; +} + +.tabulator .tabulator-footer .tabulator-calcs-holder:only-child { + margin-bottom: -5px; + border-bottom: none; +} + +.tabulator .tabulator-footer .tabulator-pages { + margin: 0 7px; +} + +.tabulator .tabulator-footer .tabulator-page { + display: inline-block; + margin: 0 2px; + padding: 2px 5px; + border: 1px solid #333; + border-radius: 3px; + background: rgba(255, 255, 255, 0.2); + color: #555; + font-family: inherit; + font-weight: inherit; + font-size: inherit; +} + +.tabulator .tabulator-footer .tabulator-page.active { + color: #d00; +} + +.tabulator .tabulator-footer .tabulator-page:disabled { + opacity: .5; +} + +.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover { + cursor: pointer; + background: rgba(0, 0, 0, 0.2); + color: #fff; +} + +.tabulator .tabulator-col-resize-handle { + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 5px; +} + +.tabulator .tabulator-col-resize-handle.prev { + left: 0; + right: auto; +} + +.tabulator .tabulator-col-resize-handle:hover { + cursor: ew-resize; +} + +.tabulator .tabulator-loader { + position: absolute; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + top: 0; + left: 0; + z-index: 100; + height: 100%; + width: 100%; + background: rgba(0, 0, 0, 0.4); + text-align: center; +} + +.tabulator .tabulator-loader .tabulator-loader-msg { + display: inline-block; + margin: 0 auto; + padding: 10px 20px; + border-radius: 4px; + background: #fff; + font-weight: bold; + font-size: 16px; +} + +.tabulator .tabulator-loader .tabulator-loader-msg.tabulator-loading { + border: 4px solid #333; + color: #000; +} + +.tabulator .tabulator-loader .tabulator-loader-msg.tabulator-error { + color: #000; +} + +.tabulator-row { + position: relative; + box-sizing: border-box; + min-height: 22px; +} + +.tabulator-row.tabulator-row-even { +} + +.tabulator-row.tabulator-selectable:hover { + cursor: pointer; +} + +.tabulator-row.tabulator-selected { + background-color: #9ABCEA; +} + +.tabulator-row.tabulator-selected:hover { + background-color: #555; + cursor: pointer; +} + +.tabulator-row.tabulator-row-moving { + border: 1px solid #000; + background: #fff; +} + +.tabulator-row.tabulator-moving { + position: absolute; + border-top: 1px solid #333; + border-bottom: 1px solid #333; + pointer-events: none; + z-index: 15; +} + +.tabulator-row .tabulator-row-resize-handle { + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 5px; +} + +.tabulator-row .tabulator-row-resize-handle.prev { + top: 0; + bottom: auto; +} + +.tabulator-row .tabulator-row-resize-handle:hover { + cursor: ns-resize; +} + +.tabulator-row .tabulator-frozen { + display: inline-block; + position: absolute; + background-color: inherit; + z-index: 10; +} + +.tabulator-row .tabulator-frozen.tabulator-frozen-left { + border-right: 2px solid #333; +} + +.tabulator-row .tabulator-frozen.tabulator-frozen-right { + border-left: 2px solid #333; +} + +.tabulator-row .tabulator-responsive-collapse { + box-sizing: border-box; + padding: 5px; + border-top: 1px solid #333; + border-bottom: 1px solid #333; +} + +.tabulator-row .tabulator-responsive-collapse:empty { + display: none; +} + +.tabulator-row .tabulator-responsive-collapse table { + font-size: 13px; +} + +.tabulator-row .tabulator-responsive-collapse table tr td { + position: relative; +} + +.tabulator-row .tabulator-responsive-collapse table tr td:first-of-type { + padding-right: 10px; +} + +.tabulator-row .tabulator-cell { + display: inline-block; + position: relative; + box-sizing: border-box; + padding: 10px; + border-right: 1px solid #333; + vertical-align: middle; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.tabulator-row .tabulator-cell.tabulator-editing { + border: 1px solid #1D68CD; + padding: 0; +} + +.tabulator-row .tabulator-cell.tabulator-editing input, .tabulator-row .tabulator-cell.tabulator-editing select { + border: 1px; + background: transparent; +} + +.tabulator-row .tabulator-cell.tabulator-validation-fail { + border: 1px solid #dd0000; +} + +.tabulator-row .tabulator-cell.tabulator-validation-fail input, .tabulator-row .tabulator-cell.tabulator-validation-fail select { + border: 1px; + background: transparent; + color: #dd0000; +} + +.tabulator-row .tabulator-cell:first-child .tabulator-col-resize-handle.prev { + display: none; +} + +.tabulator-row .tabulator-cell.tabulator-row-handle { + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; +} + +.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box { + width: 80%; +} + +.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar { + width: 100%; + height: 3px; + margin-top: 2px; + background: #666; +} + +.tabulator-row .tabulator-cell .tabulator-data-tree-branch { + display: inline-block; + vertical-align: middle; + height: 9px; + width: 7px; + margin-top: -9px; + margin-right: 5px; + border-bottom-left-radius: 1px; + border-left: 2px solid #333; + border-bottom: 2px solid #333; +} + +.tabulator-row .tabulator-cell .tabulator-data-tree-control { + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + vertical-align: middle; + height: 11px; + width: 11px; + margin-right: 5px; + border: 1px solid #333; + border-radius: 2px; + background: rgba(0, 0, 0, 0.1); + overflow: hidden; +} + +.tabulator-row .tabulator-cell .tabulator-data-tree-control:hover { + cursor: pointer; + background: rgba(0, 0, 0, 0.2); +} + +.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse { + display: inline-block; + position: relative; + height: 7px; + width: 1px; + background: transparent; +} + +.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after { + position: absolute; + content: ""; + left: -3px; + top: 3px; + height: 1px; + width: 7px; +} + +.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand { + display: inline-block; + position: relative; + height: 7px; + width: 1px; + background: #333; +} + +.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after { + position: absolute; + content: ""; + left: -3px; + top: 3px; + height: 1px; + width: 7px; + background: #333; +} + +.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle { + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; + height: 15px; + width: 15px; + border-radius: 4px; + background: #666; + color: #fff; + font-weight: bold; + font-size: 1.1em; +} + +.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:hover { + opacity: .7; +} + +.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-close { + display: initial; +} + +.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-open { + display: none; +} + +.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close { + display: none; +} + +.tabulator-row.tabulator-group { + box-sizing: border-box; + border-bottom: 1px solid #999; + border-right: 1px solid #333; + border-top: 1px solid #999; + padding: 5px; + padding-left: 10px; + background: #333; + font-weight: bold; + min-width: 100%; +} + +.tabulator-row.tabulator-group:hover { + cursor: pointer; + background-color: rgba(0, 0, 0, 0.1); +} + +.tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow { + margin-right: 10px; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 6px solid #666; + border-bottom: 0; +} + +.tabulator-row.tabulator-group.tabulator-group-level-1 .tabulator-arrow { + margin-left: 20px; +} + +.tabulator-row.tabulator-group.tabulator-group-level-2 .tabulator-arrow { + margin-left: 40px; +} + +.tabulator-row.tabulator-group.tabulator-group-level-3 .tabulator-arrow { + margin-left: 60px; +} + +.tabulator-row.tabulator-group.tabulator-group-level-4 .tabulator-arrow { + margin-left: 80px; +} + +.tabulator-row.tabulator-group.tabulator-group-level-5 .tabulator-arrow { + margin-left: 100px; +} + +.tabulator-row.tabulator-group .tabulator-arrow { + display: inline-block; + width: 0; + height: 0; + margin-right: 16px; + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + border-right: 0; + border-left: 6px solid #666; + vertical-align: middle; +} + +.tabulator-row.tabulator-group span { + margin-left: 10px; + color: #d00; +} + +.tabulator-edit-select-list { + position: absolute; + display: inline-block; + box-sizing: border-box; + max-height: 200px; + background: #fff; + border: 1px solid #333; + font-size: 13px; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + z-index: 10000; +} + +.tabulator-edit-select-list .tabulator-edit-select-list-item { + padding: 4px; + color: #333; +} + +.tabulator-edit-select-list .tabulator-edit-select-list-item.active { + color: #fff; + background: #1D68CD; +} + +.tabulator-edit-select-list .tabulator-edit-select-list-item:hover { + cursor: pointer; + color: #fff; + background: #1D68CD; +} + +.tabulator-edit-select-list .tabulator-edit-select-list-group { + border-bottom: 1px solid #333; + padding: 4px; + padding-top: 6px; + color: #333; + font-weight: bold; +} -- cgit v1.2.3-70-g09d2 From 3793543be6809db0310f87bf0129f056fbe49a81 Mon Sep 17 00:00:00 2001 From: Adam Harvey Date: Wed, 5 Jun 2019 23:38:25 -0500 Subject: update templates --- site/content/pages/about/attribution.md | 2 +- site/content/pages/about/legal.md | 2 +- site/content/pages/about/news.md | 20 ++++++++++---------- site/public/about/attribution/index.html | 2 +- site/public/about/legal/index.html | 2 +- site/public/about/news/index.html | 20 ++++++++++---------- site/public/assets/css/mobile.css | 7 +++++++ site/public/index.html | 8 ++++---- site/templates/home.html | 8 ++++---- 9 files changed, 39 insertions(+), 32 deletions(-) (limited to 'site/public/assets/css') diff --git a/site/content/pages/about/attribution.md b/site/content/pages/about/attribution.md index 4b05a042..86794533 100644 --- a/site/content/pages/about/attribution.md +++ b/site/content/pages/about/attribution.md @@ -11,7 +11,7 @@ authors: Adam Harvey ------------ -# Legal +# Attribution
    diff --git a/site/content/pages/about/legal.md b/site/content/pages/about/legal.md index d88a51e7..4d71cdd0 100644 --- a/site/content/pages/about/legal.md +++ b/site/content/pages/about/legal.md @@ -11,7 +11,7 @@ authors: Adam Harvey ------------ -# Legal +# Legal and Privacy
      diff --git a/site/content/pages/about/news.md b/site/content/pages/about/news.md index 132a3f5f..6af89afa 100644 --- a/site/content/pages/about/news.md +++ b/site/content/pages/about/news.md @@ -11,7 +11,7 @@ authors: Adam Harvey ------------ -# Press +# News
        @@ -28,18 +28,18 @@ Since launching MegaPixels in April 2019, several of the datasets mentioned have ##### June 2019 -- June 2: A person tracking surveillance workshop at CVPR has been canceled due to the Duke MTMC dataset no longer being available -- June 2: The Duke MTMC dataset website () has mysteriously disappeared without any reason provided -- June 1: The [Brainwash](/datasets/brainwash) face/head dataset has been taken down by its author . "This data was removed from access at the request of the depositor." -- June 1: The [UCCS dataset page](/dataset/uccs) has been updated with a response from the author to clarify that he did not provide any face data to government agencies. Funding was for technology transfer. +- June 2: A person tracking surveillance workshop at CVPR ([reid-mct.github.io/2019](https://reid-mct.github.io/2019/)) has been canceled due to the [Duke MTMC dataset](/datasets/duke_mtmc) no longer being available: "Due to some unforeseen circumstances, the test data has not been available. The multi-target multi-camera tracking and person re-identification challenge is canceled. We sincerely apologize for any inconvenience caused." +- June 2: The [Duke MTMC dataset](/datasets/duke_mtmc) website ([vision.cs.duke.edu/DukeMTMC](http://vision.cs.duke.edu/DukeMTMC)) has abruptly gone blank. An archive from April 18 is still available on the Wayback Machine ([web.archive.org/web/20190418085103/http://vision.cs.duke.edu/DukeMTMC/](https://web.archive.org/web/20190418085103/http://vision.cs.duke.edu/DukeMTMC/)) +- June 1: The [Brainwash](/datasets/brainwash) face/head dataset has been taken down by its author at [exhibits.stanford.edu/data/catalog/sx925dc9385](https://exhibits.stanford.edu/data/catalog/sx925dc9385). "This data was removed from access at the request of the depositor." +- June 1: The [UCCS dataset page](/dataset/uccs) has been updated with a response from the author to clarify that he did not provide any face data to government agencies. Funding was for technology transfer. This site never mentioned that he did provide data to government agencies, only that his work benefited their objectives. ##### May 2019 -- May 31: Semantic Scholar appears to be censoring citations used in this project. Two of the citations linking the [Brainwash](/datasets/brainwash) dataset to research from the National University of Defense Technology (NUDT) in China have disabled. [NUDT citation 1](https://www.semanticscholar.org/paper/A-Replacement-Algorithm-of-Non-Maximum-Suppression-Zhao-Wang/591a4bfa6380c9fcd5f3ae690e3ac5c09b7bf37b), [NUDT citation 2](https://www.semanticscholar.org/paper/Localized-region-context-and-object-feature-fusion-Li-Dou/b02d31c640b0a31fb18c4f170d841d8e21ffb66c), and the [original paper](https://www.semanticscholar.org/paper/End-to-End-People-Detection-in-Crowded-Scenes-Stewart-Andriluka/1bd1645a629f1b612960ab9bba276afd4cf7c666) show that the NUDT citation has been censored (see references) -- May 28: The [Microsoft Celeb](/datasets/msceleb) (MS-Celeb-1M) face dataset website is now 404 and all the download links were deactivated. It appears that Microsoft Research has shuttered access to their MS Celeb dataset. Yet it remains available, as of writing this, on [Imperial College London's website](https://ibug.doc.ic.ac.uk/resources/lightweight-face-recognition-challenge-workshop/) and on -- May 29, 2019: UnConstrained College Students Dataset on [Engadget](https://www.engadget.com/2019/05/28/uccs-facial-recognition-study-students/), [AP News](https://www.apnews.com/003bec760eae4d8085265af9e5175254), [New York Times](https://www.nytimes.com/aponline/2019/05/28/us/ap-us-facial-recognition.html), [US News](https://www.usnews.com/news/best-states/colorado/articles/2019-05-28/colorado-campus-photographed-for-facial-recognition-research), [Daily Dot](https://www.dailydot.com/layer8/college-students-secret-face-recognition-project/), [Washington Post](https://www.washingtonpost.com/business/technology/colorado-students-photographed-for-facial-recognition-study/2019/05/28/0838be48-8165-11e9-b585-e36b16a531aa_story.html), [MSN](https://www.msn.com/en-us/news/politics/colorado-students-unknowingly-photographed-for-facial-recognition-study/ar-AAC2Zkv), [International Association of Privacy Professionals](https://iapp.org/news/a/students-photographed-for-facial-recognition-study/), [The Denver Channel](https://www.youtube.com/watch?v=61NPPD6Mhys), [Daily Mail](https://www.dailymail.co.uk/sciencetech/article-7079865/Spy-cameras-imaged-1-700-unwitting-subjects-facial-recognition-study-funded-U-S-government.html), [New York Post](https://nypost.com/2019/05/29/college-students-secretly-photographed-for-facial-recognition-study/), [Yahoo! News](https://news.yahoo.com/colorado-students-photographed-facial-recognition-162127139.html) -- May 27, 2019: [CU Colorado Springs students secretly photographed for government-backed facial-recognition research](https://www.denverpost.com/2019/05/27/cu-colorado-springs-facial-recognition-research/) -- May 22, 2019: [UCCS secretly photographed students to advance facial recognition technology](https://www.csindy.com/coloradosprings/uccs-secretly-photographed-students-to-advance-facial-recognition-technology/Content?oid=19664437) by J. Adrian Stanley +- May 31: Semantic Scholar appears to be censoring citations used in this project. Two of the citations linking the [Brainwash](/datasets/brainwash) dataset to research from the National University of Defense Technology (NUDT) in China have disabled. [NUDT citation 1](https://www.semanticscholar.org/paper/A-Replacement-Algorithm-of-Non-Maximum-Suppression-Zhao-Wang/591a4bfa6380c9fcd5f3ae690e3ac5c09b7bf37b), [NUDT citation 2](https://www.semanticscholar.org/paper/Localized-region-context-and-object-feature-fusion-Li-Dou/b02d31c640b0a31fb18c4f170d841d8e21ffb66c), and the [original paper](https://www.semanticscholar.org/paper/End-to-End-People-Detection-in-Crowded-Scenes-Stewart-Andriluka/1bd1645a629f1b612960ab9bba276afd4cf7c666) show that the NUDT citation has been censored (see the references section on Semantic Scholar pages) +- May 28: The [Microsoft Celeb](/datasets/msceleb) (MS-Celeb-1M) face dataset website is now 404 and all the download links were deactivated. It appears that someone at Microsoft Research has shuttered access to the MS Celeb dataset. Yet it remains available, as of writing this, on [Imperial College London's website](https://ibug.doc.ic.ac.uk/resources/lightweight-face-recognition-challenge-workshop/) and on +- May 29, 2019: Stories about the [UnConstrained College Students Dataset](/datasets/uccs) appeared on [Engadget](https://www.engadget.com/2019/05/28/uccs-facial-recognition-study-students/), [AP News](https://www.apnews.com/003bec760eae4d8085265af9e5175254), [New York Times](https://www.nytimes.com/aponline/2019/05/28/us/ap-us-facial-recognition.html), [US News](https://www.usnews.com/news/best-states/colorado/articles/2019-05-28/colorado-campus-photographed-for-facial-recognition-research), [Daily Dot](https://www.dailydot.com/layer8/college-students-secret-face-recognition-project/), [Washington Post](https://www.washingtonpost.com/business/technology/colorado-students-photographed-for-facial-recognition-study/2019/05/28/0838be48-8165-11e9-b585-e36b16a531aa_story.html), [MSN](https://www.msn.com/en-us/news/politics/colorado-students-unknowingly-photographed-for-facial-recognition-study/ar-AAC2Zkv), [International Association of Privacy Professionals](https://iapp.org/news/a/students-photographed-for-facial-recognition-study/), [The Denver Channel](https://www.youtube.com/watch?v=61NPPD6Mhys), [Daily Mail](https://www.dailymail.co.uk/sciencetech/article-7079865/Spy-cameras-imaged-1-700-unwitting-subjects-facial-recognition-study-funded-U-S-government.html), [New York Post](https://nypost.com/2019/05/29/college-students-secretly-photographed-for-facial-recognition-study/), [Yahoo! News](https://news.yahoo.com/colorado-students-photographed-facial-recognition-162127139.html) +- May 27, 2019: Denver Post writes about the UCCS dataset: [CU Colorado Springs students secretly photographed for government-backed facial-recognition research](https://www.denverpost.com/2019/05/27/cu-colorado-springs-facial-recognition-research/) +- May 22, 2019: Interview with CS Indy about the UCCS dataset [UCCS secretly photographed students to advance facial recognition technology](https://www.csindy.com/coloradosprings/uccs-secretly-photographed-students-to-advance-facial-recognition-technology/Content?oid=19664437) by J. Adrian Stanley ##### April, 2019 diff --git a/site/public/about/attribution/index.html b/site/public/about/attribution/index.html index 5c3a4ec4..a44881f2 100644 --- a/site/public/about/attribution/index.html +++ b/site/public/about/attribution/index.html @@ -54,7 +54,7 @@
        -

        Legal

        +

        Attribution