aboutsummaryrefslogtreecommitdiff
path: root/bh20simplewebuploader/static
diff options
context:
space:
mode:
authorBonfaceKilz2020-04-26 06:52:54 +0300
committerBonfaceKilz2020-04-26 06:52:54 +0300
commit3af1eb2aea430d0b421d7bf0c6e966badfec87d3 (patch)
treec8f480206e291f3e8e507e3e1289afaf2ff783fd /bh20simplewebuploader/static
parent87628425bd83d3d142fbf9383ef727047cd8f9d1 (diff)
downloadbh20-seq-resource-3af1eb2aea430d0b421d7bf0c6e966badfec87d3.tar.gz
bh20-seq-resource-3af1eb2aea430d0b421d7bf0c6e966badfec87d3.tar.lz
bh20-seq-resource-3af1eb2aea430d0b421d7bf0c6e966badfec87d3.zip
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
Diffstat (limited to 'bh20simplewebuploader/static')
-rw-r--r--bh20simplewebuploader/static/main.css72
1 files changed, 61 insertions, 11 deletions
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;
}