footer works; removed unused elements; added some character avis; char css is fine now

src/index.py

@@ -48,7 +48,7 @@ def error502(error):
 def char(char_name):
     """character page"""
     loc = 'char/'
-    info = {'css': 'nothing', 'title': 'blessfrey - meet ' + char_name, 'year': find_year(), 'profile': prepare_profile(loc, char_name)}
+    info = {'css': 'char', 'title': 'blessfrey - meet ' + 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 )
@@ -72,7 +72,8 @@ def home():
 @route('/me')
 def me():
     """me"""
-    info = {'css': 'me', 'title': 'about me', 'year': find_year(), 'chars': ["Abbey", "Bless", "Rune", "Silke", "Tessa", "WISE"]}
+    #"Abbey", "Aloin", "Amarr", "Angel", "Aries", "Aristen", "Bijoux", "Bell", "Bless", "Calder", "Cass", "Chandrakant", "Chloe", "Customs", "Dagmar", "Dia", "Eden", "Fifi", "Flambebe", "Freya", "Funwa", "Futura", "Havelock", "Heath", "Heather", "Helia", "Intern", "Juno", "Katherine", "Laguna", "Lise", "Lune", "Moonstone", "Nephele", "Night", "Nymph", "Rune", "Silke", "Tessa", "Una", "Winter", "WISE"
+    info = {'css': 'me', 'title': 'about me', 'year': find_year(), 'chars': ["Abbey", "Aloin", "Aristen", "Bell", "Bijoux", "Bless", "Calder", "Cass", "Eponnin", "Faber", "Fifi", "Freya", "Gundrune", "Heather", "Helia", "Leslie", "Lune", "Night", "Rodolphe", "Rune", "Ryada", "Silke", "Tessa", "Tilly", "WISE"]}
     return template('me.tpl', info)
 
 

src/static/css/char.css

@@ -0,0 +1,4 @@
+.content-grid { 
+    margin: auto;
+    color: white;
+}

src/static/css/demo.css

@@ -13,11 +13,6 @@
         margin-top: 2em;
     }
         .controls img { width: 10em; }
-        .center { 
-            width: 60%;
-            padding: 2em;
-            margin: auto;
-        }
 
 .demo-game iframe {
     border: 2px solid #df85a5;

src/static/css/index.css

@@ -1,8 +1,8 @@
 .content-grid { 
     grid-area: 3 / 1 / 4 / 4; 
     display: grid;
-    grid-template-columns: 50% 50%;
-    grid-template-rows: auto;
+    grid-template-columns: repeat(2, 50%);
+    grid-template-rows: 1fr 5em;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
 }
@@ -19,29 +19,26 @@
         background-size: contain;/*80% auto;*/
         background-repeat: no-repeat;
         background-position: center;
-.latest, .latest-grid {
+        }
+    .latest, .latest-grid {
         background-color: #C0AAC0;
-}
-.latest-grid a, ul, li, b {
+    border: 2px solid #df85a5; 
+    }
+    .latest-grid a, ul, li, b {
         background-color: #C0AAC0;
-}
+    border: 2px solid #df85a5; 
+    }
 
-.latest {
+    .latest {
+    border: 2px solid #df85a5;
         color: black;
-}
-.latest-grid { 
-    width: 50%;
-    grid-area: 4 / 2 / 5 / 3; 
         overflow-y: scroll; 
-    margin-right: 0px;
-    margin-left: 5%;
-    margin-top: 3%;
-    margin-bottom: 0px; 
-    padding-top: 4%;
-    padding-right: 1%;
-    padding-bottom: 1%;
-    padding-left: 2%;
-} 
+    }
+    .latest-grid { 
+    border: 2px solid #df85a5;
+        width: 50%;
+        grid-area:  2 / 1 / 3 / 3;
+    } 
     .latest-grid a:link {
         color: #305285;
         background-color: #C0AAC0; 
@@ -59,15 +56,10 @@
         background-color: #C0AAC0; 
     }
     .latest-grid ul {
+    border: 2px solid #df85a5;
         list-style-type: none;
     }
     .latest-grid li {
+    border: 2px solid #df85a5;
         padding-left: 5%;
     }
-.footer-content {
-    color: white;
-    padding-top: 5px;
-    text-align: right;
-    overflow: hidden;
-    box-shadow: 0 100vh 0 100vh black;  
-}

src/static/css/me.css

@@ -36,13 +36,15 @@
             .ocs-nav {
                 display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
+                background-color: #C0AAC0;
+            }
+            .ocs-btn {
+                background-color: #C0AAC0;
             }
             .ocs img {
                 width: 10em;
                 border-radius: 5%;
             }
-            .ocs-btn {
-            }
 
     .content-right h1, h2, ul, li, b, i, p, img, a {
         background-color: transparent;

src/views/char.tpl

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

src/views/demo.tpl

@@ -10,6 +10,8 @@
             <div class="demo-intro"><p>Poltics Cat lost his legs!! Push him around using WASD to find them. Eat any breakfasts you can find along the way! <br></p>
             <br>
             <p>(In case it isn't obvious, this is a crude maze constructed from the infamous 'godot heads'. Click the game to make it active then control kitty using W A S D or arrow keys to find all three breakfasts and his missing legs. His breakfast counter is in the top-right corner. After you win, you can continue to wander the maze aimlessly. Refresh the page to start over.) <br></p></div>
+            <br>
+            <hr>
         </div>
 
         <div class="controls" id="controls">
@@ -17,6 +19,8 @@
             <img src="/static/img/prom/BlessFREY_logo.png" alt="(link: BLESSFREY" class="logo">
             jump to <a href="#demo">demo</a> • <a href="#controls">controls</a> • <a href="#system">system</a> • <a href="#story">story</a> • <a href="#characters">characters</a> • <a href="#info">info</a><br>
             <br>
+            <p>No-legs the Cat is just a demonstration that I can export and embed games here at all. Soon, I'll have real release demos for Blessfrey! <br></p>
+            <br>
             <p>Blessfrey is a 2D dungeoncrawling action rpg for PC developed by me (chimchooree) in Godot Engine inspired by Guild Wars 1 and Magic: The Gathering. I'll share any release demos on this page. <br></p>
             <!--<h2>controls</h2>
             <ul>

src/views/frame.tpl

@@ -6,7 +6,7 @@
 * {
     padding:0;
     margin:0;
-    font-family: trebuchet ms; arial; calibri; gill sans; helvetica neue; candara; geneva; verdana; sans-serif;
+    font-family: verdana, trebuchet ms, arial, calibri, gill sans, helvetica neue, candara, geneva, sans-serif;
     background-color: black;
 }
 html, body {padding:0; margin:0; height:100%;}
@@ -14,8 +14,9 @@ footer{
     position: absolute; bottom: 0; right: 0;
     color: #df85a5;
     background-color: transparent;
-    padding-top: 5px;
-    padding-right: 5px;
+    padding-top: 2em;
+    margin-right: 1em;
+    margin-bottom: 1em;
     text-align: right;
     overflow: hidden;
 }
@@ -27,6 +28,12 @@ p {
         text-indent: 2em;
 }
 
+.center { 
+    width: 60%;
+    padding: 2em;
+    margin: auto;
+}
+
 .grid {
     height: auto;
     width: 100vw;
@@ -49,12 +56,6 @@ p {
 .nav-row { 
     grid-area: 2 / 1 / 3 / 4; 
 }
-.content-row {
-    grid-area: 3 / 1 / 4 / 4; 
-}
-.latest-row { 
-    grid-area: 4 / 1 / 5 / 4; 
-}
 .nav-grid { 
     grid-area: 2 / 2 / 3 / 3;  
     display: flex;
@@ -131,10 +132,10 @@ p {
     .navlink a:active {
         color: #f463ad;
     }
-.nav-grid img {
+    .nav-grid img {
         height: 100%;
         width: 100%;
-}
+    }
     .content-grid {
         min-height: 60vh;
         min-width: 50vw;
@@ -153,8 +154,6 @@ p {
 
 % include('nav.tpl')
 
-    <div class="content-row"> </div>
-
 {{!base}}
 
 % include('footer.tpl')

src/views/index.tpl

@@ -6,16 +6,9 @@
             <div class="contentlogo"></div>
         </div>
         <div class="content-right">
-            <div class="weaponmaster"></div>
-            <div class="tamer"></div>
-            <div class="disciple"></div>
-            <div class="streetfighter"></div>
-            <div class="hacker"></div>
-            <div class="chemist"></div>
-        </div>
         </div>
         <div class="latest-grid">
-        <div class="latest centered">.      •        . <b>latest</b> ☆            ..   . <br></div>
+            <div class="latest-centered">.      •        . <b>latest</b> ☆            ..   . <br></div>
             <br>
             <ul class="latest">
             % for n in news:
@@ -24,5 +17,6 @@
             % end
             </ul>
             <br>
-<div class="latest centered">.            ★            ..             •           .            ☆</div>
+            <div class="latest-centered">.            ★            ..             •           .            ☆</div>
+        </div>
     </div>

src/views/me.tpl

@@ -46,15 +46,12 @@
                 <br>
                 <p>Cat Store - Java, text-based cat breeding and cat show life sim. <br></p>
                 <br>
-                <p><a href="https://chimchooree.itch.io/">itch.io (chimchooree)</a> - Small games, either as tech demos or game jam outcomes. <br></p>
-                <br>
-                <p><a href="https://gitlab.com/chimchooree">GitLab (chimchooree)</a> - Code snippets, coding class assignments, and other random stuff on here. If it looks inactive, most of my projects are private...I'm shy! <br></p>
+                <p>I'll also leave my <a href="https://chimchooree.itch.io/">itch.io (chimchooree)</a> and <a href="https://gitlab.com/chimchooree">GitLab (chimchooree)</a> for micro games and general coding projects. <br></p>
             </div>
 
             <div class="ocs">
                 <h2>characters</h2>
-                <p>If you play Artfight, attack my account <a href="https://artfight.net/~abbey">abbey</a>! <br></p>
-                <br>
+                <p>I'll keep my ocs here, since <a href="https://toyhou.se/abbey">Toyhouse</a> and other sites are cumbersome. Some tie into gamedev projects, some are game characters, others originated on petsites, and others are from my general creative writing. If you play Artfight, attack my account <a href="https://artfight.net/~abbey">abbey</a>! <br></p>
                 <div class="ocs-nav">
                 % for c in chars:
                     <a href="/char/{{c}}">

src/views/nav.tpl

@@ -36,6 +36,5 @@
             <div class="navlink">about</div>
             </a>
         </div>
-        <div class="nav-right">
-            <!--<img src="/static/img/nav/buffer.png" alt="(image: orange cat)">--></div>
+        <div class="nav-right"></div>
     </div>