Skip to content

fix(site): stop Ask tutor popup from obscuring code lab #13

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
StewAlexander-com merged 1 commit into from
May 22, 2026
Merged

fix(site): stop Ask tutor popup from obscuring code lab #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
30 changes: 15 additions & 15 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,26 +114,26 @@ <h3 class="mock__h">Variables &amp; Types</h3>
<span class="mock__tag">code lab</span>
<span class="mock__run">▶ Run</span>
</div>
<pre class="mock__code"><span class="t-com"># try changing the value</span>
<pre class="mock__code"><span class="t-com"># try it</span>
<span class="t-fn">name</span> = <span class="t-str">"Ada"</span>
<span class="t-fn">age</span> = <span class="t-num">36</span>
<span class="t-kw">print</span>(<span class="t-str">f"</span>{<span class="t-fn">name</span>}<span class="t-str"> is </span>{<span class="t-fn">age</span>}<span class="t-str">"</span>)</pre>
<span class="t-fn">age</span> = <span class="t-num">36</span>
<span class="t-kw">print</span>(<span class="t-fn">name</span>, <span class="t-fn">age</span>)</pre>
<div class="mock__out">
<span class="mock__ok">✓ Ran cleanly</span>
<code>Ada is 36</code>
<span class="mock__ok">✓ Ran</span>
<code>Ada 36</code>
</div>
</div>
</section>
<div class="mock__chat" aria-hidden="true">
<div class="mock__chat-head">
<span class="mock__chat-title">Ask tutor</span>
<span class="mock__chat-x">×</span>
</div>
<div class="mock__chat-body">
<div class="mock__bubble mock__bubble--you">Why isn't <code>age</code> typed?</div>
<div class="mock__bubble mock__bubble--bot">In Python, <strong>values</strong> carry the type; names are just labels you can point anywhere. <a class="mock__cite">docs.python.org →</a></div>
<div class="mock__chat" aria-hidden="true">
<div class="mock__chat-head">
<span class="mock__chat-title">Ask tutor</span>
<span class="mock__chat-x">×</span>
</div>
<div class="mock__chat-body">
<div class="mock__bubble mock__bubble--you">Why isn't <code>age</code> typed?</div>
<div class="mock__bubble mock__bubble--bot">Values carry the type — names are just labels. <a class="mock__cite">docs.python.org →</a></div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
Expand Down
22 changes: 9 additions & 13 deletions site/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,6 @@ ul, ol { margin: 0; padding: 0; list-style: none; }
font-size: 12px; color: var(--ink-3);
}
.mock__body {
position: relative;
display: grid;
grid-template-columns: 150px 1fr;
min-height: 360px;
Expand Down Expand Up @@ -286,10 +285,11 @@ ul, ol { margin: 0; padding: 0; list-style: none; }
margin: 0;
padding: 12px 14px;
font-family: var(--font-mono);
font-size: 12.5px;
font-size: 13.5px;
line-height: 1.65;
color: var(--ink-1);
white-space: pre-wrap;
word-break: break-word;
overflow-x: auto;
}
.mock__code .t-com { color: var(--t-com); font-style: italic; }
Expand All @@ -303,40 +303,36 @@ ul, ol { margin: 0; padding: 0; list-style: none; }
background: rgba(122,163,107,0.08);
border-top: 1px solid rgba(122,163,107,0.18);
font-family: var(--font-mono);
font-size: 12.5px;
font-size: 13px;
}
.mock__ok { color: var(--leaf); font-weight: 600; }
.mock__out code { color: var(--ink-1); }
.mock__chat {
position: absolute;
right: 14px; bottom: 14px;
width: 240px;
margin-top: 14px;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: var(--r-md);
box-shadow: 0 18px 40px -18px rgba(0,0,0,0.7);
overflow: hidden;
display: none;
}
@media (min-width: 540px) { .mock__chat { display: block; } }
.mock__chat-head {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 12px;
background: #19191c;
border-bottom: 1px solid var(--line-1);
font-size: 12px;
font-size: 12.5px;
}
.mock__chat-title { color: var(--ink-0); font-weight: 600; }
.mock__chat-x { color: var(--ink-3); }
.mock__chat-body { padding: 10px 10px 12px; display: grid; gap: 8px; }
.mock__chat-body { padding: 10px 12px 12px; display: grid; gap: 8px; }
.mock__bubble {
font-size: 12px; line-height: 1.5;
font-size: 12.5px; line-height: 1.5;
padding: 8px 10px; border-radius: 10px;
}
.mock__bubble code {
font-family: var(--font-mono);
background: rgba(255,255,255,0.06);
padding: 0 4px; border-radius: 4px; font-size: 11px;
padding: 0 4px; border-radius: 4px; font-size: 11.5px;
}
.mock__bubble--you {
background: var(--bg-3); color: var(--ink-1);
Expand All @@ -350,7 +346,7 @@ ul, ol { margin: 0; padding: 0; list-style: none; }
}
.mock__cite {
display: inline-block; margin-top: 4px;
color: var(--amber); font-size: 11px;
color: var(--amber); font-size: 11.5px;
}

@media (max-width: 520px) {
Expand Down
Loading