Chore: styling and verbiage cleanup (#2451)

- Better responsive styling of header, logo, nav menu and docs sidebar
- Specify UTC on homepage (since we can't localize server-side)
- Minor copy updates

Author: josh-collinsworth

www/components/Header.tsx

@@ -27,14 +27,19 @@ export default function Header(props: { title: string; active: string }) {
 
 export function Logo() {
   return (
-    <a href="/" class="flex mr-3 items-center" aria-label="Top Page">
-      <img src="/logo.svg" alt="Fresh logo" width={40} height={40} />
+    <a href="/" class="flex mr-3 items-center shrink-0" aria-label="Top Page">
+      <img
+        src="/logo.svg"
+        alt="Fresh logo"
+        width={40}
+        height={40}
+      />
       <svg
         preserveAspectRatio="xMinYMin"
         viewBox="0 0 250 75"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        class="h-5 inline-block ml-2.5"
+        class="h-5 ml-2.5 shrink-0 hidden sm:inline-block"
         aria-label="Fresh logo"
       >
         <path

www/components/NavigationBar.tsx

@@ -12,10 +12,6 @@ export default function NavigationBar(
       name: "Showcase",
       href: "/showcase",
     },
-    // {
-    //   name: "Components",
-    //   href: "/components",
-    // },
     {
       name: "Blog",
       href: "https://deno.com/blog?tag=fresh",
@@ -24,7 +20,7 @@ export default function NavigationBar(
   const isHome = props.active == "/";
   return (
     <nav class={"flex " + props.class ?? ""} f-client-nav={false}>
-      <ul class="flex justify-center items-center gap-2 sm:gap-4 mx-4 my-2 sm:my-6 flex-wrap lg:mx-8 2xl:mr-0">
+      <ul class="flex items-center gap-x-2 sm:gap-4 mx-4 my-2 sm:my-6 flex-wrap lg:mx-8 2xl:mr-0">
         {items.map((item) => (
           <li>
             <a

www/components/homepage/IslandsSection.tsx

@@ -57,8 +57,8 @@ export function IslandsSection() {
           </svg>
           <SectionHeading>Island-based architecture</SectionHeading>
           <p>
-            Fresh ships plain HTML to the client, and then hydrates with
-            JavaScript only where needed.
+            Fresh ships plain HTML to the client, then hydrates with JavaScript
+            only where needed.
           </p>
           <p>
             Because it's Preact, you get best-in-class performance, plus the

www/components/homepage/PartialsSection.tsx

@@ -68,7 +68,8 @@ export function PartialsSection() {
           <SectionHeading>Stream HTML straight from the server</SectionHeading>
           <p>
             Fresh Partials let you fetch HTML and slot it directly into the
-            page, without a full page reload.
+            page, without a full page reload—perfect for interactive elements
+            and dynamic apps.
           </p>
           <FancyLink href="/docs/concepts/partials" class="mt-4">
             Learn more about Partials

www/components/homepage/RenderingSection.tsx

@@ -58,7 +58,7 @@ export function RenderingSection() {
               Freshly server-rendered {new Date().toLocaleString("default", {
                 dateStyle: "medium",
                 timeStyle: "medium",
-              })}
+              })} UTC
             </p>
           </DemoBox>
         </div>

www/routes/docs/[...slug].tsx

@@ -165,7 +165,7 @@ export default function DocsPage(props: PageProps<Data>) {
         <Header title="docs" active="/docs" />
         <div f-client-nav={true}>
           <MobileSidebar page={page} />
-          <div class="flex mx-auto max-w-screen-2xl px-4 md:px-0 md:py-0 justify-end bg-gray-100">
+          <div class="flex mx-auto max-w-screen-2xl px-0 md:px-4 md:py-0 justify-start bg-gray-100">
             <label
               for="docs_sidebar"
               class="px-4 py-3 lg:hidden flex items-center hover:bg-gray-100 rounded gap-2 cursor-pointer"

www/routes/thanks.tsx

@@ -24,7 +24,7 @@ export default function ThanksForSubscribing(
       <PageSection>
         <DemoBox>
           <div class="space-y-2">
-            <h1 class="text-lg sm:text-2xl md:text-3xl lg:text-4xl">
+            <h1 class="text-2xl md:text-3xl lg:text-4xl">
               {vote
                 ? `Thanks for voting for ${vote}!`
                 : `Form submitted successfully`}
@@ -60,7 +60,7 @@ export default function ThanksForSubscribing(
                 <path d="M13 18l6 -6" />
                 <path d="M13 6l6 6" />
               </svg>
-              Back home
+              Back
             </a>
           </div>
         </DemoBox>