diff options
| -rw-r--r-- | bh20simplewebuploader/static/main.css | 155 | ||||
| -rw-r--r-- | bh20simplewebuploader/templates/form.html | 145 |
2 files changed, 156 insertions, 144 deletions
diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css new file mode 100644 index 0000000..30b1d04 --- /dev/null +++ b/bh20simplewebuploader/static/main.css @@ -0,0 +1,155 @@ +hr { + margin: auto 0; +} + +body { + color: #101010; + background-color: #F9EDE1; + margin: 0; +} + +h1, h2, h3, h4 { + font-family: 'Roboto Slab', serif; + color: darkblue; +} + +h1 { + text-align: center; +} + +p { + color: #505050; + font-style: italic; +} +.header { + background-color: white; + margin: 0 auto; + padding: 20px; + text-align: center; + height: 150px; +} + +.logo { + float: right; +} + +p, form, .about, .footer { + font-family: 'Raleway', sans-serif; + line-height: 1.5; +} + +form h4 { + text-transform: 'uppercase'; +} + +.intro, form { + padding: 20px; +} + +.intro { + background-color: lightgrey; + margin: 0 auto; + padding: 20px; +} + +.about { + background-color: lightgrey; + margin: 0 auto; + padding: 20px; +} +.footer { + background-color: white; + margin: 0 auto; +} + +span.dropt {border-bottom: thin dotted; background: #ffeedd;} +span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; } + +.grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: auto; + row-gap:5px; + grid-template-areas: + "a a b b" + "a a c c" + "a a d d" + "e e e e" + "f f f f"; + grid-auto-flow: column; +} + +.intro { + grid-area: a; +} + +.fasta-file-select { + padding: 1em; + grid-area: b; +} + +.metadata { + padding: 1em; + grid-area: c; +} +.metadata_upload_form { + padding: 1em; + grid-area: c; +} + +#metadata_upload_form_spot { + grid-area: d; +} + +#metadata_fill_form_spot { + grid-area: e; +} + +#metadata_fill_form { + column-count: 4; + margin-top: 0.5em; + column-width: 250px; +} + +.record { + display: flex; + flex-direction: column; + border: solid 1px #808080; + padding: 1em; + background: #F8F8F8; + margin-bottom: 1em; + -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ + page-break-inside: avoid; /* Firefox */ + break-inside: avoid; +} + +.record label { + font-size: small; + margin-top: 10px; +} + +.submit { + grid-area: f; + width: 17em; + justify-self: center; +} + +footer { + display: block; + width: 100%; +} + +.sponsors { + width: inherit; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; +} + +@media only screen and (max-device-width: 480px) { + .grid-container { + display: flex; + flex-direction: column; + } +} diff --git a/bh20simplewebuploader/templates/form.html b/bh20simplewebuploader/templates/form.html index 02ae84d..f24af0e 100644 --- a/bh20simplewebuploader/templates/form.html +++ b/bh20simplewebuploader/templates/form.html @@ -1,152 +1,9 @@ <!DOCTYPE html> <html> - <style> - hr { - margin: auto 0; - } - - body { - color: #101010; - background-color: #F9EDE1; - } - - h1, h2, h3, h4 { - font-family: 'Roboto Slab', serif; - color: darkblue; - } - - h1 { - text-align: center; - } - - p { - color: #505050; - font-style: italic; - } - .header { - background-color: white; - margin: 0 auto; - padding: 20px; - text-align: center; - height: 150px; - } - - .logo { - float: right; - } - - p, form, .about, .footer { - font-family: 'Raleway', sans-serif; - line-height: 1.5; - } - - form h4 { - text-transform: 'uppercase'; - } - - .intro, form { - padding: 20px; - } - - .intro { - background-color: lightgrey; - margin: 0 auto; - padding: 20px; - } - - .about { - background-color: lightgrey; - margin: 0 auto; - padding: 20px; - } - .footer { - background-color: white; - margin: 0 auto; - } - - span.dropt {border-bottom: thin dotted; background: #ffeedd;} - span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; } - - .grid-container { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-template-rows: auto; - row-gap:5px; - grid-template-areas: - "a a b b" - "a a c c" - "a a d d" - "e e e e" - "f f f f"; - grid-auto-flow: column; - } - - .intro { - grid-area: a; - } - - .fasta-file-select { - padding: 1em; - grid-area: b; - } - - .metadata { - padding: 1em; - grid-area: c; - } - .metadata_upload_form { - padding: 1em; - grid-area: c; - } - - #metadata_upload_form_spot { - grid-area: d; - } - - #metadata_fill_form_spot { - grid-area: e; - } - - #metadata_fill_form { - column-count: 4; - margin-top: 0.5em; - column-width: 250px; - } - - .record { - display: flex; - flex-direction: column; - border: solid 1px #808080; - padding: 1em; - background: #F8F8F8; - margin-bottom: 1em; - -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ - page-break-inside: avoid; /* Firefox */ - break-inside: avoid; - } - - .record label { - font-size: small; - margin-top: 10px; - } - - .submit { - grid-area: f; - width: 17em; - justify-self: center; - } - - @media only screen and (max-device-width: 480px) { - .grid-container { - display: flex; - flex-direction: column; - } - } - </style> - <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&family=Roboto+Slab&display=swap" rel="stylesheet"> + <link href="/static/main.css" rel="stylesheet" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Web uploader for Public SARS-CoV-2 Sequence Resource</title> </head> |