commit 5eb5dccea93da594156022cec7efaa0ac8c60035 · ptr.pet/nucleus

+26 -4

src/components/PostComposer.svelte

···

       102
       102
        
       	};

     

       103
       103
        
       

     

       104
       104
        
       	$effect(() => {

     

       105
       105
       +
       		document.documentElement.style.setProperty('--acc-color', color);

     

       105
       106
        
       		if (isFocused && textareaEl) textareaEl.focus();

     

       106
       107
        
       		if (quoting || replying) isFocused = true;

     

       107
       108
        
       	});

     
···

       155
       156
        
       		}}

     

       156
       157
        
       		placeholder="what's on your mind?"

     

       157
       158
        
       		rows="4"

     

       158
       158
       -
       		class="field-sizing-content single-line-input resize-none bg-(--nucleus-bg)/40 focus:scale-100"

     

       159
       159
       -
       		style="border-color: color-mix(in srgb, {color} 27%, transparent);"

     

       159
       159
       +
       		class="field-sizing-content resize-none"

     

       160
       160
        
       	></textarea>

     

       161
       161
        
       	{#if quoting}

     

       162
       162
        
       		{@render renderPost(quoting)}

     
···

       202
       202
        
       							onfocus={() => (isFocused = true)}

     

       203
       203
        
       							type="text"

     

       204
       204
        
       							placeholder="what's on your mind?"

     

       205
       205
       -
       							class="single-line-input flex-1 bg-(--nucleus-bg)/40 p-1 px-2"

     

       206
       206
       -
       							style="border-color: color-mix(in srgb, {color} 27%, transparent);"

     

       205
       205
       +
       							class="flex-1"

     

       207
       206
        
       						/>

     

       208
       207
        
       					{/if}

     

       209
       208
        
       				</div>

     
···

       211
       210
        
       		</div>

     

       212
       211
        
       	</div>

     

       213
       212
        
       </div>

     

       213
       213
       +
       

     

       214
       214
       +
       <style>

     

       215
       215
       +
       	@reference "../app.css";

     

       216
       216
       +
       

     

       217
       217
       +
       	input,

     

       218
       218
       +
       	textarea {

     

       219
       219
       +
       		@apply single-line-input bg-(--nucleus-bg)/35;

     

       220
       220
       +
       		border-color: color-mix(in srgb, var(--acc-color) 30%, transparent);

     

       221
       221
       +
       	}

     

       222
       222
       +
       

     

       223
       223
       +
       	input {

     

       224
       224
       +
       		@apply p-1 px-2;

     

       225
       225
       +
       	}

     

       226
       226
       +
       

     

       227
       227
       +
       	textarea {

     

       228
       228
       +
       		@apply focus:scale-100;

     

       229
       229
       +
       	}

     

       230
       230
       +
       

     

       231
       231
       +
       	input::placeholder,

     

       232
       232
       +
       	textarea::placeholder {

     

       233
       233
       +
       		color: color-mix(in srgb, var(--acc-color) 45%, var(--nucleus-bg));

     

       234
       234
       +
       	}

     

       235
       235
       +
       </style>

+26 -21

src/routes/+page.svelte

···

       256
       256
        
       	});

     

       257
       257
        
       </script>

     

       258
       258
        
       

     

       259
       259
       +
       {#snippet appButton(onClick: () => void, icon: string, ariaLabel: string, iconHover?: string)}

     

       260
       260
       +
       	<button

     

       261
       261
       +
       		onclick={onClick}

     

       262
       262
       +
       		class="group rounded-sm bg-(--nucleus-accent)/15 p-2 text-(--nucleus-accent) transition-all hover:scale-110 hover:shadow-lg"

     

       263
       263
       +
       		aria-label={ariaLabel}

     

       264
       264
       +
       	>

     

       265
       265
       +
       		<Icon class="group-hover:hidden" {icon} width={28} />

     

       266
       266
       +
       		<Icon class="hidden group-hover:block" icon={iconHover ?? icon} width={28} />

     

       267
       267
       +
       	</button>

     

       268
       268
       +
       {/snippet}

     

       269
       269
       +
       

     

       259
       270
        
       <div class="mx-auto max-w-2xl">

     

       260
       271
        
       	<!-- thread list (page scrolls as a whole) -->

     

       261
       272
        
       	<div

     
···

       334
       345
        
       					{/if}

     

       335
       346
        
       

     

       336
       347
        
       					{#if showScrollToTop}

     

       337
       337
       -
       						<button

     

       338
       338
       -
       							onclick={scrollToTop}

     

       339
       339
       -
       							class="group shrink-0 rounded-sm bg-(--nucleus-accent)/15 p-2 text-(--nucleus-accent) transition-all hover:scale-110 hover:shadow-lg"

     

       340
       340
       -
       							aria-label="scroll to top"

     

       341
       341
       -
       							title="scroll to top"

     

       342
       342
       -
       						>

     

       343
       343
       -
       							<Icon

     

       344
       344
       -
       								class="transition-transform group-hover:-translate-y-0.5"

     

       345
       345
       -
       								icon="heroicons:arrow-up-16-solid"

     

       346
       346
       -
       								width={28}

     

       347
       347
       -
       							/>

     

       348
       348
       -
       						</button>

     

       348
       348
       +
       						{@render appButton(scrollToTop, 'heroicons:arrow-up-16-solid', 'scroll to top')}

     

       349
       349
        
       					{/if}

     

       350
       350
        
       				</div>

     

       351
       351
        
       

     
···

       354
       354
        
       					style="background: linear-gradient(to right, var(--nucleus-accent), var(--nucleus-accent2));"

     

       355
       355
        
       				></div>

     

       356
       356
        
       

     

       357
       357
       -
       				<div class="flex items-center justify-between px-2 py-1">

     

       357
       357
       +
       				<div class="flex items-center gap-1.5 px-2 py-1">

     

       358
       358
        
       					<div class="mb-2">

     

       359
       359
        
       						<h1 class="text-3xl font-bold tracking-tight">nucleus</h1>

     

       360
       360
        
       						<div class="mt-1 flex gap-2">

     
···

       362
       362
        
       							<div class="h-1 w-8 rounded-full bg-(--nucleus-accent2)"></div>

     

       363
       363
        
       						</div>

     

       364
       364
        
       					</div>

     

       365
       365
       -
       					<button

     

       366
       366
       -
       						onclick={() => (isSettingsOpen = true)}

     

       367
       367
       -
       						class="group rounded-sm bg-(--nucleus-accent)/15 p-2 text-(--nucleus-accent) transition-all hover:scale-110 hover:shadow-lg"

     

       368
       368
       -
       						aria-label="settings"

     

       369
       369
       -
       					>

     

       370
       370
       -
       						<Icon class="group-hover:hidden" icon="heroicons:cog-6-tooth" width={28} />

     

       371
       371
       -
       						<Icon class="hidden group-hover:block" icon="heroicons:cog-6-tooth-solid" width={28} />

     

       372
       372
       -
       					</button>

     

       365
       365
       +
       					<div class="grow"></div>

     

       366
       366
       +
       					{@render appButton(

     

       367
       367
       +
       						() => (isSettingsOpen = true),

     

       368
       368
       +
       						'heroicons:bell',

     

       369
       369
       +
       						'notifications',

     

       370
       370
       +
       						'heroicons:bell-solid'

     

       371
       371
       +
       					)}

     

       372
       372
       +
       					{@render appButton(

     

       373
       373
       +
       						() => (isSettingsOpen = true),

     

       374
       374
       +
       						'heroicons:cog-6-tooth',

     

       375
       375
       +
       						'settings',

     

       376
       376
       +
       						'heroicons:cog-6-tooth-solid'

     

       377
       377
       +
       					)}

     

       373
       378
        
       				</div>

     

       374
       379
        
       

     

       375
       380
        
       				<!-- <hr