fix: footer grid, tweets, nav padding, search styling, href styling

www/src/LandingPageComponents/Footer/footer.astro

@@ -19,7 +19,7 @@
  </div>
  <div>
  <ul
- class="flex items-center justify-center flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3 lg:space-x-8"
+ class="grid grid-cols-2 gap-6 sm:flex items-center justify-center flex-col sm:flex-row text-center lg:space-x-8"
  >
  <li>
  <a

www/src/LandingPageComponents/Navbar/navbar.astro

@@ -10,30 +10,30 @@ const currentPage = Astro.url.pathname;
  : `flex flex-col relative justify-between items-center pt-3 bg-t3-purple-50 dark:bg-slate-900 z-50`}
  aria-label="Global"
 >
- <div class="flex items-center justify-between w-full px-6">
+ <div class="flex items-center justify-between w-full px-6 pb-2">
  <div class="flex justify-between items-center w-full md:w-auto">
  <div>
  <a class="" href="/">
  <img src="/assets/Logo.svg" width="60" height="60" alt="T3 Logo" />
  </a>
  </div><div class="hidden -space-x-1 md:flex md:ml-10">
  <a
- class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-100 hover:text-t3-purple-400"
+ class="inline-flex items-center border font-medium relative text-base px-3 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-100 hover:text-t3-purple-400"
  href="/en/introduction"
  ><span class="">Docs</span>
  </a>
  <a
- class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-100 hover:text-t3-purple-400"
+ class="inline-flex items-center border font-medium relative text-base px-3 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-100 hover:text-t3-purple-400"
  href="/en/faq"
  ><span class="">FAQ</span>
  </a><a
- class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-100 hover:text-t3-purple-400"
+ class="inline-flex items-center border font-medium relative text-base px-3 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-100 hover:text-t3-purple-400"
  href="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/t3-oss/create-t3-app"
  target="_blank"
  rel="noopener noreferrer"
  ><span class="">Github</span>
  </a><a
- class="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-100 hover:text-t3-purple-400"
+ class="inline-flex items-center border font-medium relative text-base px-3 py-2 rounded-md border-transparent text-t3-purple-500 dark:text-t3-purple-100 hover:text-t3-purple-400"
  href="https://init.tips"
  target="_blank"
  rel="noopener noreferrer"

www/src/LandingPageComponents/Tweets/tweet.astro

@@ -27,9 +27,9 @@ const {
 import { Image } from "@astrojs/image/components";
 ---
 
-<div class="max-w-xl mx-auto my-6">
+<div class="max-w-xl mx-auto my-2">
  <article
- class="border-t border-b border-gray-400 p-2 hover:bg-gray-100 flex flex-wrap items-start cursor-pointer bg-white bg-cover rounded-lg"
+ class="border-t border-b border-gray-400 px-4 pt-4 pb-1 hover:bg-gray-100 flex flex-wrap items-start cursor-pointer bg-white bg-cover rounded-lg"
  >
  <Image
  src={avatar}
@@ -39,14 +39,14 @@ import { Image } from "@astrojs/image/components";
  class="rounded-full w-12 h-12 mr-3"
  alt={`@${handle}'s Avatar`}
  />
- <div class="flex flex-wrap justify-start items-start flex-1">
+ <div class="flex flex-wrap justify-start flex-1">
  <div class="flex-1 flex items-center">
  <h3 class="mr-2 font-bold hover:underline">
  <a
  href={`https://twitter.com/${handle}`}
  target="_blank"
  rel="noopener noreferrer"
- class="hover:text-[#1da1f2]"
+ class="hover:text-[#1da1f2] text-sm sm:text-base"
  >{author}
  </a>
  </h3>

www/src/LandingPageComponents/Tweets/tweets.astro

@@ -3,8 +3,8 @@ import Tweet from "./tweet.astro";
 ---
 
 <section class="pb-16">
- <div class="flex flex-col lg:flex-row items-center justify-center">
- <div class="w-fit lg:mb-48 p-1 sm:p-2">
+ <div class="flex flex-col lg:flex-row items-center justify-center mx-3">
+ <div class="w-fit lg:mb-48 sm:p-2">
  <Tweet
  author="Emilia Zapata"
  avatar="https://pbs.twimg.com/profile_images/1426010455055638531/xUFu5JP7_400x400.jpg"
@@ -18,7 +18,7 @@ import Tweet from "./tweet.astro";
  tweetId="1553580714591158272"
  />
  </div>
- <div class="w-fit p-1 sm:p-2">
+ <div class="w-fit sm:p-2">
  <Tweet
  author="Antonio Pitasi"
  avatar="https://pbs.twimg.com/profile_images/1478681149824245762/OPY0MMZX_400x400.jpg"
@@ -43,7 +43,7 @@ import Tweet from "./tweet.astro";
  tweetId="1544944058291953664"
  />
  </div>
- <div class="w-fit lg:mt-52 p-1 sm:p-2">
+ <div class="w-fit lg:mt-52 sm:p-2">
  <Tweet
  author="Anthony (ajcwebdev.x)"
  avatar="https://pbs.twimg.com/profile_images/1549247631867711488/hK_Qr-Dx_400x400.png"

www/src/components/header/search.tsx

@@ -50,9 +50,9 @@ export default function Search() {
  type="button"
  ref={searchButtonRef}
  onClick={onOpen}
- className="w-full flex items-center justify-between px-4 py-2 text-sm font-medium dark:text-white text-gray-700 dark:bg-white bg-slate-100 rounded-lg"
+ className="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-white dark:text-gray-700 dark:bg-t3-purple-100 bg-t3-purple-400 shadow-inner shadow-t3-purple-700 dark:shadow-t3-purple-300 rounded-lg"
  >
- <div className="flex items-center justify-center text-slate-900 stroke-slate-900">
+ <div className="flex items-center justify-center text-white dark:text-slate-900 dark:stroke-slate-900">
  <svg width="24" height="24" fill="none">
  <path
  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
@@ -63,10 +63,12 @@ export default function Search() {
  />
  </svg>
 
- <span className="pl-1 lg:pl-3 text-slate-900">Search</span>
+ <span className="pl-1 lg:pl-3 text-white dark:text-slate-900">
+ Search
+ </span>
  </div>
 
- <span className="border px-1 rounded-md border-slate-900 text-slate-900">
+ <span className="border px-1 rounded-md border-white text-white dark:border-slate-900 dark:text-slate-900">
  <span className="sr-only">Press </span>
 
  <kbd>/</kbd>

www/src/components/leftSidebar/leftSidebar.astro

@@ -16,7 +16,7 @@ const sidebar = SIDEBAR[langCode];
 <nav
  aria-labelledby="grid-left"
  class={currentPage === "/"
- ? ` pt-6 pb-28 h-full`
+ ? `pt-6 pb-28 h-full`
  : `overflow-y-scroll md:overflow-hidden h-full pb-32`}
 >
  <div class="max-w-lg mx-auto p-3 pt-6 md:hidden">
@@ -32,8 +32,8 @@ const sidebar = SIDEBAR[langCode];
  <h2
  class={
  currentPage === "/"
- ? `text-xl text-slate-50`
- : `text-xl dark:text-slate-50 text-slate-900 `
+ ? `text-2xl sm:text-xl text-slate-50`
+ : `text-2xl sm:text-xl dark:text-slate-50 text-slate-900 `
  }
  >
  {header}
@@ -51,8 +51,9 @@ const sidebar = SIDEBAR[langCode];
  class={`
  ${
  currentPageMatch === child.link
- ? "hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 font-extrabold "
- : "hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200"
+ ? "hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 font-extrabold text-lg sm:text-base"
+ : "hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 text-lg sm:text-base"
+
  }
 
  transition-colors

www/src/components/rightSidebar/moreMenu.astro

@@ -19,7 +19,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL;
  {
  editHref && (
  <li
- class={`hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200 border-t3-purple-500 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300`}
+ class={`hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 border-t3-purple-300 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300`}
  >
  <a class="flex pl-2" href={editHref} target="_blank">
  <svg
@@ -47,7 +47,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL;
  {
  CONFIG.COMMUNITY_INVITE_URL && (
  <li
- class={`hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200 border-t3-purple-500 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300`}
+ class={`hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 border-t3-purple-300 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300`}
  >
  <a class="flex pl-2" href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
  <svg

www/src/components/rightSidebar/tableOfContents.tsx

@@ -49,14 +49,16 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
  }, []);
 
  return (
- <div className="w-full text-slate-900 dark:text-slate-50">
+ <div className="w-full ">
  <h2 className="text-lg my-4 font-semibold">On this page</h2>
- <ul className="w-full border-l-2 border-slate-800 dark:border-brand-primary my-1">
+ <ul className="w-full border-l-2 border-t3-purple-300 marker:text-t3-purple-300 dark:border-t3-purple-200 my-1">
  <li
- className={`pl-2 ${activeId === "overview" ? "active" : ""}`.trim()}
+ className={`pl-2 marker:bg-t3-purple-300 ${
+ activeId === "overview" ? "active" : ""
+ }`.trim()}
  >
  <a
- className="text-t3-purple-500 dark:text-t3-purple-200 hover:text-t3-purple-300"
+ className="text-t3-purple-500 dark:text-t3-purple-200 hover:text-t3-purple-300 "
  href="#overview"
  >
  Overview
@@ -69,8 +71,10 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
  return (
  <li key={i} className="w-full list-none pl-2">
  <a
- className={`pl-${padding} hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200 ${
- activeId === heading.slug ? "font-bold " : ""
+ className={`pl-${padding} hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200 marker:text-t3-purple-300 ${
+ activeId === heading.slug
+ ? "font-bold text-t3-purple-500 dark:text-t3-purple-200 hover:text-t3-purple-300 dark:hover:text-t3-purple-100"
+ : "text-t3-purple-500 dark:text-t3-purple-200 hover:text-t3-purple-300 dark:hover:text-t3-purple-100"
  }`}
  href={`#${heading.slug}`}
  >

www/src/layouts/landingPage.astro

@@ -25,11 +25,11 @@ import "@docsearch/css";
  <link rel="icon" type="image/ico" href="/favicon.ico" />
  <meta name="generator" content={Astro.generator} />
  </head>
- <body class="relative">
+ <body class="relative h-full">
  <Navbar />
  <aside
  id="grid-left"
- class="hidden sticky h-[100vh] overflow-y-auto bottom-0 top-20 bg-gradient-to-b via-[#300171] from-gray-900 to-slate-900 z-10"
+ class="hidden sticky h-[100vh] overflow-y-auto bottom-0 top-0 left-0 right-0 bg-gradient-to-b via-[#300171] from-gray-900 to-slate-900 z-10"
  title="Site Navigation"
  >
  <LeftSidebar currentPage={currentPage} />

www/src/styles/global.css

@@ -3,6 +3,9 @@
 @tailwind utilities;
 
 @layer base {
+ html {
+ @apply w-full
+ }
  .cursor::after {
  display: block;
  content: "";
@@ -52,7 +55,7 @@
  @apply mb-0 text-sm;
  }
  .markdown a {
- @apply underline decoration-dotted underline-offset-2 dark:hover:text-t3-purple-600 dark:decoration-t3-purple-600 decoration-slate-500 hover:text-slate-500;
+ @apply underline decoration-dotted underline-offset-2 dark:hover:text-t3-purple-300 dark:decoration-t3-purple-200 decoration-slate-500 hover:text-slate-500 text-t3-purple-200;
  }
  .markdown pre {
  @apply font-mono my-3 p-2 rounded-md sm:pt-2;