app: render and serve proper web pages

1 files changed, 195 insertions, 0 deletions

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;
+}