initial commit

src/styles/global.css

@@ -181,6 +181,7 @@
 
   html {
     @apply bg-background text-foreground scheme-light;
+    overflow-x: hidden;
 
     &.dark {
       @apply scheme-dark;
@@ -197,6 +198,9 @@
 
   body {
     @apply font-sans text-base leading-normal;
+    overflow-x: hidden;
+    width: 100%;
+    max-width: 100vw;
   }
 
   h1,
@@ -217,7 +221,15 @@
   }
 
   pre {
-    @apply bg-muted/60 overflow-x-auto rounded-md p-4;
+    @apply bg-muted/60 overflow-x-auto rounded-md p-4 max-w-full;
+    word-break: break-word;
+    overflow-wrap: break-word;
+  }
+
+  table {
+    @apply w-full max-w-full;
+    display: block;
+    overflow-x: auto;
   }
 
   code {
@@ -237,4 +249,101 @@
   ::backdrop {
     @apply bg-background/50;
   }
+
+  /* Heading anchor links */
+  .heading-anchor {
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+    text-decoration: none !important;
+    color: var(--color-muted-foreground);
+    font-weight: 400;
+    margin-left: 0.5rem;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .prose h2:hover .heading-anchor,
+  .prose h3:hover .heading-anchor,
+  .prose h4:hover .heading-anchor,
+  .prose h5:hover .heading-anchor,
+  .prose h6:hover .heading-anchor {
+    opacity: 1;
+  }
+
+  .heading-anchor:hover {
+    color: var(--color-primary);
+  }
+
+  .heading-anchor:hover .anchor-icon {
+    stroke: var(--color-primary);
+  }
+
+  .heading-anchor:focus {
+    opacity: 1;
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  /* Icon styling */
+  .anchor-icon {
+    width: 1rem;
+    height: 1rem;
+    stroke: currentColor;
+    transition: stroke 0.2s ease-in-out;
+  }
+
+  /* Prevent anchor link from inheriting prose link styles */
+  .prose .heading-anchor {
+    text-decoration: none !important;
+    text-underline-offset: 0 !important;
+  }
 }
+
+@theme {
+  --animate-marquee-left: marquee-left var(--duration, 40s) linear infinite;
+  --animate-marquee-up: marquee-up var(--duration, 40s) linear infinite;
+}
+
+@keyframes marquee-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - var(--gap, 1rem)));
+  }
+}
+
+@keyframes marquee-up {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(calc(-100% - var(--gap, 1rem)));
+  }
+}
+
+/* Theme toggle circle animation using View Transitions API */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root) {
+  z-index: 9999;
+  animation: circle-clip-in 0.5s ease-in-out forwards;
+}
+
+@keyframes circle-clip-in {
+  from {
+    clip-path: circle(0% at var(--toggle-x, 50%) var(--toggle-y, 50%));
+  }
+  to {
+    clip-path: circle(150% at var(--toggle-x, 50%) var(--toggle-y, 50%));
+  }
+}

src/styles/typography.css

@@ -68,6 +68,8 @@
 
     pre {
       @apply bg-muted/60 text-foreground max-w-full overflow-x-auto rounded-lg p-4 font-mono text-sm;
+      word-break: break-word;
+      overflow-wrap: break-word;
       @apply [&>span[data-line='']>*]:text-(--shiki-light) dark:[&>span[data-line='']>*]:text-(--shiki-dark);
     }
 
@@ -85,8 +87,13 @@
       @apply border-border my-10 border-t-2;
     }
 
+    /* Wrap tables for horizontal scroll on mobile */
+    .table-wrapper {
+      @apply my-10 w-full max-w-full overflow-x-auto rounded-lg;
+    }
+
     table {
-      @apply my-10 w-full border-collapse overflow-hidden rounded-lg text-sm shadow-sm;
+      @apply w-full min-w-[500px] border-collapse rounded-lg text-sm shadow-sm;
     }
 
     thead {