Compare commits

..

No commits in common. "164545bb26c8fd900662855747f40d2b5e81271c" and "f7f536b3187ecd5f22afd7fced7794fd9e0a525f" have entirely different histories.

4 changed files with 11 additions and 47 deletions

View file

@ -7,28 +7,16 @@
src: url('assets/woff2/iosevka-aile-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Iosevka Aile Web';
font-display: swap;
font-weight: 700;
font-stretch: normal;
font-style: normal;
src: url('assets/woff2/iosevka-aile-bold.woff2') format('woff2');
}
:root {
--background-color-1: hsl(180, 11%, 7%);
--background-color-2: hsl(180, 11%, 12%);
--foreground-color-1: rgb(253, 254, 255);
--foreground-color-2: rgb(218, 219, 220);
--foreground-color-3: rgb(153, 154, 155);
--foreground-color-1: hsl(0, 0%, 100%);
--foreground-color-2: hsl(0, 0%, 60%);
--space-unit: 1em;
--space-xxs: calc(0.25 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-norm: var(--space-unit);
--space-normplus: calc(var(--space-unit) + var(--space-sm));
--space-md: calc(1.25 * var(--space-unit));
--space-lg: calc(2 * var(--space-unit));
--space-xl: calc(3.25 * var(--space-unit));
@ -38,7 +26,6 @@
--radius-xxs: calc(0.25 * var(--radius-unit));
--radius-xs: calc(0.5 * var(--radius-unit));
--radius-sm: calc(0.75 * var(--radius-unit));
--radius-norm: var(--radius-unit);
--radius-md: calc(1.25 * var(--radius-unit));
--radius-lg: calc(2 * var(--radius-unit));
--radius-xl: calc(3.25 * var(--radius-unit));

View file

@ -47,8 +47,6 @@
<style>
.main-container {
background-color: var(--background-color-1);
overflow: hidden;
display: flex;
flex-direction: column;
width: 100%;
@ -59,6 +57,7 @@
height: 3.4em;
width: 100%;
padding: var(--space-xs);
background-color: var(--background-color-1);
display: flex;
align-items: center;
border-bottom: 1px solid var(--background-color-2);
@ -70,7 +69,8 @@
.message-input-container {
width: 100%;
padding: var(--space-norm);
padding: var(--space-md);
background-color: var(--background-color-1);
}
.message-input {
@ -81,12 +81,6 @@
color: currentColor;
border-radius: var(--radius-md);
padding: var(--space-sm);
font-size: inherit;
line-height: inherit;
}
.message-input::placeholder {
color: var(--foreground-color-3);
}
</style>
@ -97,6 +91,6 @@
</div>
<Messages channelId="{ channel.id }" />
<div class="message-input-container">
<input placeholder={`Send something interesting to #${channel.name}`} type="text" class="message-input" on:keydown={ onKeydown } bind:value={ messageInput }>
<input type="text" class="message-input" on:keydown={ onKeydown } bind:value={ messageInput }>
</div>
</div>

View file

@ -10,7 +10,6 @@
height: 100vh;
display: flex;
flex-direction: row;
overflow: hidden;
}
.fullscreen-message {

View file

@ -48,40 +48,24 @@
<style>
.messages-container {
padding: var(--space-normplus);
padding-bottom: 0;
padding: var(--space-sm);
height: 100%;
width: 100%;
flex-grow: 0;
overflow-y: auto;
overflow-x: hidden;
background-color: var(--background-color-1);
}
.message {
overflow-x: none;
word-break: break-all;
}
.message-content {
color: var(--foreground-color-2);
}
.pending {
color: var(--foreground-color-3);
}
.author {
font-weight: bold;
margin-right: var(--space-xxs);
color: var(--foreground-color-2);
}
</style>
<div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
{#each $messages as message (message.id)}
<div class="message">
<span class="author">{ message.author_username }</span>
<span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
<div>
<b>{ message.author_username }</b>
<span class:pending={ message._isPending }>{ message.content }</span>
</div>
{/each}
</div>