Update footer links and styles (#2432)

Author: josh-collinsworth

_components/Footer.tsx

@@ -1,21 +1,20 @@
 export default function Footer_new() {
   return (
-    <footer class="text-sm bg-gray-50 dark:bg-gray-950 p-4 pt-12 sm:px-8 border-t border-t-foreground-tertiary">
-      <nav className="flex flex-col gap-y-12 max-w-7xl md:flex-row md:flex-wrap md:justify-between md:w-full md:gap-y-8 md:mx-auto">
+    <footer class="text-smaller bg-gray-50 dark:bg-gray-950 p-4 pt-12 sm:px-8 border-t border-t-foreground-tertiary">
+      <nav className="flex flex-col gap-x-4 gap-y-12 max-w-7xl md:flex-row md:flex-wrap md:justify-between md:w-full md:gap-y-8 md:mx-auto">
         {data.map((category) => (
-          <section>
-            <h3 class="mb-4 text-base font-bold text-foreground-primary">
+          <section class="flex-auto">
+            <h3 class="mb-2 uppercase font-bold text-foreground-primary whitespace-pre">
               {category.title}
             </h3>
-            <ul class="m-0 p-0 list-none">
+            <ul class="m-0 p-0 pl-3 border-l border-l-background-tertiary list-none">
               {category.items.map((item) => (
                 <li>
                   <a
-                    class="block mb-2 text-foreground-secondary hover:text-primary"
+                    class="block mb-2 hover:text-primary hover:underline"
                     href={item.to ?? item.href}
-                  >
-                    {item.label}
-                  </a>
+                    dangerouslySetInnerHTML={{ __html: item.label }}
+                  />
                 </li>
               ))}
             </ul>
@@ -50,14 +49,6 @@ const data = [
         label: "Deno Runtime",
         to: "/runtime/",
       },
-      {
-        label: "Deno Deploy",
-        to: "/deploy/manual/",
-      },
-      {
-        label: "Deno Subhosting",
-        to: "/subhosting/manual/",
-      },
       {
         label: "Examples",
         href: "/examples/",
@@ -66,6 +57,27 @@ const data = [
         label: "Standard Library",
         href: "https://jsr.io/@std",
       },
+      {
+        label: "Deno API Reference",
+        href: "/api/deno/~/Deno",
+      },
+    ],
+  },
+  {
+    title: "Services Docs",
+    items: [
+      {
+        label: "Deno Deploy <sup>EA</sup>",
+        to: "/deploy/early-access/",
+      },
+      {
+        label: "Deno Deploy Classic",
+        to: "/deploy/manual/",
+      },
+      {
+        label: "Deno Subhosting",
+        to: "/subhosting/manual/",
+      },
     ],
   },
   {
@@ -79,14 +91,22 @@ const data = [
         label: "GitHub",
         href: "https://github.com/denoland",
       },
-      {
-        label: "Twitter",
-        href: "https://twitter.com/deno_land",
-      },
       {
         label: "YouTube",
         href: "https://youtube.com/@deno_land",
       },
+      {
+        label: "Bluesky",
+        href: "https://bsky.app/profile/deno.land",
+      },
+      {
+        label: "Mastodon",
+        href: "https://fosstodon.org/@deno_land",
+      },
+      {
+        label: "Twitter",
+        href: "https://twitter.com/deno_land",
+      },
       {
         label: "Newsletter",
         href: "https://deno.news/",
@@ -117,6 +137,10 @@ const data = [
   {
     title: "Company",
     items: [
+      {
+        label: "Deno Website",
+        href: "https://deno.com/",
+      },
       {
         label: "Blog",
         href: "https://deno.com/blog",

_components/Navigation.tsx

@@ -15,7 +15,7 @@ export default function (
   return (
     <>
       <aside
-        className={`fixed transition-all duration-200 md:duration-0 easing-[cubic-bezier(0.165,0.84,0.44,1)] -translate-x-full z-50 w-full bg-background-raw opacity-0 p-4 pb-8 overflow-auto text-[0.8125rem] md:sticky md:overflow-y-auto md:[scrollbar-width:thin] md:z-10 md:!translate-x-0 md:!opacity-100 md:p-0 md:pb-16 lg:border-r lg:border-r-foreground-tertiary lg:w-full sidebar-open:translate-x-0 sidebar-open:opacity-100
+        className={`fixed transition-all duration-200 md:duration-0 easing-[cubic-bezier(0.165,0.84,0.44,1)] -translate-x-full z-50 w-full bg-background-raw opacity-0 p-4 pb-8 overflow-auto text-smaller md:sticky md:overflow-y-auto md:[scrollbar-width:thin] md:z-10 md:!translate-x-0 md:!opacity-100 md:p-0 md:pb-16 lg:border-r lg:border-r-foreground-tertiary lg:w-full sidebar-open:translate-x-0 sidebar-open:opacity-100
          ${
           hasSubNav
             ? "top-header-plus-subnav h-screen-minus-both"

_components/TableOfContentsItem.tsx

@@ -7,7 +7,7 @@ export default function TableOfContentsItem(
     <li class="m-2 mr-0 leading-4 text-balance">
       <a
         href={`#${props.item.slug}`}
-        className="text-[0.8125rem] lg:text-foreground-secondary hover:text-primary transition-colors duration-200 ease-in-out select-none"
+        className="text-smaller lg:text-foreground-secondary hover:text-primary transition-colors duration-200 ease-in-out select-none"
       >
         {props.item.text.replaceAll(/ \([0-9/]+?\)/g, "")}
       </a>

styles.css

@@ -74,6 +74,8 @@
   --breakpoint-xs: 30rem;
   --breakpoint-xlplus: 82rem;
 
+  --text-smaller: 0.8125rem;
+
   --font-sans:
     "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
     "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;