Skip to content

Commit f848298

Browse files
dylan-sutton-chavezdylan-sutton-chavez
committed
Feat: Add small button for packages on mobile (>1050px).
1 parent 44ad3d4 commit f848298

2 files changed

Lines changed: 30 additions & 14 deletions

File tree

‎demo/index.html‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -44,19 +44,29 @@
4444
<h1 class="sr-only">Edge Python — Online Python 3.13 Playground</h1>
4545

4646
<main class="flex-1 flex flex-col gap-4 min-h-0 min-w-0">
47-
<nav class="bg-[#222222] border border-[#2d2d2d] rounded-md text-[#c2c2c2] text-[12px] px-3 py-2 flex items-center justify-between">
48-
<a href="/" class="flex items-center gap-2">
49-
<h1 class="font-semibold">Edge Python Playground</h1>
50-
</a>
51-
52-
<a href="https://github.com/dylan-sutton-chavez/edge-python/" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 font-semibold hover:text-[#949494] transition" aria-label="View Edge Python on GitHub">
53-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="size-4" fill="currentColor" aria-hidden="true" focusable="false">
54-
<path d="M 33 29 C 31.203125 29 30 30.515625 30 33 C 30 35.484375 30.890625 38.046875 33 38 C 35.21875 37.949219 36.019531 35.777344 36 33 C 35.984375 30.515625 34.792969 29 33 29 Z M 44.261719 17.066406 C 44.535156 15.722656 44.652344 10.964844 42.679688 6 C 42.679688 6 38.148438 6.496094 31.296875 11.199219 C 29.863281 10.800781 27.429688 10.601563 25 10.601563 C 22.570313 10.601563 20.140625 10.800781 18.699219 11.195313 C 11.851563 6.496094 7.324219 6 7.324219 6 C 5.347656 10.964844 5.445313 15.609375 5.738281 17.066406 C 3.417969 19.585938 2 22.609375 2 26.742188 C 2 44.707031 16.90625 44.996094 20.667969 44.996094 C 21.519531 44.996094 23.210938 44.996094 25 45 C 26.789063 44.996094 28.484375 44.996094 29.332031 44.996094 C 33.09375 44.996094 48 44.707031 48 26.742188 C 48 22.609375 46.582031 19.585938 44.261719 17.066406 Z M 25.140625 43 L 25 43 C 15.570313 43 8.15625 41.660156 8.15625 32.496094 C 8.15625 30.300781 8.933594 28.265625 10.773438 26.574219 C 13.84375 23.753906 19.035156 25.246094 24.929688 25.246094 C 24.953125 25.246094 25.050781 25.246094 25.070313 25.246094 C 30.964844 25.246094 36.160156 23.757813 39.230469 26.574219 C 41.070313 28.265625 41.84375 30.300781 41.84375 32.496094 C 41.84375 41.660156 34.570313 43 25.140625 43 Z M 17 29 C 15.207031 29 14 31.015625 14 33.5 C 14 35.984375 15.207031 38 17 38 C 18.796875 38 20 35.984375 20 33.5 C 20 31.015625 18.796875 29 17 29 Z"/>
47+
<section class="flex items-stretch text-[12px] gap-2">
48+
<nav class="bg-[#222222] border border-[#2d2d2d] w-full rounded-md text-[#c2c2c2] px-3 py-2 flex items-center justify-between">
49+
<a href="/" class="flex items-center gap-2">
50+
<h1 class="font-semibold">Edge Python Playground</h1>
51+
</a>
52+
53+
<a href="https://github.com/dylan-sutton-chavez/edge-python/" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 font-semibold hover:text-[#949494] transition" aria-label="View Edge Python on GitHub">
54+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="size-4" fill="currentColor">
55+
<path d="M 33 29 C 31.203125 29 30 30.515625 30 33 C 30 35.484375 30.890625 38.046875 33 38 C 35.21875 37.949219 36.019531 35.777344 36 33 C 35.984375 30.515625 34.792969 29 33 29 Z M 44.261719 17.066406 C 44.535156 15.722656 44.652344 10.964844 42.679688 6 C 42.679688 6 38.148438 6.496094 31.296875 11.199219 C 29.863281 10.800781 27.429688 10.601563 25 10.601563 C 22.570313 10.601563 20.140625 10.800781 18.699219 11.195313 C 11.851563 6.496094 7.324219 6 7.324219 6 C 5.347656 10.964844 5.445313 15.609375 5.738281 17.066406 C 3.417969 19.585938 2 22.609375 2 26.742188 C 2 44.707031 16.90625 44.996094 20.667969 44.996094 C 21.519531 44.996094 23.210938 44.996094 25 45 C 26.789063 44.996094 28.484375 44.996094 29.332031 44.996094 C 33.09375 44.996094 48 44.707031 48 26.742188 C 48 22.609375 46.582031 19.585938 44.261719 17.066406 Z M 25.140625 43 L 25 43 C 15.570313 43 8.15625 41.660156 8.15625 32.496094 C 8.15625 30.300781 8.933594 28.265625 10.773438 26.574219 C 13.84375 23.753906 19.035156 25.246094 24.929688 25.246094 C 24.953125 25.246094 25.050781 25.246094 25.070313 25.246094 C 30.964844 25.246094 36.160156 23.757813 39.230469 26.574219 C 41.070313 28.265625 41.84375 30.300781 41.84375 32.496094 C 41.84375 41.660156 34.570313 43 25.140625 43 Z M 17 29 C 15.207031 29 14 31.015625 14 33.5 C 14 35.984375 15.207031 38 17 38 C 18.796875 38 20 35.984375 20 33.5 C 20 31.015625 18.796875 29 17 29 Z"/>
56+
</svg>
57+
<span>GitHub</span>
58+
</a>
59+
</nav>
60+
61+
<button button-show-sm class="bg-[#222222] hover:bg-[#2b2b2b] border border-[#2d2d2d] rounded-md flex items-center justify-center aspect-square transition">
62+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true" focusable="false">
63+
<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/>
64+
<path d="M12 22V12"/>
65+
<polyline points="3.29 7 12 12 20.71 7"/>
66+
<path d="m7.5 4.27 9 5.15"/>
5567
</svg>
56-
57-
<span>GitHub</span>
58-
</a>
59-
</nav>
68+
</button>
69+
</section>
6070

6171
<section aria-label="Code editor" class="w-full bg-[#222222] border border-[#2d2d2d] rounded-md flex flex-col flex-[70] basis-0 overflow-hidden min-h-0">
6272
<header class="bg-[#1c1c1c] border-[#2d2d2d] flex justify-between items-center">

‎demo/style.css‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,14 @@
1717
}
1818

1919
@media (max-width: 1050px) {
20-
aside[data-hide-sm] {
21-
display: none;
20+
[data-hide-sm] {
21+
display: none !important;
22+
}
23+
}
24+
25+
@media (min-width: 1050px) {
26+
[button-show-sm] {
27+
display: none !important;
2228
}
2329
}
2430

0 commit comments

Comments
 (0)