Update css customization #610
Conversation
|
|
|
commit: |
built with Refined Cloudflare Pages Action⚡ Cloudflare Pages Deployment
|
|
hmm I tried making these updates but for some reason my next branch is not similar to the next website deployed in production |
|
Oh never mind I was looking at the wrong domain |
|
I just caught this, when using with layerchart it should be also the comments need to be in /* */ format instead of // |
| html { | ||
| @apply bg-surface-200 accent-primary scroll-smooth; | ||
| /* background-image: | ||
| radial-gradient(at 0% 0%, hsl(var(--color-secondary) / 0.33) 0px, transparent 50%), | ||
| radial-gradient(at 98% 1%, hsl(var(--color-primary) / 0.33) 0px, transparent 50%); */ | ||
| } | ||
|
|
||
| nav h1 { | ||
| @apply py-2 pl-4 mt-4 text-sm text-surface-content font-bold bg-surface-200 border-t border-b; | ||
| } | ||
|
|
||
| nav h2 { | ||
| @apply pt-4 pb-2 pl-4 text-xs text-surface-content font-bold; | ||
| } | ||
|
|
||
| .prose { | ||
| h1 { | ||
| @apply text-2xl font-extrabold; | ||
| } | ||
| h2 { | ||
| @apply text-xl font-bold mt-3; | ||
| } | ||
| h3 { | ||
| @apply text-lg font-semibold; | ||
| } | ||
| } | ||
|
|
||
| main :is(h1, h2, h3):not(.prose *, .related *, .ApiDocs *) { | ||
| scroll-margin-top: calc(var(--headerHeight) + 148px); /* app header + docs header */ | ||
| } | ||
|
|
||
| main h1:not(.prose *, .related *, .ApiDocs *) { | ||
| @apply text-xl font-semibold mt-4 mb-2 border-b pb-1; | ||
| } | ||
|
|
||
| main h2:not(.prose *, .related *, .ApiDocs *) { | ||
| @apply text-lg font-semibold mt-4 mb-1; | ||
| } | ||
|
|
||
| main h3:not(.prose *, .related *, .ApiDocs *) { | ||
| @apply text-xs text-surface-content/50 mb-1; | ||
| } | ||
| main :not(.prose) h2 + h3 { | ||
| @apply -mt-1; | ||
| } | ||
|
|
||
| main small { | ||
| @apply text-xs text-surface-content/50 inline-block; | ||
| } | ||
|
|
||
| .TableOfContents small { | ||
| @apply hidden; | ||
| } | ||
|
|
||
| /* Code/Preview backgrounds */ | ||
| pre[class*='language-'] { | ||
| @apply bg-surface-content; | ||
| } | ||
|
|
||
| .dark pre[class*='language-'] { | ||
| @apply bg-surface-300; | ||
| } |
There was a problem hiding this comment.
Mostly of these are specific to the docs. The one possibly worth calling out is setting the html background and maybe setting the accent-color (for normal <input> if used)
html {
@apply bg-surface-200 accent-primary;
}
|
Thanks for reviewing and updating the docs. Let me know when you think this one is ready.
Good catches. Fixed on next |
|
Ok will do |
No need. You can continue to make changes to your branch ( Also, whatever works best for you. Just some ideas. |
|
@0xmiki you'll want to merge in
|
|
Sorry about that I'm still learning how to use git 😅 did i break the PR |
|
No worries! We all have to learn. Hmm... it does look like this PR no longer has any commits (i.e. your fork's |
|
Hmm, I see the changes to the css got merged here. Are there any other tweaks needed from my end? |
|
You had updated the theme customization section to show the CSS variables instead of tailwind plugin/config.
|
|
Ok great, sorry my confusion 😅 I am really hyped about using this stack as my main driver, hoping to make more succesful PRs next time tho lol |
2 participants
-
@layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: color-mix( in oklab, var(--color-surface-content) 20%, transparent ); outline-color: color-mix( in oklab, var(--color-surface-content) 20%, transparent ); } }