atmosphere explorer pds.ls
tool typescript atproto
423
fork

Configure Feed

Select the types of activity you want to include in your feed.

header icon sizes and spacing

authored by

futurGH and committed by
Tangled
454daf8f 58b4b727

+12 -12
+2 -2
src/components/account.tsx
··· 147 147 </Modal> 148 148 <button 149 149 onclick={() => setOpenManager(true)} 150 - class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 150 + class="flex items-center rounded-lg p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 151 151 > 152 152 {agent() && avatars[agent()!.sub] ? 153 153 <img 154 154 src={avatars[agent()!.sub].replace("img/avatar/", "img/avatar_thumbnail/")} 155 155 class="size-5 rounded-full" 156 156 /> 157 - : <span class="iconify lucide--circle-user-round text-xl"></span>} 157 + : <span class="iconify lucide--circle-user-round text-lg"></span>} 158 158 </button> 159 159 </> 160 160 );
+3 -3
src/components/create.tsx
··· 367 367 <button 368 368 id="close" 369 369 onclick={() => setOpenDialog(false)} 370 - class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 370 + class="flex items-center rounded-lg p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" 371 371 > 372 372 <span class="iconify lucide--x"></span> 373 373 </button> ··· 479 479 </Modal> 480 480 <Tooltip text={`${props.create ? "Create" : "Edit"} record`}> 481 481 <button 482 - class={`flex items-center ${props.create ? "p-1" : "p-1.5"} hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 ${props.create ? "rounded-lg" : "rounded-sm"}`} 482 + class={`flex items-center p-1.5 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 ${props.create ? "rounded-lg" : "rounded-sm"}`} 483 483 onclick={() => { 484 484 setNotice(""); 485 485 setOpenDialog(true); 486 486 }} 487 487 > 488 488 <div 489 - class={props.create ? "iconify lucide--square-pen text-xl" : "iconify lucide--pencil"} 489 + class={props.create ? "iconify lucide--square-pen text-lg" : "iconify lucide--pencil"} 490 490 /> 491 491 </button> 492 492 </Tooltip>
+3 -3
src/components/search.tsx
··· 29 29 return ( 30 30 <button 31 31 onclick={() => setShowSearch(!showSearch())} 32 - class={`flex items-center gap-0.5 rounded-lg ${isTouchDevice ? "p-1 text-xl hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" : "dark:bg-dark-100/70 box-border h-7 border-[0.5px] border-neutral-300 bg-neutral-100/70 p-1.5 text-xs hover:bg-neutral-200 active:bg-neutral-300 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"}`} 32 + class={`flex items-center gap-1 rounded-md ${isTouchDevice ? "p-1.5 text-xl hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600" : "dark:bg-dark-100/70 box-border h-7 border-[0.5px] border-neutral-300 bg-neutral-100/70 px-2 mr-1 text-baseline text-xs hover:bg-neutral-200 active:bg-neutral-300 dark:border-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"}`} 33 33 > 34 - <span class="iconify lucide--search"></span> 34 + <span class={`iconify lucide--search ${isTouchDevice ? "text-lg" : ""}`}></span> 35 35 <Show when={!isTouchDevice}> 36 - <kbd class="font-sans text-neutral-500 select-none dark:text-neutral-400"> 36 + <kbd class="font-sans leading-none text-neutral-500 select-none dark:text-neutral-400"> 37 37 {/Mac/i.test(navigator.platform) ? "⌘" : "⌃"}K 38 38 </kbd> 39 39 </Show>
+4 -4
src/layout.tsx
··· 113 113 </Show> 114 114 </MetaProvider> 115 115 <header 116 - class={`dark:shadow-dark-700 dark:bg-dark-300 mb-3 flex w-full items-center justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 bg-size-[95%] bg-right bg-no-repeat p-3 shadow-xs [--header-bg:#fafafa] dark:border-neutral-700 dark:[--header-bg:#2d2d2d] ${localStorage.getItem("hrt") === "true" ? "bg-[linear-gradient(to_left,transparent_10%,var(--header-bg)_85%),linear-gradient(to_bottom,#5BCEFA90_0%,#5BCEFA90_20%,#F5A9B890_20%,#F5A9B890_40%,#FFFFFF90_40%,#FFFFFF90_60%,#F5A9B890_60%,#F5A9B890_80%,#5BCEFA90_80%,#5BCEFA90_100%)]" : ""}`} 116 + class={`dark:shadow-dark-700 dark:bg-dark-300 mb-3 flex w-full items-center justify-between rounded-xl border-[0.5px] border-neutral-300 bg-neutral-50 bg-size-[95%] bg-right bg-no-repeat p-2 pl-3 shadow-xs [--header-bg:#fafafa] dark:border-neutral-700 dark:[--header-bg:#2d2d2d] ${localStorage.getItem("hrt") === "true" ? "bg-[linear-gradient(to_left,transparent_10%,var(--header-bg)_85%),linear-gradient(to_bottom,#5BCEFA90_0%,#5BCEFA90_20%,#F5A9B890_20%,#F5A9B890_40%,#FFFFFF90_40%,#FFFFFF90_60%,#F5A9B890_60%,#F5A9B890_80%,#5BCEFA90_80%,#5BCEFA90_100%)]" : ""}`} 117 117 style={{ 118 118 "background-image": 119 119 props.params.repo in headers ? ··· 129 129 <span class="iconify tabler--binary-tree-filled text-[#76c4e5]"></span> 130 130 <span>PDSls</span> 131 131 </A> 132 - <div class="dark:bg-dark-300/60 relative flex items-center gap-1 rounded-lg bg-neutral-50/60"> 132 + <div class="dark:bg-dark-300/60 relative flex items-center gap-0.5 py-0.5 px-1 rounded-lg bg-neutral-50/60"> 133 133 <Show when={location.pathname !== "/"}> 134 134 <SearchButton /> 135 135 </Show> ··· 139 139 <AccountManager /> 140 140 <MenuProvider> 141 141 <DropdownMenu 142 - icon="lucide--menu text-xl" 143 - buttonClass="rounded-lg p-1" 142 + icon="lucide--menu text-lg" 143 + buttonClass="rounded-lg p-1.5" 144 144 menuClass="top-11 p-3 text-sm" 145 145 > 146 146 <NavMenu href="/jetstream" label="Jetstream" />