implemented support for avatars, cards, polls, and attachments

pleroma-comments.css

@@ -0,0 +1,107 @@
+
+/* colors  */
+
+/*.pleroma-comment blockquote {
+    border-left: 3px solid red;
+}*/
+
+/*.pleroma-comment  .bar {
+    background-color: green;
+}*/
+
+/*.pleroma-comment .card-link {
+    background-color: blue;
+    color: white;
+}*/
+
+/*.pleroma-comment .card-link:hover {
+    background-color: orange;
+}*/
+
+.pleroma-comment blockquote {
+    padding-left:1%;
+}
+
+.pleroma-comment h3 > a {
+    text-decoration:none;
+}
+
+.pleroma-comment > figure {
+    display:flex;
+    align-items:center;
+}
+.pleroma-comment > figure img {
+    height:5em;
+    margin-right: 1em;
+}
+
+/* meta information about post */
+.pleroma-comment p, .pleroma-comment .chart {
+    margin-left: 5%;
+}
+
+/* usernames can either be figcaption or the first paragraph in the element */
+
+.pleroma-comment + p, .pleroma-comment figcaption {
+    font-weight:bold;
+}
+.pleroma-comment p > a, .pleroma-comment figcaption > a {
+    font-weight:normal;
+    text-decoration:none;
+}
+
+.pleroma-comment .card {
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 1%;
+    margin-left:10%;
+/*     adjust this */
+    width: 300px; 
+}
+.pleroma-comment .card-title {
+    font-size: 1.5em;
+    margin: 3%;
+}
+.pleroma-comment .card-description {
+    font-size: 1em;
+    margin:5%;
+}
+.pleroma-comment .card-image {
+    width: 100%;
+    height: auto;
+}
+.pleroma-comment .card-link {
+    display: block;
+    text-align: center;
+    padding: 10px;
+    text-decoration: none;
+    border-radius: 5px;
+    margin: 10px;
+}
+
+.pleroma-comment  .chart {
+/*     border:1px solid red; */
+    display: flex;
+    flex-direction: column;
+}
+
+@media only screen and (min-width:768px){
+    .pleroma-comment  .chart {
+        width: 45%;
+    }
+}
+
+.pleroma-comment .bar-container {
+    align-items: center;
+    margin: 1% 0;
+}
+
+.pleroma-comment .bar {
+    padding-top: 0.5em;
+    padding-bottom:0.5em;
+}
+
+.pleroma-comment .bar-text {
+    ;
+}