kash-shell 0.3.25__py3-none-any.whl → 0.3.27__py3-none-any.whl

kash/web_gen/templates/base_styles.css.jinja

@@ -3,20 +3,49 @@
   font-size: 16px;
   /* Adding Hack Nerd Font to all fonts for icon support, if it is installed. */
   --font-sans: "Source Sans 3 Variable", sans-serif, "Hack Nerd Font";
-  --font-serif: "PT Serif", serif, "Hack Nerd Font";
+  --font-serif: "LocalPunct", "PT Serif", serif, "Hack Nerd Font";
   /* Source Sans 3 Variable better at these weights. */
   --font-weight-sans-medium: 550;
   --font-weight-sans-bold: 650;
   --font-mono: "Hack Nerd Font", "Menlo", "DejaVu Sans Mono", Consolas, "Lucida Console", monospace;
 
+  --font-features-sans: normal;
+  {#
+  /* TODO: FontSource builds don't seem to support these. Might be nice to use. */
+  --font-features-sans:
+     "ss01" 0, /* Flat-tailed l */
+     "ss02" 1, /* Single-storey a */
+     "ss03" 0, /* Single-storey g */
+     "ss04" 0; /* Sans-bar I */
+  #}
+
   --font-size-large: 1.2rem;
   --font-size-normal: 1rem;
   --font-size-small: 0.95rem;
-  --font-size-smaller: 0.85rem;
+  --font-size-smaller: 0.9rem;
+  --font-size-tiny: 0.85rem;
   --font-size-mono: 0.82rem;
   --font-size-mono-small: 0.75rem;
   --font-size-mono-tiny: 0.7rem;
 
+  --line-height-normal: 1.5;
+  --line-height-tight: 1.2;
+
+  /* Both Source Sans 3 and PT Serif have small caps, so we use this instead of text-transform. */
+  --caps-transform: none;
+  --caps-caps-variant: all-small-caps;
+  --caps-spacing: 0.021em;
+  /* Compensate for small caps (Source Sans small caps are quite small) */
+  --caps-heading-size-multiplier: 1.42;
+  --caps-heading-line-height: calc(1.2 / var(--caps-heading-size-multiplier));
+
+  {# 
+  /* Option to handle small caps manually. */
+  --caps-transform: uppercase;
+  --caps-caps-variant: none;
+  --caps-spacing: 0.025em;
+  #}
+
   --console-char-width: 88;
   --console-width: calc(var(--console-char-width) + 2rem);
   {% endblock root_variables %}
@@ -82,7 +111,7 @@ html {
 body {
   font-family: var(--font-serif);
   color: var(--color-text);
-  line-height: 1.5;
+  line-height: var(--line-height-normal);
   padding: 0;  /* No padding so we can have full width elements. */
   margin: auto;
   background-color: var(--color-bg);
@@ -116,13 +145,8 @@ a:hover {
   transition: all 0.15s ease-in-out;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  line-height: 1.2;
+h1, h2, h3, h4, h5, h6 {
+  line-height: var(--line-height-tight);
 }
 
 h1 {
@@ -132,7 +156,7 @@ h1 {
 }
 
 h2 {
-  font-size: 1.42rem;
+  font-size: 1.32rem;
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
@@ -152,7 +176,7 @@ h3 {
 }
 
 h4 {
-  font-size: 1.1rem;
+  font-size: 1.12rem;
   margin-top: 1rem;
   margin-bottom: 0.7rem;
 }
@@ -176,7 +200,7 @@ h4+p, h5+p, h6+p {
 ul {
   list-style-type: none;
   margin-left: 1.8rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.7rem;
   padding-left: 0;
 }
 
@@ -187,6 +211,7 @@ li {
 }
 
 li > p {
+  /* No extra padding for paragraphs inside list items. */
   margin-bottom: 0;
 }
 
@@ -209,10 +234,9 @@ ol > li {
 }
 
 blockquote {
-  border-left: 2px solid var(--color-primary);
+  {# border-left: 1px solid var(--color-border-hairline); #}
   padding-left: 1rem;
-  margin-left: 0;
-  margin-right: 0;
+  margin: 1.5rem 4rem 1.5rem 1rem;
 }
 
 /* Inline code styling */
@@ -220,7 +244,6 @@ 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 */
@@ -301,13 +324,17 @@ img {
 
 details {
   font-family: var(--font-sans);
+  font-feature-settings: var(--font-features-sans);
   color: var(--color-text);
 
   border: 1px solid var(--color-hint-gentle);
-  border-radius: 3px;
   margin: 0.75rem 0;
 }
 
+details > :not(summary) {
+  padding: 0 0.75rem;
+}
+
 summary {
   color: var(--color-secondary);
   padding: .5rem 1rem;
@@ -317,9 +344,12 @@ summary {
   transition: all 0.15s ease-in-out;
 }
 
+summary::marker {
+  font-size: 0.85rem;
+}
+
 summary:hover {
   color: var(--color-primary-light);
-  {# background: var(--color-hover-bg); #}
 }
 
 /* keep the border on the summary when open so it blends */
@@ -332,6 +362,36 @@ summary:focus-visible {
   outline-offset: 2px;
 }
 
+/* Special formatting for document metadata details */
+details.metadata {
+  color: var(--color-tertiary);
+}
+
+details.metadata > :not(summary) {
+  color: var(--color-secondary);
+}
+
+details.metadata summary {
+  font-weight: 550;
+  font-size: calc(var(--font-size-small) * var(--caps-heading-size-multiplier));
+  line-height: var(--caps-heading-line-height);
+  text-transform: var(--caps-transform);
+  font-variant-caps: var(--caps-caps-variant);
+  letter-spacing: var(--caps-spacing);
+  color: var(--color-tertiary);
+}
+
+details.metadata summary:hover {
+  color: var(--color-primary-light);
+}
+
+details.metadata blockquote {
+  border-left: none;
+  margin: 0 0.75rem;
+  font-size: var(--font-size-small);
+  font-style: italic;
+}
+
 
 hr {
   border: none;
@@ -375,15 +435,21 @@ hr:before {
 
 .long-text h3 {
   font-family: var(--font-sans);
+  font-feature-settings: var(--font-features-sans);
   font-weight: 550;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
+  font-size: calc(1.15rem * var(--caps-heading-size-multiplier));
+  line-height: var(--caps-heading-line-height);
+  text-transform: var(--caps-transform);
+  font-variant-caps: var(--caps-caps-variant);
+  letter-spacing: var(--caps-spacing);
 }
 
 .long-text h4 {
-  font-family: var(--font-serif);
-  font-weight: 400;
+  font-family: var(--font-sans);
+  font-feature-settings: var(--font-features-sans);
+  font-weight: 540;
   font-style: italic;
+  letter-spacing: 0.015em;
 }
 
 .long-text h5 {
@@ -407,6 +473,7 @@ hr:before {
 
 .long-text .sans-text {
   font-family: var(--font-sans);
+  font-feature-settings: var(--font-features-sans);
 }
 
 .long-text .sans-text p {
@@ -416,6 +483,7 @@ hr:before {
 
 .long-text .sans-text h1 {
   font-family: var(--font-sans);
+  font-feature-settings: var(--font-features-sans);
   font-size: 1.75rem;
   font-weight: 380;
   margin-top: 1rem;
@@ -424,6 +492,7 @@ hr:before {
 
 .long-text .sans-text h2 {
   font-family: var(--font-sans);
+  font-feature-settings: var(--font-features-sans);
   font-size: 1.25rem;
   font-weight: 440;
   margin-top: 1rem;
@@ -432,10 +501,13 @@ hr:before {
 
 .long-text .sans-text h3 {
   font-family: var(--font-sans);
-  font-size: 1.1rem;
+  font-feature-settings: var(--font-features-sans);
   font-weight: var(--font-weight-sans-bold);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
+  font-size: calc(1.1rem * var(--caps-heading-size-multiplier));
+  line-height: var(--caps-heading-line-height);
+  text-transform: var(--caps-transform);
+  font-variant-caps: var(--caps-caps-variant);
+  letter-spacing: var(--caps-spacing);
   margin-top: 1rem;
   margin-bottom: 0.8rem;
 }
@@ -448,6 +520,7 @@ table, th, td, tbody tr {
 
 table {
   font-family: var(--font-sans);
+  font-feature-settings: var(--font-features-sans);
   font-size: var(--font-size-small);
   width: auto;
   margin-left: auto;
@@ -460,10 +533,12 @@ table {
 
 th {
   font-weight: var(--font-weight-sans-bold);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
+  font-size: calc(var(--font-size-small) * var(--caps-heading-size-multiplier));
+  line-height: var(--caps-heading-line-height);
+  text-transform: var(--caps-transform);
+  font-variant-caps: var(--caps-caps-variant);
+  letter-spacing: var(--caps-spacing);
   border-bottom: 1px solid var(--color-border-hint);
-  line-height: 1.2;
   background-color: var(--color-bg-alt-solid);
 }
 
@@ -527,12 +602,16 @@ sup {
 
 .footnote-ref a, .footnote {
   font-family: var(--font-sans);
+  font-feature-settings: var(--font-features-sans);
+  background-color: var(--color-bg-meta-solid);
+  color: var(--color-hint-strong);
   text-decoration: none;
   padding: 0 0.15rem;
-  border-radius: 4px;
+  margin-right: 0.15rem;
+  border-radius: 6px;
   transition: all 0.15s ease-in-out;
   font-style: normal;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .footnote-ref a:hover, .footnote:hover {
@@ -540,8 +619,282 @@ sup {
   color: var(--color-primary-light);
   text-decoration: none;
 }
+
+@media print {
+  sup {
+    /* Using small-caps so this is a bit larger */
+    font-size: 110% !important;
+  }
+
+  /* Don't use stylized footnotes in print. */
+  .footnote-ref a, .footnote {
+    font-family: var(--font-serif);
+    font-variant-caps: all-small-caps !important;
+    font-feature-settings: normal !important;
+    background-color: transparent !important;
+    color: var(--color-text) !important;
+    padding: 0 0.05rem !important;
+    font-weight: 400 !important;
+  }
+  
+  .footnote-ref a:hover, .footnote:hover {
+    background-color: transparent !important;
+    color: var(--color-text) !important;
+  }
+
+  /* Hide footnote return arrows/links in print */
+  .footnote-backref,
+  .footnote-return,
+  a[href^="#fnref"],
+  .reversefootnote {
+    display: none !important;
+  }
+
+  /* Also hide common up arrow characters */
+  .footnote::after[content*="↩"],
+  .footnote::after[content*="↑"] {
+    display: none !important;
+  }
+}
+
 {% endblock footnote_styles %}
 
+{% block print_styles %}
+/* Print media adjustments for better readability and layout */
+@media print {
+  @page {
+    /* Set page margins for physical page */
+    margin: 0.7in 0.95in 0.8in 0.95in;
+
+    @top-center {
+      content: "";
+    }
+    
+    @bottom-left {
+      content: "Formatted by Kash — github.com/jlevy/kash";
+      font-family: var(--font-sans) !important;
+      font-size: var(--font-size-small);
+      color: var(--color-tertiary) !important;
+      margin: 0 0 0.2in 0 !important;
+    }
+    
+    @bottom-right {
+      content: counter(page);
+      font-family: var(--font-serif) !important;
+      font-size: var(--font-size-small);
+      color: var(--color-text) !important;
+      margin: 0 0 0.2in 0 !important;
+    }
+  }
+
+  :root {
+    /* Slightly larger fonts for print readability */
+    --font-size-normal: 1.1rem;
+    --font-size-small: 1.0rem;
+    --font-size-smaller: 0.9rem;
+    --font-size-mono: 0.9rem;
+
+    /* Tighter line height for print readability */
+    --line-height-normal: 1.4;
+    --line-height-tight: 1.15;
+  }
+
+  body {
+    /* Remove body margin since @page handles it */
+    margin: 0;
+  }
+
+  /* Reduce spacing between block elements to match tighter line height */
+  p {
+    margin-top: 0.65rem;
+    margin-bottom: 0.65rem;
+  }
+
+  li {
+    margin-top: 0.6rem;
+  }
+
+  /* Enable hyphenation and justification for main text content only */
+  p, blockquote {
+    hyphens: auto;
+    text-align: justify;
+  }
+
+  .long-text {
+    /* Remove shadows and borders that don't work well in print */
+    box-shadow: none !important;
+    border: none !important;
+    /* Add print-specific margins */
+    padding: 0;
+  }
+
+  /* Slightly darker sans-serif headings look better in print. */
+  .long-text h3 {
+    font-weight: 580;
+  }
+
+  .long-text h4 {
+    font-weight: 580;
+  }
+
+  /* Ensure tables don't break layout in print */
+  .table-container {
+    position: static;
+    transform: none;
+    left: auto;
+    width: 100%;
+    max-width: 100%;
+    overflow: visible;
+  }
+
+  table {
+    width: 100%;
+    max-width: 100%;
+    font-size: 0.9rem;
+  }
+
+  /* Adjust code blocks for print */
+  pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    background-color: transparent !important;
+    border: none !important;
+    font-weight: normal !important;
+  }
+
+  code {
+    background-color: transparent !important;
+    border: none !important;
+    font-weight: normal !important;
+  }
+
+  /* Hide interactive elements that don't work in print */
+  .code-copy-button {
+    display: none !important;
+  }
+
+  /* Page break controls */
+  h1, h2, h3, h4, h5, h6 {
+    break-after: avoid;
+    page-break-after: avoid; /* Fallback for older browsers */
+    break-inside: avoid;
+    page-break-inside: avoid; /* Fallback for older browsers */
+  }
+
+  /* Avoid breaking these elements */
+  blockquote, pre, .code-block-wrapper, figure, .table-container {
+    break-inside: avoid;
+    page-break-inside: avoid; /* Fallback for older browsers */
+  }
+
+  /* Control text flow */
+  p {
+    orphans: 3; /* Minimum lines at bottom of page */
+    widows: 3;  /* Minimum lines at top of page */
+  }
+
+  
+  /* Hide doc metadata details in print (for now) */
+  details.metadata {
+    display: none !important;
+  }
+
+  /* XXX: long endnote lists cut off the numbers. This is a workaround:
+   * Custom numbering system for ordered lists using Grid for alignment */
+  ol {
+    list-style: none;
+    counter-reset: list-counter;
+    padding-left: 0;
+    margin-left: 1rem;
+  }
+
+  ol > li {
+    display: grid;
+    /* col 1: fixed width for numbers up to 999. col 2: for the content */
+    grid-template-columns: 2.5rem 1fr;
+    gap: 0 0.5rem; /* Space between number and content */
+    align-items: baseline; /* Aligns number with first line of text */
+    counter-increment: list-counter;
+    /* Override global li styles for grid layout */
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    position: static;
+  }
+
+  ol > li::before {
+    content: counter(list-counter) ".";
+    text-align: right;
+    font-family: var(--font-serif);
+  }
+
+  /* Place all direct children of li into the second grid column */
+  /* This makes p, ul, etc. stack vertically as intended */
+  ol > li > * {
+    grid-column: 2;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+  }
+
+  /* Override justification for content within list items */
+  ol > li p,
+  ol > li blockquote {
+    text-align: left !important;
+    text-justify: none !important;
+    margin-top: 0; /* Tighter spacing inside list items */
+  }
+
+  /* --- Reset for Nested Lists --- */
+  /* This prevents nested lists from inheriting the grid layout */
+  ol ol {
+    margin-left: 1.5rem;
+    margin-top: 0.5rem;
+    list-style: decimal outside;
+    counter-reset: initial; /* Don't inherit parent counter */
+  }
+
+  ol ul {
+    margin-left: 1.5rem;
+    margin-top: 0.5rem;
+    list-style: none; /* We'll restore bullets with ::before */
+  }
+
+  ol ol > li {
+    display: list-item !important; /* Revert from grid to standard list item */
+    padding-left: 0.25rem;
+    margin-top: 0.4rem; /* Override global li margin for tighter spacing */
+    position: static; /* Override global li position */
+    /* Override justification from parent rules */
+    text-align: left !important;
+    text-justify: none !important;
+  }
+
+  ol ul > li {
+    display: list-item !important; /* Revert from grid to standard list item */
+    padding-left: 0.25rem;
+    margin-top: 0.4rem; /* Override global li margin for tighter spacing */
+    position: relative; /* Need relative positioning for bullet ::before */
+    /* Override justification from parent rules */
+    text-align: left !important;
+    text-justify: none !important;
+  }
+
+  /* Remove the custom counter from nested ol */
+  ol ol > li::before {
+    content: "" !important;
+  }
+
+  /* Restore bullets for nested ul within ol */
+  ol ul > li::before {
+    content: "▪︎";
+    position: absolute;
+    left: -.85rem;
+    top: .25rem;
+    font-size: 0.62rem;
+  }
+}
+{% endblock print_styles %}
+
 {% block responsive_styles %}
 /* Bleed wide on larger screens. */
 /* TODO: Don't make so wide if table itself isn't large? */

kash/web_gen/templates/base_webpage.html.jinja

@@ -10,6 +10,38 @@
 
   {% block title %}<title>{{ title }}</title>{% endblock title %}
 
+  {% block social_meta %}
+  {% if social_meta %}
+  <!-- Open Graph meta tags -->
+  <meta property="og:title" content="{{ social_meta.title or title }}" />
+  {% if social_meta.description %}
+  <meta property="og:description" content="{{ social_meta.description }}" />
+  {% endif %}
+  {% if social_meta.image %}
+  <meta property="og:image" content="{{ social_meta.image }}" />
+  {% endif %}
+  {% if social_meta.url %}
+  <meta property="og:url" content="{{ social_meta.url }}" />
+  {% endif %}
+  <meta property="og:type" content="{{ social_meta.type or 'website' }}" />
+  {% if social_meta.site_name %}
+  <meta property="og:site_name" content="{{ social_meta.site_name }}" />
+  {% endif %}
+  <!-- Twitter Card meta tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="{{ social_meta.title or title }}" />
+  {% if social_meta.description %}
+  <meta name="twitter:description" content="{{ social_meta.description }}" />
+  {% endif %}
+  {% if social_meta.image %}
+  <meta name="twitter:image" content="{{ social_meta.image }}" />
+  {% endif %}
+  {% if social_meta.twitter_handle %}
+  <meta name="twitter:site" content="@{{ social_meta.twitter_handle }}" />
+  {% endif %}
+  {% endif %}
+  {% endblock social_meta %}
+
   {% block dark_mode_script %}
   <script>
     // Set theme before body renders to prevent flash of unstyled content
@@ -152,6 +184,17 @@
       src: url(https://cdn.jsdelivr.net/fontsource/fonts/pt-serif@latest/latin-700-italic.woff2) format('woff2');
       unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
     }
+    /* PT Serif has a known bug with quote alignment that can look quite ugly.
+     * https://nedbatchelder.com/blog/201809/fixing_pt_serif.html?utm_source=chatgpt.com
+     * So we use a workaround to use punctuation from a different local font.
+     * After trying a few, it seems Georgia is workable for quote marks an non-oriented ASCII quotes. */
+    @font-face {
+      font-family: 'LocalPunct';
+      src: local('Georgia');
+      unicode-range: 
+        U+0022, U+0027,                  /* " ' */
+        U+2018, U+2019, U+201C, U+201D;  /* ‘ ’ “ ” */
+    }
     /* https://fontsource.org/fonts/source-sans-3/cdn */
     /* source-sans-3-latin-wght-normal */
     @font-face {

kash/web_gen/templates/components/toc_styles.css.jinja

@@ -84,15 +84,18 @@
 /* TOC Styling */
 .toc {  
   font-family: var(--font-sans);
+  font-feature-settings: var(--font-features-sans);
   color: var(--color-tertiary);
   font-variant-numeric: tabular-nums;
 }
 
 .toc-title {
-  font-size: var(--font-size-small);
   font-weight: 550;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
+  font-size: calc(var(--font-size-smaller) * var(--caps-heading-size-multiplier));
+  line-height: var(--caps-heading-line-height);
+  text-transform: var(--caps-transform);
+  font-variant-caps: var(--caps-caps-variant);
+  letter-spacing: var(--caps-spacing);
   padding-left: 0.3rem;
   border-bottom: 1px solid var(--color-border-hint);
   border-left: none !important; /* Override toc-link border */
@@ -102,7 +105,7 @@
   list-style: none;
   margin: 0.5rem 0 0 0;
   padding: 0;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-smaller);
   line-height: 1.2;
 }
 
@@ -273,6 +276,15 @@ body.toc-open {
   .toc-link.active {
     color: var(--color-text);
   }
+  
+  /* Slightly larger TOC font size on mobile */
+  .toc-title {
+    font-size: calc(var(--font-size-small) * var(--caps-heading-size-multiplier));
+  }
+  
+  .toc-list {
+    font-size: var(--font-size-small);
+  }
     
   .toc-container.mobile-visible {
     /* Visible state */
@@ -281,4 +293,13 @@ body.toc-open {
     visibility: visible;
     pointer-events: auto; /* Re-enable interaction */
   }
+} 
+
+@media print {
+  /* Hide TOC on print */
+  .toc-toggle,
+  .toc-backdrop,
+  .toc-container {
+    display: none !important;
+  }
 } 

kash/web_gen/templates/components/tooltip_styles.css.jinja

@@ -67,7 +67,9 @@
   border-left: 2px solid var(--color-primary);
   color: var(--color-text);
   font-family: var(--font-sans);
+  font-feature-settings: var(--font-features-sans);
   font-size: var(--font-size-small);
+  font-weight: 400;
   line-height: 1.4;
   padding: var(--tooltip-padding);
   border-radius: 0; /* Square corners for all tooltips */