lots of progress on feature css; diary entry now takes array of pieces of article as a list instead of the whole article as a string

src/static/css/feature.css

@@ -109,13 +109,86 @@ ul,ol { list-style-position: inside; }
 
 .diary-entry {
     grid-area: 3 / 2 / 4 / 3;
-    background-color: #C9C2D6;
-    color: #080410;
-    padding: 20px;
     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;
+    font-size: 20px;
+    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;
@@ -197,13 +270,40 @@ ul,ol { list-style-position: inside; }
     grid-row-gap: 0px; 
     padding: 5px;
 } 
-.more { grid-area:   1 / 1 / 2 / 4; }
+
+.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: 100px; 
+    width: 150px; 
     float: left; 
-    margin: 50px;
+    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;
 }
 
 .footer-row {