add: forum posts ui

crates/app/src/public/css/root.css

@@ -122,7 +122,7 @@ article {
 
     body .card:not(.card *):not(.user_plate),
     body .pillmenu:not(.card *) > a,
-    body .card-nest:not(.card *) > .card,
+    body .card_nest:not(.card *) > .card,
     body .banner {
         border-radius: 0 !important;
     }
@@ -261,7 +261,10 @@ hr.margin {
     margin: var(--pad-4) 0;
 }
 
-p,
+hr.margin_top {
+    margin-top: var(--pad-4);
+}
+
 li,
 span,
 code {

crates/app/src/public/css/style.css

@@ -195,27 +195,78 @@ table ol {
     color: var(--color-text-lowered);
 }
 
-.card-nest {
+.card_nest {
     box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
         var(--color-shadow);
     border-radius: var(--radius);
 }
 
-.card-nest .card {
+.card_nest .card {
     box-shadow: none;
 }
 
-.card-nest > .card:first-child {
+.card_nest > .card:first-child {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     background: var(--color-super-raised);
 }
 
-.card-nest > .card:last-child {
+.card_nest > .card:last-child {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 }
 
+.card_nest_horizontal_wrapper {
+    box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
+        var(--color-shadow);
+}
+
+.card_nest_horizontal {
+    display: flex;
+    flex-direction: row;
+}
+
+.card_nest_horizontal_header {
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+    padding: var(--pad-2) var(--pad-4);
+}
+
+.card_nest_horizontal .side {
+    padding: var(--pad-4);
+}
+
+.card_nest_horizontal .side:nth-child(1) {
+    background: var(--color-lowered);
+    border-right: solid 1px var(--color-super-lowered);
+    border-bottom-left-radius: var(--radius);
+}
+
+.card_nest_horizontal .side:nth-child(2) {
+    background: var(--color-raised);
+    border-bottom-right-radius: var(--radius);
+}
+
+.card_nest_horizontal_header {
+    background: var(--color-lowered);
+    border-bottom: solid 1px var(--color-super-lowered);
+    display: flex;
+    align-items: center;
+    gap: var(--pad-2);
+}
+
+@media screen and (max-width: 900px) {
+    .card_nest_horizontal {
+        flex-direction: column;
+    }
+
+    .card_nest_horizontal .side:nth-child(1) {
+        border-right: none;
+        border-bottom: solid 1px var(--color-super-lowered);
+        border-radius: 0;
+    }
+}
+
 /* supporter card */
 @property --border-angle {
     syntax: "<angle>";

crates/app/src/public/css/utility.css

@@ -3,35 +3,35 @@
     display: flex;
 }
 
-.flex-col {
+.flex_col {
     flex-direction: column;
 }
 
-.flex-rev-col {
+.flex_rev_col {
     flex-direction: column-reverse;
 }
 
-.flex-row {
+.flex_row {
     flex-direction: row !important;
 }
 
-.flex-rev-row {
+.flex_rev_row {
     flex-direction: row-reverse;
 }
 
-.flex-wrap {
+.flex_wrap {
     flex-wrap: wrap;
 }
 
-.justify-center {
+.justify_center {
     justify-content: center;
 }
 
-.justify-between {
+.justify_between {
     justify-content: space-between;
 }
 
-.justify-right {
+.justify_right {
     justify-content: right;
 }
 
@@ -39,23 +39,23 @@
     justify-content: flex-start !important;
 }
 
-.items-center {
+.items_center {
     align-items: center;
 }
 
-.gap-1 {
+.gap_1 {
     gap: var(--pad-1);
 }
 
-.gap-2 {
+.gap_2 {
     gap: var(--pad-2);
 }
 
-.gap-4 {
+.gap_4 {
     gap: var(--pad-4);
 }
 
-.gap-8 {
+.gap_8 {
     gap: 1.25rem;
 }
 
@@ -74,7 +74,7 @@
 }
 
 @media screen and (max-width: 900px) {
-    .flex-collapse {
+    .flex_collapse {
         flex-direction: column !important;
     }
 
@@ -86,16 +86,21 @@
         display: flex !important;
     }
 
-    .sm\:w-full {
+    .sm\:w_full {
         width: 100% !important;
         min-width: 100% !important;
     }
 
+    .sm\:w_content {
+        width: max-content !important;
+        min-width: max-content !important;
+    }
+
     .sm\:mt-2 {
         margin-top: 2rem !important;
     }
 
-    .sm\:items-start {
+    .sm\:items_start {
         align-items: flex-start !important;
     }
 
@@ -112,7 +117,7 @@
     box-shadow: 0 8px 16px var(--color-shadow);
 }
 
-.round-sm {
+.round_sm {
     border-radius: calc(var(--radius) / 2) !important;
 }
 
@@ -120,19 +125,19 @@
     border-radius: var(--radius) !important;
 }
 
-.round-md {
+.round_md {
     border-radius: calc(var(--radius) * 2) !important;
 }
 
-.round-lg {
+.round_lg {
     border-radius: calc(var(--radius) * 4) !important;
 }
 
-.w-full {
+.w_full {
     width: 100% !important;
 }
 
-.w-content {
+.w_content {
     width: max-content !important;
 }
 
@@ -162,12 +167,12 @@
 }
 
 [align="center"],
-.text-center {
+.text_center {
     text-align: center;
 }
 
 [align="right"],
-.text-right {
+.text_right {
     text-align: right;
 }