knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#773,website][m]: mdx pages now use a lighter color on dark mode, increased the contrast on the navbar links, fixed # headings color

Browse Source
This commit is contained in:
deme
2023-04-19 10:43:12 -03:00
parent e26ee8ea1e
commit 8c8674c4ef
5 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
site/components/Features.tsx
View File

@@ -38,7 +38,7 @@ const features: { title: string; description: string; icon: string }[] = [
export default function Features() {
return (
<div className="lg:max-w-8xl mx-auto px-4 lg:px-8 xl:px-12">
<h2 className="text-3xl font-bold">How Portal.JS works?</h2>
<h2 className="text-3xl font-bold text-primary dark:text-primary-dark">How Portal.JS works?</h2>
<p className="text-lg mt-8">
Portal.JS is built in JavaScript and React on top of the popular Next.js
framework, assuming a "decoupled" approach where the frontend is a
@@ -55,7 +55,7 @@ export default function Features() {
<div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.blue.300),theme(colors.blue.400),theme(colors.blue.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]" />
<div className="relative overflow-hidden rounded-xl p-6">
<img src={feature.icon} alt="" className="h-24 w-auto" />
<h2 className="mt-4 font-display text-base text-slate-900 dark:text-white">
<h2 className="mt-4 font-display text-base text-primary dark:text-primary-dark">
<span className="absolute -inset-px rounded-xl" />
{feature.title}
</h2>

2
site/components/MDXPage.tsx
View File

@@ -11,7 +11,7 @@ export default function MDXPage({ source, frontMatter }) {
};
return (
<div className="prose mx-auto prose-a:text-primary dark:prose-a:text-primary-dark prose-strong:text-primary dark:prose-strong:text-primary-dark prose-code:text-primary dark:prose-code:text-primary-dark prose-headings:text-primary dark:prose-headings:text-primary-dark prose text-primary dark:text-primary-dark prose-headings:font-headings dark:prose-invert prose-a:break-words">
<div className="prose mx-auto prose-a:text-primary dark:prose-a:text-primary-dark prose-strong:text-primary dark:prose-strong:text-primary-dark prose-code:text-primary dark:prose-code:text-primary-dark prose-headings:text-primary dark:prose-headings:text-primary-dark text-primary dark:text-primary-dark prose-headings:font-headings dark:prose-invert prose-a:break-words">
<header>
<div className="mb-6">
{/* Default layout */}

4
site/components/NavItem.tsx
View File

@@ -29,12 +29,12 @@ export default function NavItem({ item }) {
{Object.prototype.hasOwnProperty.call(item, "href") ? (
<Link
href={item.href}
className="text-slate-500 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-600"
className="text-slate-600 dark:text-slate-400 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-500"
>
{item.name}
</Link>
) : (
<div className="text-slate-500 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-600 fill-slate-500 hover:fill-slate-600">
<div className="text-slate-600 dark:text-slate-400 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-500 fill-slate-500 hover:fill-slate-600">
{item.name}
</div>
)}