1  <div class="comments" æ-comments>
 2      {{#comments}}
 3      	{{>comment}}
 4      {{/comments}}
 5  </div>
 6  
 7  <div class="box">
 8      <h3>Add a comment</h3>
 9      <form hx-post="{{ address }}/comments" hx-target="previous .comments" hx-swap="beforeend" hx-on::after-request="this.reset()" enctype="multipart/form-data">
10          <input type="hidden" name="pubkey" value="{{session.account.pubkey}}" />
11          <textarea rows=3 placeholder="Say Hi!" name="content" required></textarea>
12          <br>
13  	<ul class="actions">
14  		<li><input type='submit' value="Send" /></li>
15  	</ul>
16      </form>
17  </div>
18  
19  <style>
20  .comment .comment {
21      margin-right: -1em;;
22  }
23  
24  .box {
25      background-color: #EEEEEE55;
26  }
27  </style>
28  
29  <!--<style>
30  a.author {
31      height: 2em;
32      margin: 0.5em;
33      margin-left: 0;
34      padding: 0.5em;
35      padding-left: 0;
36      display: flex;
37      gap: 1em;
38      justify-content: start;
39      align-items: center;
40      flex-direction: row;
41      border-bottom: none;
42  }
43  
44  .author > * {
45      margin: 0;
46  }
47  
48  .htmx-swapping {
49    opacity: 0;
50    transition: opacity 1s ease-out;
51  }
52  
53  .box {
54      background-color: #EEEEEE55;
55  }
56  
57  .box.post {
58      background-color: #FFFFFF;
59  }
60  
61  .post .content, .comment p {
62      margin-bottom: 1em;
63      display: -webkit-box;
64      -webkit-box-orient: vertical;
65  }
66  
67  .shortened {
68    -webkit-line-clamp: 3;
69    overflow: hidden;
70  }
71  
72  .group {
73      margin: 0;
74      opacity: 0.5;
75  }
76  
77  .comments {
78      margin-top: 1em;
79  }
80  
81  .post .actions {
82      margin-bottom: 0;
83  }
84  
85  .replies {
86      margin-top: 1em;
87  }
88  </style>-->