initial code commit

CSS/replies.css

@@ -0,0 +1,71 @@
+/* container for each reply and its parent post, if any */
+.reply-card-container {
+    background-color: #2a002e;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    padding: 10px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    color: #e6e6ff;
+    font-family: Arial, sans-serif;
+}
+
+/* preview of parent post (smaller font size for less emphasis) */
+.parent-post-preview, .grandparent-post-preview {
+    background-color: #3d1c3d; /* distinct color for preview */
+    border-radius: 4px;
+    padding: 8px;
+    margin-bottom: 6px;
+}
+
+/* reply card styling */
+.reply-card {
+    background-color: #2e003e;
+    border-radius: 8px;
+    padding: 10px;
+}
+
+/* author section in reply */
+.reply-card .author-section {
+    display: flex;
+    align-items: center;
+    margin-bottom: 6px;
+}
+
+/* avatar styling */
+.reply-card .card-avatar {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    margin-right: 8px;
+    border: 2px solid #aa00ff;
+}
+
+/* author info */
+.reply-card .author-info .author-name {
+    font-size: 0.9em;
+    color: #d4b0ff;
+    font-weight: bold;
+}
+
+/* reply text */
+.reply-card .reply-text {
+    font-size: 0.9em;
+    line-height: 1.3;
+    color: #e6e6ff;
+    margin-top: 6px;
+    margin-bottom: 6px;
+}
+
+/* embedded media */
+.reply-card .media-container {
+    margin-top: 8px;
+    display: flex;
+    justify-content: center;
+}
+
+.reply-card .media-image {
+    max-width: 80%;
+    border-radius: 6px;
+    border: 1px solid #aa00ff;
+    margin-top: 6px;
+}