css rework - diary and entry

src/static/css/all.css

@@ -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;
+    font-size: 1em;
-    min-width: 374px;
+}
+.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

@@ -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;
+    column-gap: 20px;
-    margin-left: 2em;
 }
+
+.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;
+        color: #b61e54;
-  flex-shrink: 0;  display: flex;
+	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:
+    .snippet-title h2 {
-            -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;
+	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: 0em;
-        padding: 1em;
         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;
+        background-color: transparent;
-        padding: .3em;
+        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;
+	color: #7d4afb;
-    }
+	opacity: 0.6;
-    .social-line {
-        background-color: #404664;
-        padding: .3em;
-        display: none;
-        
-    }
-    .social-line a {
-        color: #E3E0DE;
-        font-weight: bold;
     }
     .snippet-link {
         margin-top: -3em;
@@ -181,6 +181,5 @@ h2 {
         background-color: transparent;
     }
     .snippet-bottom {
-        background-color: #585c88;
+        /*background-image: linear-gradient(#7d4afb,#6F37FB);*/
-        height: 1em;
     }

src/static/css/entry.css

@@ -8,35 +8,48 @@ img {
 
 .content-grid {
     grid-area: 3 / 1 / 4 / 4; 
-    max-width: MAX(50em, 50%);
+    display: grid;
-    display: column;
     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;
+	font-size: 1em;
-    margin-bottom: 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;
+        background-color: transparent;
-    color: #aaa39d;
+        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;
+    background-color: transparent;
-    color: #080410;
+        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

@@ -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

@@ -1,21 +1,20 @@
 footer { 
-    color: #C0AAC0;
+    color: #b61e54;
-    background-color: #404164; 
+    background-color: #0f0233; 
-    width: 100vw;
     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

@@ -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/views/diary.tpl

@@ -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

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

src/views/frame.tpl

@@ -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}}