added space for header, dates, and articles to dir space under articles

src/index.py

@@ -140,7 +140,7 @@ def diary(page):
 @route('/diary/entries/<page:int>')
 def entry(page):
     """diary entry"""
-    info = {'css': 'feature', 'title': 'blessfrey - developer diary', 'year': datetime.datetime.now(), 'entry': retrieve_article(page), 'latest': list_headlines(sort_files(gather_files())[0:5]), 'page': page}
+    info = {'css': 'feature', 'title': 'blessfrey - developer diary', 'year': datetime.datetime.now(), 'entry': retrieve_article(page), 'header': "More Articles", 'dates': "Dates", 'articles': "Articles", 'latest': list_headlines(sort_files(gather_files())[0:5]), 'page': page}
     abs_app_dir_path = os.path.dirname(os.path.realpath(__file__))
     abs_views_path = os.path.join(abs_app_dir_path, 'views')
     TEMPLATE_PATH.insert(0, abs_views_path )

src/static/css/feature.css

@@ -27,7 +27,7 @@ ul { list-style-position: inside; }
 .grid {
     display: grid;
     grid-template-columns: auto 533px 267px auto;
-    grid-template-rows: 25px 90px repeat(4, 1fr) 40px auto;
+    grid-template-rows: 25px 90px repeat(4, 1fr) 200px auto;
     grid-column-gap: 0px;
     grid-row-gap: 0px;
 }
@@ -139,11 +139,6 @@ ul { list-style-position: inside; }
 
 /* Body */
 
-.dir-row {
-    grid-area: 7 / 1 / 8 / 5;
-    background-color: #F5D7E3;
-}
-
 .body-row {
     grid-area: 3 / 1 / 7 / 5;
     background-color: #b56c4d;
@@ -173,7 +168,6 @@ ul { list-style-position: inside; }
 .latest-text {
     background-color: #512806;
     text-align: left;
-
 }
 
 .disclosure {
@@ -181,6 +175,30 @@ ul { list-style-position: inside; }
     background-color: #ce6a85;
 }
 
+.dir-row {
+    grid-area: 7 / 1 / 8 / 5;
+    background-color: #F5D7E3;
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: 15% 35% auto;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+}
+
+.dir-header { 
+    grid-area: 1 / 1 / 2 / 2; 
+}
+.dir-date { 
+    grid-area: 2 / 1 / 3 / 2;
+    overflow-x: scroll;
+    overflow-y: hidden;
+}
+.dir-articles { 
+    grid-area: 3 / 1 / 4 / 2; 
+    overflow-x: scroll;
+    overflow-y: hidden;
+} 
+
 .footer-row {
     grid-area: 8 / 1 / 9 / 5; 
     background-color: #A8577E;

src/views/feature.tpl

@@ -8,4 +8,16 @@
 
 % include diary-boxes.tpl
 
+    <div class="dir-row">
+        <div class="dir-header">
+            {{!header}}
+        </div>
+        <div class="dir-date">
+            {{!dates}}
+        </div>
+        <div class="dir-articles">
+            {{!articles}}
+        </div>
+    </div>
+
     <div class="footer-row"> </div>