chimchooree
/
blessfrey-bottle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
small-nav
chimchooree 2 years ago
parent 36ac84cc5a
commit 9676954861
10 changed files with 127 additions and 86 deletions
Show Stats Download Patch File Download Diff File

14
src/index.py
Unescape Escape View File

@ -444,7 +444,7 @@ def error502(error):
@route('/about')
def 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)
# Art Gallery Page
@ -572,6 +572,15 @@ def spec(species_name):
TEMPLATE_PATH.insert(0, abs_views_path )
return template(os.path.join(abs_views_path,'char.tpl'), info)
# 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')
def style():
"""style guide"""
@ -615,6 +624,9 @@ def me():
return template('me.tpl', info)
# Blessfrey - Feature Requirements Page
@route('/blessfrey-milestones')
def milestones():
return milestones()
@route('/milestones')
def milestones():
"""feature requirements"""

81
src/static/css/all.css
Unescape Escape View File

@ -94,88 +94,23 @@ pre,code {
}
.footer-grid {
display: grid;
grid-template-columns: 12.515625em;
grid-template-rows: 9.515625em 3em;
grid-template-columns: 100vw;/*minmax(113px,12.515625em);/*12.515625em;*/
grid-template-rows: 76% 24%/*9.515625em 3em;*/
grid-column-gap: 0px;
grid-row-gap: 0px;
background-color: transparent;
width: 100vw;
min-width: 636px;
}
.nav {
grid-area: 1 / 1 / 2 / 2;
background-image: url(../img/nav/bar.png);
background-repeat: no-repeat;
background-position: bottom;
background-size: contain;
grid-area: 1 / 1 / 2 / 2;
background-color: transparent;
width: 100vw;
}
.nav-grid {
width: 60vw;
display: grid;
grid-template-columns: 9.515625em;
grid-template-rows: repeat(4, minmax(7ch,96px));
/*grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);*/
grid-template-columns: 26% 51% 23%;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
margin: auto;
width: 50vw;
}
.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;
min-width: 636px;
}
.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;
}

40
src/static/css/nav.css
Unescape Escape View File

@ -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 {
grid-area: 1 / 1 / 2 / 2;
display: grid;
@ -6,6 +38,7 @@
grid-column-gap: 0px;
grid-row-gap: 0px;
flex-direction: column;
min-width: 48px;
}
.nav-play {
grid-area: 1 / 2 / 2 / 3;
@ -15,6 +48,7 @@
grid-column-gap: 0px;
grid-row-gap: 0px;
flex-direction: column;
min-width: 48px;
}
.nav-about {
grid-area: 1 / 3 / 2 / 4;
@ -24,6 +58,7 @@
grid-column-gap: 0px;
grid-row-gap: 0px;
flex-direction: column;
min-width: 48px;
}
.nav-dev {
grid-area: 1 / 4 / 2 / 5;
@ -33,6 +68,7 @@
grid-column-gap: 0px;
grid-row-gap: 0px;
flex-direction: column;
min-width: 48px;
}
.navlink {
font-size: 110%;
@ -53,7 +89,7 @@
color: #f463ad;
}
.nav-grid img {
height: 100%;
height: auto;
width: 100%;
}
.links {
@ -61,4 +97,6 @@
background-color: black;
width: 100vw;
text-align: center;
padding-top: 0.5em;
padding-bottom: 1em;
}

59
src/static/css/sidebar.css
Unescape Escape View File

@ -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;
}

BIN
src/static/img/nav/field.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
src/static/img/nav/heart.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/static/img/nav/star.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

12
src/views/about.tpl
Unescape Escape View File

@ -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>
</div>
<div class="long">
<div class="system" id="system">
<div class="system" id="system">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</div>

6
src/views/footer.tpl
Unescape Escape View File

@ -1,6 +1,6 @@
% import random
<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">
<a href="/diary">
<div class="navbutton"><img src="/static/img/nav/diary.png" alt="(link: diary)"></div>
@ -28,8 +28,8 @@
<div class="navlink">dev</div>
</a>
</div>
</div>
</div><div class="star"></div></div>
<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>
</div></div>
</div>
</div></footer>

1
src/views/header.tpl
Unescape Escape View File

@ -3,4 +3,5 @@
<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/nav.css">
<link rel="stylesheet" type="text/css" href="/static/css/sidebar.css">
<link rel="stylesheet" type="text/css" href="/static/css/{{css}}.css">

Write Preview
Loading…
Cancel
Save