grid push

src/static/css/diary.css

@@ -10,7 +10,7 @@
 }
 
     .diary-dir {
-        background-color: #080410;
+        background-color: transparent;
         font-size: 1.5em;
         color: #AAA39D;
         font-weight: bold;
@@ -52,7 +52,7 @@
         white-space: nowrap;
     }
     .diary-dir-number {
-        background-color: #7f2c28;
+        background-color: #886488; 
         display: inline-block;
         white-space: nowrap;
         border-radius: .3em;
@@ -66,15 +66,16 @@
 
     .diary-pages {
         grid-area: 2 / 1 / 3 / 2;
+        margin-right: 2em;
     }
 
     .snippet {
         margin-top: 0px;
         margin-bottom: 4em;
-        margin-right: 2em;
     }
 
     .snippet-title {
+        text-indent: 2em;
         background-color: #585c88;
         border-top-left-radius: .3em;
         border-top-right-radius: .3em;
@@ -183,8 +184,8 @@
     .sidebar a:active {
         color: ;
     }
-    .about-box {
+
-        grid-area: 1 / 1 / 2 / 2;
+    .diary-box {
         background-color: #886488; 
         text-align: center;
         border-radius: 1em;
@@ -193,25 +194,17 @@
         margin-top: 0em;
         padding-bottom: 1em;
     }
+    .diary-box a {
+        
+    }
+    .about-box {
+        grid-area: 1 / 1 / 2 / 2;
+    }
     .twitter-box {
         grid-area: 2 / 1 / 3 / 2;
-        background-color: #886488; 
-        text-align: center;
-        border-radius: 1em;
-        margin: 1em;
-        padding: .3em;
-        margin-top: 0em;
-        padding-bottom: 1em;
     }
     .latest {
         grid-area: 3 / 1 / 4 / 2;
-        background-color: #886488; 
-        text-align: center;
-        border-radius: 1em;
-        margin: 1em;
-        padding: .3em;
-        margin-top: 0em;
-        padding-bottom: 1em;
     }
     .latest-text {
         text-align: left;
@@ -220,24 +213,9 @@
     }
     .wordcloud {
         grid-area: 4 / 1 / 5 / 2;
-        background-color: #886488; 
-        text-align: center;
-        border-radius: 1em;
-        margin: 1em;
-        padding: .3em;
-        margin-top: 0em;
-        padding-bottom: 1em;
-
     }
     .disclosure {
         grid-area: 5 / 1 / 6 / 2;
-        background-color: #886488; 
-        text-align: center;
-        border-radius: 1em;
-        margin: 1em;
-        padding: .3em;
-        margin-top: 0em;
-        padding-bottom: 1em;
     }
 
     .diary-dir.bottom {

src/static/css/entry.css

@@ -3,13 +3,13 @@
     max-width: MAX(50em, 50%);
     display: grid;
     grid-template-columns: 2fr 1fr;
-    grid-template-rows: 40px auto 40px;
+    grid-template-rows: 1fr auto;
     grid-column-gap: 0px;
     grid-row-gap: 0px;
     margin: auto;
 }
 .diary-entry {
-    grid-area: 3 / 1 / 4 / 4; 
+    grid-area: 1 / 1 / 2 / 2; 
     margin-top: 40px;
     margin-bottom: 30px;
     word-wrap: break-word;
@@ -95,7 +95,7 @@
 }
 
 .sidebar {
-    grid-area: 3 / 3 / 5 / 4;
+    grid-area: 1 / 2 / 2 / 3;
     display: grid;
     grid-template-columns: auto;
     grid-template-rows: repeat(4, auto);
@@ -185,7 +185,7 @@
 }
 
 
-.rec-box { grid-area: 2 / 2 / 3 / 3; }
+.rec-box { grid-area: 2 / 1 / 3 / 3; }
 
 .snip { 
     width: 150px; 

src/views/diary-boxes.tpl

@@ -1,6 +1,6 @@
 <!--right column-->
         <div class="sidebar">
-            <div class="about-box">
+            <div class="diary-box about-box">
                 <h2>about</h2>
                 <b>Blessfrey</b> is a 2D action RPG developed for PC in Godot Engine. <br>
                 <br>
@@ -9,14 +9,14 @@
                 Inspired by Guild Wars 1 and Magic: The Gathering. <br>
             </div>
     
-            <div class="twitter-box">
+            <div class="diary-box twitter-box">
                 <h2>chat</h2>
                 Twitter: <a href="https://twitter.com/lilchimchooree">@lilchimchooree</a><br>
                 <br>
                 <a href="/contact"  rel="nofollow">contact me</a><br>
             </div>
 
-            <div class="latest">
+            <div class="diary-box latest">
                 <h2>latest</h2>
                 <div class="latest-text">
                     <ul>
@@ -31,7 +31,7 @@
                 </div>
             </div>
 
-            <div class="wordcloud">
+            <div class="diary-box wordcloud">
                 <h2>cloud</h2>
                 % for t in tags:
                     % tagless = t.replace('#','')
@@ -39,7 +39,7 @@
                 % end
             </div>
 
-            <div class="disclosure">
+            <div class="diary-box disclosure">
                 <br>Blessfrey.me is not using sponsored posts or affiliate links. <br> 
                 <br>
                 Blessfrey.me is not collecting personal information + has no cookies. <br>

src/views/entry.css

@@ -1,200 +0,0 @@
-.diary-entry {
-    grid-area: 3 / 2 / 4 / 3;
-    margin-top: 40px;
-    margin-bottom: 30px;
-    word-wrap: break-word;
-}
-.diary-title {
-    background-color: #486438;
-    border-top-left-radius: 25px;
-    border-top-right-radius: 25px;
-    color: #e6e8ef;
-    padding: 10px;
-    padding-top: 55px;
-    padding-bottom: 25px;
-    font-size: 25px;
-    text-align: center;
-    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;
-}
-.date-line {
-    padding: 10px;
-    background-color: #1c2628;
-    color: #aaa39d;
-    text-align: center;
-}
-.diary-content {
-    background-color: #ecd5d2;
-    color: #080410;
-    text-indent: 50px;
-    padding: 15px;
-    padding-top: 25px;
-}
-.diary-content img {
-    display: block;
-    margin-top: 25px;
-    margin-bottom: 0px;
-    margin-left: 0px;
-}
-.diary-content h2 {
-    margin-top: 25px;
-    margin-bottom: 15px;
-    text-indent: 0px;
-} 
-.diary-content h3 {
-    margin-top: 25px;
-    margin-bottom: 0px;
-    text-indent: 0px;
-} 
-.diary-content h4 {
-    margin-top: 25px;
-    margin-bottom: 0px;
-    text-indent: 0px;
-} 
-.diary-tags {
-    background-color: #1c2628;
-    padding: 10px;
-    font-size: 15px;
-}
-.diary-tag {
-    background-color: #b9b4af;
-    border-radius: 25px;
-    padding: 3px;
-    padding-left: 4px;
-    padding-right: 4px;
-    color: #1c2628;
-    font-size: 15px;
-    font-weight: bold;
-    display: inline-block;
-}
-.share-links {
-    background-color: #1c2628;
-    color: #aaa39d;
-    padding-top: 25px;
-    padding-bottom: 25px;
-    text-align: center;
-}
-
-.sidebar {
-    grid-area: 3 / 3 / 5 / 4;
-    display: grid;
-    grid-template-columns: auto;
-    grid-template-rows: repeat(4, auto);
-    grid-column-gap: 0px;
-    grid-row-gap: 0px; 
-    align-content: start;
-    padding-left: 7px;
-    margin-top: 40px;
-}
-.sidebar a:link {
-    color: #213021;
-}
-.sidebar a:hover {
-    color: #486438;
-}
-.sidebar a:visited {
-    color: #213021;
-}
-.sidebar a:active {
-    color: #945634;
-}
-.about-box {
-    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;
-}
-.disclosure {
-    grid-area: 4 / 1 / 5 / 2;
-    border-radius: 25px;
-    background-color: #95939F; 
-    color: #111718;
-    text-align: center;
-    margin: 15px;
-    padding: 5px;
-    padding-bottom: 15px;
-}
-
-.recommend {
-    grid-area: 4 / 2 / 5 / 3;
-    background-color: #080410;
-    color: #F9B3D7;
-    display: grid;
-    grid-template-columns: auto auto auto;
-    grid-template-rows: auto auto;
-    grid-column-gap: 0px;
-    grid-row-gap: 0px; 
-    padding: 5px;
-} 
-
-.more { 
-    grid-area:   1 / 1 / 2 / 4; 
-    background-color: #486438;
-    border-radius: 25px;
-    padding: 5px;
-    text-align: center;
-    color: #080410;
-}
-
-
-.rec-box { grid-area: 2 / 2 / 3 / 3; }
-
-.snip { 
-    width: 150px; 
-    float: left; 
-    margin: 30px;
-    background-color: #95939f;
-    border-radius: 25px;
-    padding: 20px;
-    text-align: center;
-    font-size: 16px;
-}
-.snip a {
-    color: #080410;
-}
-.snip a:hover {
-    color: #404664;
-}
-.snip a:visited {
-    color: #080410;
-}
-.snip a:active {
-    color: #404664;
-}

src/views/entry.tpl

@@ -1,4 +1,5 @@
 % rebase('frame.tpl')
+<div class="content-grid"> 
 <!--left column-->
     
     <div class="diary-entry">
@@ -49,4 +50,4 @@
         </div>
     </div>
 
-    <div class="footer-row"> </div>
+</div>