tags box working for diary
parent
2c4632874d
commit
46c50c1a27
@ -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;
|
||||
}
|
@ -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>	<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"><<</a>
|
||||
<a href=/diary/0>
|
||||
<img src="/static/img/btn/nav_ll.png" alt="<<" width="33" height="29">
|
||||
</a>
|
||||
|
||||
% # < points to 0 if page 0 or below
|
||||
% if page <= 0:
|
||||
% #<a href=/diary/0 rel="nofollow"><</a>
|
||||
<a href=/diary/0>
|
||||
<img src="/static/img/btn/nav_l.png" alt="<" width="27" height="29">
|
||||
</a>
|
||||
% # < points to previous page otherwise
|
||||
% else:
|
||||
% #<a href=/diary/{{page - 1}} rel="nofollow"><</a>
|
||||
<a href=/diary/{{page - 1}}>
|
||||
<img src="/static/img/btn/nav_l.png" alt="<" 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">></a>
|
||||
<a href=/diary/{{max_pages}}>
|
||||
<img src="/static/img/btn/nav_r.png" alt=">" width="27" height="29">
|
||||
</a>
|
||||
% # > point to next page otherwise
|
||||
% else:
|
||||
% #<a href=/diary/{{page + 1}} rel="nofollow">></a>
|
||||
<a href=/diary/{{page + 1}}>
|
||||
<img src="/static/img/btn/nav_r.png" alt=">" width="27" height="29">
|
||||
</a>
|
||||
% end
|
||||
|
||||
% # >> is always active link to maximum page
|
||||
% #<a href=/diary/{{max_pages}} rel="nofollow">>></a>
|
||||
<a href=/diary/{{max_pages}}>
|
||||
<img src="/static/img/btn/nav_rr.png" alt=">>" 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"><<</a>
|
||||
<a href=/diary/0>
|
||||
<img src="/static/img/btn/nav_ll.png" alt="<<" width="33" height="29">
|
||||
</a>
|
||||
|
||||
% # < points to 0 if page 0 or below
|
||||
% if page <= 0:
|
||||
% #<a href=/diary/0 rel="nofollow"><</a>
|
||||
<a href=/diary/0>
|
||||
<img src="/static/img/btn/nav_l.png" alt="<" width="27" height="29">
|
||||
</a>
|
||||
% # < points to previous page otherwise
|
||||
% else:
|
||||
% #<a href=/diary/{{page - 1}} rel="nofollow"><</a>
|
||||
<a href=/diary/{{page - 1}}>
|
||||
<img src="/static/img/btn/nav_l.png" alt="<" 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">></a>
|
||||
<a href=/diary/{{max_pages}}>
|
||||
<img src="/static/img/btn/nav_r.png" alt=">" width="27" height="29">
|
||||
</a>
|
||||
% # > point to next page otherwise
|
||||
% else:
|
||||
% #<a href=/diary/{{page + 1}} rel="nofollow">></a>
|
||||
<a href=/diary/{{page + 1}}>
|
||||
<img src="/static/img/btn/nav_r.png" alt=">" width="27" height="29">
|
||||
</a>
|
||||
% end
|
||||
|
||||
% # >> is always active link to maximum page
|
||||
% #<a href=/diary/{{max_pages}} rel="nofollow">>></a>
|
||||
<a href=/diary/{{max_pages}}>
|
||||
<img src="/static/img/btn/nav_rr.png" alt=">>" width="33" height="29">
|
||||
</a>
|
||||
</div>
|
||||
</center>
|
||||
</div>
|
||||
% include diary-boxes.tpl
|
Loading…
Reference in New Issue