support icons, improve feed

layouts/partials/post.html

@@ -1,11 +1,21 @@
 <div class="post">
+        {{if .Params.icon }}
+        <a href="{{.Permalink}}"><img src="{{.Params.icon}}"></a>
+        {{else}}
+        <a href="{{.Permalink}}"><img src="/emoji/think.svg"></a>
+        {{end}}
+        <div style="flex-direction: column;min-width:30%;">
             <a href="{{.Permalink}}">
                 <h2>{{.Title}}</h2>
             </a>
-        <p>{{if .Date}}<strong>{{.Date | time.Format "Jan 02 2006"}}</strong>{{end}}</p>
             {{ if .Params.description}}
             <p>{{.Params.description}}</p>
             {{end}}
+            <p>{{if .Date}}<strong>{{.Date | time.Format "Jan 02 2006"}}</strong>{{end}}</p>
+            
+        </div>
+        <div style="flex-direction: column;align-items: center;justify-content: center;">
+        <p >{{.Summary}}</p>
         {{ if .GetTerms "tags" }}
             <div class="post-tags">
                 {{range .GetTerms "tags" }}
@@ -16,3 +26,4 @@
             </div>
             {{end}}
         </div>
+</div>

static/css/feed.xsl

@@ -50,16 +50,17 @@
         <hr/>
 
         <h3>Posts:</h3>
-        <ul>
           <xsl:for-each select="/rss/channel/item">
+            <div class="post" style="flex-direction:column;align-items:center">
               <a>
               <xsl:attribute name="href">
                 <xsl:value-of select="link" />
               </xsl:attribute>
-              <li style="margin-bottom:0.5rem;"><xsl:value-of select="title" /></li>
+              <h2 style="margin-bottom:0.5rem;"><xsl:value-of select="title" /></h2>
             </a>
+            <p style="width:unset;"><strong>Date: </strong><xsl:value-of select="substring(pubDate,0,17)" /></p>
+            </div>
           </xsl:for-each>
-        </ul>
       </article>
       <footer style="flex-direction:column;">
         <h2>Want to make your feed look fancy?</h2>

static/css/theme.css

@@ -296,23 +296,43 @@ article .highlight pre {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-evenly;
 }
 
 .post {
-    flex-direction: column;
-    flex-wrap: wrap;
+    flex-direction:row;
     display: flex;
-    align-items: flex-start;
+    align-items: center;
+    justify-content: flex-start;
     padding: 25px;
     border-radius: 25px;
     font-size: 18px;
-    width:32rem;
+    margin:10px;
+    width:80%;
+    flex-wrap: nowrap;
+    background-color:rgba(118, 118, 118, 0.214);
+    aspect-ratio: 8/1;
+}
+@media screen and (orientation: portrait) {
+    .post{
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+        align-items: space;
+    }
 
 }
 
-.post>* {}
+.post>a>img {
+    min-width:5rem;
+    min-height:5rem;
+    aspect-ratio: 1/1;
+    height:100%;
+    display:flex;
+}
+.post>* {
+    margin:5px;
+}
 
 .post h2 {
     text-align: center;
@@ -330,8 +350,9 @@ article .highlight pre {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: flex-start;
-    font-size: 12px;
+    justify-content: center;
+    font-size: unset;
+    font-weight: bolder;
 }
 
 .post-tags a {