this one, not the first

src/static/css/all.css

@@ -127,17 +127,17 @@ pre,code {
     grid-row-gap: 0px; 
     background-color: transparent;
     width: 100vw;
-    min-width: 636px;
+    /*min-width: 636px;*/
 }
 .nav { 
     grid-area: 1 / 1 / 2 / 2;
     background-color: transparent;
-    width: 60vw;
+/*    width: 60vw;*/
     display: grid;
     grid-template-columns: 26% 51% 23%;
-    grid-template-rows: 1fr;
+    grid-template-rows: auto;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     margin: auto;
-    min-width: 636px;
+/*    min-width: 636px;*/
 }

src/static/css/nav.css

@@ -1,4 +1,5 @@
 /*set heart and star to 0px if viewport too small*/
+
 .heart { 
     grid-area: 1 / 1 / 2 / 2;
     background-color: transparent;
@@ -16,11 +17,13 @@
     background-size: contain;
     display: grid;
     grid-template-columns: auto; /*repeat(4, minmax(5ch,128px))*/
-    grid-template-rows: repeat(4, auto);
+    grid-template-rows: repeat(4, minmax(0px,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;
+    font-size: 2vw;
+    margin-bottom: 0px;
 }
 .star { 
     grid-area: 1 / 3 / 2 / 4;
@@ -34,42 +37,42 @@
 .nav-diary { 
     grid-area: 1 / 1 / 2 / 2;
     display: grid;
-    grid-template-columns: 100%;
+    grid-template-columns: auto;
     grid-template-rows: 80% 20%;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     flex-direction: column;
-    min-width: 48px;
+    /*min-width: 48px;*/
 }
 .nav-play { 
     grid-area:  1 / 2 / 2 / 3;
     display: grid;
-    grid-template-columns: 100%;
+    grid-template-columns: auto;
     grid-template-rows: 80% 20%;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     flex-direction: column;
-    min-width: 48px;
+    /*min-width: 48px;*/
 }
 .nav-about {
     grid-area: 1 / 3 / 2 / 4;
     display: grid;
-    grid-template-columns: 100%;
+    grid-template-columns: auto;
     grid-template-rows: 80% 20%;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     flex-direction: column;
-    min-width: 48px;
+    /*min-width: 48px;*/
 }
 .nav-dev {
     grid-area: 1 / 4 / 2 / 5;
     display: grid;
-    grid-template-columns: 100%;
+    grid-template-columns: auto;
     grid-template-rows: 80% 20%;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     flex-direction: column;
-    min-width: 48px;
+    /*min-width: 48px;*/
 }
 .navlink {
     font-size: 110%;
@@ -89,7 +92,8 @@
 }
 .nav-grid img {
     height: auto;
-    width: 100%;
+    max-width:100%;
+    max-height:100%;
 }
 .links { 
     grid-area: 2 / 1 / 3 / 2;