small fixes to every page - stopped on gdd

src/index.py

@@ -587,7 +587,7 @@ def style():
     info = {'css': 'doc', 'title': 'blessfrey style guide', 'year': find_year()}
     return template('style-guide.tpl', info)
 # Art Direction
-@route('/vibe')
+@route('/blessfrey-vibe')
 def vibe():
     """GDD Page"""
     info = {'css': 'doc', 'title': 'blessfrey gdd - vibe', 'year': find_year()}

src/static/css/all.css

@@ -84,6 +84,7 @@ pre,code {
 
 .top {
     grid-area: 1 / 1 / 2 / 2; 
+    color: white;
     text-align: center;
 }
 .content-grid { 

src/static/css/demo.css

@@ -1,46 +1,27 @@
 .content-grid {  
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: auto auto auto;
+    grid-template-rows:  repeat(3, auto);
     grid-column-gap: 0px;
     grid-row-gap: 0em;
-            height: 45em;
+    color: white;
 }
-    .jump { 
-        grid-area: 1 / 1 / 2 / 2;
-        text-align: center;
-        margin: auto;
-        font-size: 1.5em;
 
+.edition { 
+    grid-area: 1 / 1 / 2 / 2; 
     }
-        .jump img { width: 5em; }
 
-        .long { 
+.demo { grid-area: 2 / 1 / 3 / 2; } 
-            grid-area: grid-area: 2 / 1 / 3 / 2;
-            display: grid;
-            grid-template-columns: 1fr;
-            grid-template-rows: repeat(5, auto);
-            grid-row-gap: 95vh; 
-            height: 45em;
-            color: white;
-            overflow: auto;
-        }
    
-.demo-game iframe {
+.demo iframe {
     border: 2px solid #df85a5;
     padding: 10px;
     display: block;
     margin: auto;
 }
-.demo-intro {
+.guide {
-    width: 40%;
+    grid-area: 3 / 1 / 4 / 2;
-    padding: 10px;
+    width: 80%;
+    padding: 2em;
     margin: auto;
 }
-            .demo { grid-area: 1 / 1 / 2 / 2;
-}
-            .system { grid-area: 2 / 1 / 3 / 2;}
-            .story { grid-area: 3 / 1 / 4 / 2;}
-            .characters { grid-area: 4 / 1 / 5 / 2;}
-            .info { grid-area: 5 / 1 / 6 / 2;
-                height: 50em;}

src/static/css/diary.css

@@ -1,5 +1,4 @@
 .content-grid {
-    grid-area: 3 / 1 / 4 / 4; 
     max-width: MAX(50em, 50%);
     display: grid;
     grid-template-columns: 2fr 1fr;
@@ -42,6 +41,10 @@
         padding-top: 0em;
         margin: auto;
     }
+    .diary-dir.bottom {
+        grid-area: 3 / 1 / 4 / 3;
+        margin: auto;
+    }
     .diary-dir-left {
         display: inline-block;
         vertical-align: middle;
@@ -68,6 +71,9 @@
         grid-area: 2 / 1 / 3 / 2;
         margin-right: 2em;
     }
+    .title {
+        color: white;
+    }
 
     .snippet {
         margin-top: 0em;
@@ -164,4 +170,4 @@
         height: 1em;
     }
 
-    .sidebar {grid-area: 2/2/2/3;}
+    .sidebar {grid-area: 2 / 2 / 2 / 3;}

src/static/css/entry.css

@@ -136,9 +136,11 @@ hr {
     color: #080410;
 }
 
-.rec-box { grid-area: 2 / 1 / 3 / 2;
+.rec-box { 
+    grid-area: 2 / 1 / 3 / 2;
     background-color: #A88AA8;
-    padding: 1em;  }
+    padding: 1em;  
+}
 
 .snippet-title {
     background-color: #A88AA8; 

src/views/about.tpl

@@ -1,4 +1,5 @@
 % rebase('frame.tpl')
+    <div class="content-grid"> 
         <div class="jump"><img src="/static/img/prom/BlessFREY_logo.png" alt="(link: BLESSFREY" class="logo">
                 <a href="#demo">play</a> • <a href="#system">system</a> • <a href="#story">story</a> • <a href="#characters">characters</a> • <a href="#info">info</a><br>
         </div>
@@ -70,3 +71,4 @@
             <br>
             <p>No hard timeline on this, though! I've been working for years and finally am about ready to have something to show for it. Gamedev has been a deep learning experience, and I'm looking forward to sharing my results with you. <br></p></div>
                 </div>
+    </div>

src/views/bf-gdd.tpl

@@ -5,7 +5,7 @@
     <p>The vision for Blessfrey <br></p>
     <br>
     <ul>
-        % for i in [["art direction","blessfrey-art"],["characters","blessfrey-cast"],["credits","blessfrey-credits"],["game mechanics","blessfrey-mechanics"],["IDs","blessfrey-ids"],["inspect","blessfrey-inspect"],["jobs","blessfrey-jobs"],["keywords","blessfrey-keywords"],["milestones","blessfrey-milestones"],["setting","blessfrey-setting"],["skills","blessfrey-skills"],["sound","blessfrey-sound"],["story","blessfrey-story"],["style guide","style-guide"],["terms","blessfrey-terms"],["tweaks","tweaks"],["vibe","blessfrey-vibe"]]:
+        % for i in [["characters","blessfrey-cast"],["credits","blessfrey-credits"],["game mechanics","blessfrey-mechanics"],["IDs","blessfrey-ids"],["inspect","blessfrey-inspect"],["jobs","blessfrey-jobs"],["keywords","blessfrey-keywords"],["milestones","blessfrey-milestones"],["setting","blessfrey-setting"],["skills","blessfrey-skills"],["sound","blessfrey-sound"],["story","blessfrey-story"],["style guide","style-guide"],["terms","blessfrey-terms"],["tweaks","tweaks"],["vibe","blessfrey-vibe"]]:
         <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<a href=/{{i[1]}}>{{i[0]}}</a></li>
         % end
     </ul>

src/views/bf-vibe.tpl

@@ -15,7 +15,7 @@
     </ul>
     <br>
     <p>The other goofiest place I've seen this juxtaposition pop up is that frame of some Avengers movie where the heroes are just hanging out at a normal restaurant. Some Quora guy claims the scene was popular, and I'll take his word for it. The overly dramatic, max stakes stuff isn't always as interesting as seeing what these fantasy people do during their down-time. My husband always thinks it's really funny to imagine the big bad of various series doing something really normal like eating ice cream. <br></p>
-    <img src="/static/img/gdd/avengers.jpeg" alt="(stolen screenshot of the Avengers eating at a casual restaurant in full costumes: fun fact #2815: Marvel's The Avengers movie caused shawarma sales to SKYROCKET nationwide)"><br>
+    <!--<img src="/static/img/gdd/avengers.jpeg" alt="(stolen screenshot of the Avengers eating at a casual restaurant in full costumes: fun fact #2815: Marvel's The Avengers movie caused shawarma sales to SKYROCKET nationwide)"><br>-->
     <br>
 <h2>socializing </h2>
     <p>I like those 'group of kids save the world' shows like Code Lyoko, Winx Club, and W.I.T.C.H and would like to emulate that balance of otherworld exploration and heroics against hanging out and maintaining responsibilities at school and home. <br></p>

src/views/demo.tpl

@@ -1,10 +1,10 @@
 % rebase('frame.tpl')
     <div class="content-grid"> 
-        <div class="center"><h2>no-legs the cat</h2></div>
+        <div class="edition"><h1>no-legs the cat</h1></div>
-        <div class="demo-game">
+        <div class="demo">
             <iframe src="https://itch.io/embed-upload/6141043?color=333333" allowfullscreen="" width="1024" height="620" frameborder="0"><a href="https://chimchooree.itch.io/legless-the-cat">Play Legless the Cat on itch.io</a></iframe><br>
         </div>
-            <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>
+        <div class="guide"><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>

src/views/diary.tpl

@@ -89,7 +89,7 @@
 
             <div class="diary-pages">
 
-    <h1>chimchooree's diary</h1>
+    <span class=title><h1>chimchooree's diary</h1></span>
                 % for s in snippets[page * limit:page * limit + limit]:
                 <div class="snippet">
                     <div class="snippet-title">

src/views/frame.tpl

@@ -8,7 +8,7 @@
 <body>
 
 <div class="grid">
-    <div class="top"><a href="/">blessfrey.me</a> </div>
+    <div class="top">.      •        . <a href="/">blessfrey.me</a> ☆            ..   .  </div>
 
 {{!base}}
 

src/views/website.tpl

@@ -0,0 +1,27 @@
+% import random
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1>website to-do </h1>
+    <p>It'd be cool to add a few more things... <br></p>
+    <br>
+<h2>play page </h2>
+<ul>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; link to previous demos </li>
+</ul>
+<h2>about page </h2>
+<ul>    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; some cute presentation of links. maybe nice promo art with table of contents over a long page. click on what you want or scroll around. I had one of those old myspace css boxes with links, but I can't imagine that working on mobile, etc. </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; artwork: 6-panels of Helia with each job </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; screenshots and diagrams of skills, skill library, skillbar </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; screenshots and diagrams of team window, team member editing window </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; slideshow, 3-panel comic, etc of gist of the story with a sentence or two describing each part. </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; cute character section with image links - panels, animated sprites, something
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; info section - genre, list platforms, engine, dev. link to presskit, credits, game design document. </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; timeline/roadmap - list all the beats. link to milestones. </li>
+</ul>
+<h2>dev page </h2>
+<ul>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; make it like Barbie's old room on her website - hover over stuff, it animates, opens up new window or takes you to new page. </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; add picture links for GitLab, itch, Twitter, Discord, Bible verse, OCs, artwork, etc. </li>
+</ul>
+    </div>
+