From 3416265c7431ebcc962f39781aa9fc60243bda3a Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Sun, 26 Apr 2020 06:52:54 +0300 Subject: Update styles to match suggested mockup Ref: https://xd.adobe.com/view/fa2b4841-e463-432e-7465-e96b4ed200ff-8c1a/screen/b84fcf66-9580-4ae2-b37d-7ee15401d627/Pangenome-Browser-Manual-Metadata-Host --- bh20simplewebuploader/static/main.css | 72 +++++++++++++++++++++++++++++------ 1 file changed, 61 insertions(+), 11 deletions(-) (limited to 'bh20simplewebuploader/static') diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css index 20003f9..57e29ef 100644 --- a/bh20simplewebuploader/static/main.css +++ b/bh20simplewebuploader/static/main.css @@ -4,23 +4,24 @@ hr { body { color: #101010; - background-color: #F9EDE1; + background-color: #F5FFFF; margin: 0; } h1, h2, h3, h4 { - font-family: 'Roboto Slab', serif; - color: darkblue; + font-family: 'Inter', sans-serif; + color: #0ED1CD; } h1 { text-align: center; } -p { +.intro { color: #505050; - font-style: italic; + font-weight: 300; } + .header { background-color: white; margin: 0 auto; @@ -29,12 +30,17 @@ p { height: 150px; } +h2 > svg { + position: relative; + top: 8px; +} + .logo { float: right; } p, form, .about, .footer { - font-family: 'Raleway', sans-serif; + font-family: 'Inter', sans-serif; line-height: 1.5; } @@ -47,15 +53,17 @@ form h4 { } .intro { - background-color: lightgrey; + background-color: inherit; margin: 0 auto; padding: 20px; } .about { - background-color: lightgrey; - margin: 0 auto; + background-color: #B2F8F8; + margin: 30px auto; padding: 20px; + width: 95%; + border-radius: 20px; } .button { @@ -66,8 +74,13 @@ form h4 { } .footer { - background-color: white; + background: #058280;; margin: 0 auto; + color: #fff; +} + +.footer a { + color: #fff; } span.dropt {border-bottom: thin dotted; background: #ffeedd;} @@ -87,6 +100,21 @@ span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; } grid-auto-flow: column; } +.about { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-auto-flow: row; +} + +.about h1 { + text-align: left; +} + +.about p { + font-weight: 300; + color: #505050; +} + .intro { grid-area: a; } @@ -96,6 +124,15 @@ span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; } grid-area: b; } +a { + color: #40DBD8; + font-weight: 700; +} + +.fasta-file-select label, .metadata label { + font-weight: 600; +} + .metadata { padding: 1em; grid-area: c; @@ -179,9 +216,22 @@ footer { display: flex; flex-direction: row; flex-wrap: wrap; - justify-content: space-around; + justify-content: space-evenly; + align-content: space-evenly; } +.sponsors a { + flex-grow: 4; + height: 200px; + margin: 10px; + background: white; + display: flex; + flex-direction: column; + justify-content: center; +} +.sponsors img { + width: 100%; +} .metadata input#metadata_upload:checked ~ #metadata_upload_form_spot { display: block; } -- cgit v1.2.3