remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Polish responsive design across all screen sizes and refine card blocks
CI / check (push) Failing after 26s
Details
CI / release (push) Skipped
Details
CI / deploy (push) Skipped
Details

Browse Source 
- Enhance SurfaceCard with refined borders, layered shadows, and polished
  primary-tinted header with an icon container
- Update homepage blocks (hero, features, stats, login, news, photos) for
  proper mobile/tablet/desktop responsiveness and tighter mobile spacing
- Improve content-card, stat-block, card-grid and card styling with subtle
  depth (layered shadow + inner hairline) and smoother hover states
- Refine site header, footer, top header and site layout spacing for small
  screens while keeping a consistent professional look on large screens
- Add min-tap-height targets and responsive typography on mobile
This commit is contained in:
openhands committed 2026-08-31 11:45:02 +02:00
1 parent b1ddda66ff
commit 903d175f2d
7 files changed
+194 -107
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/top-header.tsx
+6 -6
View File
@@ -161,16 +161,16 @@ export async function TopHeader({ session }: { session: Session | null }) {
return (
<div style={{ backgroundColor: "var(--color-navbar)" }}>
<div className="max-w-7xl min-h-[44px] sm:min-h-[60px] px-2 sm:px-4 flex items-center justify-between mx-auto">
<div className="flex flex-wrap items-center gap-x-2 sm:gap-x-6">
<div className="flex flex-wrap items-center gap-x-1.5 sm:gap-x-4 md:gap-x-6">
<div
className="flex items-center gap-2 px-3 py-1 rounded-full"
className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1 rounded-full"
style={{
background: "rgba(255,255,255,0.08)",
border: "1px solid rgba(255,255,255,0.10)",
}}
>
<span
className="text-xs sm:text-sm font-bold tracking-wide"
className="text-[10px] sm:text-sm font-bold tracking-wide"
style={{ color: "rgba(255,255,255,0.9)" }}
>
{t("online", { count: online, hotel: hotelName })}
@@ -179,7 +179,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
<Link
href="/client"
className="flex items-center gap-1.5 rounded-xl border py-1.5 px-3 font-extrabold text-xs transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
className="hidden sm:flex items-center gap-1.5 rounded-xl border py-1.5 px-3 font-extrabold text-xs transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
style={{
background: "var(--color-primary)",
color: "var(--color-primary-foreground)",
@@ -210,7 +210,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
/>
</div>
<div className="flex items-center gap-x-1 sm:gap-x-3">
<div className="flex items-center gap-x-0.5 sm:gap-x-3">
<form
action="/search"
method="GET"
@@ -231,7 +231,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
</form>
<Link
href="/messages"
className="relative flex items-center gap-1 rounded-lg px-2 py-1.5 transition-colors hover:bg-white/10"
className="relative flex items-center gap-1 rounded-lg px-1.5 sm:px-2 py-1.5 transition-colors hover:bg-white/10"
>
<svg
xmlns="http://www.w3.org/2000/svg"