summaryrefslogtreecommitdiff
path: root/site/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'site/assets/css')
-rw-r--r--site/assets/css/css.css176
-rw-r--r--site/assets/css/mobile.css77
-rw-r--r--site/assets/css/splash.css9
3 files changed, 200 insertions, 62 deletions
diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index 12b059ef..92e59b3c 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -18,8 +18,8 @@ html, body {
html {
background: #181818;
}
-a {outline : none;}
-img {border : 0;}
+a { outline: none; }
+img { border: 0; }
.content {
opacity: 0;
transition: opacity 0.1s cubic-bezier(0,1,1,1);
@@ -72,23 +72,26 @@ header .site_name {
line-height: 11px;
letter-spacing: 3px;
}
-header .splash{
+header .page_name {
font-size: 22px;
font-weight: 400;
color: #eee;
- /*padding-left: 8px;*/
opacity: 0;
transition: 0.3s opacity cubic-bezier(0,0,1,1);
margin-left:18px;
- /*line-height: 22px;*/
}
-.scrolled header .splash {
+.scrolled header .page_name {
opacity: 1;
}
-header .links{
+header .links {
font-size: 18px;
line-height: 18px;
}
+.home header .links a {
+ background-color: rgba(24,24,24,0.9);
+ border-bottom: 2px solid transparent;
+ padding: 3px;
+}
header .sub {
margin-left: 4px;
margin-top: 2px;
@@ -119,25 +122,28 @@ header .links a {
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,255);
+ border-bottom: 2px solid rgba(255,255,255,1);
}
.desktop header .links a:hover {
color: #fff;
- border-bottom: 2px solid rgba(255,255,255,255);
+ border-bottom: 2px solid rgba(255,255,255,1);
}
.desktop header .links a.active:hover {
color: #fff;
- border-bottom: 2px solid rgba(255,255,255,255);
+ border-bottom: 2px solid rgba(255,255,255,1);
}
-header .links.splash{
- font-size:22px;
- font-weight: 400;
+.home header .links a {
+ margin-right: 26px;
+ margin-left: 0;
+}
+.home header .links a:last-child {
+ margin-right: 29px;
}
-
/* footer */
footer {
@@ -147,8 +153,8 @@ footer {
flex-direction: row;
justify-content: space-between;
color: #666;
- font-size: 11px;
- line-height: 17px;
+ font-size: 13px;
+ /*line-height: 17px;*/
padding: 15px;
font-family: "Roboto", sans-serif;
}
@@ -164,40 +170,42 @@ footer > div:nth-child(2) {
}
footer a {
display: inline-block;
- color: #ccc;
- transition: color 0.1s cubic-bezier(0,0,1,1);
- border-bottom:1px solid #555;
+ color: #aaa;
+ transition: all 0.1s cubic-bezier(0,0,1,1);
+ border-bottom: 1px solid #555;
padding-bottom: 1px;
text-decoration: none;
}
-
-footer a:hover{
- color: #ccc;
+.desktop footer a:hover {
+ color: #fff;
border-bottom:1px solid #999;
}
-footer ul{
- margin:0;
+footer ul {
+ margin: 0;
+ display: flex;
+ flex-direction: row;
+ color: #888;
+ font-size: 11px;
}
-footer ul li{
- color: #bbb;
- margin: 0 5px 0 0;
- font-size: 12px;
- display: inline-block;
+footer ul li {
+ margin-bottom: 0;
+ font-size: 11px;
+ font-weight: 400;
+ color:#666;
}
-footer ul li:last-child{
- margin-right:0px;
+footer ul li:last-child {
+ margin-right: 0px;
}
-footer ul.footer-left{
- float:left;
- margin-left:40px;
+footer ul:first-child li {
+ margin-right: 8px;
}
-footer ul.footer-right{
- float:right;
- margin-right:40px;
+footer ul:last-child li {
+ margin-left: 8px;
}
.desktop footer a:hover {
- color: #ddd;
+ color: #fff;
}
+
/* headings */
h1 {
@@ -273,6 +281,52 @@ 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 {
@@ -410,7 +464,7 @@ ul {
ul li {
margin-bottom: 8px;
color: #dedede;
- font-weight: 300;
+ font-weight: 400;
font-size: 14px;
}
@@ -764,15 +818,21 @@ section.fullwidth .image {
/* intro - list of datasets */
.dataset-heading {
- background: #000;
+ /*background: #000;*/
width: 100%;
padding: 10px;
}
+.dataset-heading p{
+ max-width: none;
+}
+.dataset-heading h1{
+ max-width: none;
+}
.dataset-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
- margin:0;
+ margin: 20px 0 0 0;
}
.dataset-list a {
text-decoration: none;
@@ -806,8 +866,8 @@ section.fullwidth .image {
.desktop .dataset-list a:nth-child(3n+3):hover { background-color: rgba(255, 255, 0, 0.2); }
.dataset-list span {
- box-shadow: -3px -3px #181818, 3px -3px #181818, -3px 3px #181818, 3px 3px #181818;
background-color: #181818;
+ box-shadow: -3px -3px #181818, 3px -3px #181818, -3px 3px #181818, 3px 3px #181818;
box-decoration-break: clone;
}
.dataset-list .title {
@@ -843,16 +903,23 @@ section.fullwidth .image {
display: inline-block;
margin: 0;
cursor: pointer;
- margin-right: 20px;
- font-size: 16px;
+ margin-right: 10px;
transition: background 0.2s;
background: #555;
color: #fff;
- padding: 4px 6px;
+ padding: 7px 11px;
border-radius: 4px;
font-weight: 500;
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;
@@ -861,6 +928,9 @@ section.fullwidth .image {
.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;
}
@@ -954,13 +1024,17 @@ page-specific formatting
ul.map-legend{
display: inline-block;
- margin:0;
- font-size:14px;
+ margin: 0;
+ font-size: 14px;
}
-ul.map-legend li{
+ul.map-legend li {
margin-right: 10px;
- padding-top:4px;
+ padding-top: 4px;
display: inline-block;
+ cursor: pointer;
+}
+.desktop ul.map-legend li:hover {
+ text-decoration: underline;
}
ul.map-legend li:before {
content: '';
@@ -969,6 +1043,10 @@ ul.map-legend li:before {
height: 10px;
margin-right: 6px;
}
+ul.map-legend li.active {
+ text-decoration: underline;
+ color: #fff;
+}
ul.map-legend li.edu:before {
background-color: #f2f293;
}
diff --git a/site/assets/css/mobile.css b/site/assets/css/mobile.css
index 6a742277..825a7012 100644
--- a/site/assets/css/mobile.css
+++ b/site/assets/css/mobile.css
@@ -1,17 +1,55 @@
/* MOBILE - iphone/ipad css */
+softbr {
+ display: none;
+}
+
@media all and (max-device-width: 1024px) {
+ softbr {
+ display: block;
+ height: 10px;
+ }
+
/* header / footer */
- .slogan {
+
+ 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: 34px;
+ }
/* MOBILE content */
@@ -38,6 +76,13 @@
width: 100%;
padding: 0 10px;
}
+ section.about-menu {
+ padding: 0;
+ }
+ .content-about section:first-of-type > p:first-of-type {
+ font-size: 18px;
+ line-height: 30px;
+ }
.meta {
margin-right: 0px;
margin-bottom: 10px;
@@ -49,17 +94,36 @@
overflow: hidden;
text-overflow: ellipsis;
}
- .citationHeader {
-
- }
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;
+ }
- /* MOBILE datasets page */
+ .content-about .team-member {
+ margin: 0 0 10px 0;
+ padding: 10px;
+ }
+ .page_name {
+ display: none;
+ }
}
/* iphone-specific */
@@ -88,4 +152,7 @@
.columns-4 .column {
width: 100%;
}
+ .teaser {
+ display: none;
+ }
} \ No newline at end of file
diff --git a/site/assets/css/splash.css b/site/assets/css/splash.css
index 046d5c34..6089f10d 100644
--- a/site/assets/css/splash.css
+++ b/site/assets/css/splash.css
@@ -19,15 +19,8 @@ footer div {
z-index: 2;
}
footer {
- /*text-shadow: 0 0 5px #191919, 0 0 5px #191919, 0 0 5px #191919;*/
background: #111;
}
-header > div a,
-footer > div {
- /*background: rgba(25, 25, 25, 0.8);
- padding: 3px;
- border-radius: 2px;*/
-}
header .links a.activeLink {
color: white;
border-bottom-color: white;
@@ -106,7 +99,7 @@ p {
display: block;
text-align: right;
padding: 0;
- padding-right: 5px;
+ padding-right: 10px;
}
header .links span,
header .links a {
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-11 15:15:45 +0000