navbar looks like skillbar; lots of bugs fixed; maybe gets too big at full-screen at 1080p

src/static/css/all.css

@@ -94,88 +94,23 @@ pre,code {
 }
 .footer-grid {
     display: grid;
-    grid-template-columns: 12.515625em;
-    grid-template-rows: 9.515625em 3em;
+    grid-template-columns: 100vw;/*minmax(113px,12.515625em);/*12.515625em;*/
+    grid-template-rows: 76% 24%/*9.515625em 3em;*/
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     background-color: transparent;
     width: 100vw;
+    min-width: 636px;
 }
 .nav { 
-    grid-area: 1 / 1 / 2 / 2;  
-    background-image: url(../img/nav/bar.png);
-    background-repeat: no-repeat;
-    background-position: bottom;
-    background-size: contain;
+    grid-area: 1 / 1 / 2 / 2;
     background-color: transparent;
-    width: 100vw;
-}
-.nav-grid {
+    width: 60vw;
     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-template-columns: 26% 51% 23%;
+    grid-template-rows: 1fr;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     margin: auto;
-    width: 50vw;
+    min-width: 636px;
 }
-.sidebar {
-    grid-area: 2 / 2 / 2 / 3;
-    display: grid;
-    grid-template-columns: auto;
-    grid-template-rows: repeat(4, auto);
-    grid-column-gap: 0em;
-    grid-row-gap: 0em; 
-    align-content: start;
-    padding-left: 0em;
-}
-
-.sidebar a:link {
-    font-weight: bold;
-}
-.sidebar a {
-    color: #1D1761;
-}
-.sidebar a:hover {
-    color: #3127A5;
-}
-.sidebar a:visited {
-    color: #1D1761;
-}
-.sidebar a:active {
-    color: #3B2FC6;
-}
-
-
-    .diary-box {
-        background-color: #A88AA8;  
-        text-align: center;
-        border-radius: 1em;
-        margin: 1em;
-        padding: .3em;
-        margin-top: 0em;
-        padding-bottom: 1em;
-    }
-
-    .about-box {
-        grid-area: 1 / 1 / 2 / 2;
-    }
-    .twitter-box {
-        grid-area: 2 / 1 / 3 / 2;
-    }
-    .latest {
-        grid-area: 3 / 1 / 4 / 2;
-    }
-    .latest-text {
-        text-align: left;
-        padding: 0em;
-        background-color: #A88AA8; 
-    }
-    .wordcloud {
-        grid-area: 4 / 1 / 5 / 2;
-    }
-    .disclosure {
-        grid-area: 5 / 1 / 6 / 2;
-    }
-

src/static/css/nav.css

@@ -1,3 +1,35 @@
+.heart { 
+    grid-area: 1 / 1 / 2 / 2;
+    background-color: transparent;
+    background-image: url(../img/nav/heart.png); 
+    background-repeat: no-repeat;
+    background-position: bottom right;
+    background-size: contain;
+}
+.nav-grid {
+    grid-area: 1 / 2 / 2 / 3;
+    background-color: transparent;
+    background-image: url(../img/nav/field.png);
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    background-size: contain;
+    display: grid;
+    grid-template-columns: auto; /*repeat(4, minmax(5ch,128px))*/
+    grid-template-rows: repeat(4, auto);
+    /*grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);*/
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    align-items: center;
+}
+.star { 
+    grid-area: 1 / 3 / 2 / 4;
+    background-color: transparent;
+    background-image: url(../img/nav/star.png); 
+    background-repeat: no-repeat;
+    background-position: bottom left;
+    background-size: contain;
+} 
+
 .nav-diary { 
     grid-area: 1 / 1 / 2 / 2;
     display: grid;
@@ -6,6 +38,7 @@
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     flex-direction: column;
+    min-width: 48px;
 }
 .nav-play { 
     grid-area:  1 / 2 / 2 / 3;
@@ -15,6 +48,7 @@
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     flex-direction: column;
+    min-width: 48px;
 }
 .nav-about {
     grid-area: 1 / 3 / 2 / 4;
@@ -24,6 +58,7 @@
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     flex-direction: column;
+    min-width: 48px;
 }
 .nav-dev {
     grid-area: 1 / 4 / 2 / 5;
@@ -33,6 +68,7 @@
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     flex-direction: column;
+    min-width: 48px;
 }
 .navlink {
     font-size: 110%;
@@ -53,7 +89,7 @@
     color: #f463ad;
 }
 .nav-grid img {
-    height: 100%;
+    height: auto;
     width: 100%;
 }
 .links { 
@@ -61,4 +97,6 @@
     background-color: black; 
     width: 100vw;
     text-align: center;
+    padding-top: 0.5em;
+    padding-bottom: 1em;
 } 

src/static/css/sidebar.css

@@ -0,0 +1,59 @@
+.sidebar {
+    grid-area: 2 / 2 / 2 / 3;
+    display: row;
+/*    grid-template-columns: auto;
+    grid-template-rows: repeat(4, auto);*/
+    grid-column-gap: 0em;
+    grid-row-gap: 0em; 
+/*    align-content: start;
+    padding-left: 0em;*/
+}
+
+.sidebar a:link {
+    font-weight: bold;
+}
+.sidebar a {
+    color: #1D1761;
+}
+.sidebar a:hover {
+    color: #3127A5;
+}
+.sidebar a:visited {
+    color: #1D1761;
+}
+.sidebar a:active {
+    color: #3B2FC6;
+}
+
+
+    .diary-box {
+        background-color: #A88AA8;  
+        text-align: center;
+        border-radius: 1em;
+        margin: 1em;
+        padding: .3em;
+        margin-top: 0em;
+        padding-bottom: 1em;
+    }
+
+    .about-box {
+        grid-area: 1 / 1 / 2 / 2;
+    }
+    .twitter-box {
+        grid-area: 2 / 1 / 3 / 2;
+    }
+    .latest {
+        grid-area: 3 / 1 / 4 / 2;
+    }
+    .latest-text {
+        text-align: left;
+        padding: 0em;
+        background-color: #A88AA8; 
+    }
+    .wordcloud {
+        grid-area: 4 / 1 / 5 / 2;
+    }
+    .disclosure {
+        grid-area: 5 / 1 / 6 / 2;
+    }
+