working

src/index.py

@@ -65,4 +65,4 @@ def temp():
 ## Main ##
 
 if __name__ == '__main__':
-    run(host='127.0.0.1', port=9001)
+    run(host='127.0.0.1', port=9090)

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;
 }
@@ -46,26 +57,40 @@ a {
 }
 .nav-grid { 
     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%;
-}

src/views/nav.tpl

@@ -1,48 +1,27 @@
 <!--Navigation Bar-->
     <div class="nav-row"></div>
     <div class="nav-grid">
+        <div class="nav-left">
+            <!--<img src="/static/img/nav/buffer.png" alt="(image: orange cat)" id="poltics">--></div>
         <div class="nav-home">
-            <a href="/">
-                <img src="/static/img/nav/home.png" alt="home" id="poltics">
-            </a>
-            <div class="nav-link">
-                <a href="/">home</a>
-            </div>
+            <img src="/static/img/nav/home.png" alt="(image: orange cat)" id="nav-button">
         </div>
 
         <div class="nav-blessfrey">
-            <a href="/blessfrey">
-                <img src="/static/img/nav/blessfrey.png" alt="blessfrey" id="poltics">
-            </a>
-            <div class="nav-link">
-                <a href="/blessfrey">blessfrey</a>
-            </div>
+            <img src="/static/img/nav/home.png" alt="(image: orange cat)">
         </div>
 
         <div class="nav-lemonland">
-            <a href="/lemonland">
-                <img src="/static/img/nav/lemonland.png" alt="lemonland" id="poltics">
-            </a>
-            <div class="nav-link">
-                <a href="/lemonland">lemonland</a>
-            </div>
+            <img src="/static/img/nav/home.png" alt="(image: orange cat)">
         </div>
 
         <div class="nav-diary">
-            <a href="/diary">
-                <img src="/static/img/nav/diary.png" alt="diary" id="poltics">
-            </a>
-            <div class="nav-link">
-                <a href="/diary">diary</a>
-            </div>
+            <img src="/static/img/nav/home.png" alt="(image: orange cat)">
         </div>
 
         <div class="nav-about">
-            <a href="/about">
-                <img src="/static/img/nav/about.png" alt="about" id="poltics">
-            </a>
-            <div class="nav-link">
-                <a href="/about">about</a>
-            </div>
+            <img src="/static/img/nav/home.png" alt="(image: orange cat)">
         </div>
+        <div class="nav-right">
+            <!--<img src="/static/img/nav/buffer.png" alt="(image: orange cat)">--></div>
     </div>