From 6a9e9ebc4c7113ec778d0a8285dfe7b8811a7c4b Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Dec 2022 23:07:14 +0100
Subject: [PATCH] responsiveness

---
 .../components/PageContent/PageContent.astro  | 21 ++++---------------
 website/src/layouts/MainLayout.astro          |  6 +++---
 website/src/repl/Footer.jsx                   |  2 +-
 3 files changed, 8 insertions(+), 21 deletions(-)
diff --git a/website/src/components/PageContent/PageContent.astro b/website/src/components/PageContent/PageContent.astro
index d17f50a9..559424e6 100644
--- a/website/src/components/PageContent/PageContent.astro
+++ b/website/src/components/PageContent/PageContent.astro
@@ -16,9 +16,11 @@ const title = frontmatter.title;
 
 <article id="article" class="content">
   <section class="main-section">
-    <nav class="block sm:hidden">
+    <!-- TODO: add dropdown toc on mobile -->
+    <!--     <nav class="block sm:hidden mb-8">
+      <span>On this Page:</span>
       <TableOfContents client:media="(max-width: 50em)" headings={headings} />
-    </nav>
+    </nav> -->
     <div class="prose prose-invert max-w-full">
       <slot />
     </div>
@@ -27,7 +29,6 @@ const title = frontmatter.title;
     <MoreMenu editHref={githubEditUrl} />
   </nav>
 </article>
-
 <style>
   .content {
     padding: 0;
@@ -37,18 +38,4 @@ const title = frontmatter.title;
     display: flex;
     flex-direction: column;
   }
-
-  .content > section {
-    margin-bottom: 4rem;
-  }
-
-  .block {
-    display: block;
-  }
-
-  @media (min-width: 50em) {
-    .sm\:hidden {
-      display: none;
-    }
-  }
 </style>
diff --git a/website/src/layouts/MainLayout.astro b/website/src/layouts/MainLayout.astro
index 46f96de7..6af2541c 100644
--- a/website/src/layouts/MainLayout.astro
+++ b/website/src/layouts/MainLayout.astro
@@ -30,14 +30,14 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
     </title>
   </head>
 
-  <body class="h-screen text-gray-50 ">
+  <body class="h-screen text-gray-50">
     <div class="w-full h-full space-y-4 flex flex-col">
       <header class="max-w-full fixed top-0 w-full z-[100]">
         <Header currentPage={currentPage} />
       </header>
       <main class="relative pt-16">
-        <div class="h-full top-0 overflow-auto px-2 min-w-[300px] flex xl:justify-center pl-[300px] xl:pl-0">
-          <aside title="Site Navigation" class="fixed w-[300px] px-6 left-0">
+        <div class="h-full top-0 overflow-auto min-w-[300px] flex xl:justify-center pr-4 pl-4 md:pl-[300px] xl:pl-0">
+          <aside title="Site Navigation" class="w-[300px] px-6 left-0 hidden md:block fixed">
             <LeftSidebar currentPage={currentPage} />
           </aside>
           <PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}>
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index 4f2777ac..1cc191f9 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -104,7 +104,7 @@ export function Footer({ context }) {
               </p>
               <p>
                 To learn more about what this all means, check out the{' '}
-                <a href="https://strudel.tidalcycles.org/tutorial" target="_blank">
+                <a href="./tutorial" target="_blank">
                   interactive tutorial
                 </a>
                 . Also feel free to join the{' '}
