diff options
Diffstat (limited to 'site/assets/css')
| -rw-r--r-- | site/assets/css/css.css | 108 | ||||
| -rw-r--r-- | site/assets/css/mobile.css | 22 |
2 files changed, 81 insertions, 49 deletions
diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 932f9596..f59556f8 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -27,6 +27,9 @@ img { border: 0; } html.desktop .content, html.mobile .content { opacity: 1; + margin-top: 50px; +} +html.mobile .content{ } /* header */ @@ -172,7 +175,6 @@ footer a { display: inline-block; color: #aaa; transition: all 0.1s cubic-bezier(0,0,1,1); - border-bottom: 1px solid #555; padding-bottom: 1px; text-decoration: none; } @@ -212,7 +214,7 @@ h1 { color: #eee; font-weight: 400; font-size: 34pt; - margin: 75px auto 10px auto; + margin: 20px auto 10px auto; padding: 0; transition: color 0.1s cubic-bezier(0,0,1,1); font-family: 'Roboto Mono', monospace; @@ -330,10 +332,10 @@ th, .gray { /* content */ .content { - padding-top: 28px; + padding-top: 20px; padding-bottom: 100px; min-height: calc(100vh - 55px); - line-height: 1.5; + line-height: 1.8; } section { width: 960px; @@ -352,7 +354,7 @@ section { } section p { margin: 10px auto 20px auto; - line-height: 1.85rem; + line-height: 1.9rem; font-size: 17px; font-weight: 400; color: #cdcdcd; @@ -403,6 +405,10 @@ p.subp{ padding-bottom: 5px; line-height: 14px } +.mobile .meta .gray { + font-size: 10px; + padding-bottom: 0px; +} .right-sidebar { float: right; width: 200px; @@ -430,6 +436,13 @@ p.subp{ .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; @@ -464,7 +477,7 @@ ul { ul li { margin-bottom: 8px; color: #dedede; - font-weight: 300; + font-weight: 400; font-size: 14px; } @@ -813,6 +826,7 @@ section.fullwidth .image { } .content .dataset-intro .first_paragraph { margin-top: 10px; + font-size: 18px; } /* intro - list of datasets */ @@ -820,7 +834,7 @@ section.fullwidth .image { .dataset-heading { /*background: #000;*/ width: 100%; - padding: 10px; + padding: 0 25px; } .dataset-heading p{ max-width: none; @@ -836,58 +850,44 @@ section.fullwidth .image { } .dataset-list a { text-decoration: none; - transition: background-color 0.1s cubic-bezier(0,0,1,1); - background: black; - margin: 0 11px 11px 0; - border: 0; + 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; - height: 178px; - padding: 10px; + padding: 12px; color: white; font-weight: 400; font-family: 'Roboto'; position: relative; } -.desktop .content .dataset-list a { - border: none; -} -.desktop .dataset-list a:hover { - border: none; +.dataset-list .dataset-image { + background-size: cover; + width: auto; + height: 178px; } -.dataset-list a:nth-child(3n+1) { background-color: rgba(255, 0, 0, 0.1); } -.desktop .dataset-list a:nth-child(3n+1):hover { background-color: rgba(255, 0, 0, 0.2); } - -.dataset-list a:nth-child(3n+2) { background-color: rgba(255, 128, 0, 0.1); } -.desktop .dataset-list a:nth-child(3n+2):hover { background-color: rgba(255, 128, 0, 0.2); } - -.dataset-list a:nth-child(3n+3) { background-color: rgba(255, 255, 0, 0.1); } -.desktop .dataset-list a:nth-child(3n+3):hover { background-color: rgba(255, 255, 0, 0.2); } +.desktop .content .dataset-list a { + border: 1px solid #333; -.dataset-list span { - background-color: #181818; - box-shadow: -3px -3px #181818, 3px -3px #181818, -3px 3px #181818, 3px 3px #181818; - box-decoration-break: clone; } -.dataset-list .title { - margin-bottom: 10px; - padding: 2px 4px; - +.desktop .dataset-list a:hover { + border: 1px solid #666; } .dataset-list .fields { - display: block; - position: absolute; - bottom: 0px; - left: 10px; font-size: 12px; + color: #ccc; } -.dataset-list .fields div { - display: none; +.dataset-list .dataset .title{ + font-size: 16px; + line-height: 20px; + margin-bottom: 4px; + font-weight: 400; + display: block; } -.dataset-list .fields div.visible { +.dataset-list .fields div { display: block; - margin-bottom: 10px; } .dataset-list .sort-options { margin: 0; @@ -909,7 +909,7 @@ section.fullwidth .image { color: #fff; padding: 7px 11px; border-radius: 4px; - font-weight: 500; + font-weight: 400; font-size: 14px; cursor: pointer; user-select: none; @@ -944,13 +944,14 @@ section.intro_section { width: 100%; background-size: cover; background-position: center left; - padding: 50px 0; + /*padding: 50px 0;*/ min-height: 40vh; display: flex; justify-content: center; align-items: center; background-color: #111111; - margin-bottom: 30px; + margin-bottom: 20px; + padding: 0; } .intro_section .inner { max-width: 960px; @@ -963,6 +964,11 @@ section.intro_section { 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; } @@ -973,6 +979,10 @@ section.intro_section { 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; @@ -981,6 +991,14 @@ section.intro_section { 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 { diff --git a/site/assets/css/mobile.css b/site/assets/css/mobile.css index 825a7012..124b9d42 100644 --- a/site/assets/css/mobile.css +++ b/site/assets/css/mobile.css @@ -48,7 +48,8 @@ softbr { flex-wrap: wrap; } h1 { - font-size: 34px; + font-size: 32px; + line-height: 44px; } /* MOBILE content */ @@ -74,13 +75,23 @@ softbr { } section { width: 100%; - padding: 0 10px; + 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: 18px; + font-size: 16px; line-height: 30px; } .meta { @@ -89,6 +100,7 @@ softbr { } .modal img { max-width: 100%; + display: block; } th { overflow: hidden; @@ -119,7 +131,8 @@ softbr { .content-about .team-member { margin: 0 0 10px 0; - padding: 10px; + padding: 15px; + margin-bottom: 25px; } .page_name { display: none; @@ -146,6 +159,7 @@ softbr { } .columns .column { margin: 0; + margin-bottom: 25px; } .columns-2 .column, .columns-3 .column, |
