fixed nav grid resizing differenly at low res (links with longer link text shrunk more slowly); added gallery to character pages

src/char/Aristen

@@ -0,0 +1,7 @@
+Aristen | means <i>the best</i> | mystic | martial artist, soldier of fortune | 24 years old | 5'6<br>
+<br>
+My Black Desert Online main! The community and gear system kinda ruin what is one of the best tycoon and life skilling MMOs, so I didn't play it for very long. I still adore Aristen, though. Very possibly the most goeous <br>
+<br>
+She's an honest and direct person who won't betray her core values of loyalty, submission towards authority, and denial of the flesh. Her Spartan lifestyle borders on asceticism. She lives off the land. Though her body is shaped by extreme discipline, she isn't necessarily the wisest person. She's always falling into the "work harder, not smarter" fallacy, leading to some pretty comical blunt-force solutions for her jobs. <br>
+<br>
+Her quiet femininity contrasts with her titanic arms and powerful thighs. (I maxxed out the arm muscularity and arm thickness sliders.) Perplexingly, she's retained an hourglass figure, which she attributes to a life of wearing belts. She always presents herself with excellence, wearing a meticulously perfected coral monochromatic face of makeup to set off her pale eyes, deep auburn hair, and glassy skin. Through experience, it wears gracefully even through sweat and heat. Her wardrobe is purely functional, consisting entirely of training and ceremonial uniforms, especially those that pair well with belts and scarves. Her favorite colors to wear are orange and jade. <br>

src/char/WISE

@@ -1,5 +1,3 @@
-<img src="/static/img/char/WISE/WISE.png" alt="(image: WISE processing a request.)"><br>
-<br>
 AI⚲<br>
 Name Meaning: learned person<br>
 Role: virtual guide, mascot<br>

src/index.py

@@ -1,6 +1,12 @@
 import datetime, os, re
 from bottle import error, response, route, run, static_file, template, TEMPLATE_PATH
 
+def find_gallery(name):
+    if name == "Aristen":
+        return ["Aristen", [["menu.jpg","Aristen's fancy set with bright colors and an obi belt"], ["scarf.jpg", "Newbie Aristen with her orange scarf"], ["marine.jpg","Aristen in the Epheria Marine Classic Set, a goofy marine pinup costume."]]]
+    else: 
+        return []
+
 
 def prepare_profile(loc, char_name):
     string = ""
@@ -48,7 +54,7 @@ def error502(error):
 def char(char_name):
     """character page"""
     loc = 'char/'
-    info = {'css': 'char', '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), 'gallery': find_gallery(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,8 +78,8 @@ def home():
 @route('/me')
 def me():
     """me"""
-    #"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"
+    #"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", "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"
-    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"]}
+    info = {'css': 'me', 'title': 'about me', 'year': find_year(), 'chars': ["Aristen"]}
     return template('me.tpl', info)
 
 

src/static/css/all.css

@@ -0,0 +1,151 @@
+* {
+    padding:0;
+    margin:0;
+    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%;}
+footer{
+    position: absolute; bottom: 0; right: 0;
+    color: #df85a5;
+    background-color: transparent;
+    padding-top: 2em;
+    margin-right: 1em;
+    margin-bottom: 1em;
+    text-align: right;
+    overflow: hidden;
+}
+
+a, a:link, a:visited, a:hover, a:active, b {
+    text-decoration: none;
+    background-color: transparent; 
+}
+a:link, a:visited {
+    color: #305285;
+}
+a:hover, a:active {
+    color: #9092ca; 
+}
+p {
+    text-indent: 2em;
+}
+ul {
+    list-style-type: none;
+}
+li {
+    padding-left: 2em;
+}
+
+.center { 
+    width: 60%;
+    padding: 2em;
+    margin: auto;
+}
+
+.grid {
+    height: auto;
+    width: 100vw;
+    display: grid;
+    position: relative;
+    grid-template-columns: 1fr 60% 1fr;
+    grid-template-rows: 2em 9.515625em auto 12.6875em;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    box-sizing: border-box;
+}
+
+.top-row { 
+    grid-area: 1 / 1 / 2 / 4; 
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+.nav-row { 
+    grid-area: 2 / 1 / 3 / 4; 
+}
+.nav-grid { 
+    grid-area: 2 / 2 / 3 / 3;  
+    display: flex;
+    flex-direction: row;
+    display: grid;
+    grid-template-columns: minmax(0%,10%) repeat(5, minmax(7ch,96px)) minmax(0%,10%);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    justify-items: center;
+    text-align: center;
+    margin: auto;
+}
+    .nav-left { 
+        grid-area: 1 / 1 / 2 / 2;
+    } 
+    .nav-right { 
+        grid-area: 1 / 7 / 2 / 8;
+    }
+    .nav-home { 
+        grid-area: 1 / 2 / 2 / 3;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-template-rows: 80% 20%;
+        grid-column-gap: 0px;
+        grid-row-gap: 0px; 
+        flex-direction: column;
+    }
+    .nav-blessfrey { 
+        grid-area: 1 / 3 / 2 / 4;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-template-rows: 80% 20%;
+        grid-column-gap: 0px;
+        grid-row-gap: 0px; 
+        flex-direction: column;
+    }
+    .nav-lemonland { grid-area: 1 / 4 / 2 / 5;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-template-rows: 80% 20%;
+        grid-column-gap: 0px;
+        grid-row-gap: 0px; 
+        flex-direction: column;
+    }
+    .nav-diary { grid-area: 1 / 5 / 2 / 6;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-template-rows: 80% 20%;
+        grid-column-gap: 0px;
+        grid-row-gap: 0px; 
+        flex-direction: column;
+    }
+    .nav-about { grid-area: 1 / 6 / 2/ 7;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-template-rows: 80% 20%;
+        grid-column-gap: 0px;
+        grid-row-gap: 0px; 
+        flex-direction: column;
+    }
+    .navlink {
+        font-size: 110%;
+        font-weight: bold;
+        color: #E6E8EF;
+    }
+    .navlink a:link {
+        color: #E6E8EF;
+    }
+    .navlink a:visited {
+        color: #E6E8EF;
+    }
+    .navlink a:hover {
+        color: #f463ad;
+    }
+    .navlink a:active {
+        color: #f463ad;
+    }
+    .nav-grid img {
+        height: 100%;
+        width: 100%;
+    }
+    .content-grid {
+        min-height: 60vh;
+        min-width: 50vw;
+    }

src/static/css/char.css

@@ -2,3 +2,14 @@
     margin: auto;
     color: white;
 }
+
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    margin: auto;
+}
+
+.gallery img {
+    height: 200px;}

src/static/css/index.css

@@ -1,65 +1,45 @@
 .content-grid { 
     grid-area: 3 / 1 / 4 / 4; 
     display: grid;
-    grid-template-columns: repeat(2, 50%);
+    grid-template-columns: 40% 60%;
-    grid-template-rows: 1fr 5em;
+    grid-template-rows: 1fr 9.5em;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
 }
     .content-left {
         grid-area: 1 / 1 / 2 / 2;
             background-image: url(../img/prom/BlessFREY_logo.png);
-            background-size: 70%;
+            background-size: 20em;
             background-repeat: no-repeat;
-            background-position: right;
+            background-position: center;
         }
     .content-right { 
-        grid-area:  1 / 2 / 2 / 3;
+        grid-area:  1 / 2 / 3 / 3;
         background-image: url(../img/prom/runebless.png);
         background-size: contain;/*80% auto;*/
         background-repeat: no-repeat;
-        background-position: center;
+        background-position: left;
-        }
-    .latest, .latest-grid {
-        background-color: #C0AAC0;
-    border: 2px solid #df85a5; 
         }
-    .latest-grid a, ul, li, b {
-        background-color: #C0AAC0;
-    border: 2px solid #df85a5; 
-    }
-
     .latest {
-    border: 2px solid #df85a5;
-        color: black;
-        overflow-y: scroll; 
-    }
-    .latest-grid { 
-    border: 2px solid #df85a5;
-        width: 50%;
-        grid-area:  2 / 1 / 3 / 3;
-    } 
-    .latest-grid a:link {
-        color: #305285;
         background-color: #C0AAC0; 
     }
-    .latest-grid a:visited {
+    .latest-title {
-        color: #305285;
+        position: absolute;
+        width: 20em;
         background-color: #C0AAC0; 
+        text-align: center;
     }
-    .latest-grid a:hover {
+    .latest-centered {
-        color: #9092ca;
+        text-align: center;
         background-color: #C0AAC0; 
     }
-    .latest-grid a:active {
+    .latest-grid {
-        color: #9092ca;
+        word-break: break-word;
+        width: 20em;
+        grid-area:  2 / 1 / 3 / 2;
+        overflow-y: scroll; 
+        color: black;
         background-color: #C0AAC0; 
-    }
+        margin-left: auto;
-    .latest-grid ul {
+        margin-right: auto;
-    border: 2px solid #df85a5;
-        list-style-type: none;
-    }
-    .latest-grid li {
-    border: 2px solid #df85a5;
-        padding-left: 5%;
     }

src/views/char.tpl

@@ -1,5 +1,16 @@
 % rebase('frame.tpl')
 % import random
-<div class="content-grid"><div class="center">
+<div class="content-grid">
+    <div class="gallery">
+        % for g in gallery[1]:
+        % i = g[0].index('.')
+        % thumb = g[0][:i] + 'thumb' + g[0][i:]
+        <a target="_blank" href="/static/img/char/{{gallery[0]}}/{{g[0]}}">
+            <img src="/static/img/char/{{gallery[0]}}/{{thumb}}" alt="Image: {{g[1]}}">
+        </a>
+        % end
+    </div>
+    <div class="center">
         {{!profile}}
-</div></div>
+    </div>
+</div>

src/views/frame.tpl

@@ -2,147 +2,6 @@
 <html lang="en">
 
 <head>
-<style>
-* {
-    padding:0;
-    margin:0;
-    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%;}
-footer{
-    position: absolute; bottom: 0; right: 0;
-    color: #df85a5;
-    background-color: transparent;
-    padding-top: 2em;
-    margin-right: 1em;
-    margin-bottom: 1em;
-    text-align: right;
-    overflow: hidden;
-}
-
-a {
-    text-decoration: none;
-}
-p {
-        text-indent: 2em;
-}
-
-.center { 
-    width: 60%;
-    padding: 2em;
-    margin: auto;
-}
-
-.grid {
-    height: auto;
-    width: 100vw;
-    display: grid;
-    position: relative;
-    grid-template-columns: 1fr 60% 1fr;
-    grid-template-rows: 2em 9.515625em auto 12.6875em;
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
-    box-sizing: border-box;
-}
-
-.top-row { 
-    grid-area: 1 / 1 / 2 / 4; 
-    display: flex;
-    flex-direction:column;
-    justify-content:center;
-    align-items: center;
-}
-.nav-row { 
-    grid-area: 2 / 1 / 3 / 4; 
-}
-.nav-grid { 
-    grid-area: 2 / 2 / 3 / 3;  
-    display: flex;
-    flex-direction: row;
-    display: grid;
-    grid-template-columns: minmax(0%,10%) repeat(5, minmax(24px,96px)) minmax(0%,10%);
-    grid-column-gap: 0px;
-    grid-row-gap: 0px; 
-    justify-items: center;
-    text-align: center;
-}
-    .nav-left { 
-        grid-area: 1 / 1 / 2 / 2;
-    } 
-    .nav-right { 
-        grid-area: 1 / 7 / 2 / 8;
-    }
-    .nav-home { 
-        grid-area: 1 / 2 / 2 / 3;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-blessfrey { 
-        grid-area: 1 / 3 / 2 / 4;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-lemonland { grid-area: 1 / 4 / 2 / 5;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-diary { grid-area: 1 / 5 / 2 / 6;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-about { grid-area: 1 / 6 / 2/ 7;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .navlink {
-        font-size: 110%;
-        font-weight: bold;
-        color: #E6E8EF;
-    }
-    .navlink a:link {
-        color: #E6E8EF;
-    }
-    .navlink a:visited {
-        color: #E6E8EF;
-    }
-    .navlink a:hover {
-        color: #f463ad;
-    }
-    .navlink a:active {
-        color: #f463ad;
-    }
-    .nav-grid img {
-        height: 100%;
-        width: 100%;
-    }
-    .content-grid {
-        min-height: 60vh;
-        min-width: 50vw;
-    }
-
-</style>
-
 % include('header.tpl')
 </head>
 

src/views/header.tpl

@@ -1,3 +1,4 @@
     <title>{{title or 'blessfrey.me'}}</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <link rel="stylesheet" type="text/css" href="/static/css/all.css"/>
     <link rel="stylesheet" type="text/css" href="/static/css/{{css}}.css"/>

src/views/index.tpl

@@ -1,6 +1,5 @@
 % rebase('frame.tpl')
 % import random
-    <div class="latest-row"></div>
     <div class="content-grid"> 
         <div class="content-left">
             <div class="contentlogo"></div>
@@ -8,8 +7,9 @@
         <div class="content-right">
         </div>
         <div class="latest-grid">
-            <div class="latest-centered">.      •        . <b>latest</b> ☆            ..   . <br></div>
+            <div class="latest-title">.      •        . <b>latest</b> ☆            ..   . <br>
-            <br>
+            <hr>
+            </div>
             <ul class="latest">
             % for n in news:
                 % bullet = random.choice(['.','•','☆','★'])

src/views/me.tpl

@@ -11,9 +11,14 @@
                 <br>
                 <p><b>hello</b>, call me chimchooree. <br></p>
                 <br>
-                <p>I'm a developer from the USA and like to show off my projects here. I dabble in Python, Java, Angular, Godot Engine, and HTML5+CSS, but I sew clothes, make pixelart, and write, too. <br></p>
+                <p>I'm a developer from the USA and like to show off my projects here. I dabble in Python, Java, Angular, Godot Engine, and HTML5+CSS, but I sew clothes, draw, and write, too. <br></p>
                 <br>
-                <p>The only contact I'll put here for now is my discord CustomsOfficer#3449...Unless you have a <a href="https://flightrising.com/main.php?p=lair&tab=userpage&id=525948">FlightRising (Aristene#525948)</a> or <a href="https://www.wolvden.com/profile/64287">Wolvden (Urban#64287)</a> account. </p>
+                Contact:
+                <ul>
+                    <li><a href="https://discord.com/">Discord (CustomsOfficer#3449)</a> </li>
+                    <li><a href="https://flightrising.com/main.php?p=lair&tab=userpage&id=525948">FlightRising (Aristene#525948)</a> </li>
+                    <li><a href="https://www.wolvden.com/profile/64287">Wolvden (Urban#64287)</a> </li> 
+                </ul>
             </div>
                 
             <div class="rpg">