Skip to content

fix(docs): make AXI site responsive on mobile #109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kunchenguid merged 2 commits into from
Aug 19, 2026
Merged

fix(docs): make AXI site responsive on mobile #109

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fcc6b28
fix(docs): make axi.md readable on phones and tablets
karotkriss Jul 22, 2026
86c95ca
no-mistakes(review): Remove page-specific guidance from repository me…
karotkriss Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 104 additions & 2 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,108 @@
width: 1rem;
height: 1rem;
}

/* Responsive fixes. Each breakpoint is a measured number:
48rem / 768px the site's own existing breakpoint; both catalogs
62rem / 992px above it the chart bar track is >=136px unaided
72rem / 1152px where the container hits its max-width and the
longest command finally clears the copy button */

/* A grid item's automatic minimum size is its min-content width, so a
.card was forced open to the widest unwrappable <pre> line and the
page scrolled instead of the code block. */
.grid > * {
min-width: 0;
}

/* .chart-label (16rem) + .chart-value (3.5rem) + gaps are unshrinkable,
leaving the bar track 0px at 320. Put the label on its own line. */
@media (max-width: 62rem) {
.chart-rows {
gap: 0.625rem;
}
.chart-row {
flex-wrap: wrap;
row-gap: 0.125rem;
}
.chart-label {
width: 100%;
text-align: left;
}
}

/* .btn-copy is absolutely positioned over a horizontally scrolling
<pre>, so padding the code cannot clear it - the text scrolls
underneath. Reserve a band above the code and use the room for a
44px hit area. */
@media (max-width: 72rem) {
.copyable {
padding-top: 3.25rem;
}
.btn-copy {
top: 0.5rem;
right: 0.5rem;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
}

/* Both catalogs are wide tables whose Description column sat off-view
with no affordance that anything was hidden. Stack each row as a card
so the description is readable, and give both the same shape so they
read as one component.

Scoped by .table-catalog, which is on those two tables only. Not by
.card .table-wrap .table: the Results table matches that too, and
stacking it would destroy the column-to-column numeric reading that
is the entire point of it.

Column-count agnostic: first cell is the name, last cell is the
description, everything between is the metadata line. That covers the
official table's 3 columns and the community table's 4 with one rule
set instead of two near-copies. */
@media (max-width: 48rem) {
.table.table-catalog,
.table.table-catalog tbody,
.table.table-catalog tr,
.table.table-catalog td {
display: block;
}
.table.table-catalog thead {
display: none;
}
.table.table-catalog tr {
padding: 0.75rem 0;
border-bottom: var(--border-width) solid var(--color-border);
}
.table.table-catalog tr:last-child {
border-bottom: none;
}
.table.table-catalog td {
padding: 0;
border-bottom: none;
}
.table.table-catalog td:not(:first-child):not(:last-child) {
display: inline;
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* "by " only where an Author cell exists: 2nd cell of four. */
.table.table-catalog td:nth-child(2):nth-last-child(3)::before {
content: "by ";
}
/* "·" only between metadata cells, so it never leads the official
table's line, which is a domain alone. */
.table.table-catalog td:nth-child(n + 3):not(:last-child)::before {
content: " \00b7 ";
}
.table.table-catalog td:last-child {
margin-top: 0.25rem;
}
}
</style>
</head>
<body>
Expand Down Expand Up @@ -287,7 +389,7 @@ <h2 data-annotate>The [AXI catalog].</h2>
<div class="card mt-xl">
<p class="section-label">Official</p>
<div class="table-wrap">
<table class="table">
<table class="table table-catalog">
<thead>
<tr>
<th>AXI</th>
Expand Down Expand Up @@ -356,7 +458,7 @@ <h2 data-annotate>The [AXI catalog].</h2>
<div class="card mt-md">
<p class="section-label">Community</p>
<div class="table-wrap">
<table class="table">
<table class="table table-catalog">
<thead>
<tr>
<th>AXI</th>
Expand Down
Loading