docs: fix responsive sidenav, adding gap between sidenav and main content, change default font with Inter font and enhance home page tagline

apps/app/index.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="/assets/spartan.svg" />
     <link rel="stylesheet" href="/src/styles.css" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
     <script>
       if (localStorage.theme !== 'default') {
         if (document && document.body) {

apps/app/src/app/pages/(home).page.ts

@@ -57,7 +57,7 @@ const lead = 'leading-normal text-muted-foreground sm:text-xl sm:leading-8';
           class="!bg-primary !text-foreground-primary !hover:bg-primary/90"
           >This is madness. This is spartan.</a
         >
-        <h1 class="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
+        <h1 class="font-semibold lg:font-bold text-3xl sm:text-5xl md:text-6xl">
           Cutting-edge tools powering Angular full-stack development.
         </h1>
         <p class="max-w-[42rem] ${lead}">

apps/app/src/app/shared/layout/container.directive.ts

@@ -7,5 +7,5 @@ import { Directive, HostBinding } from '@angular/core';
 export class ContainerDirective {
   @HostBinding('class')
   public class =
-    'w-full mx-auto px-1 flex flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] lg:grid-cols-[240px_minmax(0,1fr)]';
+    'w-full mx-auto flex flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] lg:grid-cols-[240px_minmax(0,1fr)] md:gap-6 lg:gap-10';
 }

apps/app/src/app/shared/layout/side-nav/side-nav.component.ts

@@ -9,7 +9,7 @@ import { SideNavContentComponent } from './side-nav-content.component';
   host: {
     class: 'fixed text-sm top-12 px-2 pt-6 pb-12 flex z-30 -ml-2 hidden w-full shrink-0 md:sticky md:block',
   },
-  template: `<hlm-scroll-area visibility="hover" class="h-[calc(100vh-3.5rem)]">
+  template: `<hlm-scroll-area visibility="hover" class="h-[calc(100vh-3.5rem)]" [autoWidthDisabled]="true">
     <spartan-side-nav-content />
   </hlm-scroll-area>`,
 })

apps/app/tailwind.config.js

@@ -1,5 +1,6 @@
 const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
 const { join } = require('path');
+const { fontFamily } = require('tailwindcss/defaultTheme');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -10,4 +11,11 @@ module.exports = {
     join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
     ...createGlobPatternsForDependencies(__dirname),
   ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', 'var(--font-sans)', ...fontFamily.sans],
+      },
+    },
+  },
 };