Skip to content

CLI-882 Make CLI landing page mobile responsive, update quickstart #606

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

Open
cliffordgoh-sonar wants to merge 2 commits into
base: master
Choose a base branch
from
+432 −78
Open

CLI-882 Make CLI landing page mobile responsive, update quickstart #606

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
caff4e4
Make CLI landing page mobile responsive, update quickstart
cliffordgoh-sonar Jul 21, 2026
a2e7279
Merge branch 'master' into cg/ux-cli
cliffordgoh-sonar 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
264 changes: 259 additions & 5 deletions docs/assets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,70 @@ a:hover { text-decoration: underline; }
}
}

@media (max-width: 480px) {
.nav {
gap: 8px;
padding: 10px 12px;
}
.brand-lockup { gap: 8px; }
.brand-separator { display: none; }
.brand-mark--sonar { display: none; }
.brand-mark--cli { width: 82px; height: 18px; }
}

/* ─── Nav hamburger ─────────────────────────────────────────── */
.nav-hamburger {
display: none;
background: transparent;
border: 1px solid var(--border);
border-radius: 6px;
width: 34px;
height: 34px;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text);
margin-left: auto;
flex-shrink: 0;
padding: 0;
}
.nav-hamburger:hover { border-color: var(--accent); color: var(--accent); }
.nav-hamburger svg { width: 18px; height: 18px; display: block; }
@media (max-width: 640px) {
.nav-hamburger { display: inline-flex; }
.nav-links {
position: absolute;
top: 100%;
right: 8px;
left: 8px;
margin: 6px 0 0;
padding: 8px;
flex-direction: column;
align-items: stretch;
gap: 2px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
overflow: hidden;
display: none;
z-index: 200;
}
.nav.nav-menu-open .nav-links { display: flex; }
.nav-links .nav-link {
padding: 10px 12px;
font-size: 14px;
border-radius: 6px;
}
.nav-links .nav-link-secondary,
.nav-links .nav-link-llms { display: block !important; }
.nav-links .theme-toggle {
align-self: flex-start;
margin-top: 4px;
}
.nav { position: relative; }
}

/* ─── Code blocks ────────────────────────────────────────────── */
pre, code {
font-family: 'SF Mono', 'Fira Code', monospace;
Expand Down Expand Up @@ -544,7 +608,7 @@ pre code {
.hero-install-header {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-end;
margin-bottom: 8px;
}
.hero-install-header .tab-group {
Expand Down Expand Up @@ -578,6 +642,128 @@ pre code {
color: var(--border);
padding: 0 4px;
}
.hero-install-header .tab-btn-sub {
font-size: 10px;
color: var(--text-muted);
font-weight: 400;
margin-left: 4px;
opacity: 0.75;
}
.hero-install-header .tab-btn.active .tab-btn-sub { opacity: 0.85; }

/* ─── Install picker (GitHub-CLI style) ────────────────────── */
.install-picker {
position: relative;
display: flex;
align-items: stretch;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
overflow: visible;
}
.install-picker-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-width: 260px;
padding: 18px 20px;
background: transparent;
border: none;
border-right: 1px solid var(--border);
color: var(--text);
font-family: inherit;
font-size: 14px;
font-weight: 500;
text-align: left;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
}
.install-picker-trigger:hover { background: var(--surface2); }
.install-picker-label { color: var(--text); }
.install-picker-label > span { font-weight: 600; }
.install-picker-caret {
color: var(--text-muted);
transition: transform 0.15s;
flex-shrink: 0;
}
.install-picker.is-open .install-picker-caret { transform: rotate(180deg); }
.install-picker-command {
flex: 1;
display: flex;
align-items: center;
padding: 0 18px;
min-width: 0;
overflow-x: auto;
}
.install-picker-command pre {
margin: 0;
background: none;
padding: 0;
border: none;
border-radius: 0;
}
.install-picker-command code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
color: var(--text);
background: none;
padding: 0;
white-space: nowrap;
}
.install-picker-copy {
border: none;
border-left: 1px solid var(--border);
border-radius: 0 8px 8px 0;
padding: 0 22px;
background: transparent;
color: var(--text);
font-weight: 500;
}
.install-picker-copy:hover { background: var(--surface2); }
.install-picker-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 260px;
margin: 0;
padding: 6px 0;
list-style: none;
text-align: left;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
z-index: 20;
}
.install-picker-option {
padding: 10px 18px;
color: var(--text);
font-size: 14px;
cursor: pointer;
transition: background 0.1s;
}
.install-picker-option:hover { background: var(--surface2); }
.install-picker-option.is-selected { font-weight: 600; }
.install-picker-option-divider {
border-top: 1px solid var(--border);
margin-top: 6px;
padding-top: 12px;
}
@media (max-width: 640px) {
.install-picker { flex-direction: column; }
.install-picker-trigger { border-right: none; border-bottom: 1px solid var(--border); justify-content: space-between; min-width: 0; width: 100%; padding: 14px 16px; }
.install-picker-copy { border-left: none; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; padding: 12px 22px; }
.install-picker-command { padding: 12px 16px; }
.install-picker-menu { left: 0; right: 0; min-width: 0; }
.hero { padding: 48px 20px 40px; }
.hero h1 { font-size: 44px; letter-spacing: -1px; }
.hero .tagline { font-size: 16px; margin-bottom: 28px; }
}
@media (max-width: 400px) {
.hero h1 { font-size: 36px; }
}
.hero-install-link {
font-size: 12px;
color: var(--text-muted);
Expand Down Expand Up @@ -747,9 +933,35 @@ pre code {
[data-theme="light"] .jtbd-pill.active { border-color: var(--accent); background: #dde8f8; color: var(--accent); }
.jtbd-recipe {
flex: 1;
min-width: 0;
display: none;
}
.jtbd-recipe.visible { display: block; }
.jtbd-select { display: none; }
@media (max-width: 768px) {
.jtbd-layout { flex-direction: column; gap: 16px; }
.jtbd-pills { display: none; }
.jtbd-select {
display: block;
width: 100%;
padding: 12px 14px;
font-size: 15px;
font-weight: 600;
font-family: inherit;
color: var(--text);
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 10px;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%238b90a0' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z'/></svg>");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px 16px;
padding-right: 40px;
}
.jtbd-select:focus { outline: none; border-color: var(--accent); }
}
.jtbd-docs-link {
display: inline-block;
margin-top: 16px;
Expand Down Expand Up @@ -1291,12 +1503,52 @@ body.commands-page { height: 100%; overflow: hidden; }
}
@media (max-width: 768px) {
.app { flex-direction: column; height: auto; overflow: auto; }
.sidebar { width: 100%; flex-shrink: 0; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
.sidebar-tree { max-height: 40vh; overflow-y: auto; }
.main-panel { overflow-y: visible; }
.sidebar { width: 100%; flex-shrink: 0; height: auto; border-right: none; border-bottom: 1px solid var(--border); overflow: visible; }
.sidebar-tree { max-height: none; overflow-y: visible; }
.main-panel { overflow-y: visible; padding: 20px 16px; }
html:has(body.commands-page),
body.commands-page { height: auto; overflow: auto; }
}
@media (max-width: 640px) {
.opts-table, .args-table {
display: block;
background: transparent;
border: none;
border-radius: 0;
overflow: visible;
}
.opts-table thead, .args-table thead { display: none; }
.opts-table tbody, .args-table tbody { display: block; }
.opts-table tr, .args-table tr {
display: block;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 10px;
}
.opts-table td, .args-table td {
display: grid;
grid-template-columns: 92px 1fr;
gap: 10px;
padding: 4px 0;
border: none;
align-items: start;
}
.opts-table td::before, .args-table td::before {
content: attr(data-label);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
padding-top: 3px;
}
.opts-table tr:hover td,
.args-table tr:hover td { background: transparent; }
.opt-flag, .arg-name { white-space: normal; word-break: break-word; }
.opt-allowed { margin-top: 6px; }
}

/* ─── Signup CTA ─────────────────────────────────────────────── */
.cta-section { padding: 0 32px 64px; max-width: 1060px; margin: 0 auto; }
Expand Down Expand Up @@ -1360,8 +1612,10 @@ body.commands-page { height: 100%; overflow: hidden; }
[data-theme="light"] .cta-g2-logo { filter: none; }

@media (max-width: 600px) {
.cta-card { padding: 40px 24px; }
.cta-section { padding: 0 16px 48px; }
.cta-card { padding: 32px 20px; }
.cta-title { font-size: 22px; }
.cta-actions { flex-direction: column; align-items: center; }
.cta-actions .btn { width: 100%; max-width: 260px; }
.section { padding: 40px 16px; }
}
31 changes: 27 additions & 4 deletions docs/commands.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,15 @@
<span class="brand-mark brand-mark--sonar" aria-hidden="true"></span>
</a>
<span class="brand-separator" aria-hidden="true"></span>
<a href="https://www.sonarsource.com/" class="brand-home-link brand-home-link--cli" title="SonarQube CLI on SonarSource" aria-label="SonarQube CLI on SonarSource">
<a href="index.html" class="brand-home-link brand-home-link--cli" title="SonarQube CLI home" aria-label="SonarQube CLI home">
<span class="brand-mark brand-mark--cli" aria-hidden="true"></span>
<span class="version brand-version" id="nav-version">v1.4.0</span>
</a>
</div>
<div class="nav-links">
<button class="nav-hamburger" id="navHamburger" aria-label="Toggle menu" aria-expanded="false" aria-controls="nav-links">
<svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M2 5h16v2H2zm0 4h16v2H2zm0 4h16v2H2z"/></svg>
</button>
<div class="nav-links" id="nav-links">
<a href="index.html" class="nav-link">Home</a>
<a href="commands.html" class="nav-link active">Commands</a>
<a href="https://docs.sonarsource.com/sonarqube-cli" class="nav-link nav-link-secondary" target="_blank" rel="noopener">Docs</a>
Expand Down Expand Up @@ -504,7 +507,7 @@
const allowedHtml = opt.allowedValues && opt.allowedValues.length
? `<div class="opt-allowed">${opt.allowedValues.map(v => `<code class="opt-allowed-val">${escHtml(v)}</code>`).join('')}</div>`
: '';
parts.push(`<tr><td>${flags}</td><td>${typeBadge}</td><td>${req}</td><td>${escHtml(opt.description)}${allowedHtml}</td><td>${def}</td></tr>`);
parts.push(`<tr><td data-label="Option">${flags}</td><td data-label="Type">${typeBadge}</td><td data-label="Required">${req}</td><td data-label="Description">${escHtml(opt.description)}${allowedHtml}</td><td data-label="Default">${def}</td></tr>`);
}
parts.push(`</tbody></table></div>`);
}
Expand All @@ -521,7 +524,7 @@
const req = arg.required
? `<span class="opt-req-yes">Yes</span>`
: `<span class="opt-req-no">No</span>`;
parts.push(`<tr><td><span class="arg-name">${displayName}</span></td><td>${req}</td><td>${escHtml(arg.description)}</td></tr>`);
parts.push(`<tr><td data-label="Argument"><span class="arg-name">${displayName}</span></td><td data-label="Required">${req}</td><td data-label="Description">${escHtml(arg.description)}</td></tr>`);
}
parts.push(`</tbody></table></div>`);
}
Expand Down Expand Up @@ -612,6 +615,26 @@
history.replaceState(null, '', '#' + startId);
}

// ── Nav hamburger ────────────────────────────────────────────
(function() {
const nav = document.querySelector('nav.nav');
const btn = document.getElementById('navHamburger');
if (!nav || !btn) return;
function setOpen(open) {
nav.classList.toggle('nav-menu-open', open);
btn.setAttribute('aria-expanded', String(open));
}
btn.addEventListener('click', (e) => {
e.stopPropagation();
setOpen(!nav.classList.contains('nav-menu-open'));
});
document.addEventListener('click', (e) => {
if (!nav.contains(e.target)) setOpen(false);
});
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') setOpen(false); });
nav.querySelectorAll('.nav-links a').forEach((a) => a.addEventListener('click', () => setOpen(false)));
})();

// ── Theme toggle ─────────────────────────────────────────────
(function() {
const btn = document.getElementById('themeToggle');
Expand Down
Loading