1<section class="webring">
 2  <h3>Articles from blogs I follow around the internet</h3>
 3  <section class="articles">
 4    {{range .Articles}}
 5    <div class="article">
 6      <h4 class="title">
 7        <a href="{{.Link}}" target="_blank" rel="noopener">{{.Title}}</a>
 8      </h4>
 9      <p class="summary">{{.Summary}}</p>
10      <small class="source">
11        via <a href="{{.SourceLink}}">{{.SourceTitle}}</a>
12      </small>
13      <small class="date">{{.Date | date}}</small>
14    </div>
15    {{end}}
16  </section>
17  <p class="attribution">
18    Generated by
19    <a href="https://git.sr.ht/~sircmpwn/openring">openring</a>
20  </p>
21</section>
22<style>
23.webring .articles {
24  display: flex;
25  flex-wrap: wrap;
26  margin: -0.5rem;
27}
28.webring .title {
29  margin: 0;
30}
31.webring .article {
32  flex: 1 1 0;
33  display: flex;
34  flex-direction: column;
35  margin: 0.5rem;
36  padding: 0.5rem;
37  background: #323234;
38  min-width: 10rem;
39}
40.webring .summary {
41  font-size: 0.8rem;
42  flex: 1 1 0;
43}
44.webring .attribution {
45  text-align: right;
46  font-size: 0.8rem;
47  color: #fff;
48}
49</style>