From 57ff25198a82b3f6f413440e4005f0ade8dfb8d8 Mon Sep 17 00:00:00 2001 From: pacien Date: Thu, 29 Jul 2021 18:04:48 +0200 Subject: app: render and serve proper web pages --- static/stylesheets/main.css | 195 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 195 insertions(+) create mode 100644 static/stylesheets/main.css (limited to 'static/stylesheets/main.css') diff --git a/static/stylesheets/main.css b/static/stylesheets/main.css new file mode 100644 index 0000000..93001ac --- /dev/null +++ b/static/stylesheets/main.css @@ -0,0 +1,195 @@ +/* UGE / L2 / Intro to relational databases / Python project prototype + * Author: Pacien TRAN-GIRARD + * Licence: EUPL-1.2 + */ + +p { + line-height: 1.6em; +} + +.page { + color: #526066; + padding: 0 1em; + max-width: 1200px; + margin: 0 auto; +} + +.full-width { + width: 100%; +} + +.l-box { + padding: .75em; +} + +.centered { + margin-left: auto; + margin-right: auto; +} + +.align-left { + text-align: left; +} + +.align-right { + text-align: right; +} + +.align-center { + text-align: center; +} + +.input-invalid { + border: 1px solid #a94442 !important; + box-shadow: inset 0 1px 3px #f79291 !important; +} + +table { + width: 100%; +} + +.text-bold { + font-weight: bold; +} + +/***** DISCLAIMER BAR *****/ + +.disclaimer-bar { + color: white; + text-align: center; + font-size: 1.25em; + padding: .5em; +} + +/***** LOGO *****/ + +.branding h1, +.branding h2 { + display: inline-block; +} + +.branding h1 { + font-size: 4em; + /*padding-right: .5em;*/ + /*border-right: 3px solid #819096;*/ +} + +.branding h2 { + padding-left: .5em; +} + +.branding a { + text-decoration: inherit; + color: inherit; +} + +/***** ACCOUNT-INFO *****/ + +@media screen and (min-width: 768px) { + .account-info { + margin: 4em 0; + text-align: right; + } + + .account-info > * { + display: inline; + } + + .account-info .pure-button { + margin: .3em; + } + + .account-info .pure-button:last-child { + margin-right: 0; + } +} + +@media screen and (max-width: 768px) { + .account-info { + margin: 1em 0; + } + + .account-info .pure-button { + box-sizing: border-box; + width: 100%; + margin: .3em 0; + } +} + +/***** FLASH MESSAGES *****/ + +.flash-message > * { + padding: 15px; + margin-bottom: 20px; + border: 1px solid transparent; +} + +.flash-message > .success { + color: #3c763d; + background-color: #dff0d8; + border-color: #d6e9c6; +} + +.flash-message > .info { + color: #31708f; + background-color: #d9edf7; + border-color: #bce8f1; +} + +.flash-message > .warning { + color: #8a6d3b; + background-color: #fcf8e3; + border-color: #faebcc; +} + +.flash-message > .error { + color: #a94442; + background-color: #f2dede; + border-color: #ebccd1; +} + +/***** FOOTER *****/ + +footer { + border-top: 1px solid #819096; + margin-top: 4em; + padding-top: 1em; + margin-bottom: 1em; +} + +@media screen and (min-width: 64em) { + footer .footer-links { + float: right; + } +} + +@media screen and (max-width: 64em) { + footer > * { + display: block; + } +} + +/***** ACTION BUTTONS *****/ + +.action-buttons * { + box-sizing: border-box; + color: white; +} + +.action-buttons a { + width: 100%; + border-radius: 0; + padding: 1.25em; +} + +.action-buttons a > * { + display: block; +} + +.action-buttons a > span { + margin-top: 1em; + + letter-spacing: 0.25em; + text-transform: uppercase; + font-weight: 600; +} -- cgit v1.2.3