grid push

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>