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

css rework - diary and entry

Browse Source
master
grid 10 months ago
parent 5f3a0d10f3
commit c404cf7077
15 changed files with 139 additions and 175 deletions
Show Stats Download Patch File Download Diff File

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

@ -31,6 +31,7 @@ html, body {
padding:0;
margin:0;
height:100%;
width:100%;
background-image: linear-gradient(#0f0233, #000000);
background-repeat: no-repeat;
background-attachment: fixed;
@ -40,7 +41,7 @@ footer {
bottom: 0;
left: 0;
right: 0;
width: 100%;
width: 1fr;
background-color: transparent;
}
@ -146,18 +147,21 @@ img {
.top {
grid-area: 1 / 1 / 2 / 2;
color: #b61e54;
font-family: 'mitochondriaregular', sans-serif;
font-weight: bold;
text-align: center;
font-size: clamp(0.8rem, 5vw, 1.5rem);
font-size: 1.2em;
text-overflow: hidden;
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
width: 1fr;
margin: auto;
}
.top a {
color: #b61e54;
font-family: 'mitochondriaregular', sans-serif;
font-size: .73em;
font-weight: bold;
}
.top a:hover {
@ -177,13 +181,11 @@ img {
}
.footer-grid {
display: grid;
grid-template-columns: 100vw;
grid-template-columns: 1fr;
grid-template-rows: 76% 24%
grid-column-gap: 0px;
grid-row-gap: 0px;
background-color: transparent;
width: 100vw;
min-width: 636px;
}
.nav {
grid-area: 1 / 1 / 2 / 2;
@ -194,6 +196,17 @@ img {
grid-column-gap: 0px;
grid-row-gap: 0px;
margin: auto;
width: 40vw;
min-width: 374px;
font-size: 1em;
}
.nav a {
font-size: 1em;
}
@media (max-width: 600px) {
.nav {
grid-template-columns: 1fr; /* Make the grid a single column */
}
.sidebar {
grid-area: 2 / 1 / 3 / 2; /* Ensure the sidebar moves below the content on smaller screens */
}
}

123
src/static/css/diary.css
Unescape Escape View File

@ -2,18 +2,36 @@ h2 {
font-size: 1.5em;
}
.grid {
background-image: url("/static/img/dia/chimchooree_moonelf5.png");
background-repeat: no-repeat;
background-size: 18vw;
background-position: right bottom;
background-attachment: fixed;
}
.content-grid {
display: column;
display: grid;
align-content: flex-start;
margin: auto;
padding: 1em;
}
.diary-grid {
text-align: justify;
display: flex;
flex-wrap: wrap;
align-content: stretch;
margin-right: 2em;
margin-left: 2em;
column-gap: 20px;
}
.sidebar {
grid-area: 1/2/2/3;
margin: auto;
margin-top: 1em;
width: 100%
}
.diary-pages {
max-width: 55ch;
margin: auto;
@ -21,11 +39,12 @@ h2 {
}
.diary-dir {
color: #bbc704;
flex-shrink: 0; display: flex;
color: #b61e54;
flex-shrink: 0;
display: flex;
justify-content: center;
background-color: transparent;
font-size: 1.5em;
font-size: 1.3em;
font-weight: bold;
text-shadow:
-1px -1px 1px #080410,
@ -38,7 +57,7 @@ h2 {
-1px 0 1px #080410;
}
.diary-dir a {
color: #bbc704;
color: #b61e54;
font-weight: bold;
text-shadow:
-1px -1px 1px #080410,
@ -58,7 +77,7 @@ h2 {
vertical-align: middle;
}
.diary-dir-numbers {
color: #7d4afb;
color: #b61e54;
height: 0em;
display: inline-block;
vertical-align: middle;
@ -67,7 +86,7 @@ h2 {
margin-right: .3em;
}
.diary-dir-numbers a {
color: #7d4afb;
color: #b61e54;
}
.diary-dir-number {
display: inline-block;
@ -83,10 +102,6 @@ h2 {
vertical-align: middle;
}
.title {
color: white;
}
.snippet {
margin-top: 0em;
margin-bottom: 4em;
@ -95,83 +110,68 @@ h2 {
.snippet-title {
text-indent: 2em;
background-color: #7d4afb;
background-color: transparent;/*#7d4afb;*/
background-image: url("/static/img/dia/chimchooree_moonelf_BG2.png");
border-top-left-radius: .3em;
border-top-right-radius: .3em;
height: auto;
padding: .5em;
font-size: 1em;
text-align: center;
}
.snippet-title a {
color: #E3E0DE;
background-color: transparent;
font-weight: bold;
text-shadow:
-1px -1px 1px #182448,
0 -1px 1px #182448,
2px -1px 1px #182448,
2px 0 1px #182448,
2px 2px 1px #182448,
0 2px 1px #182448,
-1px 2px 1px #182448,
-1px 0 1px #182448;
}
.snippet-title a:hover {
color: #ecd5d2;
font-weight: bold;
text-shadow:
-1px -1px 1px #182448,
0 -1px 1px #182448,
2px -1px 1px #182448,
2px 0 1px #182448,
2px 2px 1px #182448,
0 2px 1px #182448,
-1px 2px 1px #182448,
-1px 0 1px #182448;
font-family: 'mitochondriaregular', sans-serif;
}
.snippet-title h2 {
font-family: 'mitochondriaregular', sans-serif;
color: #7d4afb;
}
.snippet-content {
background-image: linear-gradient(#6F37FB,#bbc704);
/*background-image: url("/static/img/dia/chimchooree_moonelf_BG.png");/*linear-gradient(#6F37FB,#6F37FB);*/
background-repeat: no-repeat;
background-size: cover;
/*background-color: #6F37FB;*/
color: #080410;
padding: 1em;
padding: 0em;
font-size: 1em;
}
.snippet-content-text {
color: #d2c1e5;
}
.snippet-content-text a {
color: #7d4afb;
}
.date-line {
background-image: linear-gradient(#7d4afb, #6F37FB);
background-image: url("/static/img/dia/chimchooree_moonelf_BG2.png");/*linear-gradient(#6F37FB,#6F37FB);*/
background-repeat: no-repeat;
background-size: cover;
/*background-image: linear-gradient(#7d4afb, #6F37FB);*/
/*background-color: #7d4afb;*/
color: #080410;
color: #7d4afb;
padding: .5em;
padding-left: 2em;
font-size: .9em;
text-align: left;
text-align: center;
font-style: italic;
}
.snippet-tags {
background-color: #585c88;
padding: .3em;
background-color: transparent;
background-image: url("/static/img/dia/chimchooree_moonelf_BG2.png");
/*background-image: linear-gradient(#6F37FB,#7d4afb);*/
font-size: 1em;
min-width: 15.5em;
text-align: right;
}
.snippet-tag {
background-color: #8c92cc;
background-color: transparent;
border-radius: .3em;
padding: .3em;
font-size: 1em;
font-weight: bold;
display: inline-block;
}
.snippet-tag a {
color: #182448;
}
.social-line {
background-color: #404664;
padding: .3em;
display: none;
}
.social-line a {
color: #E3E0DE;
font-weight: bold;
color: #7d4afb;
opacity: 0.6;
}
.snippet-link {
margin-top: -3em;
@ -181,6 +181,5 @@ h2 {
background-color: transparent;
}
.snippet-bottom {
background-color: #585c88;
height: 1em;
/*background-image: linear-gradient(#7d4afb,#6F37FB);*/
}

77
src/static/css/entry.css
Unescape Escape View File

@ -8,35 +8,48 @@ img {
.content-grid {
grid-area: 3 / 1 / 4 / 4;
max-width: MAX(50em, 50%);
display: column;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr auto;
grid-column-gap: 0em;
grid-row-gap: 0em;
margin: auto;
padding: 1em;
align-content: flex-start;
display: flex;
flex-wrap: wrap;
align-content: stretch;
text-align: justify;
}
.sidebar {
grid-area: 1/2/2/3;
margin: auto;
margin-top: 1em;
width: 100%
}
.diary-entry {
grid-area: 1 / 1 / 2 / 2;
margin-top: 1em;
margin-bottom: 1em;
font-size: 1em;
word-wrap: break-word;
max-width: 55ch;
margin: auto;
max-width: 75ch;
min-width: 50ch;
}
.diary-title {
background-color: #585c88;
background-color: transparent;
background-image: url("/static/img/dia/chimchooree_moonelf_BG2.png");
border-top-left-radius: .3em;
border-top-right-radius: .3em;
color: #e6e8ef;
color: #bbc704;
padding: 1em;
padding-top: 1em;
padding-bottom: 1em;
font-size: 1em;
text-align: center;
font-weight: bold;
max-width: 100%;
text-shadow:
-1px -1px 1px #080410,
0 -1px 1px #080410,
@ -49,18 +62,18 @@ img {
}
.date-line {
padding: 1em;
background-color: #172347;
color: #aaa39d;
background-color: transparent;
background-image: url("/static/img/dia/chimchooree_moonelf_BG2.png");
color: #bbc704;
text-align: center;
}
.diary-content {
font-size: 0.9em;
line-height: 1.5em;
background-color: #c0aac0;
color: #080410;
background-color: transparent;
color: #d2c1e5;
text-indent: 2em;
padding: 1em;
max-width: 100%;
word-wrap: break-word;
}
.diary-content img {
@ -68,24 +81,24 @@ img {
margin-top: 1em;
margin-bottom: 0em;
margin-left: 0em;
max-width: 100%; /* Ensures images don't exceed container width */
height: auto; /* Maintains aspect ratio */
}
.diary-content h2, h3, h4 {
color: #bbc704;
margin-top: 1em;
margin-bottom: 0em;
text-indent: 0em;
}
.diary-content a {
text-decoration: underline;
color: #7d4afb;
text-decoration: none;
}
.diary-tags {
background-color: #585c88;
background-color: transparent;
padding: 1em;
font-size: 1em;
}
.diary-tag {
background-color: #b9b4af;
background-color: transparent;
border-radius: .3em;
padding: .3em;
font-size: 1em;
@ -93,28 +106,19 @@ img {
display: inline-block;
}
.diary-tag a {
color: #1D1761;
color: #bbc704;
}
.diary-tag a:hover {
color: #3127A5;
color: #76b404;
}
.diary-tag a:visited {
color: #1D1761;
color: #bbc704;
}
.diary-tag a:active {
color: #3B2FC6;
color: #8d580f;
}
.share-links {
display: none;
background-color: #1c2628;
color: #aaa39d;
padding-top: 1em;
padding-bottom: 1em;
text-align: center;
}
.recommend {
/*.recommend {
grid-area: 2 / 1 / 3 / 3;
color: #F9B3D7;
display: grid;
@ -145,13 +149,8 @@ img {
.snippet-title {
background-color: #A88AA8;
font-weight: bold;
}
.sidebar {
grid-area: 1/2/2/3;
margin-top: 1em;
}
}*/
pre,code {
background-color: #d5c7d5;
background-color: transparent;
}

50
src/static/css/index.css
Unescape Escape View File

@ -1,50 +0,0 @@
.content-grid {
grid-area: 3 / 1 / 4 / 4;
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 1fr 9.5em;
grid-column-gap: 0px;
grid-row-gap: 0px;
background-image: url(../img/prom/runebless.png);
}
.content-left {
grid-area: 1 / 1 / 2 / 2;
background-image: url(../img/prom/BlessFREY_logo.png);
background-size: 20em;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
}
.content-right {
grid-area: 1 / 2 / 3 / 3;
background-size: contain;
background-repeat: no-repeat;
background-position: left;
background-color: transparent;
}
.latest {
background-color: #C0AAC0;
}
.latest-title {
position: absolute;
width: 20em;
background-color: #C0AAC0;
text-align: center;
}
.latest-centered {
text-align: center;
background-color: #C0AAC0;
}
.latest-grid {
word-break: break-word;
width: 20em;
grid-area: 2 / 1 / 3 / 2;
overflow-y: scroll;
color: black;
background-color: #C0AAC0;
margin-left: auto;
margin-right: auto;
}
.latest-grid ul {
margin-top: 1.5em;
}

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

@ -1,21 +1,20 @@
footer {
color: #C0AAC0;
background-color: #404164;
width: 100vw;
color: #b61e54;
background-color: #0f0233;
text-align: center;
padding-top: 0.5em;
padding-bottom: 1em;
word-wrap: break-word;
}
footer a:link {
color: #C0AAC0;
color: #b61e54;
}
footer a:visited {
color: #C0AAC0;
color: #b61e54;
}
footer a:hover {
color: #E1B9E6;
color: #b61e54;
}
footer a:active {
color: #C0AAC0;
color: #b61e54;
}

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

@ -4,6 +4,7 @@
grid-column-gap: 0em;
grid-row-gap: 0em;
top: 0;
font-size: 1em;
max-width: 30ch;
}
}
@ -23,6 +24,10 @@
.sidebar a:active {
color: #3B2FC6;
}
.sidebar h2 {
font-family: 'mitochondriaregular', sans-serif;
color: #3B1D87;
}
.diary-box {

BIN
src/static/img/dia/chimchooree_moonelf3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
src/static/img/dia/chimchooree_moonelf4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
src/static/img/dia/chimchooree_moonelf4.png-autosave.kra
View File

Binary file not shown.

BIN
src/static/img/dia/chimchooree_moonelf5.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
src/static/img/dia/chimchooree_moonelf_BG.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/static/img/dia/chimchooree_moonelf_BG2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

11
src/views/diary.tpl
Unescape Escape View File

@ -1,6 +1,8 @@
% rebase('frame.tpl')
% import re
<div class="content-grid">
<!--<span class=title><h1>ﾟ･｡･read my {{category}}✧･ﾟﾟ･｡</h1></span>-->
<!-- DIRECTORY -->
<div class="diary-dir">
% max_pages = int((total - 1) / limit)
@ -91,7 +93,6 @@
<!-- DIARY PAGES -->
<div class="diary-pages">
<span class=title><h1>{{category}}</h1></span>
% for s in snippets[page * limit:page * limit + limit]:
<div class="snippet">
<div class="snippet-title">
@ -102,7 +103,10 @@
• <b>{{!s[2]}}</b>
</div>
<div class="snippet-content">
<div class="snippet-content-text">
{{!s[1]}}
<a href={{s[3]}} rel="nofollow">read more</a>
</div>
</div>
% if len(s[5]) >= 1:
<div class=snippet-tags>
@ -114,12 +118,9 @@
% 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/dia/diaryreadmore.png" alt="read more">
<!--<img src="/static/img/dia/diaryreadmore.png" alt="read more">-->
</a>
</div>
<div class="snippet-bottom">

2
src/views/entry.tpl
Unescape Escape View File

@ -26,8 +26,6 @@
% end
</div>
<div class="share-links">
</div>
<br>
</div>

2
src/views/frame.tpl
Unescape Escape View File

@ -9,7 +9,7 @@
<body>
<div class="grid">
<div class="top">.            ★.        . <a href="/">blessfrey.me</a> ..          ☆        .</div>
<div class="top">.            ★.        . <a href="/">blessfrey.me</a> &nbsp;> {{category}} ..          ☆        .</div>
{{!base}}

Write Preview
Loading…
Cancel
Save