Fix web components and pages (UI)

web/components/Docs.tsx

@@ -12,8 +12,9 @@ export interface DocsProps {
 export default function Docs({ docs, braces, assign }: DocsProps) {
   const router = useRouter()
   return (
-    <div className="prose dark:prose-invert prose-lg">
-      <div dangerouslySetInnerHTML={{ __html: docs.desc_md }} />
+    <div className="prose dark:prose-invert prose-lg w-full max-w-3xl">
+      <div className="px-2 lg:px-4" dangerouslySetInnerHTML={{ __html: docs.desc_md }} />
+
       <div className="divide-y divide-gray-700/25 dark:divide-gray-300/25">
         {docs.values.map((doc) => {
           const target = router.asPath.endsWith(`#${doc.name}`)
@@ -22,20 +23,20 @@ export default function Docs({ docs, braces, assign }: DocsProps) {
               id={doc.name}
               key={doc.name}
               className={
-                'pt-4 scroll-mt-16 ' +
+                'pt-4 scroll-mt-16 overflow-auto ' +
                 (target
                   ? 'bg-rose-300 dark:bg-rose-900'
                   : 'bg-slate-200 dark:bg-slate-800 target:bg-rose-300 target:dark:bg-rose-900') +
                 ' hover:bg-opacity-25 dark:hover:bg-opacity-25 hover:ring-1 ring-black dark:ring-white ring-inset'
               }
             >
               <div className="flex">
-                <div className="px-2 py-3">
+                <div className="px-2 lg:pl-4 py-3">
                   <Link href={`#${doc.name}`} data-anchor-name={doc.name}>
                     <LinkIcon size={20} />
                   </Link>
                 </div>
-                <div className="flex-col p-1">
+                <div className="flex-col p-1 pr-2 lg:pr-4">
                   <div>
                     {braces && <code>$&#123;</code>}
                     <code className="text-lg p-1 mx-1 bg-fuchsia-200 dark:bg-fuchsia-900 font-bold">

web/components/Doggy.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 const Doggy: React.FunctionComponent = () => {
   return (
     // from https://undraw.co/
-    <svg width="656" height="447.5061" viewBox="0 0 656 447.5061">
+    <svg className="w-full" width="656" height="447.5061" viewBox="0 0 656 447.5061">
       <path
         d="M108.40148,315.94602c-3.16093,.3401-6.60921,.85055-10.27718,1.59744-15.55246,3.16687-15.87526,13.72736-15.73896,16.14847l-.10566-.06586c-1.56382,2.50859-2.54325,5.0473-3.13519,7.44337l-.71221-32.36652c.46052-.9602,.87954-2.04896,1.22889-3.16494,1.16419,3.58504,3.07256,6.97195,4.7176,6.74748,2.13909-.2919,3.07167-6.58596,2.67265-11.05881,2.72016,3.50314,7.2981,7.24972,9.02511,6.09446,1.38001-.92313,.56173-4.72359-.94492-8.17871,3.13929,1.89132,6.61613,3.13439,7.69503,1.93342,1.47227-1.63885-2.05557-7.23082-5.30905-10.35235,4.35496,.40613,9.89372-.28771,10.25684-2.26977,.2992-1.6331-2.99722-3.69384-6.5255-5.02014,3.5439-.93441,6.85789-2.56256,6.74798-4.17324-.13057-1.91338-5.05068-3.19543-9.29526-3.39051,3.20154-2.50471,6.14321-5.96711,5.24362-7.53303-.82704-1.43962-4.67439-.88198-8.22406,.38596,2.10064-3.00326,3.5775-6.38742,2.45277-7.54556-1.40106-1.44266-6.37359,1.04738-9.76711,3.79978,.66062-4.28797,.32665-9.70052-1.59659-10.19022-1.60895-.40967-3.88929,2.73886-5.4527,6.16866-.69097-3.59931-2.08979-7.01645-3.7042-7.01645-2.29982,0-4.16418,6.93399-4.16418,11.45149,0,.25536,.00677,.49574,.01843,.72541-.23083-.26761-.49538-.54719-.79707-.84018-3.24076-3.14728-9.51391-6.64064-11.11616-4.99082-1.12474,1.15814,.35212,4.5423,2.45277,7.54556-3.54967-1.26794-7.39702-1.82559-8.22406-.38596-1.11127,1.93439,3.63883,6.76323,7.4999,9.10499-.2321-.02796-.47595-.0515-.73547-.0692-4.50701-.30752-11.55183,1.08049-11.7084,3.37497-.10991,1.61067,3.20409,3.23883,6.74798,4.17324-3.52829,1.3263-6.8247,3.38704-6.5255,5.02014,.36312,1.98206,5.90188,2.6759,10.25684,2.26977-3.25348,3.12154-6.78132,8.7135-5.30905,10.35235,1.0789,1.20097,4.55573-.0421,7.69503-1.93342-1.50665,3.45512-2.32492,7.25558-.94492,8.17871,1.82373,1.21996,6.82541-3.02601,9.4625-6.67949-.2687,4.46965,.80077,10.61004,2.9228,10.85236,.88742,.10134,1.82777-.84507,2.67643-2.3023l-2.40356,34.79012c-.56184,4.05159,3.03199,6.69542,3.35318,8.36434l.51842,23.5593c-.58508-1.67794-1.37316-3.3952-2.43548-5.09933l-.10566,.0659c.13628-2.42136-.18675-12.98155-15.73896-16.14836-3.66797-.74689-7.11625-1.25734-10.27718-1.59744-3.73116-.40145-5.1866,4.70611-1.81595,6.35581,4.88144,2.38917,9.4733,5.39935,11.86668,8.96403,6.11901,9.11359,14.5737,3.84542,15.77578,3.0275,1.34266,2.23509,2.22306,4.48687,2.77913,6.62945l.27531,12.51144c-.06744,.2959-.11414,.46159-.11777,.47403l.12902,.03782,.66628,30.27884,6.18057-.04965-2.21068-30.94947c.37149-1.66957,1.51435-7.35722,0-13.26406l-2.21068-24.31744h0c-.0055-.01877,.12548,.63842,0,0l-2.8837-9.55504c.41933-2.95604,1.3925-6.28098,3.36894-9.57097,1.20206,.81791,9.65677,6.08611,15.77579-3.0275,2.39338-3.56469,6.98524-6.57486,11.86668-8.96403,3.37065-1.64971,1.91521-6.75726-1.81595-6.35581Zm-28.23342,71.6385l-.11651-5.2952c.23499,2.00214,.2231,3.80933,.11651,5.2952Z"
         fill="#f2f2f2"

web/components/Footer.tsx

@@ -5,13 +5,13 @@ const Footer: React.FunctionComponent = () => {
   const { publicRuntimeConfig } = getConfig()
   const { modifiedDate, modifiedYear } = publicRuntimeConfig
   return (
-    <div className="flex py-4 justify-center items-center">
-      <div className="px-1">
+    <div className="max-w-3xl mx-auto flex py-4 items-center">
+      <div className="px-2 lg:px-4">
         <CopyleftIcon width={20} height={20} />
       </div>
-      <div className="px-1 font-sans text-xs">
+      <div className="pl-1 pr-2 lg:pr-4 font-sans text-xs">
         <p>
-          {modifiedYear} Conky developers, updated <code>{modifiedDate}</code>
+          {modifiedYear} Conky developers, updated {new Date(modifiedDate).toLocaleString()}
         </p>
       </div>
     </div>

web/components/Header.tsx

@@ -36,14 +36,14 @@ export default function Header({ name, setDarkMode }: HeaderProps) {
 
   return (
     <div className="border-b-1 backdrop-blur-lg bg-white dark:bg-black bg-opacity-20 dark:bg-opacity-20 transition">
-      <header className="max-w-3xl mx-auto m-0 p-1 grow flex w-full">
-        <h1 className="px-2 text-3xl dark:text-white self-end">
+      <header className="max-w-3xl mx-auto m-0 py-1 px-2 lg:px-4 grow flex w-full">
+        <h1 className="text-3xl dark:text-white self-end mr-1">
           <Link href="/" className="font-bold" data-cy="top-link">
             {name}
           </Link>
         </h1>
         {router.asPath != '/' && (
-          <div className="flex text-md items-stretch self-stretch mx-1">
+          <div className="hidden sm:flex text-md items-stretch self-stretch mr-1">
             <NavLink href="/variables" name="Vars" />
             <NavLink href="/config_settings" name="Config" />
             <NavLink href="/lua" name="Lua" />
@@ -52,16 +52,23 @@ export default function Header({ name, setDarkMode }: HeaderProps) {
         <div className="flex-grow" />
         <Search />
         <div className="flex">
-          <div className="border-r mx-1 px-1 border-slate-700">
+          <div className="flex items-center border-r mx-1 px-1 border-slate-700">
             <a href="https://github.com/brndnmtthws/conky">
               <GitHub />
             </a>
           </div>
-          <div className="mx-1 px-1 flex place-content-center place-items-center">
+          <div className="ml-1 pl-1 flex place-content-center place-items-center">
             <ThemeSwitcher setDarkMode={setDarkMode} />
           </div>
         </div>
       </header>
+      {router.asPath != '/' && (
+        <div className="flex sm:hidden text-md items-stretch self-stretch px-1 pb-1">
+          <NavLink href="/variables" name="Vars" />
+          <NavLink href="/config_settings" name="Config" />
+          <NavLink href="/lua" name="Lua" />
+        </div>
+      )}
     </div>
   )
 }

web/components/Layout.tsx

@@ -45,10 +45,10 @@ export default function Layout({ children }: LayoutProps) {
 
   return (
     <div>
-      <div className="sticky top-0 z-10 h-16">
+      <div className="sticky top-0 z-10">
         <Header name="Conky" setDarkMode={setDarkMode} />
       </div>
-      <div className="relative pb-4">
+      <div className="relative pb-4 md:pt-4">
         <div className="flex flex-col items-center max-w-3xl w-full mx-auto">
           {children}
         </div>

web/components/Search.tsx

@@ -38,6 +38,7 @@ const SearchResult: React.FunctionComponent<SearchResultProps> = (props) => {
 
   return (
     <div className={`m-1 rounded flex flex-col p-2 ${selection}`}>
+      <hr className="border-black/10 dark:border-white/10 mb-2"/>
       <div className="flex justify-between">
         <div>
           <code className="text-lg p-1 mx-1 bg-fuchsia-200 dark:bg-fuchsia-900 font-bold">
@@ -49,7 +50,7 @@ const SearchResult: React.FunctionComponent<SearchResultProps> = (props) => {
         </div>
       </div>
       <div>
-        <p>{excerpt(props.result.item.desc)}</p>
+        <p className="w-11/12">{excerpt(props.result.item.desc)}</p>
       </div>
     </div>
   )

web/pages/404.tsx

@@ -8,9 +8,9 @@ export default function FourOhFour() {
       <SEO title="Conky" description="Conky documentation" />
       <main className="w-full">
         <div className="flex flex-col items-center">
-          <h1 className="text-4xl py-8 font-extrabold">404: Not found 😢</h1>
+          <h1 className="text-4xl py-8 px-2 lg:px-4 font-extrabold text-center">404: Not found 😢</h1>
           <Doggy />
-          <h2 className="text-3xl py-4 font-serif">Here&rsquo;s a doggy 😀</h2>
+          <h2 className="text-3xl py-4 font-serif mb-8">Here&rsquo;s a doggy 😀</h2>
         </div>
       </main>
     </Layout>

web/pages/config_settings.tsx

@@ -18,9 +18,9 @@ export default function ConfigSettings(props: ConfigSettingsProps) {
         title="Conky – Config settings"
         description="Conky configuration settings"
       />
-      <main className="w-full">
+      <main className="w-full pt-4">
         <div>
-          <h1 className="text-2xl" data-cy="page-heading">
+          <h1 className="text-2xl px-2 lg:px-4" data-cy="page-heading">
             Configuration settings
           </h1>
         </div>

web/pages/documents/[slug].tsx

@@ -54,7 +54,7 @@ export default function DocumentPage({
         title={`${frontMatter.title}`}
         description={frontMatter.description}
       />
-      <article className="px-6 md:px-0">
+      <article className="p-2 pt-4 lg:p-4 w-full">
         <header>
           <h1 className="text-3xl md:text-5xl dark:text-white mb-12">
             {frontMatter.title}

web/pages/lua.tsx

@@ -11,9 +11,9 @@ export default function Lua(props: LuaProps) {
   return (
     <Layout>
       <SEO title="Conky – Lua API" description="Conky Lua API documentation" />
-      <main className="w-full">
+      <main className="w-full pt-4">
         <div>
-          <h1 className="text-2xl" data-cy="page-heading">
+          <h1 className="text-2xl px-2 lg:px-4" data-cy="page-heading">
             Lua API
           </h1>
         </div>

web/pages/variables.tsx

@@ -14,8 +14,8 @@ export default function Variables(props: VariablesProps) {
         title="Conky – Variables"
         description="Conky object variables documentation"
       />
-      <main className="w-full">
-        <h1 className="text-2xl" data-cy="page-heading">
+      <main className="w-full pt-4">
+        <h1 className="text-2xl px-2 lg:px-4" data-cy="page-heading">
           Variables
         </h1>
         <Docs docs={props.variables} braces={true} assign={false} />