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

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

Browse Source
This commit is contained in:
chimchooree
2022-07-17 23:19:29 -05:00
parent 219d251539
commit 35b8d6e233
19 changed files with 228 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/char.tpl
+14 -3
View File
@@ -1,5 +1,16 @@
% rebase('frame.tpl')
% import random
<div class="content-grid"><div class="center">
{{!profile}}
</div></div>
<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>
src/views/frame.tpl
-141
View File
@@ -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
View File
@@ -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
+3 -3
View File
@@ -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>
<br>
<div class="latest-title">.      •        . <b>latest</b> ☆            ..   . <br>
<hr>
</div>
<ul class="latest">
% for n in news:
% bullet = random.choice(['.','•','☆','★'])
src/views/me.tpl
+7 -2
View File
@@ -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">