support icons, improve feed

This commit is contained in:
Gabriel 2024-07-27 14:48:24 -04:00
parent 9f8843073a
commit 63adca9fea
3 changed files with 58 additions and 25 deletions

View file

@ -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" }}
@ -15,4 +25,5 @@
{{end}}
</div>
{{end}}
</div>
</div>

View file

@ -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>

View file

@ -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 {