tags box working for diary

small-nav
chimchooree 3 years ago
parent 2c4632874d
commit 46c50c1a27

@ -415,7 +415,7 @@ def diary(page):
"""diary page"""
loc = 'diary/entries/'
assert isinstance(page, int)
info = {'css': 'diary', 'title': 'blessfrey - developer diary', 'year': find_year(), 'snippets': list_snippets(gather_and_sort(loc)), 'latest': list_headlines(gather_and_sort(loc)[0:5]), 'word_cloud': fill_word_cloud(curate_files(gather_files(loc))), 'total': len(curate_files(gather_files(loc))), 'limit': 8, 'cluster': 3, 'page': page}
info = {'css': 'diary', 'title': 'blessfrey - developer diary', 'year': find_year(), 'snippets': list_snippets(gather_and_sort(loc)), 'latest': list_headlines(gather_and_sort(loc)[0:5]), 'tags': fill_word_cloud(curate_files(gather_files(loc))), 'total': len(curate_files(gather_files(loc))), 'limit': 8, 'cluster': 3, 'page': page}
return template('diary.tpl', info)
# Entry Page - Feature Template - for articles

@ -1,375 +0,0 @@
* {
padding:0;
margin:0;
font-family: "Ubuntu", "Open Sans", "Calibri", "Arial", sans-serif;
}
a {
text-decoration: none;
}
ul { list-style-position: inside; }
.grid {
display: grid;
grid-template-columns: auto 533px 267px auto;
grid-template-rows: 25px 90px 40px auto 40px auto;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.whitespace {
grid-area: 1 / 1 / 2 / 5;
display: flex;
flex-direction:column;
justify-content:center;
align-items: center;
background-color: #900C3F;
}
.blessfrey-logo {
grid-area: 1 / 2 / 2 / 4;
padding-top: 5px;
color: #FBDAEC;
}
/* navigation pane */
.nav-row {
grid-area: 2 / 1 / 3 / 5;
background-color: #900C3F;
}
.nav-grid {
grid-area: 2 / 2 / 3 / 4;
display: flex;
flex-direction:column;
justify-content:flex-end;
display: grid;
grid-template-columns: auto repeat(4, 70px) 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 {
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-link {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%)
}
.nav-link a {
font-size: 21px;
color: #E6E8EF;
font-weight: bold;
text-shadow:
-1px -1px 1px black,
0 -1px 1px black,
2px -1px 1px black,
2px 0 1px black,
2px 2px 1px black,
0 2px 1px black,
-1px 2px 1px black,
-1px 0 1px black;
}
.nav-link a:hover {
font-size: 21px;
color: #ecd5d2;
font-weight: bold;
text-shadow:
-1px -1px 1px black,
0 -1px 1px black,
2px -1px 1px black,
2px 0 1px black,
2px 2px 1px black,
0 2px 1px black,
-1px 2px 1px black,
-1px 0 1px black;
}
/* Body */
.dir-row {
grid-area: 3 / 2 / 4 / 4;
background-color: #080410;
color: #F9B3D7;
}
.diary-dir {
background-color: #080410;
font-size: 23px;
padding: 0px;
margin: 0px;
color: #AAA39D;
font-weight: bold;
text-shadow:
-1px -1px 1px #080410,
0 -1px 1px #080410,
2px -1px 1px #080410,
2px 0 1px #080410,
2px 2px 1px #080410,
0 2px 1px #080410,
-1px 2px 1px #080410,
-1px 0 1px #080410;
}
.diary-dir a {
color: #E6E8EF;
font-weight: bold;
text-shadow:
-1px -1px 1px #080410,
0 -1px 1px #080410,
2px -1px 1px #080410,
2px 0 1px #080410,
2px 2px 1px #080410,
0 2px 1px #080410,
-1px 2px 1px #080410,
-1px 0 1px #080410;
}
.diary-dir.top {
grid-area: 3 / 1 / 4 / 5;
padding-top: 3px;
}
.diary-dir-left {
display: inline-block;
vertical-align: middle;
}
.diary-dir-numbers {
height: 29px;
display: inline-block;
white-space: nowrap;
}
.diary-dir-number {
background-color: #404664;
display: inline-block;
white-space: nowrap;
border-radius: 25px;
padding-left: 4px;
padding-right: 4px;
}
.diary-dir-right {
display: inline-block;
vertical-align: middle;
}
.body-row {
grid-area: 4 / 1 / 5 / 5;
background-color: #080410;
}
.diary-pages {
grid-area: 4 / 2 / 5 / 3;
}
.snippet {
margin-top: 0px;
margin-bottom: 50px;
}
.snippet-title {
background-image: url(../img/ele/diaryheader.png);
background-size: 100%;
height: 40px;
padding: 10px;
font-size: 10px;
}
.snippet-title a {
color: #E3E0DE;
font-weight: bold;
text-shadow:
-1px -1px 1px #324832,
0 -1px 1px #324832,
2px -1px 1px #324832,
2px 0 1px #324832,
2px 2px 1px #324832,
0 2px 1px #324832,
-1px 2px 1px #324832,
-1px 0 1px #324832;
}
.snippet-title a:hover {
color: #ecd5d2;
font-weight: bold;
text-shadow:
-1px -1px 1px #324832,
0 -1px 1px #324832,
2px -1px 1px #324832,
2px 0 1px #324832,
2px 2px 1px #324832,
0 2px 1px #324832,
-1px 2px 1px #324832,
-1px 0 1px #324832;
}
.snippet-content {
background-color: #ecd5d2;
color: #080410;
padding: 10px;
font-size: 15px;
}
.date-line {
background-color: #ecd5d2;
color: #080410;
padding: 5px;
padding-left: 15px;
font-size: 15px;
text-align: left;
}
.snippet-tags {
background-color: #ecd5d2;
padding: 10px;
font-size: 15px;
}
.snippet-tag {
background-color: #b9b4af;
border-radius: 25px;
padding: 3px;
padding-left: 4px;
padding-right: 4px;
color: black;
font-size: 15px;
font-weight: bold;
display: inline-block;
}
.social-line {
background-color: #404664;
padding-top: 5px;
padding-left: 15px;
}
.social-line a {
color: #E3E0DE;
font-weight: bold;
}
.snippet-link {
margin-top: -35px;
float: right;
font-size: 15px;
}
.snippet-bottom {
background-image: url(../img/ele/diarybottom.png);
background-size: 100%;
height: 25px;
}
.sidebar {
grid-area: 4 / 3 / 5 / 4;
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(5, auto);
grid-column-gap: 0px;
grid-row-gap: 0px;
align-content: start;
padding-left: 7px;
}
.sidebar a:link {
color: #213021;
}
.sidebar a:hover {
color: #486438;
}
.sidebar a:visited {
color: #213021;
}
.sidebar a:active {
color: #945634;
}
.about-box {
grid-area: 1 / 1 / 2 / 2;
border-radius: 25px;
background-color: #95939F;
color: #111718;
text-align: center;
margin: 15px;
padding: 5px;
margin-top: 0px;
padding-bottom: 15px;
}
.twitter-box {
grid-area: 2 / 1 / 3 / 2;
border-radius: 25px;
background-color: #95939F;
color: #111718;
text-align: center;
margin: 15px;
padding: 5px;
padding-bottom: 15px;
}
.latest {
grid-area: 3 / 1 / 4 / 2;
border-radius: 25px;
background-color: #95939F;
color: #111718;
text-align: center;
list-style-position: inside;
margin: 15px;
padding: 5px;
}
.latest-text {
text-align: left;
list-style-position: inside;
padding: 5px;
}
.wordcloud {
grid-area: 4 / 1 / 5 / 2;
border-radius: 25px;
background-color: #95939F;
color: #111718;
text-align: center;
margin: 15px;
padding: 5px;
padding-bottom: 15px;
}
.disclosure {
grid-area: 5 / 1 / 6 / 2;
border-radius: 25px;
background-color: #95939F;
color: #111718;
text-align: center;
margin: 15px;
padding: 5px;
padding-bottom: 15px;
}
.diary-dir.bottom {
grid-area: 5 / 1 / 6 / 5;
}
.footer-row {
grid-area: 6 / 1 / 7 / 5;
background-color: #080410;
}
.footer-content {
background-color: #080410;
color: #ecd5d2;
padding-top: 5px;
padding-right: 25px;
box-shadow: 0 100vh 0 100vh #581845;
text-align: right;
overflow: hidden;
}

@ -33,10 +33,14 @@
<div class="wordcloud">
<h1>tags</h1>
% for t in tags:
% tagless = t.replace('#','')
<a href=/diary/tag/{{tagless}}>{{t}}</a>
% end
</div>
<div class="disclosure">
Blessfrey.me is not using sponsored posts or affiliate links. <br>
<br>Blessfrey.me is not using sponsored posts or affiliate links. <br>
<br>
Blessfrey.me is not collecting personal information + has no cookies. <br>
<br>

@ -1,45 +0,0 @@
<!--right column-->
<div class="sidebar">
<div class="about-box">
<h1>about</h1>
<b>Blessfrey</b> is a 2D action RPG developed for PC in Godot Engine. <br>
<br>
Edit your skillbar from hundreds of skills to fight enemies, solve puzzles, + explore. <br>
<br>
Inspired by Guild Wars 1 and Magic: The Gathering. <br>
</div>
<div class="twitter-box">
<h1>chat</h1>
Twitter: <a href="https://twitter.com/lilchimchooree">@lilchimchooree</a><br>
<br>
<a href="/contact" rel="nofollow">contact me</a><br>
</div>
<div class="latest">
<h1>latest</h1>
<div class="latest-text">
<ul>
% if len(latest) > 0:
% print(str(len(latest)))
% for l in latest:
<li>&#9;<a href=/{{l[0]}} rel="nofollow">{{!l[1]}}</a></li>
% end
</ul>
<br>
</div>
</div>
<div class="wordcloud">
<h1>tags</h1>
<br>
</div>
<div class="disclosure">
Blessfrey.me is not using sponsored posts or affiliate links. <br>
<br>
Blessfrey.me is not collecting personal information + has no cookies. <br>
<br>
Thank you for following the development of Blessfrey. <br>
</div>
</div>

@ -1,232 +0,0 @@
% rebase('frame.tpl')
% import re
<div class="dir-row"> </div>
<div class="diary-dir top">
<center>
% max_pages = int((total - 1) / limit)
<%
# page never below 0
if page <= 0:
page = 0
end
# page never over maximum
if page > max_pages:
page = max_pages
end
%>
<div class="diary-dir-left">
% # << is always active link pointing to 0
% #<a href=/diary/0 rel="nofollow">&lt;&lt;</a>
<a href=/diary/0>
<img src="/static/img/btn/nav_ll.png" alt="&lt;&lt;" width="33" height="29">
</a>
% # < points to 0 if page 0 or below
% if page <= 0:
% #<a href=/diary/0 rel="nofollow">&lt;</a>
<a href=/diary/0>
<img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
</a>
% # < points to previous page otherwise
% else:
% #<a href=/diary/{{page - 1}} rel="nofollow">&lt;</a>
<a href=/diary/{{page - 1}}>
<img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
</a>
% end
</div>
<div class="diary-dir-numbers">
% # fill out number cluster to the left when page is high
% if max_pages > cluster and page > max_pages - cluster:
% for j in range(cluster - max_pages + page):
<div class="diary-dir-number">
<a href=/diary/{{max_pages - cluster * 2 + j}} rel="nofollow">{{max_pages - cluster * 2 + j}}</a>
</div>
% end
% end
% # form cluster of number links around page
% for i in range(max(0,page - cluster), min(max_pages + 1,page + cluster + 1)):
% # bold current page number
% if i == page:
<div class="diary-dir-number">
<b>{{i}}</b>
</div>
% # form neighboring numbers into links
% else:
<div class="diary-dir-number">
<a href=/diary/{{i}} rel="nofollow">{{i}}</a>
</div>
% end
% end
% # fill out number cluster to the right when page is low
% if page <= cluster - 1 and max_pages > page + cluster:
% for j in range(cluster - page):
<div class="diary-dir-number">
<a href=/diary/{{page + j + cluster + 1}} rel="nofollow">{{page + j + cluster + 1}}</a>
</div>
% end
% end
</div>
<div class="diary-dir-right">
% # > points to max if page is at or above maximum
% if page >= max_pages:
% #<a href=/diary/{{max_pages}} rel="nofollow">&gt;</a>
<a href=/diary/{{max_pages}}>
<img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
</a>
% # > point to next page otherwise
% else:
% #<a href=/diary/{{page + 1}} rel="nofollow">&gt;</a>
<a href=/diary/{{page + 1}}>
<img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
</a>
% end
% # >> is always active link to maximum page
% #<a href=/diary/{{max_pages}} rel="nofollow">&gt;&gt;</a>
<a href=/diary/{{max_pages}}>
<img src="/static/img/btn/nav_rr.png" alt="&gt;&gt;" width="33" height="29">
</a>
</div>
</center>
</div>
<!--left column-->
<div class="diary-pages">
% for s in snippets[page * limit:page * limit + limit]:
<div class="snippet">
<div class="snippet-title">
<a href={{s[3]}} rel="nofollow"><h1>{{!s[0]}}</h1></a>
</div>
<div class="date-line">
<b>chimchooree</b>
• <b>{{!s[2]}}</b>
</div>
<div class="snippet-content">
{{!s[1]}}
</div>
% if len(s[5]) >= 1:
<div class=snippet-tags>
% for j in s[5]:
<div class="snippet-tag">
{{j}}
</div>
% end
</div>
% end
<div class="social-line">
<a class="social-link social-twitter" href='http://twitter.com/share?text={{s[4]}}&url=https://blessfrey.me{{s[3]}}&via=lilchimchooree' target="_blank">tweet</a>
</div>
<div class="snippet-link">
<a href={{s[3]}}>
<img src="/static/img/btn/diaryreadmore.png" alt="read more" width="99" height="84">
</a>
</div>
<div class="snippet-bottom">
</div>
</div>
% end
</div>
<div class="diary-dir bottom">
<center>
% max_pages = int((total - 1) / limit)
<%
# page never below 0
if page <= 0:
page = 0
end
# page never over maximum
if page > max_pages:
page = max_pages
end
%>
<div class="diary-dir-left">
% # << is always active link pointing to 0
% #<a href=/diary/0 rel="nofollow">&lt;&lt;</a>
<a href=/diary/0>
<img src="/static/img/btn/nav_ll.png" alt="&lt;&lt;" width="33" height="29">
</a>
% # < points to 0 if page 0 or below
% if page <= 0:
% #<a href=/diary/0 rel="nofollow">&lt;</a>
<a href=/diary/0>
<img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
</a>
% # < points to previous page otherwise
% else:
% #<a href=/diary/{{page - 1}} rel="nofollow">&lt;</a>
<a href=/diary/{{page - 1}}>
<img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
</a>
% end
</div>
<div class="diary-dir-numbers">
% # fill out number cluster to the left when page is high
% if max_pages > cluster and page > max_pages - cluster:
% for j in range(cluster - max_pages + page):
<div class="diary-dir-number">
<a href=/diary/{{max_pages - cluster * 2 + j}} rel="nofollow">{{max_pages - cluster * 2 + j}}</a>
</div>
% end
% end
% # form cluster of number links around page
% for i in range(max(0,page - cluster), min(max_pages + 1,page + cluster + 1)):
% # bold current page number
% if i == page:
<div class="diary-dir-number">
<b>{{i}}</b>
</div>
% # form neighboring numbers into links
% else:
<div class="diary-dir-number">
<a href=/diary/{{i}} rel="nofollow">{{i}}</a>
</div>
% end
% end
% # fill out number cluster to the right when page is low
% if page <= cluster - 1 and max_pages > page + cluster:
% for j in range(cluster - page):
<div class="diary-dir-number">
<a href=/diary/{{page + j + cluster + 1}} rel="nofollow">{{page + j + cluster + 1}}</a>
</div>
% end
% end
</div>
<div class="diary-dir-right">
% # > points to max if page is at or above maximum
% if page >= max_pages:
% #<a href=/diary/{{max_pages}} rel="nofollow">&gt;</a>
<a href=/diary/{{max_pages}}>
<img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
</a>
% # > point to next page otherwise
% else:
% #<a href=/diary/{{page + 1}} rel="nofollow">&gt;</a>
<a href=/diary/{{page + 1}}>
<img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
</a>
% end
% # >> is always active link to maximum page
% #<a href=/diary/{{max_pages}} rel="nofollow">&gt;&gt;</a>
<a href=/diary/{{max_pages}}>
<img src="/static/img/btn/nav_rr.png" alt="&gt;&gt;" width="33" height="29">
</a>
</div>
</center>
</div>
% include diary-boxes.tpl
Loading…
Cancel
Save