spike(spa-mini): responsive layout + erläuterungstext nach oben
- Erklärung zur Implementierungstechnik als Intro-Box direkt unter dem Tech-Spike-Banner (statt versteckt im Footer). - Footer reduziert auf einen Link zum Quellcode. - Mobile-Anpassungen: kleinerer Title auf < 640px, weniger Padding, Tags wrappen sauber, lange URLs/Code/Tabellen brechen ohne Overflow. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jörg Lohrer
parent
0679a335f4
commit
1ae6445c84
|
|
@ -30,26 +30,37 @@
|
|||
font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
color: var(--fg);
|
||||
background: var(--bg);
|
||||
padding: 1.5rem;
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
body { padding: 1.5rem; }
|
||||
}
|
||||
main {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
header.banner {
|
||||
header.banner,
|
||||
.intro {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 0.7rem 1rem;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
background: var(--code-bg);
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
.intro {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
header.banner strong { color: var(--fg); }
|
||||
h1.post-title {
|
||||
font-size: 2rem;
|
||||
line-height: 1.2;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.25;
|
||||
margin: 0 0 0.4rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
h1.post-title { font-size: 2rem; line-height: 1.2; }
|
||||
}
|
||||
.meta {
|
||||
color: var(--muted);
|
||||
|
|
@ -62,29 +73,38 @@
|
|||
background: var(--code-bg);
|
||||
border-radius: 3px;
|
||||
padding: 1px 7px;
|
||||
margin-right: 4px;
|
||||
margin: 0 4px 4px 0;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
article {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
article img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
article a { color: var(--accent); }
|
||||
article a {
|
||||
color: var(--accent);
|
||||
word-break: break-word;
|
||||
}
|
||||
article pre {
|
||||
background: var(--code-bg);
|
||||
padding: 0.8rem;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
font-size: 0.88em;
|
||||
max-width: 100%;
|
||||
}
|
||||
article code {
|
||||
background: var(--code-bg);
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.92em;
|
||||
word-break: break-word;
|
||||
}
|
||||
article pre code { padding: 0; background: none; }
|
||||
article pre code { padding: 0; background: none; word-break: normal; }
|
||||
article hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
|
|
@ -92,9 +112,20 @@
|
|||
}
|
||||
article blockquote {
|
||||
border-left: 3px solid var(--border);
|
||||
padding-left: 1rem;
|
||||
color: var(--muted);
|
||||
padding: 0 0 0 1rem;
|
||||
margin: 1rem 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
article h1, article h2, article h3, article h4 {
|
||||
line-height: 1.3;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
article ul, article ol { padding-left: 1.5rem; }
|
||||
article table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.status {
|
||||
padding: 1rem;
|
||||
|
|
@ -116,6 +147,7 @@
|
|||
border-top: 1px solid var(--border);
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
}
|
||||
footer a { color: var(--accent); }
|
||||
</style>
|
||||
|
|
@ -126,20 +158,22 @@
|
|||
<strong>Tech-Spike:</strong> Diese Seite ist ein Machbarkeitsbeweis,
|
||||
keine produktive Webseite. Sie lädt einen einzigen, hartcodierten
|
||||
Nostr-Post live von Public-Relays und rendert ihn im Browser.
|
||||
Für die volle SPA siehe
|
||||
<a href="https://github.com/joerglohrer/joerglohrerde">Repo</a>.
|
||||
</header>
|
||||
|
||||
<div class="intro">
|
||||
Eigenständig signiertes <code>kind:30023</code>-Event (NIP-23),
|
||||
geladen über <code>nostr-tools</code> via WebSocket aus mehreren Relays.
|
||||
Markdown-Rendering: <code>marked</code> + <code>DOMPurify</code>.
|
||||
Bild via Blossom-Server. Kein Server-Backend, nur statisches HTML
|
||||
plus JavaScript im Browser.
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<p class="status">Lade Post von Nostr-Relays …</p>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
Eigenständig signiertes <code>kind:30023</code>-Event (NIP-23),
|
||||
geladen über <code>nostr-tools</code> via WebSocket aus mehreren Relays.
|
||||
Markdown-Rendering: <code>marked</code> + <code>DOMPurify</code>.
|
||||
Bild via Blossom-Server. Kein Server-Backend, nur statisches HTML
|
||||
plus JavaScript im Browser.
|
||||
<a href="https://forgejo.joerglohrer.synology.me/joerglohrer/joerglohrerde">Quellcode & Spezifikation</a>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue