Rapikan UX mobile jadi task-first

CHANGELOG.md

@@ -14,6 +14,7 @@ Formatnya mengikuti prinsip [Keep a Changelog](https://keepachangelog.com/) dan
 
 ### Changed
 
+- Mobile Phase 4 menghapus persistent bottom dock dan `mobile.js`, menjadikan setup small-screen task-first dengan sticky 4-step rail, target sentuh minimal 44px, header lebih fokus, serta regression 390px/320px; responsive homepage CSS juga dikunci agar kurung stylesheet seimbang.
 - Setup desktop dirombak menjadi workspace 4 langkah yang lebih padat: sticky step navigation, pack summary ringkas, action hierarchy lebih jelas, dan course pack sebagai accordion rows; browser regression mengunci desktop state sekaligus mobile no-overflow.
 - Homepage Phase 2 mengganti fake ChatGPT phone mockup dengan live Ramu pack preview, menambahkan jalur Pack vs Ramu Starter, memadatkan workflow/layer hierarchy, dan mengubah course catalog menjadi resource list yang lebih tenang di desktop maupun mobile.
 - Browser regression sekarang memiliki mobile viewport contract untuk homepage/setup, termasuk no-horizontal-overflow dan visibility pada primary content.

scripts/validate_site.py

@@ -40,6 +40,7 @@ def main() -> int:
         'data-setup-link',
         'href="catalog.css"',
         'href="homepage.css"',
+        '<body class="home-page">',
         'id="hero-preview-courses"',
         'href="https://github.com/man612/ramu/blob/main/starter/README.md"',
         'id="course-list"',
@@ -58,6 +59,9 @@ def main() -> int:
         'data-pack-picker-menu',
         'href="catalog.css"',
         'href="setup-phase3.css"',
+        '<body class="setup-page">',
+        'aria-label="Langkah 1: Cek Memory"',
+        'id="progress-title" aria-live="polite"',
         'id="setup-pack-name"',
         'id="setup-courses"',
         'id="copy-instructions"',
@@ -100,6 +104,13 @@ def main() -> int:
         ".setup-course summary",
         "@media (max-width: 720px)",
     ])
+    require_text(SITE / "mobile.css", [
+        ".setup-page .site-header nav",
+        ".setup-nav a span",
+        "grid-template-columns: repeat(4, minmax(0, 1fr))",
+        "min-height: 44px",
+        "@media (max-width: 430px)",
+    ])
 
     app_text = (SITE / "app.js").read_text(encoding="utf-8") if (SITE / "app.js").is_file() else ""
     for forbidden in (
@@ -121,6 +132,22 @@ def main() -> int:
     for path_name, text in (("site/index.html", index_text), ("site/setup.html", setup_text)):
         if "<select" in text.lower():
             fail(f"{path_name} masih memakai native browser select untuk pack picker.")
+        if "mobile.js" in text or "mobile-dock" in text:
+            fail(f"{path_name} masih memuat mobile dock/script lama.")
+
+    if (SITE / "mobile.js").exists():
+        fail("site/mobile.js harus dihapus setelah mobile dock dipensiunkan.")
+
+    mobile_text = (SITE / "mobile.css").read_text(encoding="utf-8") if (SITE / "mobile.css").is_file() else ""
+    if "mobile-dock" in mobile_text:
+        fail("site/mobile.css masih memuat mobile dock lama.")
+
+    for css_name in ("homepage.css", "mobile.css", "setup-phase3.css"):
+        css_path = SITE / css_name
+        if css_path.is_file():
+            css_text = css_path.read_text(encoding="utf-8")
+            if css_text.count("{") != css_text.count("}"):
+                fail(f"site/{css_name} punya kurung CSS tidak seimbang.")
 
     for forbidden in (
         "kecuali manifest pack menyatakan berbeda",

site/homepage.css

@@ -257,7 +257,7 @@
   .entry-section { padding: 18px 0 56px; }
   .entry-path { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; }
   .entry-path small { font-size: .76rem; }
-}  .workflow-list li { grid-template-columns: 42px minmax(0, 1fr); min-height: 0; }
+  .workflow-list li { grid-template-columns: 42px minmax(0, 1fr); min-height: 0; }
   .workflow-list div { grid-template-columns: 1fr; gap: 6px; }
   .workflow-list p { font-size: .82rem; }
   .layer-list article { grid-template-columns: 1fr; gap: 5px; min-height: 0; padding: 16px 0; }

site/index.html

@@ -18,11 +18,12 @@
   <link rel="stylesheet" href="catalog.css">
   <link rel="stylesheet" href="responsive.css">
   <link rel="stylesheet" href="motion.css">
-  <link rel="stylesheet" href="mobile.css">
   <link rel="stylesheet" href="foundations.css">
   <link rel="stylesheet" href="homepage.css">
+  <link rel="stylesheet" href="mobile.css">
 </head>
-<body>  <header class="site-header">
+<body class="home-page">
+  <header class="site-header">
     <a class="brand" href="./" aria-label="Beranda Ramu"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span><span>ramu</span></a>
     <nav aria-label="Navigasi utama">
       <a href="#cara-kerja">Cara kerja</a>
@@ -189,7 +190,6 @@ <h2>Ramu merapikan konteks, bukan menggantikan penilaian pengguna.</h2>
     <p>Proyek independen. Bukan layanan resmi institusi pendidikan mana pun maupun OpenAI.</p>
   </footer>
   <script src="motion.js" defer></script>
-  <script src="mobile.js" defer></script>
   <script src="app.js?v=homepage-phase2" defer></script>
 </body>
 </html>

site/mobile.css

@@ -1,119 +1,108 @@
-/* Mobile-only navigation and touch refinements. */
-.mobile-dock { display: none; }
-
+/* Phase 4 mobile UX: task-first, no persistent bottom dock. */
 @media (max-width: 720px) {
-  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
-  .site-header nav { gap: 8px; }
-  .site-header nav a:not(.nav-github) { display: none; }
-  .site-header { min-height: 58px; padding-inline: 14px; }
-  .nav-github { padding: 8px 11px; font-size: .78rem; }
+  body { padding-bottom: env(safe-area-inset-bottom); }
 
-  .mobile-dock {
-    position: fixed;
-    z-index: 900;
-    left: 12px;
-    right: 12px;
-    bottom: calc(10px + env(safe-area-inset-bottom));
-    min-height: 62px;
-    padding: 7px;
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 6px;
-    border: 1px solid rgba(30,33,29,.12);
-    border-radius: 20px;
-    background: rgba(255,253,248,.92);
-    backdrop-filter: blur(18px) saturate(1.15);
-    box-shadow: 0 18px 52px rgba(30,33,29,.16);
-    transform: translateY(130%);
-    animation: dock-enter 620ms var(--motion-ease) 460ms forwards;
+  .site-header {
+    min-height: 56px;
+    padding-inline: 12px;
+    border-radius: 9px;
   }
 
-  @keyframes dock-enter { to { transform: translateY(0); } }
+  .site-header nav { gap: 6px; }
+  .site-header nav a:not(.nav-github) { display: none; }
+  .nav-github { min-height: 42px; padding: 0 10px; font-size: .76rem; }
 
-  .mobile-dock a,
-  .mobile-dock button {
-    min-width: 0;
-    min-height: 48px;
-    padding: 6px 8px;
-    border: 0;
-    border-radius: 14px;
-    background: transparent;
-    color: var(--muted);
-    text-decoration: none;
-    display: grid;
-    place-items: center;
-    align-content: center;
-    gap: 2px;
-    font: inherit;
-    font-size: .68rem;
-    font-weight: 780;
-    line-height: 1.1;
-    text-align: center;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    transition: transform 180ms var(--motion-ease), background 220ms ease, color 220ms ease;
-  }
+  .setup-page .site-header nav { display: none; }
 
-  .mobile-dock a:active,
-  .mobile-dock button:active { transform: scale(.94); }
+  .hero { padding-top: 44px; }
+  .hero-actions { display: grid; grid-template-columns: 1fr; }
+  .hero-actions .button { width: 100%; min-height: 50px; }
 
-  .mobile-dock .dock-primary {
-    background: var(--ink);
-    color: var(--white);
-  }
+  .comparison, .use-card, .foundation-card, .course-card,
+  .trust-grid article, .setup-step-card { scroll-margin-top: 132px; }
+  .setup-main { width: min(100% - 24px, 900px); padding-top: 20px; }
+  .setup-main .back-link { margin-bottom: 16px; }
+  .setup-pack-picker { margin-bottom: 20px; }
+  .setup-intro { margin-bottom: 22px; gap: 18px; }
+  .setup-intro h1 { font-size: clamp(2.25rem, 11.5vw, 3.15rem); }
+  .setup-lead { font-size: .94rem; line-height: 1.6; }
+  .setup-summary-card { padding: 15px; }
 
-  .mobile-dock .dock-icon {
-    width: 22px;
-    height: 22px;
-    display: grid;
-    place-items: center;
-    font-size: 1rem;
-    line-height: 1;
+  .setup-layout { display: block; }
+  .setup-nav {
+    position: sticky;
+    z-index: 30;
+    top: 72px;
+    margin: 0 0 14px;
+    padding: 8px 0 10px;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 5px;
+    background: rgba(247, 246, 242, .97);
+    border-bottom: 1px solid var(--border);
   }
 
-  .mobile-dock .dock-progress {
-    color: var(--ink);
-    background: var(--sage-soft);
+  .setup-nav-label { display: none; }
+  .nav-progress {
+    grid-column: 1 / -1;
+    order: -1;
+    margin: 0 0 4px;
+    padding: 0;
+    border: 0;
+    background: transparent;
   }
+  .nav-progress span { margin-bottom: 6px; font-size: .68rem; }
+  .progress-track { height: 3px; }
 
-  .mobile-dock .dock-progress strong {
-    font-size: .85rem;
-    letter-spacing: -.03em;
+  .setup-nav a {
+    min-height: 44px;
+    padding: 4px;
+    justify-content: center;
+    border-radius: var(--radius-sm);
   }
+  .setup-nav a span { display: none; }
+  .setup-nav b { width: 28px; height: 28px; }
 
-  .mobile-dock.is-quiet {
-    transform: translateY(calc(100% + 24px));
-    opacity: .2;
-    transition: transform 320ms var(--motion-ease), opacity 320ms ease;
-  }
+  .setup-content { gap: 12px; }
+  .setup-step-card { margin: 0; padding: 18px 16px; border-radius: 10px; }
+  .step-heading { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
+  .big-step { width: 30px; height: 30px; font-size: .8rem; }
+  .setup-step-card h2 { font-size: 1.42rem; line-height: 1.12; }
+  .step-explain { margin-top: 12px; margin-bottom: 18px; font-size: .9rem; }
 
-  .hero { padding-top: 62px; }
-  .hero-actions { display: grid; grid-template-columns: 1fr; }
-  .hero-actions .button { width: 100%; }
-  .hero-facts { gap: 6px; }
-  .hero-facts div { padding: 10px 6px; border-radius: 13px; background: rgba(255,255,255,.36); text-align: center; }
+  .settings-path { gap: 5px; }
+  .settings-path span { min-height: 38px; display: inline-flex; align-items: center; }
+  .check-list label { min-height: 48px; }
+  .info-box { padding: 13px; }
 
-  .comparison, .use-card, .foundation-card, .course-card, .trust-grid article, .setup-step-card {
-    scroll-margin-top: 82px;
+  .copy-panel { padding: 14px; gap: 14px; }
+  .copy-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
+  .copy-actions .button { width: 100%; min-height: 48px; }
+  .setup-course summary {
+    min-height: 70px;
+    padding: 12px;
+    grid-template-columns: 32px minmax(0, 1fr);
+    gap: 10px;
   }
+  .course-number { width: 30px; height: 30px; }
+  .done-pill { grid-column: 2; justify-self: start; margin-top: 2px; }
+  .setup-body { padding: 12px; }
+  .setup-body ol { padding-left: 20px; }
+  .setup-body li { margin: 10px 0; }
 
-  .setup-layout { display: block; }
-  .setup-nav { position: relative; top: auto; margin-bottom: 18px; }
-  .setup-step-card { margin-bottom: 14px; }
-  .setup-course summary { min-height: 72px; }
-  .setup-body { padding-inline: 15px; }
-  .inline-actions { display: grid; grid-template-columns: 1fr; }
-  .inline-actions .small-button { width: 100%; }
-  .copy-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
-  .copy-actions .button { width: 100%; }
-  .prompt-grid { grid-template-columns: 1fr; }
-}
+  .inline-actions { display: grid; grid-template-columns: 1fr; gap: 7px; }
+  .inline-actions .small-button { width: 100%; min-height: 48px; justify-content: center; }
+  .complete-check { min-height: 48px; }
 
-@media (max-width: 390px) {
-  .mobile-dock { left: 8px; right: 8px; border-radius: 18px; }
-  .mobile-dock a, .mobile-dock button { font-size: .64rem; padding-inline: 4px; }
+  .phone-mini-flow { display: grid; grid-template-columns: 1fr; gap: 6px; }
+  .phone-mini-flow i { display: none; }
+  .prompt-grid { grid-template-columns: 1fr; }
+  .prompt-grid button { min-height: 48px; }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .mobile-dock { animation: none; transform: none; }
+@media (max-width: 430px) {
+  .shell { width: min(100% - 24px, 1160px); }
+  .site-header { width: calc(100% - 14px); }
+  .preview-course { grid-template-columns: 58px minmax(0, 1fr) auto; }
+  .entry-path { grid-template-columns: 32px minmax(0, 1fr); }
+  .entry-path > span:last-child { grid-column: 2; justify-self: start; }
 }