codetrail-cli 1.4.1__py3-none-any.whl

codetrail/web/static/css/content.css

@@ -0,0 +1,310 @@
+/* Guide content: pages, rationale callouts, diagrams, checks, source and diffs. */
+
+.prose {
+  font-size: 1rem;
+}
+
+.prose > :first-child {
+  margin-block-start: 0;
+}
+
+.prose ul,
+.prose ol {
+  padding-inline-start: 1.4em;
+}
+
+.prose li + li {
+  margin-block-start: var(--space-1);
+}
+
+.prose pre {
+  padding: var(--space-4);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--card);
+  font-size: 0.85rem;
+  line-height: 1.55;
+}
+
+.prose blockquote {
+  margin: var(--space-4) 0;
+  padding-inline-start: var(--space-4);
+  border-inline-start: 3px solid var(--line-strong);
+  color: var(--text-muted);
+}
+
+.prose table {
+  margin-block: var(--space-4);
+  font-size: 0.92rem;
+}
+
+.prose h2,
+.prose h3 {
+  scroll-margin-block-start: calc(var(--header-height) + var(--space-4));
+}
+
+.rationale {
+  margin-block: var(--space-5);
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--line);
+  border-inline-start: 3px solid var(--line-strong);
+  border-radius: var(--radius);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  background: var(--card);
+}
+
+.rationale.documented {
+  border-color: color-mix(in srgb, var(--documented) 25%, var(--line));
+  border-inline-start-color: var(--documented);
+  background: var(--documented-tint);
+}
+
+.rationale.inferred {
+  border-color: color-mix(in srgb, var(--inferred) 25%, var(--line));
+  border-inline-start-color: var(--inferred);
+  background: var(--inferred-tint);
+}
+
+.rationale-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin: 0 0 var(--space-1);
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.rationale.documented .rationale-label {
+  color: var(--accent-text);
+}
+
+.rationale.inferred .rationale-label {
+  color: var(--inferred-text);
+}
+
+.rationale p:last-child {
+  margin-block-end: 0;
+}
+
+.diagram-block {
+  margin-block: var(--space-6);
+  padding: var(--space-4);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  background: var(--card);
+}
+
+.diagram-block pre.diagram {
+  margin: 0;
+  color: var(--text-faint);
+  font-size: 0.72rem;
+  white-space: pre-wrap;
+}
+
+th.align-left,
+td.align-left {
+  text-align: start;
+}
+
+th.align-center,
+td.align-center {
+  text-align: center;
+}
+
+th.align-right,
+td.align-right {
+  text-align: end;
+}
+
+.diagram-svg {
+  overflow-x: auto;
+  text-align: center;
+}
+
+.diagram-svg img {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+.diagram-block.enlarged .diagram-svg img {
+  max-inline-size: none;
+}
+
+.diagram-tools {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+}
+
+.diagram-block figcaption {
+  margin-block-start: var(--space-2);
+  font-size: 0.85rem;
+}
+
+.diagram-block details summary {
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+/* The system diagram's legend: one small shape or line per kind, in the interface language (design 17.4). */
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-5);
+  margin: var(--space-3) 0 0;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.legend div {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.legend dt,
+.legend dd {
+  margin: 0;
+}
+
+.legend-shape {
+  display: inline-block;
+  inline-size: 22px;
+  block-size: 14px;
+  border: 1.5px solid var(--line-strong);
+  background: var(--card);
+}
+
+.legend-rounded {
+  border-radius: 5px;
+}
+
+.legend-document {
+  border-radius: 0 0 40% 40% / 0 0 5px 5px;
+}
+
+.legend-double {
+  border-style: double;
+  border-width: 4px;
+}
+
+.legend-stadium {
+  border-radius: 999px;
+}
+
+.legend-line {
+  display: inline-block;
+  inline-size: 26px;
+  border-block-start: 2px solid var(--text-muted);
+}
+
+.legend-dashed {
+  border-block-start-style: dashed;
+}
+
+.system-parts td {
+  overflow-wrap: anywhere;
+}
+
+.checks {
+  margin-block-start: var(--space-12);
+}
+
+.checks .check {
+  display: grid;
+  gap: var(--space-3);
+  margin-block-end: var(--space-4);
+  padding: var(--space-5);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  background: var(--raised);
+}
+
+.check-question {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin: 0;
+  font-weight: 600;
+}
+
+.check-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.feedback {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 0.92rem;
+}
+
+.feedback:empty {
+  display: none;
+}
+
+.changes pre {
+  padding: var(--space-3);
+  border-radius: var(--radius);
+  background: var(--card);
+  font-size: 0.82rem;
+}
+
+.changes pre span.added {
+  color: var(--learned);
+}
+
+.changes pre span.removed {
+  color: var(--inferred-text);
+}
+
+pre.source {
+  margin: 0;
+  padding: var(--space-3) 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  background: var(--card);
+  font: 0.84rem/1.6 var(--font-mono);
+  counter-reset: line;
+}
+
+pre.source > span {
+  display: block;
+  padding-inline-end: var(--space-4);
+}
+
+pre.source a.line {
+  display: inline-block;
+  inline-size: 4.5rem;
+  padding-inline-end: var(--space-4);
+  color: var(--text-faint);
+  text-align: end;
+  user-select: none;
+}
+
+pre.source span:target {
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+}
+
+.files {
+  columns: 2 18rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+}
+
+.files li {
+  padding-block: 2px;
+  break-inside: avoid;
+}
+
+.attributes th {
+  inline-size: 30%;
+}

codetrail/web/static/css/layout.css

@@ -0,0 +1,410 @@
+/* The shell (design sections 16.1 and 22): a header, then the sidebar, the reading column and the outline. The header
+   and the sidebar are one tinted frame; the page is a card inside it. Below 1200px the outline goes; below 900px the
+   sidebar moves behind the menu button. */
+
+body {
+  background: var(--sidebar);
+}
+
+.topbar {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  block-size: var(--header-height);
+  padding-inline: var(--space-5);
+  background: var(--sidebar);
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+}
+
+.brand:hover {
+  text-decoration: none;
+}
+
+.brand img {
+  inline-size: 24px;
+  block-size: 24px;
+}
+
+.target {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--space-2);
+  padding-inline-start: var(--space-4);
+  border-inline-start: 1px solid var(--line);
+  color: var(--text);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-inline-size: 0;
+}
+
+.target-meta {
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  font-weight: 400;
+}
+
+.topbar-search {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  min-inline-size: 0;
+}
+
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.topbar .menu-button {
+  display: none;
+}
+
+.shell {
+  display: grid;
+  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+  min-block-size: calc(100vh - var(--header-height));
+}
+
+/* The article and its outline are one group, centered in the space beside the sidebar, so on a wide screen the text
+   doesn't hug the sidebar and the outline stays next to what it outlines. A page with no outline centers one wider
+   column instead. */
+.page-area {
+  display: grid;
+  grid-template-columns: minmax(0, var(--article-width)) var(--outline-width);
+  justify-content: center;
+  column-gap: var(--space-12);
+  margin-inline-end: var(--space-2);
+  margin-block-end: var(--space-2);
+  padding-inline: var(--space-12);
+  border-radius: var(--radius-card);
+  background: var(--page);
+  box-shadow: var(--shadow-card);
+}
+
+.page-area:not(:has(> .outline:not([hidden]))) {
+  grid-template-columns: minmax(0, var(--wide-width));
+}
+
+.sidebar {
+  position: sticky;
+  inset-block-start: var(--header-height);
+  block-size: calc(100vh - var(--header-height));
+  overflow-y: auto;
+  padding: var(--space-2) var(--space-2) var(--space-10);
+  overscroll-behavior: contain;
+}
+
+/* Hidden (design section 22.1): the page takes the whole width, and the sidebar waits off screen as a floating card
+   that peeks in from the window's start edge. Only above 900px: below, it's the drawer. */
+.sidebar-edge {
+  display: none;
+  position: fixed;
+  z-index: 27;
+  inset-block: var(--header-height) 0;
+  inset-inline-start: 0;
+  inline-size: 10px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.sidebar-edge::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 45%;
+  inset-inline-start: 3px;
+  inline-size: 3px;
+  block-size: 44px;
+  border-radius: 2px;
+  background: var(--line-strong);
+}
+
+.sidebar-edge:focus-visible {
+  box-shadow: var(--focus);
+  outline: none;
+}
+
+@media (min-width: 901px) {
+  :root[data-sidebar="hidden"] .shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  :root[data-sidebar="hidden"] .page-area {
+    margin-inline-start: var(--space-2);
+  }
+
+  :root[data-sidebar="hidden"] .sidebar {
+    position: fixed;
+    z-index: 28;
+    inset-block: calc(var(--header-height) + var(--space-2)) var(--space-2);
+    inset-inline-start: var(--space-2);
+    inline-size: var(--sidebar-width);
+    block-size: auto;
+    border-radius: var(--radius-card);
+    background: var(--sidebar);
+    box-shadow: var(--shadow-float);
+    transform: translateX(calc(-100% - var(--space-4)));
+    visibility: hidden;
+    transition: transform var(--duration) var(--ease), visibility 0s linear var(--duration);
+  }
+
+  :root[dir="rtl"][data-sidebar="hidden"] .sidebar {
+    transform: translateX(calc(100% + var(--space-4)));
+  }
+
+  :root[data-sidebar="hidden"] body.sidebar-peek .sidebar {
+    transform: none;
+    visibility: visible;
+    transition: transform var(--duration) var(--ease), visibility 0s;
+  }
+
+  :root[data-sidebar="hidden"] .resize-sidebar {
+    display: none;
+  }
+
+  :root[data-sidebar="hidden"] .sidebar-edge {
+    display: block;
+  }
+}
+
+.content {
+  min-inline-size: 0;
+  padding-block: var(--space-10) var(--space-12);
+}
+
+.content:focus {
+  outline: none;
+}
+
+.reading {
+  max-inline-size: var(--article-width);
+  margin-inline: auto;
+}
+
+.wide {
+  max-inline-size: var(--wide-width);
+}
+
+.outline {
+  position: sticky;
+  inset-block-start: var(--header-height);
+  block-size: calc(100vh - var(--header-height));
+  overflow-y: auto;
+  padding-block: var(--space-10) var(--space-8);
+}
+
+.outline-title {
+  margin: 0 0 var(--space-2);
+  color: var(--text-faint);
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.outline ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-inline-start: 1px solid var(--line);
+}
+
+.outline a {
+  display: block;
+  margin-inline-start: -1px;
+  padding: 3px var(--space-3);
+  border-inline-start: 2px solid transparent;
+  color: var(--text-muted);
+  font-size: 0.84rem;
+  line-height: 1.4;
+}
+
+.outline .depth-3 a {
+  padding-inline-start: var(--space-6);
+}
+
+.outline a:hover {
+  color: var(--text);
+  text-decoration: none;
+}
+
+.outline a[aria-current="location"] {
+  border-inline-start-color: var(--accent);
+  color: var(--accent-text);
+  font-weight: 500;
+}
+
+[dir="rtl"] .icon-flip {
+  transform: scaleX(-1);
+}
+
+.footer {
+  margin-block-start: var(--space-12);
+  padding-block-start: var(--space-5);
+  border-block-start: 1px solid var(--line);
+  color: var(--text-faint);
+  font-size: 0.8rem;
+}
+
+/* With the Ask panel open on a wide screen, the page makes room for it instead of being covered. */
+@media (min-width: 1201px) {
+  body.ask-open .shell {
+    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--panel-width);
+  }
+
+  :root[data-sidebar="hidden"] body.ask-open .shell {
+    grid-template-columns: minmax(0, 1fr) var(--panel-width);
+  }
+
+  body.ask-open .page-area {
+    grid-template-columns: minmax(0, var(--article-width));
+  }
+
+  body.ask-open .outline {
+    display: none;
+  }
+}
+
+@media (max-width: 1200px) {
+  .page-area,
+  .page-area:not(:has(> .outline:not([hidden]))) {
+    grid-template-columns: minmax(0, var(--wide-width));
+  }
+
+  .outline {
+    display: none;
+  }
+}
+
+@media (max-width: 900px) {
+  .topbar .menu-button {
+    display: inline-flex;
+  }
+
+  .target,
+  .topbar-actions .language,
+  .search-hint,
+  .topbar .sidebar-toggle {
+    display: none;
+  }
+
+  .shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sidebar {
+    position: fixed;
+    inset-block: var(--header-height) 0;
+    inset-inline-start: 0;
+    z-index: 25;
+    inline-size: min(var(--sidebar-width), 86vw);
+    block-size: auto;
+    background: var(--sidebar);
+    transform: translateX(-100%);
+    transition: transform var(--duration) var(--ease);
+    box-shadow: var(--shadow-float);
+  }
+
+  [dir="rtl"] .sidebar {
+    transform: translateX(100%);
+  }
+
+  body.menu-open .sidebar {
+    transform: none;
+  }
+
+  .page-area {
+    margin: 0;
+    padding-inline: var(--space-4);
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .content {
+    padding-block: var(--space-6) var(--space-10);
+  }
+}
+
+@media (max-width: 560px) {
+  .topbar {
+    gap: var(--space-2);
+    padding-inline: var(--space-3);
+  }
+
+  .brand span,
+  .topbar-actions .button span,
+  .topbar-actions [data-shortcuts-open] {
+    display: none;
+  }
+}
+
+/* Resize handles on the sidebar's and the Ask panel's inner edges (design section 16.1). */
+.resize-handle {
+  position: fixed;
+  z-index: 26;
+  inline-size: 9px;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.resize-handle::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 4px;
+  inline-size: 1px;
+  background: transparent;
+  transition: background var(--duration) var(--ease);
+}
+
+.resize-handle:hover::after,
+.resize-handle:focus-visible::after,
+.resize-handle.dragging::after {
+  inset-inline-start: 3px;
+  inline-size: 3px;
+  background: var(--accent);
+}
+
+.resize-handle:focus-visible {
+  box-shadow: none;
+}
+
+.resize-sidebar {
+  inset-block: var(--header-height) 0;
+  inset-inline-start: calc(var(--sidebar-width) - 5px);
+}
+
+.ask-panel .resize-panel {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: -5px;
+}
+
+body.resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
+@media (max-width: 900px) {
+  .resize-handle,
+  .ask-panel .resize-panel {
+    display: none;
+  }
+}