5 files changed, 58 insertions, 37 deletions

diff --git a/uploader/static/css/layout-common.css b/uploader/static/css/layout-common.css
new file mode 100644
index 0000000..9c9d034
--- /dev/null
+++ b/uploader/static/css/layout-common.css
@@ -0,0 +1,21 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    display: grid;
+    grid-gap: 1em;
+}
+
+#header {
+    margin: -0.7em; /* Fill entire length of screen */
+    /* Define layout for the children elements */
+    display: grid;
+}
+
+#header #header-nav {
+    /* Place it in the parent element */
+    grid-column-start: 1;
+    grid-column-end: 2;
+    display: flex;
+}
diff --git a/uploader/static/css/layout-large.css b/uploader/static/css/layout-large.css
index d1b3aa1..2d53627 100644
--- a/uploader/static/css/layout-large.css
+++ b/uploader/static/css/layout-large.css
@@ -1,12 +1,6 @@
-* {
-    box-sizing: border-box;
-}
-
 @media screen and (min-width: 20.1in) {
     body {
-        display: grid;
         grid-template-columns: 7fr 3fr;
-        grid-gap: 1em;
     }
 
     #header {
@@ -16,7 +10,7 @@
 
         /* Define layout for the children elements */
         display: grid;
-        grid-template-columns: 8fr 2fr;
+        grid-template-columns: 1fr 9fr;
     }
 
     #header #header-text {
@@ -49,11 +43,12 @@
         grid-column-start: 1;
         grid-column-end: 3;
         padding: 0 3px;
+
+        margin: -0.3em -0.7em 0 -0.7em;
     }
 
     #main #main-content {
-        /*background: #FFFFFF;*/
-        /*max-width: 80%;*/
+        max-width: 950px;
 
         grid-column-start: 1;
         grid-column-end: 2;
@@ -62,5 +57,6 @@
     #main #sidebar-content {
         grid-column-start: 2;
         grid-column-end: 3;
+        padding: 1em 0 0 0;
     }
 }
diff --git a/uploader/static/css/layout-medium.css b/uploader/static/css/layout-medium.css
index f504073..50ceeb4 100644
--- a/uploader/static/css/layout-medium.css
+++ b/uploader/static/css/layout-medium.css
@@ -1,12 +1,6 @@
-* {
-    box-sizing: border-box;
-}
-
 @media screen and (width > 8in) and (max-width: 20in) {
     body {
-        display: grid;
         grid-template-columns: 65fr 35fr;
-        grid-gap: 1em;
     }
 
     #header {
@@ -16,7 +10,7 @@
 
         /* Define layout for the children elements */
         display: grid;
-        grid-template-columns: 8fr 2fr;
+        grid-template-columns: 2fr 8fr;
     }
 
     #header #header-text {
@@ -55,10 +49,9 @@
         /* Place it in the parent element */
         grid-column-start: 1;
         grid-column-end: 2;
-        grid-gap: 5px;
 
         /* Define layout for the children elements */
-        max-width: 70%;
+        max-width: 100%;
     }
 
     #main #sidebar-content {
diff --git a/uploader/static/css/layout-small.css b/uploader/static/css/layout-small.css
index cd32a71..2e47217 100644
--- a/uploader/static/css/layout-small.css
+++ b/uploader/static/css/layout-small.css
@@ -1,12 +1,8 @@
-* {
-    box-sizing: border-box;
-}
-
 @media screen and (max-width: 8in) {
     body {
         display: grid;
         grid-template-columns: 1fr;
-        grid-template-rows: 1fr 2fr 7fr;
+        grid-template-rows: 1fr 90fr;
         grid-gap: 1em;
     }
 
@@ -35,6 +31,11 @@
         grid-column-end: 2;
     }
 
+    #header #header-nav ul {
+        display: grid;
+        grid-template-columns: 1fr;
+    }
+
     #main {
         /* Place it in the parent element */
         grid-column-start: 1;
@@ -42,7 +43,7 @@
         display: grid;
 
         /* Define layout for the children elements */
-        grid-template-rows: 1.5em 80% 20%;
+        grid-template-rows: 1fr 80fr 20fr;
         grid-template-columns: 1fr;
     }
 
@@ -60,7 +61,5 @@
     #main #sidebar-content {
         grid-row-start: 3;
         grid-row-end: 4;
-
-        background: #E5E5FF;
     }
 }
diff --git a/uploader/static/css/theme.css b/uploader/static/css/theme.css
index 09e5a52..45e5d3d 100644
--- a/uploader/static/css/theme.css
+++ b/uploader/static/css/theme.css
@@ -3,45 +3,44 @@ body {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-style: normal;
     font-size: 20px;
-    background: black;
 }
 
 #header {
     background-color: #336699;
     color: #FFFFFF;
-    border-radius: 3px;
     min-height: 30px;
+    border-bottom: solid black 1px;
 }
 
 #header #header-nav .nav li a {
     /* Content styling */
     color: #FFFFFF;
-    background: #4477AA;
-    border: solid 5px #336699;
-    border-radius: 5px;
     font-size: 0.7em;
     text-align: center;
     padding: 1px 7px;
+    text-decoration: none;
 }
 
 #main #breadcrumbs {
-    background: #eaeaea;
-    border-radius:3px;
     text-align: center;
+    background-color: #D5D5D5;
+    padding: 0 1em 0 1em;
 }
 
-#main #main-content {
-    background: #e5e5ff;
+#main #breadcrumbs .breadcrumb {
+    padding-top: 0.5em;
+}
 
+#main #main-content {
     border-radius: 5px;
     padding: 0 5px;
 }
 
 #main #sidebar-content {
-    background: red;
+    background: #FEFEFE;
 
     border-radius: 5px;
-    padding: 0 5px;
+    padding: 10px 5px;
 }
 
 #main .row {
@@ -60,6 +59,10 @@ body {
     text-transform: capitalize;
 }
 
+label {
+    text-transform: Capitalize;
+}
+
 input[type="search"] {
     border-radius: 5px;
 }
@@ -83,3 +86,12 @@ table.dataTable tbody tr.selected td {
     padding-bottom: 0.2em;
     border-bottom: solid gray 1px;
 }
+
+
+.breadcrumb-item {
+    text-transform: Capitalize;
+}
+
+.breadcrumb-item a {
+    text-decoration: none;
+}