grid for new index; nav buttons wonky

small-nav
chimchooree 2 years ago
parent a6353a30d9
commit 78e5c9816e

@ -36,7 +36,7 @@ def serve_xml(filename):
# Error Page
@error(404)
def error404(error):
return "unfortunately, a 404 error. the page you're searching for doesn't exist. (or am I just hiding it for now?) try another page! "
return "unfortunately, a 404 error. the page you're searching for doesn't exist. (or is it just in hiding?) try another page! "
@error(500)
def error500(error):
return "unfortunately, a 500 error. something is wrong with the page you're trying to find, if it exists at all. try another page! <a href=https://www.blessfrey.me/>return to blessfrey.me.</a>"
@ -48,7 +48,7 @@ def error502(error):
def char(char_name):
"""character page"""
loc = 'char/'
info = {'css': 'diary', 'title': 'blessfrey - character - ' + char_name, 'year': find_year(), 'profile': prepare_profile(loc, char_name)}
info = {'css': 'nothing', 'title': 'blessfrey - character - ' + 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 )

@ -2,7 +2,8 @@
padding:0;
margin:0;
font-family: trebuchet ms; arial; calibri; gill sans; helvetica neue; candara; geneva; verdana; sans-serif;
color: #F9B3D7;
background-color: black;
color: gray;
}
a {
@ -11,78 +12,65 @@ a {
.grid {
display: grid;
grid-template-columns: auto 75px 400px 25px 225px 75px auto;
grid-template-rows: 25px 90px 457px auto;
grid-template-columns: auto 60% auto;
grid-template-rows: 5% 15% 50% 20%;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.whitespace {
grid-area: 1 / 1 / 2 / 8;
.top-row {
grid-area: 1 / 1 / 2 / 4;
display: flex;
flex-direction:column;
justify-content:center;
align-items: center;
background-color: #900C3F;
background-color: red;
}
.nav-row {
grid-area: 2 / 1 / 3 / 4;
background-color: orange;
}
.content-row {
grid-area: 3 / 1 / 4 / 4;
background-color: yellow;
}
.latest-row {
grid-area: 4 / 1 / 5 / 4;
background-color: green;
}
.blessfrey-logo {
grid-area: 1 / 3 / 2 / 6;
.logo {
grid-area: 1 / 2 / 2 / 3;
padding-top: 5px;
color: #FBDAEC;
}
/* navigation pane */
.nav-row {
grid-area: 2 / 1 / 3 / 8;
background-color: #900C3F;
}
.nav-grid {
grid-area: 2 / 2 / 3 / 7;
grid-area: 2 / 2 / 3 / 3;
display: flex;
flex-direction:row;
justify-content:flex-end;
display: grid;
grid-template-columns: auto repeat(4, 70px) auto;
grid-template-columns: auto repeat(5, 1fr) auto;
grid-template-rows: 90px;
grid-column-gap: 17px;
grid-row-gap: 0px;
align-items: end;
justify-items: center;
}
.nav-bar {
grid-area: 1 / 1 / 2 / 7;
background-image: url(../img/ele/navbar.png);
height: 86px;
width: 800px;
}
.nav-index {
.nav-home {
grid-area: 1 / 2 / 2 / 3;
padding-bottom: 3px;
position: relative;
}
.nav-game {
grid-area: 1 / 3 / 2 / 4;
padding-bottom: 3px;
position: relative;
}
.nav-diary {
grid-area: 1 / 4 / 2 / 5;
padding-bottom: 3px;
position: relative;
}
.nav-presskit {
grid-area: 1 / 5 / 2 / 6;
padding-bottom: 3px;
position: relative;
}
.nav-blessfrey { grid-area: 1 / 3 / 2 / 4; }
.nav-lemonland { grid-area: 1 / 4 / 2 / 5; }
.nav-diary { grid-area: 1 / 5 / 2 / 6; }
.nav-about { grid-area: 1 / 6 / 2/ 7; }
.nav-link {
position: absolute;
/*position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%)
transform: translate(-50%, -50%)*/
}
.nav-link a {
font-size: 21px;
@ -99,48 +87,35 @@ a {
-1px 0 1px black;
}
/* Body */
.body-row {
grid-area: 3 / 1 / 4 / 8;
background-color: #080410;
}
.social {
grid-area: 3 / 6 / 4 / 7;
justify-content: center;
}
.bg {
grid-area: 3 / 3 / 4 / 6;
background-color:;
.content-grid {
grid-area: 3 / 2 / 4 / 3;
background-color: black;
background-image: url(../img/bg/homeBG.png);
width: 650px;
height: 457px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.footer-row {
grid-area: 4 / 1 / 5 / 8;
background-color: #900C3F;
.content-left {
grid-area: 1 / 1 / 2 / 2;
}
.headline {
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 3px;
padding-right: 1px;
padding-bottom: 3px;
padding-left: 1px;
.content-right {
grid-area: 1 / 2 / 2 / 3;
}
.latest-grid {
grid-area: 4 / 2 / 5 / 3;
}
.footer-content {
background-color: #581845;
background-color: blue;
color: #F9B3D7;
padding-top: 5px;
text-align: right;
overflow: hidden;
box-shadow: 0 100vh 0 100vh #581845;
box-shadow: 0 100vh 0 100vh black;
}
#poltics {
height: auto;
width: 100%;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 339 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

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

@ -13,7 +13,7 @@
% include('nav.tpl')
<div class="body-row"> </div>
<div class="content-row"> </div>
{{!base}}

@ -1,20 +1,15 @@
% rebase('frame.tpl')
% import random
<div class="social"> </div>
<div class="bg">
<br>
Maintenance mode! <br>
The website deserves prettier art, more features, and better editting. <br>
<br>
Until then, check out No-Legs the Cat. <br>
<br>
<img src="/static/img/monorail.png" alt="(image: He's an orange tabby with orange eyes, a pink nose, and a white chest. He sits with his legs completely tucked, so you can't even tell he has legs. Cutie.)">
</a><br>
<br>
<div class="latest-row"></div>
<div class="content-grid">
<div class="content-left">
No-Legs the Cat <br>
<img src="/static/img/monorail.png" alt="(image: orange cat)" id="poltics">
</div>
<div class="footer-row"> </div>
<div class="news">
<div class="content-right">
<img src="/static/img/monorail.png" alt="(image: orange cat)" id="poltics">
</div>
</div>
<div class="latest-grid">
grid
</div>

@ -1,5 +1,5 @@
<div class="whitespace"> </div>
<div class="top-row"> </div>
<div class="blessfrey-logo">
<div class="logo">
<center><b>blessfrey</b></center><br>
</div>

@ -1,4 +1,48 @@
<!--Navigation Bar-->
<div class="nav-row"></div>
<div class="nav-grid">
<div class="nav-home">
<a href="/">
<img src="/static/img/nav/home.png" alt="home" id="poltics">
</a>
<div class="nav-link">
<a href="/">home</a>
</div>
</div>
<div class="nav-blessfrey">
<a href="/blessfrey">
<img src="/static/img/nav/blessfrey.png" alt="blessfrey" id="poltics">
</a>
<div class="nav-link">
<a href="/blessfrey">blessfrey</a>
</div>
</div>
<div class="nav-lemonland">
<a href="/lemonland">
<img src="/static/img/nav/lemonland.png" alt="lemonland" id="poltics">
</a>
<div class="nav-link">
<a href="/lemonland">lemonland</a>
</div>
</div>
<div class="nav-diary">
<a href="/diary">
<img src="/static/img/nav/diary.png" alt="diary" id="poltics">
</a>
<div class="nav-link">
<a href="/diary">diary</a>
</div>
</div>
<div class="nav-about">
<a href="/about">
<img src="/static/img/nav/about.png" alt="about" id="poltics">
</a>
<div class="nav-link">
<a href="/about">about</a>
</div>
</div>
</div>

Loading…
Cancel
Save