jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

replace dead Tailwind classes in shop pages with custom CSS

Browse Source 
Coming soon page was unstyled after Tailwind removal — replaced
utility classes with proper component CSS. Also removed dead h-full
classes from shop_root layout, adding height: 100% to the shop reset.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-02-19 21:27:52 +00:00
parent 5834be870f
commit 2007279fc6
4 changed files with 40 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
assets/css/shop/components.css
View File

@ -2480,4 +2480,31 @@
.product-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); } .product-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.product-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); } .product-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
} }
/* ── Coming soon ── */
.coming-soon {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-height: 100dvh;
padding-inline: 1.5rem;
text-align: center;
}
.coming-soon-title {
font-family: var(--t-font-heading);
font-weight: var(--t-heading-weight);
letter-spacing: var(--t-heading-tracking);
color: var(--t-text-primary);
font-size: clamp(1.875rem, 5vw, 2.25rem);
line-height: 1.2;
}
.coming-soon-message {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--t-text-secondary);
}
} }

7
assets/css/shop/reset.css
View File

@ -13,12 +13,14 @@
} }
html { html {
height: 100%;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%; -moz-text-size-adjust: 100%;
text-size-adjust: 100%; text-size-adjust: 100%;
} }
body { body {
height: 100%;
line-height: 1.5; line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
@ -78,6 +80,11 @@
cursor: pointer; cursor: pointer;
} }
/* Full-height shop root */
.shop-root {
height: 100%;
}
/* LiveView wrapper divs are layout-invisible */ /* LiveView wrapper divs are layout-invisible */
[data-phx-session], [data-phx-session],
[data-phx-teleported-src] { [data-phx-teleported-src] {

6
lib/berrypod_web/components/layouts/shop_root.html.heex
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="h-full"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
@ -31,9 +31,9 @@
<%= Phoenix.HTML.raw(@generated_css) %> <%= Phoenix.HTML.raw(@generated_css) %>
</style> </style>
</head> </head>
<body class="h-full"> <body>
<div <div
class="themed shop-root h-full" class="themed shop-root"
data-mood={@theme_settings.mood} data-mood={@theme_settings.mood}
data-typography={@theme_settings.typography} data-typography={@theme_settings.typography}
data-shape={@theme_settings.shape} data-shape={@theme_settings.shape}

6
lib/berrypod_web/live/shop/coming_soon.ex
View File

@ -9,10 +9,10 @@ defmodule BerrypodWeb.Shop.ComingSoon do
@impl true @impl true
def render(assigns) do def render(assigns) do
~H""" ~H"""
<main class="flex min-h-screen items-center justify-center px-6 text-center" role="main"> <main class="coming-soon" role="main">
<div> <div>
<h1 class="text-3xl font-bold tracking-tight sm:text-4xl">{@theme_settings.site_name}</h1> <h1 class="coming-soon-title">{@theme_settings.site_name}</h1>
<p class="mt-4 text-lg text-[var(--t-text-muted)]"> <p class="coming-soon-message">
We're getting things ready. Check back soon. We're getting things ready. Check back soon.
</p> </p>
</div> </div>