feat(web/homepage): Add templating for entries on the homepage r/491

Adds the actual insertion of entries into the homepage, subtly
colour-coding different types of entries.

1 files changed, 64 insertions, 19 deletions

diff --git a/web/homepage/static/tazjin.css b/web/homepage/static/tazjin.css
index 396c4ecf4a..36f5c18ba7 100644
--- a/web/homepage/static/tazjin.css
+++ b/web/homepage/static/tazjin.css
@@ -28,7 +28,6 @@
 
 body {
     margin: 40px auto;
-    max-width: 650px;
     line-height: 1.6;
     font-size: 18px;
     padding: 0 10px;
@@ -39,50 +38,96 @@ p, a :not(.uncoloured-link) {
     color: inherit;
 }
 
+h1, h2, h3 {
+    line-height: 1.2
+}
+
+/* Homepage styling */
+
+.dark {
+    max-width: 800px;
+    background-color: #181818;
+    color: #e4e4ef;
+}
+
+.dark a {
+    color: #96a6c8;
+}
+
 .entry-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
+    justify-content: flex-start;
 }
 
-.entry {
-    
+.interblag-title {
+    text-decoration: none;
 }
 
-/* Light theme (used for the blog) */
+.entry {
+    width: 42%;
+    margin: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
+    border: 2px solid;
+    border-radius: 5px;
+    flex-grow: 1;
+}
 
-.light {
-    color: #383838;
+.blog {
+    color: #268bd2;
+    border-color: #268bd2;
 }
 
-/* Dark theme (used for the homepage) */
+.project {
+    color: #9e95c7;
+    border-color: #9e95c7;
+}
 
-.dark {
-    background-color: #181818;
-    color: #e4e4ef;
+.misc {
+    color: #95a99f;
+    border-color: #95a99f;
 }
 
-.dark a {
-    color: #96a6c8;
+.entry-title {
+    color: inherit !important;
+    font-weight: bold;
+    text-decoration: none;
 }
 
-h1, h2, h3 {
-    line-height: 1.2
+.entry-date {
+    font-style: italic;
 }
-.footer {
-    text-align: right;
+
+/* Blog styling */
+
+.light {
+    max-width: 650px;
+    color: #383838;
 }
-.unstyled-link {
+
+.blog-title {
+    color: inherit;
     text-decoration: none;
 }
-.uncoloured-link {
-    color: inherit;
+
+.footer {
+    text-align: right;
 }
+
 .date {
     text-align: right;
     font-style: italic;
     float: right;
 }
+
 .inline {
     display: inline;
 }
+
+pre {
+    min-width: 100%;
+    /* some code snippets escape to the side, but I don't want to wrap them */
+    width: max-content;
+}