From 02752704ef52bb2c2068e8586c9d4062a7fdcadd Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Sat, 25 Apr 2020 19:34:55 +0300 Subject: Put CSS code into it's own separate CSS file --- bh20simplewebuploader/static/main.css | 155 ++++++++++++++++++++++++++++++ bh20simplewebuploader/templates/form.html | 145 +--------------------------- 2 files changed, 156 insertions(+), 144 deletions(-) create mode 100644 bh20simplewebuploader/static/main.css (limited to 'bh20simplewebuploader') 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 @@ - -
+