From bab9e803724a0eac680d6f30a84856d390791ea3 Mon Sep 17 00:00:00 2001
From: chimchooree <chimchooree@mail.com>
Date: Wed, 13 Jul 2022 12:38:55 -0500
Subject: [PATCH] working

---
 src/index.py                  |   2 +-
 src/static/css/index.css      |  62 ++++++++++++++++++++++++----------
 src/static/img/nav/buffer.png | Bin 0 -> 143 bytes
 src/static/img/nav/home.png   | Bin 1731 -> 323 bytes
 src/views/nav.tpl             |  39 +++++----------------
 5 files changed, 54 insertions(+), 49 deletions(-)
 create mode 100644 src/static/img/nav/buffer.png

diff --git a/src/index.py b/src/index.py
index 5861619..f371840 100644
--- a/src/index.py
+++ b/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)
diff --git a/src/static/css/index.css b/src/static/css/index.css
index 6b8c510..72672fc 100755
--- a/src/static/css/index.css
+++ b/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%;
-}
diff --git a/src/static/img/nav/buffer.png b/src/static/img/nav/buffer.png
new file mode 100644
index 0000000000000000000000000000000000000000..e89fba2acbe32e1c51a356b0dd601fd46c6a8acd
GIT binary patch
literal 143
zcmeAS@N?(olHy`uVBq!ia0vp^OMuvkgAGXDTv2-uNO2Z;L>4nJ=qZCRW5rVYGN7QN
xr;B4q#jUpo4H<#FLkqt8zs+Y`0Avyg?lG)PVqnbKT-OHD;OXk;vd$@?2>{AL8tec7

literal 0
HcmV?d00001

diff --git a/src/static/img/nav/home.png b/src/static/img/nav/home.png
index 97144d7472c857a21211cf22c3a73117c17c1c50..f373cbfb90d2aef590f6b1a4385ba1b9f68b2b9c 100644
GIT binary patch
literal 323
zcmeAS@N?(olHy`uVBq!ia0vp^OMuvkgAGXDTv2-uNO2Z;L>4nJ=qZCRW5rVYGN9mB
zPZ!6Kid%2*T5`2G2sm7P<tV_jcTxLCp}31z910JXEXtaZD0c5Oi?ya**6b1%28Jt|
z{@0gJ{BV*_KJB2nph^>qqmqY!N>fXC<|gxPxzdLXW=Le--geZ)w{YIi`?p`pKd!xh
z+~)i;pS!~AGn4LrFKK@nUgrC>AbQ$Sa}_gF1rHX^CYK2cAS0kA!Ko$%K@|=mM-+;s
zQ^9cphY*5#*xsbGbcR^yu63*9Cfh~5vtvn@aSv9@jlFKsw>Zo9SB7Q9;$MrO9$3Z(
hGzg@Xp`pHj@q?|>^`GCa0Yid;!PC{xWt~$(696~5a*6-|

delta 1730
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
YFRY3CYWo%DX#fBK07*qoM6N<$f_u_iwEzGB

diff --git a/src/views/nav.tpl b/src/views/nav.tpl
index 1833b3b..66b25ed 100644
--- a/src/views/nav.tpl
+++ b/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>