working towards new design with bottom nav bar; not quite there

src/static/css/all.css

@@ -18,16 +18,11 @@
 }
 html, body {padding:0; margin:0; height:100%;}
 footer{
-    position: absolute; bottom: 0; right: 0;
+    position: fixed; bottom: 0; left: 0;
     color: #df85a5;
     background-color: transparent;
-    padding-top: 2em;
-    margin-right: 1em;
-    margin-bottom: 1em;
-    text-align: right;
-    overflow: hidden;
+    width: 100vw;
 }
-
 a, a:link, a:visited, a:hover, a:active, b, p {
     text-decoration: none;
     background-color: transparent; 
@@ -76,118 +71,55 @@ pre,code {
 }
 
 .grid {
-    height: auto;
+    height: max(100vh,auto);
     width: 100vw;
     display: grid;
     position: relative;
-    grid-template-columns: 20% 60% 20%;
-    grid-template-rows: 2em 9.515625em auto 12.6875em;
+    grid-template-columns: 1fr;
+    grid-template-rows: 3em auto;
     grid-column-gap: 0px;
     grid-row-gap: 0px;
     box-sizing: border-box;
 }
 
-.top-row { 
-    grid-area: 1 / 1 / 2 / 4; 
+.top {
+    grid-area: 1 / 1 / 2 / 2; 
+    text-align: center;
 }
-.nav-row { 
-    grid-area: 2 / 1 / 3 / 4; 
+.content-grid { 
+    grid-area: 2 / 1 / 3 / 2; 
+    min-height: 60vh;
+    min-width: 50vw;
+    margin-bottom: 15em;
 }
-.nav-grid { 
-    grid-area: 2 / 2 / 3 / 3;  
-    display: flex;
-    flex-direction: row;
+.footer-grid {
     display: grid;
-    grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);
+    grid-template-columns: 12.515625em;
+    grid-template-rows: 9.515625em 3em;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
-    justify-items: center;
-    text-align: center;
+    background-color: transparent;
+    width: 100vw;
+}
+.nav { 
+    grid-area: 1 / 1 / 2 / 2;  
+    background-image: url(../img/nav/bar.png);
+    background-repeat: no-repeat;
+    background-position: bottom;
+    background-size: contain;
+    background-color: transparent;
+    width: 100vw;
+}
+.nav-grid {
+    display: grid;
+    grid-template-columns: 9.515625em;
+    grid-template-rows: repeat(4, minmax(7ch,96px));
+    /*grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);*/
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
     margin: auto;
+    width: 50vw;
 }
-    .nav-left { 
-        grid-area: 1 / 1 / 2 / 2;
-    } 
-    .nav-right { 
-        grid-area: 1 / 7 / 2 / 8;
-    }
-    .nav-home { 
-        grid-area: 1 / 2 / 2 / 3;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-blessfrey { 
-        grid-area: 1 / 3 / 2 / 4;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-fashion { grid-area: 1 / 4 / 2 / 5;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-art {
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-diary { grid-area: 1 / 5 / 2 / 6;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-about { grid-area: 1 / 6 / 2 / 7;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .navlink {
-        font-size: 110%;
-        font-weight: bold;
-        color: #E6E8EF;
-    }
-    .navlink a:link {
-        color: #E6E8EF;
-    }
-    .navlink a:visited {
-        color: #E6E8EF;
-    }
-    .navlink a:hover {
-        color: #f463ad;
-    }
-    .navlink a:active {
-        color: #f463ad;
-    }
-    .nav-grid img {
-        height: 100%;
-        width: 100%;
-    }
-    .content-grid {
-        min-height: 60vh;
-        min-width: 50vw;
-    }
-
-
 .sidebar {
     grid-area: 2 / 2 / 2 / 3;
     display: grid;

src/static/css/demo.css

@@ -1,5 +1,4 @@
-.content-grid { 
-    grid-area: 3 / 1 / 4 / 4; 
+.content-grid {  
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto auto auto;

src/static/css/me.css

@@ -1,5 +1,4 @@
 .content-grid { 
-    grid-area: 3 / 1 / 4 / 4;
     display: grid;
     grid-template-columns: 25% 75%;
 /*    grid-template-rows: 992px;*/

src/static/css/nav.css

@@ -0,0 +1,64 @@
+.nav-diary { 
+    grid-area: 1 / 1 / 2 / 2;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 80% 20%;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    flex-direction: column;
+}
+.nav-play { 
+    grid-area:  1 / 2 / 2 / 3;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 80% 20%;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    flex-direction: column;
+}
+.nav-about {
+    grid-area: 1 / 3 / 2 / 4;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 80% 20%;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    flex-direction: column;
+}
+.nav-dev {
+    grid-area: 1 / 4 / 2 / 5;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 80% 20%;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    flex-direction: column;
+}
+.navlink {
+    font-size: 110%;
+    font-weight: bold;
+    color: #E6E8EF;
+    text-align: center;
+}
+.navlink a:link {
+    color: #E6E8EF;
+}
+.navlink a:visited {
+    color: #E6E8EF;
+}
+.navlink a:hover {
+    color: #f463ad;
+}
+.navlink a:active {
+    color: #f463ad;
+}
+.nav-grid img {
+    height: 100%;
+    width: 100%;
+}
+.links { 
+    grid-area: 2 / 1 / 3 / 2;
+    background-color: black; 
+    width: 100vw;
+    text-align: center;
+}