feat: add Habbo sky background and pixel-font logo
This commit is contained in:
openhands committed
1 parent
eb60f1a762
commit
5fe01532ca
2 files changed
+90
-24
No files matched your search
+66
-13
@@ -257,26 +257,79 @@ summary,
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Site background ── */
|
||||
/* ── Site background: Habbo sky ── */
|
||||
.site-bg {
|
||||
background:
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
color-mix(in srgb, var(--color-primary) 12%, rgba(255, 255, 255, 0.6)),
|
||||
rgba(255, 255, 255, 0.75)
|
||||
),
|
||||
url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
|
||||
background-blend-mode: overlay;
|
||||
180deg,
|
||||
color-mix(in srgb, var(--color-primary) 4%, #b3d9f7) 0%,
|
||||
color-mix(in srgb, var(--color-primary) 6%, #d4e8fa) 25%,
|
||||
color-mix(in srgb, var(--color-primary) 8%, #e8f0f8) 50%,
|
||||
color-mix(in srgb, var(--color-primary) 10%, #f0e8d8) 75%,
|
||||
color-mix(in srgb, var(--color-primary) 14%, var(--color-background)) 100%
|
||||
);
|
||||
background-attachment: fixed;
|
||||
position: relative;
|
||||
}
|
||||
/* Habbo-style clouds */
|
||||
.site-bg::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 240px 60px at 15% 8%, rgba(255,255,255,0.5) 0%, transparent 100%),
|
||||
radial-gradient(ellipse 320px 70px at 35% 12%, rgba(255,255,255,0.4) 0%, transparent 100%),
|
||||
radial-gradient(ellipse 200px 50px at 55% 6%, rgba(255,255,255,0.45) 0%, transparent 100%),
|
||||
radial-gradient(ellipse 280px 65px at 75% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
|
||||
radial-gradient(ellipse 180px 45px at 90% 5%, rgba(255,255,255,0.35) 0%, transparent 100%),
|
||||
radial-gradient(ellipse 260px 55px at 50% 18%, rgba(255,255,255,0.25) 0%, transparent 100%),
|
||||
radial-gradient(ellipse 200px 40px at 20% 22%, rgba(255,255,255,0.2) 0%, transparent 100%);
|
||||
}
|
||||
/* Subtle primary glow */
|
||||
.site-bg::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 600px 400px at 20% 0%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 100%),
|
||||
radial-gradient(ellipse 500px 300px at 80% 0%, color-mix(in srgb, var(--color-primary) 6%, transparent) 0%, transparent 100%);
|
||||
}
|
||||
/* Ensure all content sits above the cloud/glow layers */
|
||||
.site-bg > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
html.dark .site-bg {
|
||||
background:
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
color-mix(in srgb, var(--color-primary) 10%, rgba(0, 0, 0, 0.72)),
|
||||
rgba(0, 0, 0, 0.82)
|
||||
),
|
||||
url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
|
||||
background-blend-mode: overlay;
|
||||
180deg,
|
||||
color-mix(in srgb, var(--color-primary) 6%, #0a0e1a) 0%,
|
||||
color-mix(in srgb, var(--color-primary) 8%, #10152a) 30%,
|
||||
color-mix(in srgb, var(--color-primary) 10%, #161c30) 60%,
|
||||
color-mix(in srgb, var(--color-primary) 12%, #0f141f) 100%
|
||||
);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
html.dark .site-bg::before {
|
||||
opacity: 0.08;
|
||||
background:
|
||||
radial-gradient(ellipse 240px 60px at 15% 8%, rgba(200,210,255,0.5) 0%, transparent 100%),
|
||||
radial-gradient(ellipse 320px 70px at 35% 12%, rgba(200,210,255,0.4) 0%, transparent 100%),
|
||||
radial-gradient(ellipse 200px 50px at 55% 6%, rgba(200,210,255,0.45) 0%, transparent 100%),
|
||||
radial-gradient(ellipse 280px 65px at 75% 10%, rgba(200,210,255,0.5) 0%, transparent 100%),
|
||||
radial-gradient(ellipse 180px 45px at 90% 5%, rgba(200,210,255,0.35) 0%, transparent 100%),
|
||||
radial-gradient(ellipse 260px 55px at 50% 18%, rgba(200,210,255,0.25) 0%, transparent 100%),
|
||||
radial-gradient(ellipse 200px 40px at 20% 22%, rgba(200,210,255,0.2) 0%, transparent 100%);
|
||||
}
|
||||
html.dark .site-bg::after {
|
||||
background:
|
||||
radial-gradient(ellipse 600px 400px at 20% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 100%),
|
||||
radial-gradient(ellipse 500px 300px at 80% 0%, color-mix(in srgb, var(--color-primary) 8%, transparent) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
/* Admin must not inherit the public wallpaper — solid HK canvas only. */
|
||||
|
||||
@@ -84,17 +84,30 @@ export async function SiteHeader() {
|
||||
unoptimized
|
||||
/>
|
||||
) : (
|
||||
<h1
|
||||
className="text-center font-extrabold tracking-tight leading-none text-white"
|
||||
style={{
|
||||
fontSize: "clamp(2.5rem, 7vw, 4.5rem)",
|
||||
textShadow:
|
||||
"0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
|
||||
letterSpacing: "-0.02em",
|
||||
}}
|
||||
>
|
||||
{hotelName} - Hotel
|
||||
</h1>
|
||||
<div className="text-center">
|
||||
<h1
|
||||
className="font-black tracking-tight leading-none text-white"
|
||||
style={{
|
||||
fontFamily: "var(--font-pixel)",
|
||||
fontSize: "clamp(2.8rem, 8vw, 5.5rem)",
|
||||
textShadow:
|
||||
"0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
|
||||
letterSpacing: "0.04em",
|
||||
}}
|
||||
>
|
||||
{hotelName}
|
||||
</h1>
|
||||
<p
|
||||
className="text-sm md:text-base font-bold tracking-[0.15em] uppercase mt-1"
|
||||
style={{
|
||||
color: "color-mix(in srgb, var(--color-primary) 70%, white)",
|
||||
textShadow: "0 2px 12px rgba(0,0,0,0.5)",
|
||||
letterSpacing: "0.2em",
|
||||
}}
|
||||
>
|
||||
Hotel
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
|
||||
Reference in new issue
Block a user