fix: improve mobile view

Author: luizchaves

src/components/NavBar.astro

@@ -9,7 +9,7 @@ import ThemeToggle from './ThemeToggle';
   <section class="px-4 py-2">
     <nav class="flex items-center justify-between">
       <a class="text-lg font-bold font-heading" href="/ls/">
-        <span class="md:hidden">LS</span>
+        <span class="sm:hidden">Ling. Script</span>
         <span class="max-sm:hidden">Linguagem de Script</span>
       </a>
 

src/components/Sidebar.astro

@@ -4,7 +4,7 @@ import { MENU } from '../consts';
 
 <aside
   id="default-sidebar"
-  class="fixed z-50 left-0 top-11 md:h-screen md:w-36 xl:w-48 self-start bg-gray-100 dark:bg-slate-800 hidden lg:block"
+  class="fixed z-50 left-0 top-11 md:h-screen w-full md:w-64 self-start shadow-md bg-gray-100 dark:bg-slate-800 hidden dark:border-r-white/30 dark:border-r lg:block"
   aria-label="Sidebar"
 >
   <div class="md:h-screen px-3 py-4 overflow-y-auto">

src/components/TableOfContent.astro

@@ -11,7 +11,7 @@ const { headings } = Astro.props;
 ---
 
 <nav
-  class="toc fixed top-11 right-0 h-[calc(100vh-2.75rem)] py-8 px-2 lg:w-56 xl:w-64 self-start hidden lg:block overflow-y-scroll"
+  class="toc fixed top-11 right-0 h-[calc(100vh-2.75rem)] py-8 lg:w-56 xl:w-64 self-start hidden xl:block overflow-y-scroll"
 >
   <ul class="flex flex-col gap-2">
     {

src/layouts/BaseLayout.astro

@@ -26,7 +26,7 @@ const { pageTitle } = Astro.props;
     >
       <Sidebar />
 
-      <article class="mx-auto py-8 lg:pl-40 xl:pl-64 max-sm:px-4">
+      <article class="mx-auto lg:ml-64 py-8 px-4 md:w-full">
         <slot />
       </article>
     </div>

src/layouts/MarkDownLayout.astro

@@ -62,7 +62,7 @@ const githubEditUrl = `${GITHUB_EDIT_URL}/src${file.split('/src').pop()}`;
       <Sidebar />
 
       <article
-        class="basis-full prose 2xl:prose-xl mx-auto py-8 max-sm:px-4 xl:px-4 xl:max-w-screen-md dark:prose-invert overflow-hidden"
+        class="mx-auto lg:max-xl:ml-64 py-8 px-4 md:px-6 max-xl:max-w-none w-full prose 2xl:prose-xl dark:prose-invert overflow-hidden"
       >
         <slot />
 

src/pages/classnotes.astro

@@ -16,10 +16,10 @@ classroomEntries.sort(
 ---
 
 <BaseLayout pageTitle="Conteúdos">
-  <main class="mx-auto">
+  <main>
     <h1 class="font-bold text-4xl text-center pb-16 pt-24">Conteúdos</h1>
     <div
-      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pb-16 px-4"
+      class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pb-16 px-4"
     >
       {
         classroomEntries.map((entry) => (