a tool for shared writing and social publishing
0
fork

Configure Feed

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

changed selected style to be more obvious, moved selected style into global css

celine 11cb4852 41aecfff

+31 -21
+20
app/globals.css
··· 159 159 background-color: transparent; 160 160 } 161 161 162 + .block-border { 163 + @apply border; 164 + @apply border-border-light; 165 + @apply rounded-lg; 166 + @apply outline; 167 + @apply outline-offset-1; 168 + @apply outline-1; 169 + @apply outline-transparent; 170 + } 171 + 172 + .block-border-selected { 173 + @apply border; 174 + @apply border-border; 175 + @apply rounded-lg; 176 + @apply outline; 177 + @apply outline-offset-1; 178 + @apply outline-2; 179 + @apply outline-border; 180 + } 181 + 162 182 .transparent-outline { 163 183 @apply outline; 164 184 @apply outline-transparent;
+2 -3
components/Blocks/EmbedBlock.tsx
··· 63 63 <iframe 64 64 className={` 65 65 flex flex-col relative w-full overflow-hidden group/embedBlock 66 - border outline outline-1 -outline-offset-0 rounded-lg 67 - ${isSelected ? "border-tertiary outline-tertiary" : "border-border-light outline-transparent"} 66 + ${isSelected ? "block-border-selected " : "block-border"} 68 67 `} 69 68 width="100%" 70 69 height="100%" ··· 77 76 href={url?.data.value} 78 77 target="_blank" 79 78 style={{ wordBreak: "break-word" }} // better than tailwind break-all! 80 - className={`py-0.5 min-w-0 w-full line-clamp-1 text-xs italic text-accent-contrast`} 79 + className={`py-0.5 min-w-0 w-max line-clamp-1 text-xs italic text-accent-contrast`} 81 80 > 82 81 {url?.data.value} 83 82 </a>
+3 -2
components/Blocks/ExternalLinkBlock.tsx
··· 65 65 className={` 66 66 externalLinkBlock flex relative group/linkBlock 67 67 h-[104px] w-full bg-bg-page overflow-hidden text-primary hover:no-underline no-underline 68 - border hover:border-accent-contrast outline outline-1 -outline-offset-0 rounded-lg shadow-sm 69 - ${isSelected ? "outline-accent-contrast border-accent-contrast" : "outline-transparent border-border-light"} 68 + hover:border-accent-contrast shadow-sm 69 + ${isSelected ? "block-border-selected !outline-accent-contrast !border-accent-contrast" : "block-border"} 70 + 70 71 `} 71 72 > 72 73 <div className="pt-2 pb-2 px-3 grow min-w-0">
+1 -3
components/Blocks/ImageBlock.tsx
··· 99 99 } 100 100 height={image?.data.height} 101 101 width={image?.data.width} 102 - className={` 103 - outline outline-1 border rounded-lg 104 - ${isSelected ? "border-tertiary outline-tertiary" : "border-transparent outline-transparent"}`} 102 + className={isSelected ? "block-border-selected " : "block-border"} 105 103 /> 106 104 </div> 107 105 );
+2 -5
components/Blocks/MailboxBlock.tsx
··· 45 45 return ( 46 46 <div className={`mailboxContent relative w-full flex flex-col gap-1`}> 47 47 <div 48 - className={`flex flex-col gap-2 items-center justify-center w-full rounded-lg border outline ${ 49 - isSelected 50 - ? "border-tertiary outline-tertiary" 51 - : "border-border-light outline-transparent" 52 - }`} 48 + className={`flex flex-col gap-2 items-center justify-center w-full 49 + ${isSelected ? "block-border-selected " : "block-border"} `} 53 50 style={{ 54 51 backgroundColor: 55 52 "color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 85%)",
+3 -8
components/Blocks/PageLinkBlock.tsx
··· 31 31 <div 32 32 className={`w-full cursor-pointer 33 33 pageLinkBlockWrapper relative group/pageLinkBlock 34 - bg-bg-page border shadow-sm outline outline-1 rounded-lg 34 + bg-bg-page shadow-sm 35 35 flex overflow-clip 36 - ${ 37 - isSelected 38 - ? "border-tertiary outline-tertiary" 39 - : isOpen 40 - ? "border-border outline-transparent hover:outline-border-light" 41 - : "border-border-light outline-transparent hover:outline-border-light" 42 - } 36 + ${isSelected ? "block-border-selected " : "block-border"} 37 + ${isOpen && "!border-tertiary"} 43 38 `} 44 39 onClick={(e) => { 45 40 if (!page) return;