grid for new index; nav buttons wonky

src/index.py

@@ -36,7 +36,7 @@ def serve_xml(filename):
 # Error Page
 @error(404)
 def error404(error):
-    return "unfortunately, a 404 error. the page you're searching for doesn't exist. (or am I just hiding it for now?) try another page! "
+    return "unfortunately, a 404 error. the page you're searching for doesn't exist. (or is it just in hiding?) try another page! "
 @error(500)
 def error500(error):
     return "unfortunately, a 500 error. something is wrong with the page you're trying to find, if it exists at all. try another page! <a href=https://www.blessfrey.me/>return to blessfrey.me.</a>"
@@ -48,7 +48,7 @@ def error502(error):
 def char(char_name):
     """character page"""
     loc = 'char/'
-    info = {'css': 'diary', 'title': 'blessfrey - character - ' + char_name, 'year': find_year(), 'profile': prepare_profile(loc, char_name)}
+    info = {'css': 'nothing', 'title': 'blessfrey - character - ' + char_name, 'year': find_year(), 'profile': prepare_profile(loc, char_name)}
     abs_app_dir_path = os.path.dirname(os.path.realpath(__file__))
     abs_views_path = os.path.join(abs_app_dir_path, 'views')
     TEMPLATE_PATH.insert(0, abs_views_path )

src/static/css/index.css

@@ -2,7 +2,8 @@
     padding:0;
     margin:0;
     font-family: trebuchet ms; arial; calibri; gill sans; helvetica neue; candara; geneva; verdana; sans-serif;
-    color: #F9B3D7;
+    background-color: black;
+    color: gray;
 }
 
 a {
@@ -11,78 +12,65 @@ a {
 
 .grid {
     display: grid;
-    grid-template-columns: auto 75px 400px 25px 225px 75px auto;
+    grid-template-columns: auto 60% auto;
-    grid-template-rows: 25px 90px 457px auto;
+    grid-template-rows: 5% 15% 50% 20%;
     grid-column-gap: 0px;
     grid-row-gap: 0px;
 }
 
-.whitespace {
+.top-row { 
-    grid-area: 1 / 1 / 2 / 8;
+    grid-area: 1 / 1 / 2 / 4; 
     display: flex;
     flex-direction:column;
     justify-content:center;
     align-items: center;
-    background-color: #900C3F;
+    background-color: red;
+}
+.nav-row { 
+    grid-area: 2 / 1 / 3 / 4; 
+    background-color: orange;
+}
+.content-row {
+    grid-area: 3 / 1 / 4 / 4; 
+    background-color: yellow;
+}
+.latest-row { 
+    grid-area: 4 / 1 / 5 / 4; 
+    background-color: green;
 }
 
-.blessfrey-logo { 
+.logo { 
-    grid-area: 1 / 3 / 2 / 6; 
+    grid-area: 1 / 2 / 2 / 3; 
     padding-top: 5px;
     color: #FBDAEC;
 }
-
-/* navigation pane */
-
-.nav-row {
-    grid-area: 2 / 1 / 3 / 8; 
-    background-color: #900C3F;
-}
-
 .nav-grid { 
-    grid-area: 2 / 2 / 3 / 7; 
+    grid-area: 2 / 2 / 3 / 3; 
     display: flex;
     flex-direction:row;
     justify-content:flex-end;
     display: grid;
-    grid-template-columns: auto repeat(4, 70px) auto;
+    grid-template-columns: auto repeat(5, 1fr) auto;
     grid-template-rows: 90px;
     grid-column-gap: 17px;
     grid-row-gap: 0px; 
     align-items: end;
     justify-items: center;
 }
-.nav-bar {
+    .nav-home { 
-    grid-area: 1 / 1 / 2 / 7;
-    background-image: url(../img/ele/navbar.png);
-    height: 86px;
-    width: 800px;
-}
-.nav-index { 
         grid-area: 1 / 2 / 2 / 3;
         padding-bottom: 3px;
         position: relative; 
-}
+    }
-.nav-game { 
+    .nav-blessfrey { grid-area: 1 / 3 / 2 / 4; }
-    grid-area: 1 / 3 / 2 / 4;
+    .nav-lemonland { grid-area: 1 / 4 / 2 / 5; }
-    padding-bottom: 3px;
+    .nav-diary { grid-area: 1 / 5 / 2 / 6; }
-    position: relative;
+    .nav-about { grid-area: 1 / 6 / 2/ 7; } 
-}
-.nav-diary { 
-    grid-area: 1 / 4 / 2 / 5; 
-    padding-bottom: 3px;
-    position: relative;
-}
-.nav-presskit { 
-    grid-area: 1 / 5 / 2 / 6; 
-    padding-bottom: 3px;
-    position: relative;
-}
 .nav-link {
-    position: absolute;
+    /*position: absolute;
     top: 45%;
     left: 50%;
-    transform: translate(-50%, -50%)
+    transform: translate(-50%, -50%)*/
 }
 .nav-link a {
     font-size: 21px;
@@ -99,48 +87,35 @@ a {
         -1px  0   1px black;
 }
 
-/* Body */
+.content-grid { 
-
+    grid-area: 3 / 2 / 4 / 3;
-.body-row {
+    background-color: black;
-    grid-area: 3 / 1 / 4 / 8; 
-    background-color: #080410;
-}
-
-.social {
-    grid-area: 3 / 6 / 4 / 7;
-    justify-content: center;
-}
-
-.bg {
-    grid-area: 3 / 3 / 4 / 6; 
-    background-color:;
     background-image: url(../img/bg/homeBG.png);
-    width: 650px;
+    display: grid;
-    height: 457px;
+    grid-template-columns: repeat(2, 1fr);
-}
+    grid-template-rows: auto;
-
+    grid-column-gap: 0px;
-.footer-row {
+    grid-row-gap: 0px; 
-    grid-area: 4 / 1 / 5 / 8; 
-    background-color: #900C3F;
 }
-
+    .content-left {
-
+        grid-area: 1 / 1 / 2 / 2; 
-.headline {
+    }
-    margin-right: 0px;
+    .content-right { 
-    margin-left: 0px;
+        grid-area: 1 / 2 / 2 / 3; 
-    margin-top: 0px;
+    } 
-    margin-bottom: 0px; 
+.latest-grid { 
-    padding-top: 3px;
+    grid-area: 4 / 2 / 5 / 3; 
-    padding-right: 1px;
-    padding-bottom: 3px;
-    padding-left: 1px;
 } 
-
 .footer-content {
-    background-color: #581845; 
+    background-color: blue; 
     color: #F9B3D7;
     padding-top: 5px;
     text-align: right;
     overflow: hidden;
-    box-shadow: 0 100vh 0 100vh #581845;  
+    box-shadow: 0 100vh 0 100vh black;  
+}
+
+#poltics {
+    height: auto;
+    width: 100%;
 }

src/views/char.tpl

@@ -0,0 +1,11 @@
+% rebase('frame.tpl')
+% import random
+    <div class="social"> </div>
+
+    <div class="bg"> 
+    </div>
+    {{!profile}}
+    <div class="footer-row"> </div>
+
+    <div class="news">
+    </div>

src/views/frame.tpl

@@ -13,7 +13,7 @@
 
 % include('nav.tpl')
 
-    <div class="body-row"> </div>
+    <div class="content-row"> </div>
 
 {{!base}}
 

src/views/index.tpl

@@ -1,20 +1,15 @@
 % rebase('frame.tpl')
 % import random
-    <div class="social"> </div>
+    <div class="latest-row"></div>
-
+    <div class="content-grid"> 
-    <div class="bg"> 
+        <div class="content-left">
-        <br>
+            No-Legs the Cat <br>
-        Maintenance mode! <br>
+            <img src="/static/img/monorail.png" alt="(image: orange cat)" id="poltics">
-        The website deserves prettier art, more features, and better editting. <br>
-        <br>
-        Until then, check out No-Legs the Cat. <br>
-        <br>
-        <img src="/static/img/monorail.png" alt="(image: He's an orange tabby with orange eyes, a pink nose, and a white chest. He sits with his legs completely tucked, so you can't even tell he has legs. Cutie.)">
-</a><br>
-<br>
         </div>
-
+        <div class="content-right">
-    <div class="footer-row"> </div>
+            <img src="/static/img/monorail.png" alt="(image: orange cat)" id="poltics">
-
+        </div>
-    <div class="news">
+    </div>
+    <div class="latest-grid">
+        grid
     </div>

src/views/logo-bar.tpl

@@ -1,5 +1,5 @@
-    <div class="whitespace"> </div>
+    <div class="top-row"> </div>
 
-    <div class="blessfrey-logo">
+    <div class="logo">
         <center><b>blessfrey</b></center><br>
     </div>

src/views/nav.tpl

@@ -1,4 +1,48 @@
 <!--Navigation Bar-->
     <div class="nav-row"></div>
     <div class="nav-grid">
+        <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>
+        </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>
+        </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>
+        </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>
+        </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>
+        </div>
     </div>