Rework UI: present menus on the left, content on the right.

1 files changed, 88 insertions, 3 deletions

diff --git a/uploader/static/css/styles.css b/uploader/static/css/styles.css
index a88c229..4aa776e 100644
--- a/uploader/static/css/styles.css
+++ b/uploader/static/css/styles.css
@@ -1,7 +1,92 @@
-.heading {
-    text-transform: capitalize;
+body {
+    margin: 0.7em;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 1fr 6fr;
+    grid-template-rows: 5em 100%;
+    grid-gap: 20px;
+
+    font-family: Georgia, Garamond, serif;
+    font-style: normal;.
+}
+
+#header {
+    grid-column: 1/3;
+    width: 100%;
+    /* background: cyan; */
+    padding-top: 0.5em;
+    border-radius: 0.5em;
+
+    background-color: #336699;
+    border-color: #080808;
+    color: #FFFFFF;
+    background-image: none;
+}
+
+#header .header {
+    font-size: 2em;
+    display: inline-block;
+    text-align: center;
 }
 
-label {
+#header .header-nav {
+    display: inline-block;
+    color: #FFFFFF;
+}
+
+#header .header-nav li {
+    border-width: 1px;
+    border-color: #FFFFFF;
+    vertical-align: middle;
+    margin: 0.2em;
+}
+
+#header .header-nav a {
+    color: #FFFFFF;
+    text-decoration: none;
+}
+
+#nav-sidebar {
+    grid-column: 1/2;
+    /* background: #e5e5ff; */
+    padding-top: 0.5em;
+    border-radius: 0.5em;
+    font-size: 1.2em;
+}
+
+#main {
+    grid-column: 2/3;
+    width: 100%;
+    /* background: gray; */
+    border-radius: 0.5em;
+}
+
+.pagetitle {
+    padding-top: 0.5em;
+    /* background: pink; */
+    border-radius: 0.5em;
+    /* background-color: #6699CC; */
+    /* background-color: #77AADD; */
+    background-color: #88BBEE;
+}
+
+.pagetitle h1 {
+    text-align: center;
     text-transform: capitalize;
 }
+
+.pagetitle .breadcrumb {
+    background: none;
+}
+
+.pagetitle .breadcrumb .active a {
+    color: #333333;
+}
+
+.pagetitle .breadcrumb a {
+    color: #666666;
+}
+
+.main-content {
+    font-size: 1.275em;
+}