Inna/NightSpire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

El CSS del tema entra por el build en vez de un <link> desde public/

Browse Source 
Antes: <link href="/ns-themes/.../nightspire-style.css?v=2"> en el <head>. Una
peticion aparte, sin minificar y con cache invalidada a mano con ?v=2.

Ahora: app/theme.css, importado al FINAL de globals.css. Next lo compila,
minifica y le pone hash de contenido; se sirve con cache immutable y hay una
hoja de estilo menos (4 -> 3).

⚠ El @import va el ULTIMO y no es cosmético: el tema se diseñó contra los
defaults del navegador y el preflight de Tailwind los pisa (box-sizing,
alturas). Antes ganaba la cascada por cargarse el último en el <head>; ahora
gana por ser el último import. Si sube de sitio, el diseño se rompe.

Las url() pasan a ABSOLUTAS (/ns-themes/ns-ryu/...). Los assets siguen en
public/, y así el compilador no intenta resolverlos: el @font-face declara
.eot/.otf/.ttf que NO existen (solo hay .woff) y con rutas relativas el build
fallaría.

Verificado: los 6 páginas dan exactamente el mismo alto que antes (8159, 1356,
2645, 1356, 2221, 2349 px) con la misma fuente y colores, y el input del login
sigue en box-sizing:content-box — que es justo donde el preflight rompía. Ojo:
el md5 de las capturas NO sirve para comparar, porque la cabecera lleva un vídeo
y cada captura pilla un fotograma distinto.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Inna Hoover Brown
2026-07-15 16:20:06 +00:00
parent 9a240fe69e
commit 97ccb8a179
3 changed files with 41 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-next/app/[locale]/layout.tsx
-2
View File
@@ -65,8 +65,6 @@ export default async function LocaleLayout({
rel="stylesheet" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
/> />
{/* Tema real de NightSpire (ns-ryu). Va el ÚLTIMO para ganar la cascada. */}
<link rel="stylesheet" href="/ns-themes/ns-ryu/ns-css/nightspire-style.css?v=2" />
{/* Config de los tooltips de wowhead (debe definirse antes de tooltips.js). {/* Config de los tooltips de wowhead (debe definirse antes de tooltips.js).
OJO con el `window.`: tooltips.js lee `window.whTooltips`, y un `const` a OJO con el `window.`: tooltips.js lee `window.whTooltips`, y un `const` a
nivel de script queda en el ámbito léxico del script (no crea propiedad en nivel de script queda en el ámbito léxico del script (no crea propiedad en
web-next/app/globals.css
+11 -2
View File
@@ -17,8 +17,8 @@
} }
/* El fondo, la tipografía (FuturaEF-Book) y los estilos base del <body> /* El fondo, la tipografía (FuturaEF-Book) y los estilos base del <body>
los controla el tema real ns-ryu (nightspire-style.css), cargado en el <head> los controla el tema real ns-ryu (theme.css), importado AL FINAL de este
del layout. No los redefinimos aquí para que el tema Django quede idéntico. */ fichero. No los redefinimos aquí para que el tema quede idéntico. */
/* El tema ns-ryu se diseñó para los defaults del navegador (igual que la web /* El tema ns-ryu se diseñó para los defaults del navegador (igual que la web
Django, que NO usa Tailwind). El preflight de Tailwind rompe dos cosas: Django, que NO usa Tailwind). El preflight de Tailwind rompe dos cosas:
@@ -655,3 +655,12 @@ textarea:focus {
#store-news-content { margin-top: 6px; } #store-news-content { margin-top: 6px; }
#store-news-content ul { padding-left: 16px; } #store-news-content ul { padding-left: 16px; }
#store-news-content li { margin: 4px 0; } #store-news-content li { margin: 4px 0; }
/* ─── El tema ns-ryu, AL FINAL ─────────────────────────────────────────────
* El orden importa y no es cosmético: el tema se diseñó contra los defaults
* del navegador y el preflight de Tailwind los pisa (box-sizing, alturas...).
* Antes se cargaba con un <link> al final del <head> justo para ganar la
* cascada; ahora entra por el build, así que este @import DEBE ir el último.
* Si sube de sitio, el preflight gana y el diseño se rompe.
*/
@import './theme.css';
web-next/public/ns-themes/ns-ryu/ns-css/nightspire-style.css → web-next/app/theme.css
+30 -22
View File
@@ -1,3 +1,11 @@
/* Tema ns-ryu — antes se cargaba con un <link> desde public/.
* Ahora entra por el build (lo importa globals.css al FINAL, ver allí el porqué),
* así Next lo compila, minifica y le pone hash de contenido.
*
* Las url() son ABSOLUTAS a propósito: los assets siguen en public/ y así el
* compilador no intenta resolverlos (3 fuentes .eot/.otf/.ttf que declara el
* @font-face NO existen — solo hay .woff — y romperían el build).
*/
/* /*
Created on : Mar 1, 2019, 4:41:19 AM Created on : Mar 1, 2019, 4:41:19 AM
Author : Ryuzaki Author : Ryuzaki
@@ -5,10 +13,10 @@
@font-face { @font-face {
font-family: "FuturaEF-Book"; font-family: "FuturaEF-Book";
src: url('../ns-font/FuturaEF-Book.eot'); src: url('/ns-themes/ns-ryu/ns-font/FuturaEF-Book.eot');
src: url('../ns-font/FuturaEF-Book.otf') format('otf'), src: url('/ns-themes/ns-ryu/ns-font/FuturaEF-Book.otf') format('otf'),
url('../ns-font/FuturaEF-Book.woff') format('woff'), url('/ns-themes/ns-ryu/ns-font/FuturaEF-Book.woff') format('woff'),
url('../ns-font/FuturaEF-Book.ttf') format('truetype'); url('/ns-themes/ns-ryu/ns-font/FuturaEF-Book.ttf') format('truetype');
} }
* { * {
@@ -60,12 +68,12 @@ hr {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
margin: 5px auto; margin: 5px auto;
background-image: url(../ns-images/ns-general/ns-divider.png); background-image: url(/ns-themes/ns-ryu/ns-images/ns-general/ns-divider.png);
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
hr { hr {
background-image: url(../ns-images/ns-general/ns-divider-mini.webp); background-image: url(/ns-themes/ns-ryu/ns-images/ns-general/ns-divider-mini.webp);
} }
} }
@@ -111,7 +119,7 @@ legend {
background-blend-mode: saturation; background-blend-mode: saturation;
background-position: left; background-position: left;
background-size: 200%; background-size: 200%;
background-image: url(../ns-images/ns-general/account-info.png); background-image: url(/ns-themes/ns-ryu/ns-images/ns-general/account-info.png);
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
@@ -705,70 +713,70 @@ textarea:focus, select:focus, input[type=password]:focus, input[type=number]:foc
} }
.char-box-death-knight { .char-box-death-knight {
background-image: url(../ns-images/ns-classes/wow-death-knight.webp); background-image: url(/ns-themes/ns-ryu/ns-images/ns-classes/wow-death-knight.webp);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right bottom; background-position: right bottom;
position: relative; position: relative;
} }
.char-box-druid { .char-box-druid {
background-image: url(../ns-images/ns-classes/wow-druid.png); background-image: url(/ns-themes/ns-ryu/ns-images/ns-classes/wow-druid.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right bottom; background-position: right bottom;
position: relative; position: relative;
} }
.char-box-hunter { .char-box-hunter {
background-image: url(../ns-images/ns-classes/wow-hunter.webp); background-image: url(/ns-themes/ns-ryu/ns-images/ns-classes/wow-hunter.webp);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right bottom; background-position: right bottom;
position: relative; position: relative;
} }
.char-box-mage { .char-box-mage {
background-image: url(../ns-images/ns-classes/wow-mage.webp); background-image: url(/ns-themes/ns-ryu/ns-images/ns-classes/wow-mage.webp);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right bottom; background-position: right bottom;
position: relative; position: relative;
} }
.char-box-paladin { .char-box-paladin {
background-image: url(../ns-images/ns-classes/wow-paladin.webp); background-image: url(/ns-themes/ns-ryu/ns-images/ns-classes/wow-paladin.webp);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right bottom; background-position: right bottom;
position: relative; position: relative;
} }
.char-box-priest { .char-box-priest {
background-image: url(../ns-images/ns-classes/wow-priest.webp); background-image: url(/ns-themes/ns-ryu/ns-images/ns-classes/wow-priest.webp);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right bottom; background-position: right bottom;
position: relative; position: relative;
} }
.char-box-rogue { .char-box-rogue {
background-image: url(../ns-images/ns-classes/wow-rogue.webp); background-image: url(/ns-themes/ns-ryu/ns-images/ns-classes/wow-rogue.webp);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right bottom; background-position: right bottom;
position: relative; position: relative;
} }
.char-box-shaman { .char-box-shaman {
background-image: url(../ns-images/ns-classes/wow-shaman.webp); background-image: url(/ns-themes/ns-ryu/ns-images/ns-classes/wow-shaman.webp);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right bottom; background-position: right bottom;
position: relative; position: relative;
} }
.char-box-warlock { .char-box-warlock {
background-image: url(../ns-images/ns-classes/wow-warlock.webp); background-image: url(/ns-themes/ns-ryu/ns-images/ns-classes/wow-warlock.webp);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right bottom; background-position: right bottom;
position: relative; position: relative;
} }
.char-box-warrior { .char-box-warrior {
background-image: url(../ns-images/ns-classes/wow-warrior.webp); background-image: url(/ns-themes/ns-ryu/ns-images/ns-classes/wow-warrior.webp);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right bottom; background-position: right bottom;
position: relative; position: relative;
@@ -859,7 +867,7 @@ textarea:focus, select:focus, input[type=password]:focus, input[type=number]:foc
/* acc panels */ /* acc panels */
#account-settings, #character-settings, #account-history { #account-settings, #character-settings, #account-history {
background: hsla(0, 100%, 0%, 0.7); background: hsla(0, 100%, 0%, 0.7);
background-image: url(../ns-images/ns-general/account-info.png); background-image: url(/ns-themes/ns-ryu/ns-images/ns-general/account-info.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-blend-mode: saturation; background-blend-mode: saturation;
background-position: right; background-position: right;
@@ -889,7 +897,7 @@ textarea:focus, select:focus, input[type=password]:focus, input[type=number]:foc
/* acc icons */ /* acc icons */
.acc-icon { .acc-icon {
background-image: url(../ns-images/ns-icons/account-icons.png); background-image: url(/ns-themes/ns-ryu/ns-images/ns-icons/account-icons.png);
display: table-cell; display: table-cell;
width: 80px; width: 80px;
height: 68px; height: 68px;
@@ -2313,21 +2321,21 @@ th {
} }
.cc-youtube { .cc-youtube {
background-image: url(../ns-images/ns-logos/youtube.webp); background-image: url(/ns-themes/ns-ryu/ns-images/ns-logos/youtube.webp);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 100% 45%; background-position: 100% 45%;
position: relative; position: relative;
} }
.cc-facebook { .cc-facebook {
background-image: url(../ns-images/ns-logos/facebook.png); background-image: url(/ns-themes/ns-ryu/ns-images/ns-logos/facebook.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 100% 45%; background-position: 100% 45%;
position: relative; position: relative;
} }
.cc-twitch { .cc-twitch {
background-image: url(../ns-images/ns-logos/twitch.png); background-image: url(/ns-themes/ns-ryu/ns-images/ns-logos/twitch.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 100% 45%; background-position: 100% 45%;
position: relative; position: relative;