patx/micropie
`docs/index.html`: improve mobile layout and add auto dark mode
Commit ae30937 · patx · 2026-02-07T00:39:24-05:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index a2cd79d..a3dc8ae 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -15,72 +15,90 @@
<meta name="twitter:image" content="https://repository-images.githubusercontent.com/918862197/ae93975f-208b-4a71-bac4-f164a509ac16">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
<link rel="shortcut icon" href="https://cherrypy.dev/images/favicon.gif" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+
<title>MicroPie - An ultra-micro Python ASGI web framework</title>
+
<style>
+ /* --- Global safety: never allow horizontal overflow --- */
+ html, body {
+ width: 100%;
+ max-width: 100%;
+ overflow-x: hidden;
+ }
+
+ *, *::before, *::after {
+ box-sizing: border-box;
+ }
+
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
-
color: #333;
}
+
.container {
- max-width: 800px;
- margin: auto;
- margin-top: auto;
- margin-bottom: auto;
+ width: min(800px, 100%);
+ margin: 0 auto;
background: #fff;
padding: 40px;
border-radius: 15px;
text-align: center;
}
+
h1, h2 {
color: #d20f23;
font-weight: 600;
}
+
h2 {
text-align: left;
}
+
p {
font-size: 18px;
line-height: 1.6;
color: #555;
}
+
a {
color: #d20f23;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
+
a:hover {
color: #d20f23;
- border-bottom: none;
}
+
pre {
background: #f5f2f0;
padding: 20px;
border-radius: 10px;
text-align: left;
+ font-size: 1.05em;
+ max-width: 100%;
overflow-x: auto;
- font-size: 1.1em;
+ -webkit-overflow-scrolling: touch;
}
+
+ code {
+ max-width: 100%;
+ }
+
.logo img {
+ width: 100%;
max-width: 600px;
+ height: auto;
}
- span.c2 {
- color: #8F5902;
- }
- span.c9 {
- color: #d20f23;
- }
- .github-banner img {
- position: fixed;
- top: 0;
- right: 0;
- border: 0;
- }
+
+ span.c2 { color: #8F5902; }
+ span.c9 { color: #d20f23; }
+
.button {
display: inline-block;
background: #d20f23;
@@ -91,27 +109,14 @@
font-weight: 600;
transition: background 0.3s ease;
}
+
.button:hover {
- background: white;
+ background: #fff;
border: 2px solid #d20f23;
- color: #d20f23
- }
- @media (max-width: 768px) {
- .container {
- width: 100%;
- padding: 20px;
- }
- .logo img {
- max-width: 100%;
- }
- .button {
- max-width: 100%;
- text-align: center;
- }
- .github-banner {
- display: none;
- }
+ color: #d20f23;
}
+
+ /* GitHub corner */
.github-corner {
position: fixed;
top: 0;
@@ -142,71 +147,142 @@
40%, 80% { transform: rotate(10deg); }
}
+ /* --- Mobile fixes --- */
@media (max-width: 768px) {
+ .container {
+ padding: 20px;
+ }
+
+ pre {
+ white-space: pre-wrap;
+ word-break: break-word;
+ overflow-x: hidden;
+ }
+
.github-corner {
display: none;
}
}
+ @media (prefers-color-scheme: dark) {
+ html, body {
+ background: #0b0f14;
+ color: #e7eaf0;
+ }
+
+ .container {
+ background: #0b0f14;
+ color: #e7eaf0;
+ }
+
+
+ p {
+ color: rgba(231,234,240,0.82);
+ }
+
+ a {
+ color: #d20f23;
+ }
+
+ a:hover {
+ color: #d20f23;
+ }
+
+ pre {
+ background: #0b111a;
+ border: 1px solid rgba(255,255,255,0.08);
+ color: #e7eaf0;
+ }
+
+ /* keep your little code colors readable on dark */
+ span.c2 { color: #ffd17a; }
+ span.c9 { color: #d20f23; }
+
+ .button {
+ background: #d20f23; /* keep brand red */
+ color: #fff;
+ border: 1px solid rgba(255,255,255,0.10);
+ }
+
+ .button:hover {
+ background: transparent;
+ border: 2px solid #d20f23;
+ color: #d20f23;
+ }
+
+ /* GitHub corner stays branded */
+ .github-corner svg {
+ fill: #d20f23;
+ }
+ }
</style>
</head>
+
<body>
- <div class="container">
- <div class="logo">
- <img src="https://patx.github.io/micropie/logo.png" alt="MicroPie logo">
- </div>
- <h2>Ultra-micro ASGI framework, BSD 3-clause</h2>
- <pre><code>
+
+<div class="container">
+ <div class="logo">
+ <img src="https://patx.github.io/micropie/logo.png" alt="MicroPie logo">
+ </div>
+
+ <h2>Ultra-micro ASGI framework, BSD 3-clause</h2>
+
+ <pre><code>
<span class="c2">from</span> micropie <span class="c2">import</span> App
<span class="c2">class</span> MyApp(<span class="c9">App</span>):
- <span class="c2">async def</span> index(<span class="c9">self</span>):
- return <span class="c9">"Hello World!"</span>
+ <span class="c2">async def</span> index(self, name=<span class="c9">"world"</span>):
+ return <span class="c9">f"Hello {name}!"</span>
-app = MyApp() <small><em># Run with `uvicorn app:app`</em></small>
- </code></pre>
+app = MyApp()
+ </code></pre>
- <h2>Easy to Install</h2>
- <pre><code><span class="c2">$</span> pip install <span class="c9">micropie</span></code></pre>
- <p><br><br>
- <a href="https://github.com/patx/micropie" class="button">View source code, examples and documentation on GitHub</a>
- </p>
- </div>
-
- <a class="github-corner" href="https://github.com/patx/micropie" aria-label="View source on GitHub">
- <svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
- <path d="M0,0 L250,0 L250,250 Z" fill="#d20f23"></path>
- <path d="M128.3,109.0
- C113.8,99.7 119.0,89.6 119.0,89.6
- C122.0,82.7 120.5,78.6 120.5,78.6
- C119.2,72.0 123.4,76.3 123.4,76.3
- C127.3,80.9 125.5,87.3 125.5,87.3
- C122.9,97.6 130.6,101.9 134.4,103.2"
- fill="#fff"
- class="octo-arm"/>
- <path d="M115.0,115.0
- C114.9,115.1 118.7,116.5 119.8,115.4
- L133.7,101.6
- C136.9,99.2 139.9,98.4 142.2,98.6
- C133.8,88.0 127.5,74.4 143.8,58.0
- C148.5,53.4 154.0,51.2 159.7,51.0
- C160.3,49.4 163.2,43.6 171.4,40.1
- C171.4,40.1 176.1,42.1 178.8,56.2
- C183.1,58.6 187.2,61.8 190.9,65.4
- C194.5,69.0 197.7,73.2 200.1,77.6
- C214.2,80.3 216.2,85.0 216.2,85.0
- C212.7,93.2 206.9,96.1 205.4,96.7
- C205.1,102.4 203.0,107.8 198.3,112.5
- C181.9,128.9 168.3,122.5 157.7,114.1
- C157.9,116.9 156.7,120.9 152.7,124.9
- L141.0,136.5
- C139.8,137.7 141.6,141.6 141.8,141.8
- Z"
- fill="#fff"/>
- </svg>
- </a>
+
+ <h2>Easy to Install</h2>
+
+ <pre><code><span class="c2">$</span> pip install <span class="c9">micropie</span></code></pre>
+
+ <p><br>
+ <a href="https://github.com/patx/micropie" class="button">
+ View source, examples and documentation on GitHub
+ </a>
+ </p>
+</div>
+
+<a class="github-corner" href="https://github.com/patx/micropie" aria-label="View source on GitHub">
+ <svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
+ <path d="M0,0 L250,0 L250,250 Z" fill="#d20f23"></path>
+ <path d="M128.3,109.0
+ C113.8,99.7 119.0,89.6 119.0,89.6
+ C122.0,82.7 120.5,78.6 120.5,78.6
+ C119.2,72.0 123.4,76.3 123.4,76.3
+ C127.3,80.9 125.5,87.3 125.5,87.3
+ C122.9,97.6 130.6,101.9 134.4,103.2"
+ fill="#fff"
+ class="octo-arm"/>
+ <path d="M115.0,115.0
+ C114.9,115.1 118.7,116.5 119.8,115.4
+ L133.7,101.6
+ C136.9,99.2 139.9,98.4 142.2,98.6
+ C133.8,88.0 127.5,74.4 143.8,58.0
+ C148.5,53.4 154.0,51.2 159.7,51.0
+ C160.3,49.4 163.2,43.6 171.4,40.1
+ C171.4,40.1 176.1,42.1 178.8,56.2
+ C183.1,58.6 187.2,61.8 190.9,65.4
+ C194.5,69.0 197.7,73.2 200.1,77.6
+ C214.2,80.3 216.2,85.0 216.2,85.0
+ C212.7,93.2 206.9,96.1 205.4,96.7
+ C205.1,102.4 203.0,107.8 198.3,112.5
+ C181.9,128.9 168.3,122.5 157.7,114.1
+ C157.9,116.9 156.7,120.9 152.7,124.9
+ L141.0,136.5
+ C139.8,137.7 141.6,141.6 141.8,141.8
+ Z"
+ fill="#fff"/>
+ </svg>
+</a>
</body>
</html>