julienfroidefond/stripstream
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: apply new branding logo across app and pwa assets

Browse Source
This commit is contained in:
Julien Froidefond
2026-03-04 08:21:25 +01:00
parent 4e8c8ebac0
commit 06848d2c3a
37 changed files with 161 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
public/offline.html
View File

@@ -23,7 +23,12 @@
body {
margin: 0;
padding: 0;
font-family: "Segoe UI", "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif;
font-family:
"Segoe UI",
"SF Pro Text",
-apple-system,
BlinkMacSystemFont,
sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
@@ -60,7 +65,12 @@
inset: 0;
pointer-events: none;
background:
linear-gradient(112deg, rgba(79, 70, 229, 0.24) 0%, rgba(6, 182, 212, 0.2) 30%, transparent 56%),
linear-gradient(
112deg,
rgba(79, 70, 229, 0.24) 0%,
rgba(6, 182, 212, 0.2) 30%,
transparent 56%
),
linear-gradient(248deg, rgba(244, 114, 182, 0.16) 0%, transparent 46%),
repeating-linear-gradient(135deg, rgba(226, 232, 240, 0.03) 0 1px, transparent 1px 11px);
}
@@ -82,6 +92,15 @@
gap: 0.75rem;
}
.brand-logo {
width: 2.4rem;
height: 2.4rem;
border-radius: 0.6rem;
object-fit: cover;
box-shadow: 0 0 20px rgba(34, 211, 238, 0.35);
border: 1px solid rgba(148, 163, 184, 0.35);
}
.menu-btn {
width: 2.25rem;
height: 2.25rem;
@@ -170,7 +189,12 @@
inset: 0;
pointer-events: none;
background:
linear-gradient(160deg, rgba(79, 70, 229, 0.12) 0%, rgba(6, 182, 212, 0.08) 32%, transparent 58%),
linear-gradient(
160deg,
rgba(79, 70, 229, 0.12) 0%,
rgba(6, 182, 212, 0.08) 32%,
transparent 58%
),
linear-gradient(332deg, rgba(244, 114, 182, 0.06) 0%, transparent 42%),
repeating-linear-gradient(135deg, rgba(226, 232, 240, 0.02) 0 1px, transparent 1px 11px);
}
@@ -327,8 +351,9 @@
<div class="header-inner">
<div class="brand">
<button class="menu-btn" id="sidebar-toggle" type="button" aria-label="Menu">☰</button>
<img class="brand-logo" src="/images/logostripstream.png" alt="StripStream logo" />
<div>
<div class="brand-title">STRIPSTREAM</div>
<div class="brand-title">StripStream</div>
<div class="brand-subtitle">comic reader</div>
</div>
</div>
@@ -358,16 +383,16 @@
<div class="status">● Hors ligne</div>
<h1>Cette page n'est pas encore disponible hors ligne.</h1>
<p>
Tu peux continuer a naviguer sur les pages deja consultees. Cette route sera
disponible hors ligne apres une visite en ligne.
Tu peux continuer a naviguer sur les pages deja consultees. Cette route sera disponible
hors ligne apres une visite en ligne.
</p>
<div class="actions">
<button class="btn btn-secondary" onclick="window.history.back()">Retour</button>
<button class="btn btn-primary" onclick="window.location.reload()">Reessayer</button>
</div>
<div class="hint">
Astuce: visite d'abord Accueil, Bibliotheques, Series et pages de lecture quand tu es
en ligne.
Astuce: visite d'abord Accueil, Bibliotheques, Series et pages de lecture quand tu es en
ligne.
</div>
<div class="footer">StripStream - interface hors ligne</div>
</div>