one post: optimizing, not enough
This commit is contained in:
parent
2e3f946bd5
commit
4eef51001c
3 changed files with 34 additions and 54 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
</Post>
|
||||
<Post
|
||||
headline="@onepost says"
|
||||
username="onepost"
|
||||
display_name="one post per user"
|
||||
posted="2 hr. ago"
|
||||
n_comments={111}
|
||||
>
|
||||
isn't this whole thing a css crime (that probably won't work)?
|
||||
</Post>
|
||||
<Post
|
||||
headline="my bad"
|
||||
username="mehbark"
|
||||
posted="30 min. ago"
|
||||
n_comments={3}
|
||||
>
|
||||
<span style='background: url("https://t4.ftcdn.net/jpg/02/31/38/67/240_F_231386743_1tDqjFySEGvqfoctbankdrsPTS7C76cz.jpg") 50% 50% no-repeat fixed;'>
|
||||
oh yeah, good point! that makes my job a lot easier
|
||||
</span>
|
||||
happens all the time. nothing personal, kid.
|
||||
</Post>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ export const Top = ({
|
|||
display_name?: string;
|
||||
username: string;
|
||||
posted: string;
|
||||
link: string;
|
||||
link?: string;
|
||||
id?: string;
|
||||
}) => (
|
||||
<div class="top">
|
||||
|
|
|
|||
Loading…
Reference in a new issue