From 2d2291f01efdf71f7958dcaedfc1eee752336c54 Mon Sep 17 00:00:00 2001 From: bitcoinafterlife Date: Tue, 21 Jul 2026 16:31:25 +0000 Subject: [PATCH] Update manifesto.html Improve mobile readability on the manifesto page --- manifesto.html | 99 ++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 92 insertions(+), 7 deletions(-) diff --git a/manifesto.html b/manifesto.html index 181db23..58bbdad 100644 --- a/manifesto.html +++ b/manifesto.html @@ -1,8 +1,13 @@ - + + Manifesto — Bitcoin After Life Protocol @@ -94,12 +99,63 @@ footer .sig{font-family:var(--display);font-weight:600;color:var(--ink);font-siz footer .links{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0} footer .built{font-size:13px;color:var(--muted);margin-top:8px} -@media (max-width:640px){ - .masthead h1{font-size:36px} - .article p{font-size:16.5px} - .article p.first::first-letter{font-size:54px} - .topbar nav a:not(.x):not(.active){display:none} +/* ---------- Mobile navigation (shared pattern with the home page) ---------- */ +.navtoggle{ + display:none;margin-left:auto; + width:44px;height:44px;flex:none; + align-items:center;justify-content:center; + background:var(--panel);border:1px solid var(--line-strong);border-radius:9px; + color:var(--ink);cursor:pointer;padding:0; } +.navtoggle:hover{border-color:var(--accent);color:var(--accent)} +.navtoggle .bars{display:block;width:18px;height:2px;background:currentColor;position:relative} +.navtoggle .bars::before,.navtoggle .bars::after{ + content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor; +} +.navtoggle .bars::before{top:-6px} +.navtoggle .bars::after{top:6px} +.navtoggle[aria-expanded="true"] .bars{background:transparent} +.navtoggle[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)} +.navtoggle[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)} + +@media (max-width:900px){ + .navtoggle{display:inline-flex} + .topbar nav{ + position:absolute;top:100%;left:0;right:0; + margin-left:0;display:none;flex-direction:column;gap:2px;flex-wrap:nowrap; + background:var(--panel);border-bottom:1px solid var(--line); + box-shadow:0 6px 20px rgba(20,30,50,.08);padding:10px 20px 16px; + } + .topbar nav.open{display:flex} + .topbar nav a{ + font-size:15.5px;padding:0 12px;min-height:44px; + display:flex;align-items:center;border-radius:8px; + } +} + +@media (max-width:640px){ + .masthead{padding:40px 0 30px} + .masthead h1{font-size:34px} + .masthead img{width:62px;height:62px;margin-bottom:16px} + .masthead .protocol{font-size:16px} + /* The manifesto is long-form reading: body text stays generous. */ + .article{padding:34px 20px 8px} + .article p{font-size:17px;line-height:1.8} + .article p.first::first-letter{font-size:52px;padding-right:10px} + .article .sub{font-size:12.5px;margin-top:32px} + .signature .name{font-size:28px} +} +@media (max-width:400px){ + .wrap{padding:0 15px} + .article{padding:30px 16px 8px} + .masthead h1{font-size:29px} + .masthead .dateline{font-size:12px;padding:6px 12px} +} + +/* Without JavaScript the panel cannot be toggled, so show it inline. */ +.nojs .navtoggle{display:none} +.nojs .topbar nav{position:static;display:flex;flex-direction:row;flex-wrap:wrap; + box-shadow:none;border-bottom:0;padding:0;margin-left:auto;background:transparent} @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} @@ -110,11 +166,16 @@ footer .built{font-size:13px;color:var(--muted);margin-top:8px}
-
+