Skip to content

📱 Fix responsive website UI #299

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
StarDust130 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

📱 Fix responsive website UI #299

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1330920
fix(site): 📱 mobile home
StarDust130 Jun 17, 2026
d90fda7
fix(site): 📚 mobile lesson
StarDust130 Jun 17, 2026
c41ed9b
fix(site): 🧭 mobile nav
StarDust130 Jun 17, 2026
1b2bf99
fix(site): ✨ mobile home polish
StarDust130 Jun 17, 2026
9bb09ab
fix(site): 📖 mobile phase modal
StarDust130 Jun 17, 2026
8998cab
🏡 Home Page UI Fix(Mobile)
StarDust130 Jun 17, 2026
fd5fa66
fix(site): 📱 sidebar toggle click
StarDust130 Jun 17, 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
154 changes: 145 additions & 9 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -550,16 +550,142 @@
}
}

@media (max-width: 600px) {
html,
body {
overflow-x: hidden;
}

.manual-masthead.container,
.preface.container,
.stat-block.container,
.toc.container,
.colophon.container {
padding-left: 20px;
padding-right: 20px;
}

.manual-masthead {
padding-top: 76px;
}

.manual-meta-row {
align-items: flex-start;
flex-direction: column;
margin-bottom: 20px;
gap: 6px;
}

.manual-title {
font-size: clamp(2.45rem, 12vw, 3.7rem);
line-height: 0.98;
letter-spacing: 0;
}

.manual-tagline {
max-width: 34ch;
line-height: 1.48;
hyphens: none;
-webkit-hyphens: none;
}

.manual-attribution {
line-height: 1.45;
}

.masthead-cta {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}

.masthead-btn {
width: 100%;
justify-content: center;
min-width: 0;
}

.masthead-btn svg {
flex-shrink: 0;
}

.masthead-btn span {
min-width: 0;
}

.masthead-btn-count {
flex-shrink: 0;
}

.preface-body {
font-size: 1rem;
line-height: 1.62;
text-align: left;
hyphens: none;
-webkit-hyphens: none;
}

.preface-body p:first-of-type::first-letter {
float: none !important;
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
padding: 0 !important;
color: inherit !important;
}

.stat-row {
grid-template-columns: minmax(0, 1fr) auto;
}

.stat-row-bar {
grid-column: 1 / -1;
}

.toc-row {
grid-template-columns: auto minmax(0, 1fr);
gap: 8px 12px;
padding: 14px 12px;
margin-bottom: 8px;
border: 1px solid var(--rule-soft);
background: rgba(107, 142, 255, 0.04);
}

.toc-row .toc-meta {
grid-column: 2;
min-width: 0;
text-align: left;
}

.toc-list {
border-top: none;
}

.toc-name {
font-size: 1.12rem;
line-height: 1.1;
}
}

@media (max-width: 480px) {
.manual-masthead { padding: 72px 0 12px; }
.manual-masthead { padding: 70px 0 12px; }
.preface { padding: 24px 0; }
.stat-block { padding: 24px 0; }
.toc { padding: 24px 0 32px; }
.colophon { padding: 24px 0; }

.manual-masthead.container,
.preface.container,
.stat-block.container,
.toc.container,
.colophon.container {
padding-left: 18px;
padding-right: 18px;
}

.manual-title {
font-size: clamp(2.4rem, 14vw, 3.6rem);
line-height: 0.92;
font-size: clamp(2.05rem, 11vw, 2.75rem);
line-height: 1;
}

.manual-meta-row {
Expand All @@ -570,12 +696,18 @@
}

.manual-tagline {
font-size: 0.96rem;
font-size: 1rem;
line-height: 1.45;
margin: 16px 0 4px;
}

.manual-attribution {
font-size: 0.9rem;
line-height: 1.45;
}

.ascii-rule {
margin: 16px 0;
margin: 18px 0 !important;
}

.preface-eyebrow,
Expand All @@ -590,8 +722,12 @@
}

.preface-body p:first-of-type::first-letter {
font-size: 2.8rem;
padding: 0.04em 0.1em 0 0;
float: none !important;
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
padding: 0 !important;
color: inherit !important;
}

.stat-row {
Expand All @@ -610,9 +746,9 @@
}

.toc-row {
grid-template-columns: 30px 1fr auto;
grid-template-columns: auto minmax(0, 1fr);
gap: 8px;
padding: 10px 0;
padding: 13px 12px;
}

.toc-name {
Expand Down
133 changes: 125 additions & 8 deletions site/lesson.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1516,34 +1516,110 @@
}

@media (max-width: 900px) {
html,
body {
overflow-x: hidden;
}
.lesson-layout { padding-top: 56px; }
.lesson-sidebar { transform: translateX(-100%); }
.lesson-sidebar.open { transform: translateX(0); }
.lesson-sidebar-toggle {
display: flex;
top: 70px;
right: 12px;
top: auto;
right: 16px;
bottom: 18px;
left: auto;
width: 32px;
height: 32px;
font-size: 0.95rem;
width: auto;
height: 44px;
padding: 0 14px;
gap: 8px;
border-color: var(--blueprint);
background: var(--modal-bg);
color: var(--blueprint);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.lesson-sidebar {
top: 56px;
width: min(360px, 88vw);
padding: 18px 0 88px;
border-right-color: var(--blueprint);
box-shadow: 16px 0 40px rgba(0, 0, 0, 0.22);
}
.sidebar-phase-header {
padding: 18px 18px 8px;
}
.sidebar-lesson-link {
padding: 10px 18px;
font-size: 1rem;
line-height: 1.35;
}
.lesson-main {
margin-left: 0;
justify-content: stretch;
padding: 44px 20px 80px;
}
.lesson-main { margin-left: 0; padding: 56px 20px 80px; }
.lesson-content { max-width: none; }
}

@media (max-width: 768px) {
.lesson-main { padding: 56px 16px 60px; }
.lesson-main { padding: 40px 16px 60px; }
.lesson-article { max-width: 100%; }
.lesson-article h1 {
font-size: clamp(2.05rem, 11vw, 3rem);
line-height: 0.95;
margin-bottom: 16px;
padding-bottom: 14px;
}
.lesson-article h2 {
margin-top: 42px;
font-size: clamp(1.35rem, 8vw, 1.9rem);
}
.lesson-article h3 {
margin-top: 28px;
font-size: 0.84rem;
line-height: 1.35;
}
.lesson-article p,
.lesson-article ul li,
.lesson-article ol li { font-size: 1rem; line-height: 1.65; }
.lesson-article p {
text-align: left;
hyphens: none;
-webkit-hyphens: none;
}
.lesson-article > p:first-of-type::first-letter { font-size: 3rem; }
.lesson-article pre code { font-size: 0.78rem; padding: 14px 14px; }
.lesson-article table { font-size: 0.84rem; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lesson-article table th,
.lesson-article table td { padding: 8px 10px; white-space: nowrap; }
.lesson-article .motto { font-size: 1.05rem; padding: 14px 16px; }
.learning-objectives,
.quiz-section,
.quiz-container {
padding: 18px 16px;
}
.lesson-meta {
gap: 6px;
margin-bottom: 24px;
}
.lesson-meta-tag {
font-size: 0.66rem;
letter-spacing: 0.07em;
padding: 3px 8px;
}
.ai-panels { margin-top: 40px; gap: 28px; }
.ai-panel { padding: 22px 16px; }
.ai-panel-header {
align-items: flex-start;
gap: 10px;
}
.ai-panel-title {
font-size: 1.22rem;
line-height: 1.05;
}
.output-cards,
.code-cards { grid-template-columns: 1fr; }
.lesson-nav-bottom { flex-direction: column; gap: 12px; }
Expand All @@ -1552,11 +1628,49 @@
}

@media (max-width: 480px) {
.lesson-main { padding: 36px 12px 56px; }
.lesson-sidebar-toggle {
right: 12px;
bottom: 14px;
height: 42px;
padding: 0 12px;
}
.lesson-article p,
.lesson-article ul li,
.lesson-article ol li { font-size: 0.96rem; }
.lesson-article h1 { font-size: clamp(1.9rem, 12vw, 2.55rem); }
.lesson-article > p:first-of-type::first-letter { font-size: 2.6rem; }
.lesson-article ul { padding-left: 18px; }
.lesson-article ol { padding-left: 24px; }
.learning-objectives,
.quiz-section,
.quiz-container {
padding: 16px 12px;
}
.learning-objectives-title,
.quiz-title {
align-items: flex-start;
font-size: 0.66rem;
line-height: 1.35;
}
.quiz-option {
gap: 10px;
padding: 10px 12px;
}
.ai-panel { padding: 18px 12px; }
.code-card,
.output-card {
padding: 14px;
}
.code-card-actions,
.output-actions {
display: grid;
grid-template-columns: 1fr;
}
.code-card-btn,
.output-btn {
text-align: center;
}
.timeline-item { min-width: 70px; }
.timeline-line { width: 20px; }
}
Expand Down Expand Up @@ -1599,7 +1713,10 @@
</div>
</header>

<button class="lesson-sidebar-toggle" id="sidebarToggle" aria-label="Toggle sidebar">&#9776;</button>
<button class="lesson-sidebar-toggle" id="sidebarToggle" aria-label="Toggle lesson menu" type="button">
<span aria-hidden="true">&#9776;</span>
<span>Lessons</span>
</button>

<div class="mermaid-modal-overlay" id="mermaidModalOverlay" aria-hidden="true">
<div class="mermaid-modal" role="dialog" aria-modal="true" aria-label="Expanded diagram">
Expand Down
Loading