From 4eef51001c947ac3aa8bb1a8c55edae0fa14b89e Mon Sep 17 00:00:00 2001 From: mehbark Date: Sat, 30 Sep 2023 15:44:05 -0400 Subject: [PATCH] one post: optimizing, not enough --- html/one-post.less | 63 ++++++++++++++++----------------- html/one-post.tsx | 23 ++---------- html/this-post-is-two-posts.tsx | 2 +- 3 files changed, 34 insertions(+), 54 deletions(-) diff --git a/html/one-post.less b/html/one-post.less index ebe423d..08a79f8 100644 --- a/html/one-post.less +++ b/html/one-post.less @@ -41,8 +41,8 @@ hr { font-size: 0.875rem; color: gray; padding: 0.75rem; - width: 100%; - max-width: 100%; + //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); @@ -51,7 +51,7 @@ hr { .bottom-inner { display: flex; justify-content: space-between; - vertical-align: middle; + //vertical-align: middle; } // V compromise V @@ -60,14 +60,14 @@ a { } .comments { - width: max-content; - flex: none; + //width: max-content; + //flex: none; } .interactions { display: flex; align-items: center; - justify-content: flex-end; + //justify-content: flex-end; gap: 0.75rem; } @@ -87,12 +87,12 @@ a { .top { display: flex; - width: 100%; - max-width: 100%; - flex-direction: row; + //width: 100%; + //max-width: 100%; + //flex-direction: row; align-items: center; - justify-content: space-between; - gap: 0.5rem; + //justify-content: space-between; + //gap: 0.5rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; background-color: @not-white; @@ -102,7 +102,7 @@ a { .top-info { display: flex; - min-width: 0; + //min-width: 0; flex: 1 1 0%; flex-direction: row; flex-wrap: wrap; @@ -112,13 +112,13 @@ a { } .display-name { - max-width: 100%; - flex-shrink: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + //max-width: 100%; + //flex-shrink: 1; + //overflow: hidden; + //text-overflow: ellipsis; + //white-space: nowrap; font-weight: 700; - color: @not-black; + //color: @not-black; } .username { @@ -126,25 +126,25 @@ a { } .posted { - display: block; - flex: none; + //display: block; + //flex: none; font-size: 0.75rem; - line-height: 1rem; + //line-height: 1rem; // not doing the weird tabular-nums thing, i don't get it color: rgb(130 127 124); } .headline { padding: 0.75rem; - display: flex; - width: 100%; - flex-direction: row; + //display: flex; + //width: 100%; + //flex-direction: row; } .headline > a { - flex-grow: 1; - align-self: center; - overflow-wrap: break-word; + //flex-grow: 1; + //align-self: center; + //overflow-wrap: break-word; font-size: 1.25rem; line-height: 1.75rem; } @@ -157,16 +157,16 @@ a { .post-content { padding-left: 0.75rem; padding-right: 0.75rem; - position: relative; - overflow: hidden; - isolation: isolate; + //position: relative; + //overflow: hidden; + //isolation: isolate; margin-top: 1rem; margin-bottom: 1rem; } .post-inner { box-shadow: 0px 4px 5px rgba(0,0,0,.14),0px 1px 10px rgba(0,0,0,.12),0px 2px 4px rgba(0,0,0,.2); - z-index: -413; + //z-index: -413; } .posts { @@ -174,5 +174,4 @@ a { flex-direction: column; //box-shadow: 0px 4px 5px rgba(0,0,0,.14),0px 1px 10px rgba(0,0,0,.12),0px 2px 4px rgba(0,0,0,.2); gap: 2rem; - flex-grow: 1; } diff --git a/html/one-post.tsx b/html/one-post.tsx index 86d173f..b765877 100644 --- a/html/one-post.tsx +++ b/html/one-post.tsx @@ -11,7 +11,7 @@ export const Post = ({ display_name, username, posted, - link = "https://static.pyrope.net/cursor-fun-end", + link, id, }: { children?: ComponentChildren; @@ -86,26 +86,7 @@ render_and_copy( posted="3 hr. ago" n_comments={0} > - i'm sorry about that do you want a css crime as penance - - - isn't this whole thing a css crime (that probably won't work)? - - - - oh yeah, good point! that makes my job a lot easier - + happens all the time. nothing personal, kid. ); diff --git a/html/this-post-is-two-posts.tsx b/html/this-post-is-two-posts.tsx index a729d62..0d3dd72 100644 --- a/html/this-post-is-two-posts.tsx +++ b/html/this-post-is-two-posts.tsx @@ -65,7 +65,7 @@ export const Top = ({ display_name?: string; username: string; posted: string; - link: string; + link?: string; id?: string; }) => (