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

css rework - diary and entry

Browse Source
This commit is contained in:
grid
2025-01-06 18:15:58 -06:00
parent 5f3a0d10f3
commit c404cf7077
15 changed files with 138 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/static/css/all.css
+21 -8
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 */
}
}
src/static/css/diary.css
+59 -60
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;
.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);*/
}
src/static/css/entry.css
+38 -39
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;
}
src/static/css/index.css
-50
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;
}
src/static/css/nav.css
+6 -7
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;
}
src/static/css/sidebar.css
+5
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 {
src/static/img/dia/chimchooree_moonelf3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

src/static/img/dia/chimchooree_moonelf4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

src/static/img/dia/chimchooree_moonelf4.png-autosave.kra
BIN
View File
Binary file not shown.
src/static/img/dia/chimchooree_moonelf5.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

src/static/img/dia/chimchooree_moonelf_BG.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

src/static/img/dia/chimchooree_moonelf_BG2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

src/views/diary.tpl
+6 -5
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">
src/views/entry.tpl
-2
View File
@@ -26,8 +26,6 @@
% end
</div>
<div class="share-links">
</div>
<br>
</div>
src/views/frame.tpl
+1 -1
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}}