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