one post: let's not bikeshed

html/one-post.tsx

@@ -0,0 +1,64 @@
+import { ComponentChildren } from "preact";
+import { render_and_copy } from "./common.tsx";
+import { Top, Bottom, Hrish } from "./this-post-is-two-posts.tsx";
+
+// this would be a funny time to do multiple posts
+
+export const Post = ({
+    children,
+    headline,
+    n_comments,
+    display_name,
+    username,
+    posted,
+    link,
+    id,
+}: {
+    children?: ComponentChildren;
+
+    headline?: string;
+
+    n_comments: number;
+
+    display_name?: string;
+    username: string;
+    posted: string;
+    link: string;
+    id?: string;
+}) => (
+    <div class="post">
+        <Top
+            display_name={display_name}
+            username={username}
+            posted={posted}
+            link={link}
+            id={id}
+        />
+        <Hrish />
+        <div class="post-inner">
+            {headline && (
+                <div class="headline">
+                    <a href={link}>
+                        <h1>{headline}</h1>
+                    </a>
+                </div>
+            )}
+            <div class="post-content">{children}</div>
+        </div>
+        <Hrish />
+        <Bottom n_comments={n_comments} />
+    </div>
+);
+
+render_and_copy(
+    <Post
+        headline="can i have more than one post please"
+        username="onepost"
+        display_name="one post per user"
+        posted="1 post"
+        link="dummy"
+        n_comments={413}
+    >
+        Hello world how's it going
+    </Post>
+);

html/this-post-is-two-posts.tsx

@@ -26,7 +26,7 @@ const OptionsIcon = () => (
     />
 );
 
-const Bottom = ({ n_comments }: { n_comments: number }) => (
+export const Bottom = ({ n_comments }: { n_comments: number }) => (
     <div class="bottom">
         <div class="bottom-inner">
             <a
@@ -56,7 +56,7 @@ const Content = ({
 const Middle = mk_class_wrapper("middle");
 
 // no reblog sorry :(
-const Top = ({
+export const Top = ({
     display_name,
     username,
     link,
@@ -86,7 +86,7 @@ const Top = ({
     </div>
 );
 
-const Hrish = () => (
+export const Hrish = () => (
     <div class="hrish">
         <hr />
     </div>

html/top-and-bottom.less

@@ -0,0 +1,135 @@
+@longan: rgb(var(--color-longan));
+@not-white: rgb(var(--color-notWhite));
+@not-black: rgb(var(--color-notBlack));
+@fg: rgb(var(--color-foreground));
+@bg: rgb(var(--color-background));
+
+@height: 20rem;
+
+* {
+  margin: 0;
+}
+
+hr {
+  border-color: rgb(191 186 181);
+  margin: 0 0.75rem;
+}
+
+.hrish {
+  background-color: @not-white;
+}
+
+#fake-main {
+  height: @height;
+  margin: -1rem 0;
+}
+
+#main {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: @height;
+  display: flex;
+  background-color: @bg;
+  flex-direction: column;
+}
+
+.bottom {
+  background: @not-white;
+  font-size: 0.875rem;
+  color: gray;
+  padding: 0.75rem;
+  width: 100%;
+  max-width: 100%;
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+  box-shadow: 0px 4px 5px rgba(25,25,25,.14),0px 1px 10px rgba(25,25,25,.12),0px 2px 4px rgba(0,0,0,.2);
+}
+
+.bottom-inner {
+  display: flex;
+  justify-content: space-between;
+  vertical-align: middle;
+}
+
+// V compromise V
+a {
+  text-decoration: none;
+}
+
+.comments {
+  width: max-content;
+  flex: none;
+}
+
+.interactions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.content {
+  background-color: white;
+  padding: 0 0.75rem;
+  display: flex;
+  min-height: min-content;
+  flex-grow: 1;
+  padding-top: 0.5rem;
+}
+
+.middle {
+  // V the main feed uses gap: 3rem V
+  height: 3rem;
+}
+
+.top {
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  background-color: @not-white;
+  padding: 0.75rem;
+  box-shadow: 0px -4px 5px rgba(25,25,25,.14),0px -1px 10px rgba(25,25,25,.12),0px -2px 4px rgba(0,0,0,.2);
+}
+
+.top-info {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 0%;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  line-height: 1;
+}
+
+.display-name {
+  max-width: 100%;
+  flex-shrink: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 700;
+  color: @not-black;
+}
+
+.username {
+  color: rgb(104 102 100);
+}
+
+.posted {
+  display: block;
+  flex: none;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  // not doing the weird tabular-nums thing, i don't get it
+  color: rgb(130 127 124);
+}