From 4a261ace16b7d961a657b2b7091394285464de9b Mon Sep 17 00:00:00 2001
From: chimchooree <chimchooree@mail.com>
Date: Tue, 25 Oct 2022 23:46:39 -0500
Subject: [PATCH] this one, not the first

---
 src/static/css/all.css |  8 ++++----
 src/static/css/nav.css | 24 ++++++++++++++----------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/static/css/all.css b/src/static/css/all.css
index a0cf8a2..be14c5f 100755
--- a/src/static/css/all.css
+++ b/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;*/
 }
diff --git a/src/static/css/nav.css b/src/static/css/nav.css
index 9319d9c..4ebcaf6 100644
--- a/src/static/css/nav.css
+++ b/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;