feat: rebrand

src/components/Docs/DocsNav.js

@@ -13,7 +13,7 @@ export default function DocsNav({ docsNavData }) {
         if (children.length > 0) {
           acc.push(
             <div key={key}>
-              <h3 className="mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200">
+              <h3 className="mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200 font-lora">
                 {key}
               </h3>
               <ul className="mb-6 space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800">

src/components/Docs/DocsNavSideBar.js

@@ -9,7 +9,7 @@ export default function DocsSidebar({ children, className }) {
     <Popover>
       {({ open }) => (
         <>
-          <Popover.Button className="z-50 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-sky-500 bg-slate-300 dark:bg-slate-800 fixed right-[4rem] bottom-[4rem]">
+          <Popover.Button className="z-50 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-sky-500 bg-navy dark:bg-slate-200 fixed right-[4rem] bottom-[4rem]">
             {!open ? (
               <>
                 <span className="sr-only">Open Docs Nav menu</span>

src/components/HomePage/HomepageCta.js

@@ -2,7 +2,7 @@ import Link from "next/link"
 
 export default function HomepageCta() {
   return (
-    <div className="bg-slate-200 dark:bg-slate-900">
+    <div className="bg-white dark:bg-navy">
       <div className="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
         <h2 className="text-3xl font-extrabold text-navy dark:text-white sm:text-4xl">
           <span className="block">Boost your productivity</span>

src/components/HomePage/HomepageFeatures.js

@@ -3,13 +3,13 @@ import Image from "next/image"
 export default function HomepageFeatures() {
   return (
     <>
-      <div className="relative bg-white dark:bg-slate-800 pt-16 overflow-hidden sm:pt-24 lg:pt-32">
+      <div className="relative bg-white dark:bg-navy pt-16 overflow-hidden sm:pt-24 lg:pt-32">
         <div className="mx-auto max-w-md px-4 text-center sm:px-6 sm:max-w-3xl lg:px-8 lg:max-w-7xl">
           <div>
-            <h2 className="subtitle">
+            <h2 className="subtitle font-sans">
               Efficient Data Fetching
             </h2>
-            <p className="mt-2 text-3xl font-extrabold text-navy dark:text-white tracking-tight sm:text-4xl">
+            <p className="mt-2 text-3xl font-extrabold text-navy dark:text-white tracking-tight sm:text-4xl font-lora">
               Query what you need. Get exactly that.
             </p>
             <p className="mt-5 max-w-prose mx-auto text-xl text-navy dark:text-gray-100">
@@ -31,13 +31,13 @@ export default function HomepageFeatures() {
           </div>
         </div>
       </div>
-      <div className="relative bg-slate-200 dark:bg-slate-900 pt-16 overflow-hidden sm:pt-24 lg:pt-32">
+      <div className="relative bg-blue-100 dark:bg-slate-900 pt-16 overflow-hidden sm:pt-24 lg:pt-32">
         <div className="mx-auto max-w-md px-4 text-center sm:px-6 sm:max-w-3xl lg:px-8 lg:max-w-7xl">
           <div>
-            <h2 className="subtitle">
+            <h2 className="subtitle font-sans">
               Nested Resources
             </h2>
-            <p className="mt-2 text-3xl font-extrabold text-navy dark:text-white tracking-tight sm:text-4xl">
+            <p className="mt-2 text-3xl font-extrabold text-navy dark:text-white tracking-tight sm:text-4xl font-lora">
               Fetch many resources in a single request
             </p>
             <p className="mt-5 max-w-prose mx-auto text-xl text-navy dark:text-gray-100">

src/components/HomePage/HomepageFrameworks.js

@@ -3,7 +3,7 @@ import Image from "next/image"
 /* This example requires Tailwind CSS v2.0+ */
 export default function HomepageFrameworks() {
   return (
-    <div className="bg-slate-200 dark:bg-slate-600 pt-12 sm:pt-16">
+    <div className="bg-blue-100 dark:bg-blue pt-12 sm:pt-16">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="max-w-4xl mx-auto text-center">
           <h2 className="text-3xl font-extrabold text-navy dark:text-white sm:text-4xl">
@@ -16,9 +16,9 @@ export default function HomepageFrameworks() {
           </p>
         </div>
       </div>
-      <div className="mt-10 pb-12 bg-white dark:bg-slate-800 sm:pb-16">
+      <div className="mt-10 pb-12 bg-white dark:bg-navy sm:pb-16">
         <div className="relative">
-          <div className="absolute inset-0 h-1/2 bg-slate-200 dark:bg-slate-600" />
+          <div className="absolute inset-0 h-1/2 bg-blue-100 dark:bg-blue" />
           <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="max-w-4xl mx-auto">
               <dl className="rounded-lg bg-white dark:bg-slate-900 shadow-lg sm:grid sm:grid-cols-4">

src/components/HomePage/HomepageHero.js

@@ -3,9 +3,9 @@ import Link from "next/link"
 
 export default function HomepageHero() {
   return (
-    <div className="bg-white dark:bg-slate-800">
+    <div className="bg-white dark:bg-navy">
       <div className="max-w-8xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
-        <div className="bg-slate-200 dark:bg-slate-700 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
+        <div className="dark:bg-slate-900 bg-slate-100 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
           <div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
             <div className="lg:self-center">
               <h2 className="text-3xl font-extrabold text-navy dark:text-white sm:text-4xl">

src/components/HomePage/HomepageTrust.js

@@ -3,7 +3,7 @@ import Image from "next/image"
 /* This example requires Tailwind CSS v2.0+ */
 export default function HomePageTrust() {
   return (
-    <div className="bg-slate-100 dark:bg-slate-800">
+    <div className="bg-purple-200 dark:bg-purple-800">
       <div className="max-w-8xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
         <h2 className="text-center text-3xl tracking-tight font-extrabold text-navy dark:text-white sm:text-4xl">
           {`Who's Using WPGraphQL?`}

src/components/Preview/RecipePreview.js

@@ -28,7 +28,7 @@ export default function RecipePreview({ recipe }) {
 
       <div className="text-base font-medium leading-6">
         <Link href={recipe.uri}>
-          <a className="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-5 py-2 focus:outline-none focus:ring-2 bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900 focus:ring-slate-500 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white dark:focus:ring-slate-500">
+          <a className="btn-primary-sm">
             <span className="pr-2">View Recipe →</span>
           </a>
         </Link>

src/components/Site/SiteFooter.js

@@ -3,7 +3,7 @@ import { socialFooterLinks } from "data/social"
 export default function Footer() {
   const year = new Date().getFullYear()
   return (
-    <footer className="border-t border-slate-200 dark:border-slate-200/5 pt-10 pb-28">
+    <footer className="border-t border-slate-200 dark:border-slate-200/5 py-10">
       <div className="max-w-7xl mx-auto px-10 flex flex-col gap-6 justify-between md:flex-row text-slate-500">
         <div className="flex justify-center space-x-6 md:order-2">
           {socialFooterLinks.map((item) => (

src/components/Site/SiteHeader.js

@@ -73,8 +73,8 @@ export default function SiteHeader() {
     <Popover
       className={
         scrolled
-          ? `relative bg-white sticky top-0 z-50 shadow-xl dark:bg-slate-800`
-          : `relative bg-white sticky top-0 z-50 dark:bg-slate-800 border-b-2 border-b-gray-100 dark:border-b-slate-800`
+          ? `relative bg-white sticky top-0 z-50 shadow-xl dark:bg-navy`
+          : `relative bg-white sticky top-0 z-50 dark:bg-navy border-b-2 border-b-gray-100 dark:border-b-navy`
       }
       as={"header"}
     >
@@ -107,7 +107,7 @@ export default function SiteHeader() {
             </svg>
           </SearchButton>
           <ThemeToggle />
-          <Popover.Button className="bg-white rounded-md p-2 ml-3 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-sky-500 dark:bg-slate-900">
+          <Popover.Button className="bg-white rounded-md p-2 ml-3 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-sky-500 dark:bg-navy">
             <span className="sr-only">Open menu</span>
             <MenuIcon className="h-6 w-6" aria-hidden="true" />
           </Popover.Button>
@@ -134,7 +134,7 @@ export default function SiteHeader() {
                             open
                               ? "text-gray-900 dark:text-white"
                               : "text-gray-700 dark:text-gray-100",
-                            "group bg-white dark:bg-slate-800 rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-200"
+                            "group bg-white dark:bg-navy rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-200"
                           )}
                         >
                           <span>{item.label}</span>
@@ -158,7 +158,7 @@ export default function SiteHeader() {
                         >
                           <Popover.Panel className="absolute z-50 -ml-4 mt-3 transform w-screen max-w-md lg:max-w-2xl lg:ml-0 lg:left-1/2 lg:-translate-x-1/2">
                             <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
-                              <div className="relative grid gap-6 bg-white dark:bg-slate-700 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
+                              <div className="relative grid gap-6 bg-white dark:bg-slate-900 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
                                 {item.children?.map((menuItem) => {
                                   let icon = getIconNameFromMenuItem(menuItem)
 
@@ -169,12 +169,12 @@ export default function SiteHeader() {
                                       className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100 dark:hover:bg-slate-600"
                                     >
                                       {icon && (
-                                        <div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
+                                        <div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gradient-build text-white sm:h-12 sm:w-12">
                                           <DynamicHeroIcon icon={icon} />
                                         </div>
                                       )}
                                       <div className="ml-4">
-                                        <p className="text-base font-medium text-gray-900 dark:text-gray-200">
+                                        <p className="text-base font-medium text-gray-900 dark:text-gray-200 font-lora">
                                           {menuItem.label}
                                         </p>
                                         <p className="mt-1 text-sm text-gray-700 dark:text-slate-100">
@@ -271,7 +271,7 @@ export default function SiteHeader() {
                         className="-m-3 p-3 flex items-center rounded-lg hover:bg-gray-50 dark:hover:bg-slate-900"
                       >
                         <a className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100 dark:hover:bg-slate-600">
-                          <div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-600 text-white">
+                          <div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gradient-build text-white">
                             <DynamicHeroIcon icon={icon} />
                           </div>
                           <div className="ml-4 text-base font-medium text-gray-900 dark:text-white">

src/components/Site/ThemeToggle.js

@@ -203,7 +203,7 @@ export default function ThemeToggle({ panelClassName = "mt-4" }) {
                 className={clsx(
                   "py-1 px-2 flex items-center cursor-pointer",
                   selected && "text-sky-500",
-                  active && "bg-slate-50 dark:bg-slate-600/30"
+                  active && "bg-slate-50 dark:bg-slate-900"
                 )}
               >
                 <Icon selected={selected} className="w-6 h-6 mr-2" />

src/pages/_document.js

@@ -81,8 +81,8 @@ export default class Document extends NextDocument {
           />
         </Head>
         <body
-          className={clsx("antialiased text-slate-500 dark:text-slate-400", {
-            "bg-white dark:bg-slate-900":
+          className={clsx("antialiased text-slate-500 dark:text-slate-400 font-inter", {
+            "bg-white dark:bg-navy":
               !this.props.dangerousAsPath.startsWith("/examples/"),
           })}
         >

src/pages/developer-reference.js

@@ -51,16 +51,18 @@ export default function DeveloperReference() {
         </header>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
           {references.map((reference, i) => (
-            <div key={i} className="box-shadow bg-slate-200 dark:bg-slate-800 rounded-lg drop-shadow-lg p-5 pb-7">
-              { reference?.icon && <div className="flex h-12 w-12 items-center justify-center rounded-md bg-purple text-white"><reference.icon className="h-6 w-6" aria-hidden="true" /></div> }
+            <div key={i} className="box-shadow bg-slate-200 dark:bg-slate-900 rounded-lg drop-shadow-lg p-5 pb-7">
+              { reference?.icon && <div className="flex h-12 w-12 items-center justify-center rounded-md bg-gradient-build text-white"><reference.icon className="h-6 w-6" aria-hidden="true" /></div> }
               <h3 className="">{reference.name}</h3>
               <p>{reference.description}</p>
-              <a
-                className="bg-slate-500 hover:bg-slate-400 text-white dark:text-white font-bold py-2 px-4 rounded inline-flex items-center border-b-0"
-                href={reference.link}
-                target="_blank"
-                rel="noreferrer"
-              >Visit {reference.name}</a>
+              <div className="not-prose">
+                <a
+                  className="btn-primary-sm"
+                  href={reference.link}
+                  target="_blank"
+                  rel="noreferrer"
+                >Visit {reference.name}</a>
+              </div>
             </div>
           ))}
         </div>

src/styles/globals.css

@@ -9,6 +9,25 @@ html {
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: 'Lora';
+  src: url('/fonts/lora/Lora-VariableFont_wght.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter/InterVariable.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+h1, h2 {
+  font-family: 'Lora', serif;
+}
+
+
 /* Regular buttons */
 .btn-primary {
   @apply mt-8 bg-blue text-white border border-transparent rounded-full shadow px-5 py-3 inline-flex items-center text-base font-medium hover:bg-blue-500 hover:shadow-lg transition-all duration-300;
@@ -28,10 +47,10 @@ html {
 }
 
 .subtitle {
-  @apply text-base font-semibold tracking-wider text-navy dark:text-purple-400 uppercase;
+  @apply text-base font-semibold tracking-wider text-purple-600 dark:text-purple-400 uppercase;
 }
 
 /* Apply margin left to all adjacent "buttons", excluding the first button */
 [class*='btn-'] + [class*='btn-'] {
   @apply ml-4;
-}
+}

src/wp-templates/archive-post.js

@@ -7,7 +7,7 @@ export default function ArchivePost({ data }) {
 
   return (
     <SiteLayout>
-      <main className="content px-6 max-w-lg mx-auto lg:max-w-5xl">
+      <main className="content px-6 max-w-lg mx-auto md:max-w-5xl mb-10">
         <div className="space-y-2 pt-6 pb-8 md:space-y-5">
           <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-navy dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
             Blog

src/wp-templates/archive.js

@@ -34,7 +34,7 @@ export default function Archive({ data }) {
               />
             </p>
           </header>
-          <main className="content relative pt-10 max-w-3xl mx-auto">
+          <main className="content relative pt-10 max-w-3xl mx-auto mb-10">
             <ul className="divide-y divide-gray-200 dark:divide-gray-700">
               {archive?.contentNodes?.nodes?.map((node) => {
                 switch (node.__typename) {

src/wp-templates/category.js

@@ -16,27 +16,25 @@ export default function Category({ data }) {
   const { category } = data
 
   return (
-    <>
-      <SiteLayout>
-        <main className="content divide-y divide-gray-200 dark:divide-gray-700 max-w-lg mx-auto lg:max-w-8xl">
-          <div className="space-y-2 pt-6 pb-8 md:space-y-5 ">
-            <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
-              Category: {category?.name ?? null}
-            </h1>
-            <p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
-              {category?.description ?? null}
-            </p>
-          </div>
-          <ul className="divide-y divide-gray-200 dark:divide-gray-700">
-            {category?.posts?.nodes?.map((post) => (
-              <li key={post.id} className="py-12">
-                <PostPreview post={post} />
-              </li>
-            ))}
-          </ul>
-        </main>
-      </SiteLayout>
-    </>
+    <SiteLayout>
+      <main className="content px-6 max-w-lg mx-auto md:max-w-5xl mb-10">
+        <div className="space-y-2 pt-6 pb-8 md:space-y-5">
+          <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-navy dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
+            Category: {category?.name ?? null}
+          </h1>
+          <p className="text-lg leading-7 text-navy dark:text-white">
+            {category?.description ?? null}
+          </p>
+        </div>
+        <ul className="grid gap-8 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 auto-rows-fr">
+          {category?.posts?.nodes?.map((post, index) => (
+            <li key={post.id} className={`flex w-full ${index === 0 ? "xl:col-span-2" : ""}`}>
+              <PostPreview post={post} isLatest={index === 0} />
+            </li>
+          ))}
+        </ul>
+      </main>
+    </SiteLayout>
   )
 }