kash-shell 0.3.16__py3-none-any.whl → 0.3.18__py3-none-any.whl

kash/web_gen/templates/base_styles.css.jinja

@@ -5,7 +5,8 @@
   --font-sans: "Source Sans 3 Variable", sans-serif, "Hack Nerd Font";
   --font-serif: "PT Serif", serif, "Hack Nerd Font";
   /* Source Sans 3 Variable better at these weights. */
-  --font-weight-sans-bold: 620;
+  --font-weight-sans-medium: 565;
+  --font-weight-sans-bold: 650;
   --font-mono: "Hack Nerd Font", "Menlo", "DejaVu Sans Mono", Consolas, "Lucida Console", monospace;
 
   --font-size-large: 1.2rem;
@@ -68,6 +69,14 @@
 }
 {% endblock scrollbar_styles %}
 
+{% block html_styles %}
+/* Prevent horizontal overflow at the root level */
+html {
+  overflow-x: hidden;
+  width: 100%;
+}
+{% endblock html_styles %}
+
 {% block body_styles %}
 body {
   font-family: var(--font-serif);
@@ -109,7 +118,9 @@ a:hover {
 h1,
 h2,
 h3,
-h4 {
+h4,
+h5,
+h6 {
   line-height: 1.2;
 }
 
@@ -120,7 +131,7 @@ h1 {
 }
 
 h2 {
-  font-size: 1.4rem;
+  font-size: 1.42rem;
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
@@ -129,17 +140,32 @@ h1 + h2 {
   margin-top: 2rem;
 }
 
+h2 + h3 {
+  margin-top: 1.1rem;
+}
+
 h3 {
-  font-size: 1.03rem;
-  margin-top: 1.6rem;
-  margin-bottom: 0.5rem;
+  font-size: 1.18rem;
+  margin-top: 1.4rem;
+  margin-bottom: 0.7rem;
 }
 
 h4 {
+  font-size: 1.1rem;
   margin-top: 1rem;
   margin-bottom: 0.7rem;
 }
 
+h5, h6 {
+  font-size: 1rem;
+  margin-top: 0.7rem;
+  margin-bottom: 0.5rem;
+}
+
+h4+p, h5+p, h6+p {
+  margin-top: 0;
+}
+
 ul {
   list-style-type: none;
   margin-left: 1.8rem;
@@ -187,20 +213,34 @@ code {
   font-family: var(--font-mono);
   font-size: var(--font-size-mono);
   letter-spacing: -0.025em;
+
   transition: color 0.4s ease-in-out;
 }
+/* For code inside pre we style the pre tag */
+code:not(pre code) {
+  background-color: var(--color-bg-alt);
+  border-radius: 3px;
+  border: 1px solid var(--color-hint-gentle);
+  padding: 0.25em 0.2em 0.1em 0.2em;
+}
+
+/* Code block wrapper for positioning copy button */
+.code-block-wrapper {
+  position: relative;
+}
 
 /* Code blocks (pre + code) */
 pre {
   font-family: var(--font-mono);
   font-size: var(--font-size-mono);
   letter-spacing: -0.025em;
+
   background-color: var(--color-bg-alt);
-  border-radius: 4px;
-  border: 1px dotted var(--color-border-hint);
-  padding: 0.2rem 0.2rem 0.1rem 0.2rem;
+  border-radius: 3px;
+  border: 1px solid var(--color-hint-gentle);
+  padding: 0.25rem 0.2rem 0.1rem 0.2rem;
   overflow-x: auto;  /* Enable horizontal scrolling */
-  position: relative;  /* Create new stacking context */
+  margin: 0;
   transition: background-color 0.4s ease-in-out, border-color 0.4s ease-in-out;
 }
 
@@ -215,11 +255,12 @@ pre > code {
   position: absolute;
   top: 0;
   right: 0;
-  background: var(--color-bg-alt);
+  margin: 1px;
+  background: var(--color-bg-alt-solid);
   color: var(--color-hint);
   border: none;
   border-radius: 0.25rem;
-  padding: 0.25rem;
+  padding: 0;
   cursor: pointer;
   font-size: 0.75rem;
   z-index: 10;
@@ -229,7 +270,7 @@ pre > code {
   justify-content: center;
   width: 1.5rem;
   height: 1.5rem;
-  opacity: 0.6;
+  opacity: 0.9;
 }
 
 .code-copy-button:hover {
@@ -240,7 +281,6 @@ pre > code {
 
 .code-copy-button.copied {
   color: var(--color-success);
-  opacity: 1;
 }
 
 .code-copy-button svg {
@@ -248,6 +288,44 @@ pre > code {
   height: 0.875rem;
 }
 
+img {
+  margin: 1rem 0;
+}
+
+details {
+  font-family: var(--font-sans);
+  color: var(--color-text);
+
+  border: 1px solid var(--color-hint-gentle);
+  border-radius: 3px;
+  margin: 0.75rem 0;
+}
+
+summary {
+  color: var(--color-secondary);
+  padding: .5rem 1rem;
+  cursor: pointer;
+  user-select: none;
+  background: var(--color-bg-alt);
+  transition: all 0.15s ease-in-out;
+}
+
+summary:hover {
+  color: var(--color-primary-light);
+  {# background: var(--color-hover-bg); #}
+}
+
+/* keep the border on the summary when open so it blends */
+details[open] summary {
+  border-bottom: 1px solid var(--color-hint-gentle);
+}
+/* focus ring for a11y */
+summary:focus-visible {
+  outline: 3px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+
 hr {
   border: none;
   height: 1.5rem;
@@ -270,6 +348,7 @@ hr:before {
 {% endblock typography %}
 
 {% block long_text_styles %}
+
 /* Long text stylings, for nicely formatting blog post length or longer texts. */
 
 .long-text {
@@ -289,23 +368,36 @@ hr:before {
 
 .long-text h3 {
   font-family: var(--font-sans);
-  font-weight: var(--font-weight-sans-bold);
-  font-size: 1.05rem;
+  font-weight: 565;
   text-transform: uppercase;
   letter-spacing: 0.025em;
 }
 
 .long-text h4 {
+  font-family: var(--font-sans);
+  font-weight: 650;
+  letter-spacing: 0.02em;
+}
+
+.long-text h5 {
   font-family: var(--font-serif);
   font-weight: 700;
 }
 
+.long-text h6 {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-style: italic;
+}
+
 .subtitle {
   font-family: var(--font-serif);
   font-style: italic;
   font-size: 1rem;
 }
 
+/* Adjustments to long text for pure sans-serif pages. */
+
 .long-text .sans-text {
   font-family: var(--font-sans);
 }
@@ -333,11 +425,11 @@ hr:before {
 
 .long-text .sans-text h3 {
   font-family: var(--font-sans);
-  font-size: 1.03rem;
+  font-size: 1.1rem;
   font-weight: var(--font-weight-sans-bold);
   text-transform: uppercase;
   letter-spacing: 0.03em;
-  margin-top: 1.1rem;
+  margin-top: 1rem;
   margin-bottom: 0.8rem;
 }
 {% endblock long_text_styles %}
@@ -356,6 +448,7 @@ table {
 }
 
 th {
+  font-weight: var(--font-weight-sans-bold);
   text-transform: uppercase;
   letter-spacing: 0.03em;
   border-bottom: 1px solid var(--color-border-hint);
@@ -378,13 +471,24 @@ tbody tr:nth-child(even) {
 
 /* Container for wide tables to allow tables to break out of parent width. */
 .table-container {
-  {# max-width: calc(100vw - 6rem); #}
   position: relative;
-  left: 50%;
-  transform: translateX(-50%);
   box-sizing: border-box;
   margin: 2rem 0;
   background-color: var(--color-bg-solid);
+  /* Default: center tables within their container */
+  left: 50%;
+  transform: translateX(-50%);
+  /* Prevent container from expanding beyond its content area */
+  overflow-x: auto;
+  overflow-y: visible;
+}
+
+/* When TOC is present, simplify table container positioning */
+.content-with-toc.has-toc .table-container {
+  /* Within grid layout, position relative to the grid column */
+  left: 50%;
+  transform: translateX(-50%);
+  /* Let the table width be controlled by the responsive styles */
 }
 {% endblock table_styles %}
 
@@ -434,20 +538,89 @@ sup {
   }
   .table-container {
     width: calc(100vw - 6rem);
+    /* Ensure container doesn't expand beyond its width */
+    max-width: calc(100vw - 6rem);
+    contain: layout inline-size;
   }
   
   /* Apply shadow to long-text containers on larger screens */
   .long-text {
+    border: 1px solid var(--color-hint-gentle);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 -2px 6px -1px rgba(0, 0, 0, 0.07);
   }
   /* But remove shadow when wrapped in no-shadow class */
   .no-shadow .long-text {
-    box-shadow: none !important;
+    box-shadow: none;
+    border: none;
+  }
+}
+
+/* Handle TOC layouts specially - tables should bleed within their grid column */
+@media (min-width: 1200px) {
+  .content-with-toc.has-toc {
+    /* Define reusable values for clarity */
+    --content-width: 48rem;
+    --content-min-gap: 2rem;
+    --table-right-margin: 2rem;
+    --long-text-padding: 4rem; /* md:px-16 = 4rem */
+    
+    /* Where content would be if centered in viewport */
+    --content-centered-left: calc((100vw - var(--content-width)) / 2);
+    
+    /* Content's left margin within its grid column */
+    --content-margin-left: max(var(--content-min-gap), calc(var(--content-centered-left) - var(--toc-width)));
+    
+    /* Content text's actual position from viewport left edge (excluding padding) */
+    --content-text-viewport-left: calc(var(--toc-width) + var(--content-margin-left));
+  }
+
+  /* When TOC is present, tables should align with main content and bleed right */
+  .content-with-toc.has-toc .table-container {
+    /* Remove default positioning */
+    left: 0;
+    transform: none;
+    
+    /* Pull table left to align with content's text position */
+    /* Need to compensate for both content margin AND long-text padding */
+    margin-left: calc(-1 * (var(--content-margin-left) + var(--long-text-padding)));
+    
+    /* Table bleeds wide as can fit */
+    width: calc(100vw - var(--content-text-viewport-left) - var(--table-right-margin));
+    max-width: calc(100vw - var(--content-text-viewport-left) - var(--table-right-margin));
+    
+    /* Ensure horizontal scroll works properly without expanding container */
+    overflow-x: auto;
+    overflow-y: visible;
+    contain: layout inline-size;
+  }
+  
+  .content-with-toc.has-toc table {
+    /* Let table fill its container */
+    width: 100%;
+    max-width: none;
+  }
+  
+  /* But ensure tables don't exceed their grid column space */
+  .content-with-toc.has-toc .long-text {
+    /* The content area needs to allow tables to bleed beyond the text width */
+    overflow: visible;
+  }
+}
+
+/* Medium screens (768px - TOC breakpoint) - no TOC, tables should bleed but not as wide */
+@media (min-width: 768px) and (max-width: 1199px) {
+  table {
+    width: calc(100vw - 6rem);
+    max-width: calc(100vw - 6rem);
+  }
+  .table-container {
+    width: calc(100vw - 6rem);
+    max-width: calc(100vw - 6rem);
   }
 }
 
 /* Make narrower screens more usable for lists and tables. */
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   /* Prevent horizontal scrolling on the body */
   body {
     overflow-x: hidden;
@@ -461,20 +634,26 @@ sup {
   
   /* Make table containers scrollable without affecting page layout */
   .table-container {
-    max-width: 100%;
+    width: calc(100vw - 3rem);  /* Fixed width instead of max-width */
+    max-width: calc(100vw - 3rem);
     overflow-x: auto;
+    overflow-y: visible;  /* Ensure vertical overflow is not hidden */
     transform: none;
     left: 0;
     position: relative;
     margin-left: auto;
     margin-right: auto;
+    /* Prevent container from expanding beyond its width */
+    box-sizing: border-box;
+    contain: layout inline-size;  /* CSS containment to prevent width expansion */
   }
   
   table {
     font-size: var(--font-size-smaller);
-    /* Tables can be wider than container */
+    /* Tables can be wider than container on mobile */
     width: auto;
     min-width: 100%;
+    max-width: none;
   }
   
   ul, ol {

kash/web_gen/templates/base_webpage.html.jinja

@@ -50,57 +50,68 @@
   <link rel="preload" as="font" type="font/woff2" crossorigin
     href="https://cdn.jsdelivr.net/fontsource/fonts/source-sans-3:vf@latest/latin-wght-italic.woff2" />
 
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
+  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
   <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js" defer></script>
   {% endblock head_basic %}
 
   {% block head_extra %}{% endblock head_extra %}
 
   <style>
-
     body {
       background: var(--color-bg);
       color: var(--color-text);
       transition: background 0.4s ease-in-out, color 0.4s ease-in-out;
     }
 
-    .theme-toggle {
-      position: fixed;
-      top: 1rem;
-      right: 1rem;
-      background: transparent;
-      color: var(--color-hint);
+    .button {
+      color: var(--color-hint-strong);
+      background: var(--color-bg);
       border: none;
       padding: 0;
       border-radius: 0.3rem;
       cursor: pointer;
       font-size: 1rem;
-      z-index: 100;
-      transition: all 0.2s ease-in-out;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 2.5rem;
-      height: 2.5rem;
+      width: 2.2rem;
+      height: 2.2rem;
+      
+      /* Separate transitions for theme vs interaction */
+      transition: background-color 0.4s ease-in-out, 
+                  color 0.4s ease-in-out,
+                  transform 0.2s ease-in-out,
+                  box-shadow 0.2s ease-in-out;
     }
 
-    .theme-toggle:hover {
+    .button:hover {
       background: var(--color-hover-bg);
       color: var(--color-primary);
+      transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
     }
 
-    [data-theme="dark"] .theme-toggle {
-      color: var(--color-primary-light);
+    .button svg {
+      width: 1.2rem;
+      height: 1.2rem;
+      transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
     }
 
-    [data-theme="dark"] .theme-toggle:hover {
-      color: var(--color-bright);
-      background: var(--color-hover-bg);
+
+    /* Positioning class for fixed buttons */
+    .fixed-button {
+      position: fixed;
+      top: 1rem;
     }
 
-    .theme-toggle svg {
-      width: 1rem;
-      height: 1rem;
+    .floating-button {
+      border: 1px solid var(--color-hint-gentle);
+      background: var(--color-bg-alt);
+    }
+
+    /* Specific positioning and z-index for theme toggle */
+    .theme-toggle {
+      right: 1rem;
+      z-index: 100;
     }
 
     {% block font_faces %}
@@ -178,7 +189,7 @@
 <body>
   {% block theme_toggle %}
   {% if show_theme_toggle %}
-  <button class="theme-toggle" aria-label="toggle dark mode">
+  <button class="button fixed-button theme-toggle" aria-label="toggle dark mode">
     <i data-feather="moon"></i>
   </button>
   {% endif %}
@@ -197,11 +208,20 @@
     document.addEventListener('DOMContentLoaded', () => {
       // Add copy buttons to code blocks
       document.querySelectorAll('pre').forEach(pre => {
-        // Skip if already has a copy button
-        if (pre.querySelector('.code-copy-button')) {
+        // Skip if already has a copy button (check parent for wrapper)
+        if (pre.parentElement.classList.contains('code-block-wrapper')) {
           return;
         }
         
+        // Create wrapper div
+        const wrapper = document.createElement('div');
+        wrapper.className = 'code-block-wrapper';
+        
+        // Insert wrapper before pre and move pre inside it
+        pre.parentNode.insertBefore(wrapper, pre);
+        wrapper.appendChild(pre);
+        
+        // Create copy button
         const copyButton = document.createElement('button');
         copyButton.className = 'code-copy-button';
         copyButton.setAttribute('aria-label', 'Copy code');
@@ -229,7 +249,8 @@
           });
         });
         
-        pre.appendChild(copyButton);
+        // Add button to wrapper, not to pre
+        wrapper.appendChild(copyButton);
       });
       
       // Theme toggle (if present on page)
@@ -307,8 +328,9 @@
       }
     });
 
-    {% block scripts_extra %}{% endblock scripts_extra %}
+
   </script>
+  {% block scripts_extra %}{% endblock scripts_extra %}
   {% endblock scripts %}
   
   {% block analytics %}{% endblock analytics %}