dece

src/app.css

@@ -229,6 +229,7 @@ body {
   color: var(--color-text);
   transition: background-color 500ms ease-in-out;
 }
+
 [data-typewriter="animated"] [data-char-index] {
   opacity: 0;
 }
@@ -256,12 +257,6 @@ body {
   position: absolute;
 }
 
-@media (max-width: 767px) {
-  .cursor-block {
-    position: relative;
-  }
-}
-
 @keyframes blink {
   0%,
   50% {

src/app.tsx

@@ -200,11 +200,23 @@ function AppLayout(props: { children: any }) {
         >
           <div
             class="bg-base relative h-screen overflow-x-hidden overflow-y-scroll"
-            style={{
-              width: `${centerWidth()}px`,
-              "margin-left": `${leftBarSize()}px`
-            }}
+            style={
+              barsInitialized()
+                ? {
+                    width: `${centerWidth() ?? "calc(100vw - 500px)"}px`,
+                    "margin-left": `${leftBarSize() ?? "250px"}px`
+                  }
+                : {
+                    width: "calc(100vw - 500px)",
+                    "margin-left": "250px"
+                  }
+            }
           >
+            <noscript>
+              <div class="bg-yellow text-crust border-text fixed top-0 z-150 ml-16 border-b-2 p-4 text-center font-semibold md:ml-64">
+                JavaScript is disabled. Features will be limited.
+              </div>
+            </noscript>
             <div
               class="py-16"
               onMouseUp={handleCenterTapRelease}

src/components/Bars.tsx

@@ -313,7 +313,7 @@ export function LeftBar() {
       tabindex="-1"
       ref={ref}
       aria-label="Main navigation"
-      class="border-r-overlay2 bg-base fixed z-50 h-dvh w-min border-r-2 transition-transform duration-500 ease-out md:max-w-[20%]"
+      class="border-r-overlay2 bg-base fixed z-50 h-dvh w-min border-r-2 transition-transform duration-500 ease-out"
       classList={{
         "-translate-x-full": !leftBarVisible(),
         "translate-x-0": leftBarVisible()