improve PWA page
Hunter
Friday, January 30th, 2026 at 2:24 PM
66 }
67
68 .auto-detected {
- --r: 8px; /* control the stamp radius */
- background: linear-gradient(to top right, #2a2a5a 0%, #ffffcc 100%);
- padding: var(--r);
- margin: 20px 0;
69 + background: linear-gradient(to top right, #64b5f6 0%, #e3f2fd 100%);
70 + padding: 12px;
71 font-weight: bold;
72 font-size: 1.15em;
73 display: none;
74 text-align: center;
75 cursor: pointer;
- mask:
- radial-gradient(50% 50%, #0000 66%, #000 67%) round
- var(--r) var(--r)/calc(2*var(--r)) calc(2*var(--r)),
- conic-gradient(#000 0 0) content-box;
- -webkit-mask:
- radial-gradient(50% 50%, #0000 66%, #000 67%) round
- var(--r) var(--r)/calc(2*var(--r)) calc(2*var(--r)),
- conic-gradient(#000 0 0) content-box;
76 + border-radius: 12px;
77 }
78
79 .auto-detected p {
97 font-size: 1.1em;
98 }
99
100 + .section:first-of-type {
101 + margin-top: 3px;
102 + padding-top: 4px;
103 + padding-bottom: 6px;
104 + }
105 +
106 + .big-letter {
107 + font-size: 1.25em;
108 + font-variant: normal;
109 + line-height: 0;
110 + }
111 +
112 .section:last-of-type {
113 margin-bottom: 0;
114 padding-bottom: 10px;
262 }
263
264 .toc, .section {
- background-color: #242424;
265 + background-color: #1f1f22;
266 border: none;
267 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
268 }
271 background: linear-gradient(to top right, #1a1a3a 0%, #47496b 100%);
272 text-shadow: 0px 1px 1px rgb(0, 0, 0);
273 }
-
274 +
275 + .pwa-icon {
276 + filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));
277 + }
278 +
279 a {
- color: #9ae7ff;
280 + color: #80d4ff;
281 }
-
282 +
283 a:visited {
- color: #66b3ff;
284 + color: #80d4ff;
285 }
286
287 /* code {
350 border-right: none;
351 }
352
353 + .section:first-of-type {
354 + margin-top: 0px;
355 + padding-top: .1px;
356 + padding-bottom: 6px;
357 + }
358 +
359 + .pwa-icon {
360 + margin-right: 5px !important;
361 + }
362 +
363 .auto-detected {
364 margin: 20px 0;
- padding: 15px 10px;
365 + padding: 12px 16px;
366 border: none;
- mask: none;
- -webkit-mask: none;
367 + border-radius: 0;
368 }
369 }
370 </style>
371 </head>
372 <body>
- <h1>PWA Installation Guide</h1>
373 + <!-- <h1>PWA Installation Guide</h1> -->
374
375 <!-- <div class="toc">
376 <h3>Table of Contents</h3>
389 </div> -->
390
391 <div id="about-pwas" class="section">
- <p><b>Progressive Web Apps</b> (PWAs) are websites that can be installed like native apps, but without reliance on or approval from centralized app stores.</p>
392 + <span class="pwa-icon" style="float: right; margin: 15px; margin-top: 40px; font-size: 70px; line-height: 1; cursor: default; user-select: none;">📲</span>
393 + <p><b><span class="big-letter">P</span>rogressive <span class="big-letter">W</span>eb <span class="big-letter">A</span>pps</b> (PWAs) are websites that can be installed like native apps, but without reliance on or approval from centralized app stores.</p>
394
395 <p>You can use the browser-specific instructions below to install PWAs directly from supported websites.
396 <!-- Once installed, they work just like regular "app store" apps. -->