working

src/static/css/index.css

@@ -9,11 +9,22 @@
 a {
     text-decoration: none;
 }
+img {
+    height: auto;
+    width: 100%;
+}
+/*@media (min-width: 1000px) {
+.nav-grid {
+    max-height: 1%: 
+}
+.nav-left,.nav-right { 
+    width: 0px;
+}*/
 
 .grid {
     display: grid;
     grid-template-columns: auto 60% auto;
-    grid-template-rows: 5% 15% 50% 20%;
+    grid-template-rows: 2% 18% 50% 20%;
     grid-column-gap: 0px;
     grid-row-gap: 0px;
 }
@@ -45,27 +56,41 @@ a {
     color: #FBDAEC;
 }
 .nav-grid { 
-    grid-area: 2 / 2 / 3 / 3; 
+    grid-area: 2 / 2 / 3 / 3;  
+    background-color: white;
     display: flex;
     flex-direction:row;
-    justify-content:flex-end;
     display: grid;
-    grid-template-columns: auto repeat(5, 1fr) auto;
-    grid-template-rows: 90px;
-    grid-column-gap: 17px;
+    grid-template-columns: minmax(0%,15%) repeat(5, 1fr) minmax(0%,15%);
+    grid-column-gap: 0px;
     grid-row-gap: 0px; 
-    align-items: end;
     justify-items: center;
 }
+    .nav-left { 
+        grid-area: 1 / 1 / 2 / 2;
+        background-color: fuchsia; 
+        min-height: 61px;} 
+    .nav-right { 
+        grid-area: 1 / 7 / 2 / 8;
+        background-color: fuchsia;
+        min-height: 61px;}
     .nav-home { 
+        background-color: red;
         grid-area: 1 / 2 / 2 / 3;
-        padding-bottom: 3px;
-        position: relative; 
+        min-height: 61px;
     }
-    .nav-blessfrey { grid-area: 1 / 3 / 2 / 4; }
-    .nav-lemonland { grid-area: 1 / 4 / 2 / 5; }
-    .nav-diary { grid-area: 1 / 5 / 2 / 6; }
-    .nav-about { grid-area: 1 / 6 / 2/ 7; } 
+    .nav-blessfrey { grid-area: 1 / 3 / 2 / 4;
+        background-color: yellow;
+        min-height: 61px;}
+    .nav-lemonland { grid-area: 1 / 4 / 2 / 5;
+        min-height: 61px;
+        background-color: green; }
+    .nav-diary { grid-area: 1 / 5 / 2 / 6;
+        background-color: blue;
+        min-height: 61px;}
+    .nav-about { grid-area: 1 / 6 / 2/ 7;
+        background-color: purple;
+        min-height: 61px;}
 .nav-link {
     /*position: absolute;
     top: 45%;
@@ -86,6 +111,12 @@ a {
         -1px  2px 1px black,
         -1px  0   1px black;
 }
+#nav-button img {
+    height: 100%;
+    width: 100%;
+    /*min-height: 61px;
+    min-width: 38px;    */
+}
 
 .content-grid { 
     grid-area: 3 / 2 / 4 / 3;
@@ -114,8 +145,3 @@ a {
     overflow: hidden;
     box-shadow: 0 100vh 0 100vh black;  
 }
-
-#poltics {
-    height: auto;
-    width: 100%;
-}