navbar looks like skillbar; lots of bugs fixed; maybe gets too big at full-screen at 1080p

small-nav
chimchooree 2 years ago
parent 36ac84cc5a
commit 9676954861

@ -444,7 +444,7 @@ def error502(error):
@route('/about') @route('/about')
def about(): def about():
"""about""" """about"""
info = {'css': 'about', 'title': 'about blessfrey', 'year': find_year()} info = {'css': 'doc', 'title': 'about blessfrey', 'year': find_year()}
return template('about.tpl', info) return template('about.tpl', info)
# Art Gallery Page # Art Gallery Page
@ -572,6 +572,15 @@ def spec(species_name):
TEMPLATE_PATH.insert(0, abs_views_path ) TEMPLATE_PATH.insert(0, abs_views_path )
return template(os.path.join(abs_views_path,'char.tpl'), info) return template(os.path.join(abs_views_path,'char.tpl'), info)
# Blessfrey Style Guide Page # Blessfrey Style Guide Page
@route('/blessfrey-style-guide')
def style3():
return style()
@route('/blessfrey-style')
def style2():
return style()
@route('/style-guide')
def style1():
return style()
@route('/style') @route('/style')
def style(): def style():
"""style guide""" """style guide"""
@ -615,6 +624,9 @@ def me():
return template('me.tpl', info) return template('me.tpl', info)
# Blessfrey - Feature Requirements Page # Blessfrey - Feature Requirements Page
@route('/blessfrey-milestones')
def milestones():
return milestones()
@route('/milestones') @route('/milestones')
def milestones(): def milestones():
"""feature requirements""" """feature requirements"""

@ -94,88 +94,23 @@ pre,code {
} }
.footer-grid { .footer-grid {
display: grid; display: grid;
grid-template-columns: 12.515625em; grid-template-columns: 100vw;/*minmax(113px,12.515625em);/*12.515625em;*/
grid-template-rows: 9.515625em 3em; grid-template-rows: 76% 24%/*9.515625em 3em;*/
grid-column-gap: 0px; grid-column-gap: 0px;
grid-row-gap: 0px; grid-row-gap: 0px;
background-color: transparent; background-color: transparent;
width: 100vw; width: 100vw;
min-width: 636px;
} }
.nav { .nav {
grid-area: 1 / 1 / 2 / 2; grid-area: 1 / 1 / 2 / 2;
background-image: url(../img/nav/bar.png);
background-repeat: no-repeat;
background-position: bottom;
background-size: contain;
background-color: transparent; background-color: transparent;
width: 100vw; width: 60vw;
}
.nav-grid {
display: grid; display: grid;
grid-template-columns: 9.515625em; grid-template-columns: 26% 51% 23%;
grid-template-rows: repeat(4, minmax(7ch,96px)); grid-template-rows: 1fr;
/*grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);*/
grid-column-gap: 0px; grid-column-gap: 0px;
grid-row-gap: 0px; grid-row-gap: 0px;
margin: auto; margin: auto;
width: 50vw; min-width: 636px;
}
.sidebar {
grid-area: 2 / 2 / 2 / 3;
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(4, auto);
grid-column-gap: 0em;
grid-row-gap: 0em;
align-content: start;
padding-left: 0em;
}
.sidebar a:link {
font-weight: bold;
}
.sidebar a {
color: #1D1761;
}
.sidebar a:hover {
color: #3127A5;
}
.sidebar a:visited {
color: #1D1761;
} }
.sidebar a:active {
color: #3B2FC6;
}
.diary-box {
background-color: #A88AA8;
text-align: center;
border-radius: 1em;
margin: 1em;
padding: .3em;
margin-top: 0em;
padding-bottom: 1em;
}
.about-box {
grid-area: 1 / 1 / 2 / 2;
}
.twitter-box {
grid-area: 2 / 1 / 3 / 2;
}
.latest {
grid-area: 3 / 1 / 4 / 2;
}
.latest-text {
text-align: left;
padding: 0em;
background-color: #A88AA8;
}
.wordcloud {
grid-area: 4 / 1 / 5 / 2;
}
.disclosure {
grid-area: 5 / 1 / 6 / 2;
}

@ -1,3 +1,35 @@
.heart {
grid-area: 1 / 1 / 2 / 2;
background-color: transparent;
background-image: url(../img/nav/heart.png);
background-repeat: no-repeat;
background-position: bottom right;
background-size: contain;
}
.nav-grid {
grid-area: 1 / 2 / 2 / 3;
background-color: transparent;
background-image: url(../img/nav/field.png);
background-repeat: no-repeat;
background-position: bottom center;
background-size: contain;
display: grid;
grid-template-columns: auto; /*repeat(4, minmax(5ch,128px))*/
grid-template-rows: repeat(4, auto);
/*grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);*/
grid-column-gap: 0px;
grid-row-gap: 0px;
align-items: center;
}
.star {
grid-area: 1 / 3 / 2 / 4;
background-color: transparent;
background-image: url(../img/nav/star.png);
background-repeat: no-repeat;
background-position: bottom left;
background-size: contain;
}
.nav-diary { .nav-diary {
grid-area: 1 / 1 / 2 / 2; grid-area: 1 / 1 / 2 / 2;
display: grid; display: grid;
@ -6,6 +38,7 @@
grid-column-gap: 0px; grid-column-gap: 0px;
grid-row-gap: 0px; grid-row-gap: 0px;
flex-direction: column; flex-direction: column;
min-width: 48px;
} }
.nav-play { .nav-play {
grid-area: 1 / 2 / 2 / 3; grid-area: 1 / 2 / 2 / 3;
@ -15,6 +48,7 @@
grid-column-gap: 0px; grid-column-gap: 0px;
grid-row-gap: 0px; grid-row-gap: 0px;
flex-direction: column; flex-direction: column;
min-width: 48px;
} }
.nav-about { .nav-about {
grid-area: 1 / 3 / 2 / 4; grid-area: 1 / 3 / 2 / 4;
@ -24,6 +58,7 @@
grid-column-gap: 0px; grid-column-gap: 0px;
grid-row-gap: 0px; grid-row-gap: 0px;
flex-direction: column; flex-direction: column;
min-width: 48px;
} }
.nav-dev { .nav-dev {
grid-area: 1 / 4 / 2 / 5; grid-area: 1 / 4 / 2 / 5;
@ -33,6 +68,7 @@
grid-column-gap: 0px; grid-column-gap: 0px;
grid-row-gap: 0px; grid-row-gap: 0px;
flex-direction: column; flex-direction: column;
min-width: 48px;
} }
.navlink { .navlink {
font-size: 110%; font-size: 110%;
@ -53,7 +89,7 @@
color: #f463ad; color: #f463ad;
} }
.nav-grid img { .nav-grid img {
height: 100%; height: auto;
width: 100%; width: 100%;
} }
.links { .links {
@ -61,4 +97,6 @@
background-color: black; background-color: black;
width: 100vw; width: 100vw;
text-align: center; text-align: center;
padding-top: 0.5em;
padding-bottom: 1em;
} }

@ -0,0 +1,59 @@
.sidebar {
grid-area: 2 / 2 / 2 / 3;
display: row;
/* grid-template-columns: auto;
grid-template-rows: repeat(4, auto);*/
grid-column-gap: 0em;
grid-row-gap: 0em;
/* align-content: start;
padding-left: 0em;*/
}
.sidebar a:link {
font-weight: bold;
}
.sidebar a {
color: #1D1761;
}
.sidebar a:hover {
color: #3127A5;
}
.sidebar a:visited {
color: #1D1761;
}
.sidebar a:active {
color: #3B2FC6;
}
.diary-box {
background-color: #A88AA8;
text-align: center;
border-radius: 1em;
margin: 1em;
padding: .3em;
margin-top: 0em;
padding-bottom: 1em;
}
.about-box {
grid-area: 1 / 1 / 2 / 2;
}
.twitter-box {
grid-area: 2 / 1 / 3 / 2;
}
.latest {
grid-area: 3 / 1 / 4 / 2;
}
.latest-text {
text-align: left;
padding: 0em;
background-color: #A88AA8;
}
.wordcloud {
grid-area: 4 / 1 / 5 / 2;
}
.disclosure {
grid-area: 5 / 1 / 6 / 2;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

@ -3,29 +3,25 @@
<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> <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> </div>
<div class="long">
<div class="system" id="system"> <div class="system" id="system">
<div class="center"><h2>system</h2> <div class="center"><h2>system</h2>
<p>Blessfrey is a 2D action rpg with a dual-job system which will determine the skill pool from which you will build your skillbar. Your AI companions will have skillbars of their own to edit, so think in terms of teams in order to defeat bosses and solve puzzles. Barely any class progression decisions are permanent, so you can experiment and express your playstyle. <br></p> <p>Blessfrey is a 2D action rpg with a dual-job system which will determine the skill pool from which you will build your skillbar. Your AI companions will have skillbars of their own to edit, so think in terms of teams in order to defeat bosses and solve puzzles. Barely any class progression decisions are permanent, so you can experiment and express your playstyle. <br></p>
<br> <br>
<h3>jobs </h2> <h3>jobs </h3>
<p>Blessfrey jobs are equivalent to RPG classes. Your first job is a permanent decision which you will make early in gameplay. You will be able to unlock the rest and more during gameplay as side gigs. You can only have one side gig at a time, but you can always swap it outside of combat areas. <br></p> <p>Blessfrey jobs are equivalent to RPG classes. Your first job is a permanent decision which you will make early in gameplay. You will be able to unlock the rest and more during gameplay as side gigs. You can only have one side gig at a time, but you can always swap it outside of combat areas. <br></p>
<br> <br>
<p>Each job has its own skill pool. Each skill is assigned to a job trait (similar to an RPG attribute). Each character has a set number of trait points they can use to raise job traits and the effectiveness of their associated skills. You gain more trait points through leveling up, but traits can be raised or lowered at will. Experiment to find your specialization! <br></p> <p>Each job has its own skill pool. Each skill is assigned to a job trait (similar to an RPG attribute). Each character has a set number of trait points they can use to raise job traits and the effectiveness of their associated skills. You gain more trait points through leveling up, but traits can be raised or lowered at will. Experiment to find your specialization! <br></p>
<br> <br>
<p>Your first job offers an exclusive trait called a job perk. It is not only tied to the effectiveness of related skills but also provides a constant buff. You can use the skills of your side gig's perk-related skills, but you cannot raise their effectiveness nor gain the buff. Perks are what distinguish characters from each other. <br></p> <p>Your first job offers an exclusive trait called a job perk. It is not only tied to the effectiveness of related skills but also provides a constant buff. You can use the skills of your side gig's perk-related skills, but you cannot raise their effectiveness nor gain the buff. Perks are what distinguish characters from each other. <br></p>
<br> <br>
<h3>skills</h2> <h3>skills</h3>
<p>Skills are individual powers that modify entities in the world of Blessfrey. They can launch fireballs, protect against incoming damage, spawn items or minions, teleport characters, reveal more UI details, and more. Your skillbar only has 8 skill slots and can only be edited in safe areas. The challenge comes from discovering effective strategies and synergies. Many of the same skills will be available to the player and enemy characters alike, so you must learn how to both use and counter each skill. <br></p> <p>Skills are individual powers that modify entities in the world of Blessfrey. They can launch fireballs, protect against incoming damage, spawn items or minions, teleport characters, reveal more UI details, and more. Your skillbar only has 8 skill slots and can only be edited in safe areas. The challenge comes from discovering effective strategies and synergies. Many of the same skills will be available to the player and enemy characters alike, so you must learn how to both use and counter each skill. <br></p>
<br> <br>
<p>Skills are inspired by Magic: The Gathering keywords. There are a limited number of keywords that are quick to learn, but I will combine them with interesting conditions to create a wide arsenal of options. <br></p> <p>Skills are inspired by Magic: The Gathering keywords. There are a limited number of keywords that are quick to learn, but I will combine them with interesting conditions to create a wide arsenal of options. <br></p>
<br> <br>
<p>Skills are gained during exploration. As you find new areas, encounter enemies, and interact with your surroundings, you will internalize those experiences as new skills. There are multiple paths to learning, so you are free to focus on your favorite parts of the game. <br></p> <p>Skills are gained during exploration. As you find new areas, encounter enemies, and interact with your surroundings, you will internalize those experiences as new skills. There are multiple paths to learning, so you are free to focus on your favorite parts of the game. <br></p>
<br> <br>
<h3>team</h2> <h3>team</h3>
<p>You will meet new friends and allies in the world, and they will join your team as customizable AI companions. Edit their skillbars to complement yours and keep their gear up-to-date. They will remember your responses and actions, so stay attentive to the flow of your relationship. There may be consequences - sweet or treacherous. <br></p></div> <p>You will meet new friends and allies in the world, and they will join your team as customizable AI companions. Edit their skillbars to complement yours and keep their gear up-to-date. They will remember your responses and actions, so stay attentive to the flow of your relationship. There may be consequences - sweet or treacherous. <br></p></div>
</div> </div>

@ -1,6 +1,6 @@
% import random % import random
<footer><div class="footer-grid"> <footer><div class="footer-grid">
<div class="nav"><div class="nav-grid"> <div class="nav"><div class="heart"></div><div class="nav-grid">
<div class="nav-diary"> <div class="nav-diary">
<a href="/diary"> <a href="/diary">
<div class="navbutton"><img src="/static/img/nav/diary.png" alt="(link: diary)"></div> <div class="navbutton"><img src="/static/img/nav/diary.png" alt="(link: diary)"></div>
@ -28,8 +28,8 @@
<div class="navlink">dev</div> <div class="navlink">dev</div>
</a> </a>
</div> </div>
</div> </div><div class="star"></div></div>
<div class="links"> <div class="links">
<a href=/milestones>milestones</a> {{random.choice(['.','•','☆','★'])}} <a href=/gdd>game design document</a> {{random.choice(['.','•','☆','★'])}} <a href=/blessfrey-presskit>presskit</a> {{random.choice(['.','•','☆','★'])}} &#169; chimchooree 2020-{{year}}<br> <a href=/milestones>milestones</a> {{random.choice(['.','•','☆','★'])}} <a href=/gdd>game design document</a> {{random.choice(['.','•','☆','★'])}} <a href=/blessfrey-presskit>presskit</a> {{random.choice(['.','•','☆','★'])}} &#169; chimchooree 2020-{{year}}<br>
</div></div> </div>
</div></footer> </div></footer>

@ -3,4 +3,5 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/all.css"> <link rel="stylesheet" type="text/css" href="/static/css/all.css">
<link rel="stylesheet" type="text/css" href="/static/css/nav.css"> <link rel="stylesheet" type="text/css" href="/static/css/nav.css">
<link rel="stylesheet" type="text/css" href="/static/css/sidebar.css">
<link rel="stylesheet" type="text/css" href="/static/css/{{css}}.css"> <link rel="stylesheet" type="text/css" href="/static/css/{{css}}.css">

Loading…
Cancel
Save