feat: Rediseño de interfaz con temática de Halloween
- Actualización de estilos CSS en pixel-sections.css para reflejar una paleta de colores suave de Halloween, incluyendo cambios en gradientes, bordes y sombras. - Modificación de elementos en index.ejs para incluir decoraciones de Halloween como calabazas y fantasmas. - Ajustes en layout.ejs y navbar.ejs para incorporar iconos y tooltips relacionados con Halloween. - Creación de un nuevo archivo README para documentar los cambios y la nueva paleta de colores.
This commit is contained in:
@@ -6,30 +6,32 @@
|
||||
/* Fuentes Pixel Art */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
|
||||
|
||||
/* Variables de Color Pixel Art - Cozy Witch Theme */
|
||||
/* Variables de Color Pixel Art - Soft Halloween Theme */
|
||||
:root {
|
||||
/* Tonos cálidos de madera y tierra */
|
||||
--pixel-bg-dark: #3d2817; /* Madera oscura */
|
||||
--pixel-bg-medium: #5c3d2e; /* Madera media */
|
||||
--pixel-bg-light: #7a5243; /* Madera clara */
|
||||
/* Backgrounds suaves de Halloween */
|
||||
--pixel-bg-dark: #2d1b3d; /* Púrpura oscuro suave */
|
||||
--pixel-bg-medium: #3f2a4f; /* Púrpura medio */
|
||||
--pixel-bg-light: #544163; /* Lavanda oscuro */
|
||||
|
||||
/* Acentos mágicos y acogedores */
|
||||
--pixel-accent-1: #ff6b6b; /* Rojo cálido (pociones) */
|
||||
--pixel-accent-2: #c77dff; /* Púrpura místico (magia) */
|
||||
--pixel-accent-3: #ffd166; /* Dorado/amarillo (luz de velas) */
|
||||
--pixel-accent-4: #06ffa5; /* Verde menta (hierbas) */
|
||||
--pixel-accent-5: #ff8fab; /* Rosa suave (flores) */
|
||||
--pixel-accent-6: #4ecdc4; /* Turquesa (cristales) */
|
||||
/* Acentos de Halloween suaves */
|
||||
--pixel-accent-1: #ff9a56; /* Naranja calabaza suave */
|
||||
--pixel-accent-2: #9b7bb5; /* Púrpura pastel */
|
||||
--pixel-accent-3: #ffc65c; /* Amarillo calabaza */
|
||||
--pixel-accent-4: #8dd4a8; /* Verde menta suave */
|
||||
--pixel-accent-5: #e89ac7; /* Rosa Halloween */
|
||||
--pixel-accent-6: #7ec4cf; /* Turquesa fantasma */
|
||||
|
||||
/* Tonos de texto */
|
||||
--pixel-text: #f8e5d7; /* Beige cálido */
|
||||
--pixel-text-dim: #c9a68a; /* Café con leche */
|
||||
--pixel-border: #2a1810; /* Café muy oscuro */
|
||||
--pixel-shadow: rgba(26, 13, 5, 0.8);
|
||||
/* Tonos de texto suaves */
|
||||
--pixel-text: #f5e6d3; /* Crema suave */
|
||||
--pixel-text-dim: #d4b8a8; /* Beige rosado */
|
||||
--pixel-border: #4a2f5a; /* Púrpura oscuro borde */
|
||||
--pixel-shadow: rgba(29, 15, 41, 0.6);
|
||||
|
||||
/* Tonos especiales */
|
||||
--pixel-warm-glow: #ffb347; /* Naranja cálido */
|
||||
--pixel-night-sky: #4a3b5c; /* Púrpura del atardecer */
|
||||
/* Tonos especiales Halloween */
|
||||
--pixel-warm-glow: #ffb86c; /* Naranja brillante suave */
|
||||
--pixel-night-sky: #564375; /* Cielo nocturno Halloween */
|
||||
--pixel-pumpkin: #ff9a56; /* Calabaza */
|
||||
--pixel-ghost: #e8dff5; /* Fantasma */
|
||||
}
|
||||
|
||||
/* Reset y Base */
|
||||
@@ -43,9 +45,9 @@ body {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
background: linear-gradient(180deg, var(--pixel-night-sky) 0%, var(--pixel-bg-dark) 100%);
|
||||
background: linear-gradient(180deg, var(--pixel-night-sky) 0%, var(--pixel-bg-dark) 60%, #2a1a3a 100%);
|
||||
color: var(--pixel-text);
|
||||
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Headings Pixel Art */
|
||||
@@ -61,7 +63,8 @@ h1, h2, h3, h4, h5, h6 {
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
line-height: 1.6;
|
||||
animation: pixelGlow 2s ease-in-out infinite;
|
||||
animation: softGlow 3s ease-in-out infinite;
|
||||
color: var(--pixel-pumpkin);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@@ -69,14 +72,14 @@ h2 {
|
||||
line-height: 1.6;
|
||||
color: var(--pixel-accent-3);
|
||||
text-shadow:
|
||||
2px 2px 0px var(--pixel-border),
|
||||
0 0 15px var(--pixel-warm-glow);
|
||||
2px 2px 0px rgba(0, 0, 0, 0.4),
|
||||
0 0 20px rgba(255, 198, 92, 0.4);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
color: var(--pixel-accent-5);
|
||||
color: var(--pixel-accent-2);
|
||||
}
|
||||
|
||||
/* Pixel Border Effect */
|
||||
@@ -97,16 +100,27 @@ h3 {
|
||||
}
|
||||
|
||||
/* Pixel Box (Contenedores) */
|
||||
/* Pixel Box Containers */
|
||||
.pixel-box {
|
||||
background: linear-gradient(135deg, var(--pixel-bg-medium) 0%, var(--pixel-bg-light) 100%);
|
||||
border: 4px solid var(--pixel-border);
|
||||
border-radius: 0;
|
||||
box-shadow:
|
||||
8px 8px 0 0 rgba(0, 0, 0, 0.5),
|
||||
inset 0 0 0 2px rgba(255, 179, 71, 0.1),
|
||||
0 0 20px rgba(255, 179, 71, 0.2);
|
||||
background: linear-gradient(135deg,
|
||||
var(--pixel-bg-2) 0%,
|
||||
var(--pixel-bg-3) 100%);
|
||||
border: 3px solid var(--pixel-border);
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
box-shadow:
|
||||
4px 4px 12px rgba(0, 0, 0, 0.4),
|
||||
inset 0 0 30px rgba(155, 123, 181, 0.1);
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pixel-box:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
6px 6px 16px rgba(0, 0, 0, 0.5),
|
||||
inset 0 0 35px rgba(155, 123, 181, 0.15),
|
||||
0 0 30px rgba(255, 154, 86, 0.2);
|
||||
}
|
||||
|
||||
.pixel-box::before {
|
||||
@@ -118,13 +132,13 @@ h3 {
|
||||
bottom: -2px;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
var(--pixel-warm-glow) 0%,
|
||||
var(--pixel-pumpkin) 0%,
|
||||
var(--pixel-accent-2) 50%,
|
||||
var(--pixel-accent-6) 100%
|
||||
var(--pixel-accent-4) 100%
|
||||
);
|
||||
opacity: 0.15;
|
||||
opacity: 0.1;
|
||||
z-index: -1;
|
||||
animation: cozyPulse 4s ease-in-out infinite;
|
||||
animation: softPulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Botones Pixel Art */
|
||||
@@ -132,132 +146,135 @@ h3 {
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
font-size: 14px;
|
||||
padding: 16px 32px;
|
||||
border: 4px solid var(--pixel-border);
|
||||
background: linear-gradient(180deg, var(--pixel-accent-3) 0%, var(--pixel-warm-glow) 100%);
|
||||
color: var(--pixel-bg-dark);
|
||||
border: 3px solid var(--pixel-border);
|
||||
background: linear-gradient(135deg, var(--pixel-pumpkin) 0%, var(--pixel-accent-2) 100%);
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.1s;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 8px;
|
||||
box-shadow:
|
||||
6px 6px 0 0 rgba(0, 0, 0, 0.6),
|
||||
inset -2px -2px 0 0 rgba(0, 0, 0, 0.3),
|
||||
inset 2px 2px 0 0 rgba(255, 255, 255, 0.4),
|
||||
0 0 15px rgba(255, 179, 71, 0.4);
|
||||
4px 4px 10px rgba(0, 0, 0, 0.4),
|
||||
inset 2px 2px 4px rgba(255, 255, 255, 0.15),
|
||||
inset -2px -2px 4px rgba(0, 0, 0, 0.15);
|
||||
font-weight: bold;
|
||||
overflow: visible;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Ornamentos decorativos del botón */
|
||||
.pixel-btn::before,
|
||||
.pixel-btn::after {
|
||||
content: '';
|
||||
content: '✦';
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--pixel-accent-5);
|
||||
border: 2px solid var(--pixel-border);
|
||||
transform: rotate(45deg);
|
||||
opacity: 0.7;
|
||||
transition: all 0.3s;
|
||||
font-size: 12px;
|
||||
color: var(--pixel-accent-3);
|
||||
text-shadow: 0 0 10px var(--pixel-accent-3);
|
||||
opacity: 0.6;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pixel-btn::before {
|
||||
top: -6px;
|
||||
top: -8px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.pixel-btn::after {
|
||||
top: -6px;
|
||||
top: -8px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.pixel-btn:hover::before,
|
||||
.pixel-btn:hover::after {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) scale(1.2);
|
||||
box-shadow: 0 0 10px var(--pixel-accent-5);
|
||||
transform: scale(1.2);
|
||||
text-shadow: 0 0 15px var(--pixel-accent-3);
|
||||
}
|
||||
|
||||
/* SVG icons dentro de botones */
|
||||
.pixel-btn svg {
|
||||
filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));
|
||||
animation: sparkle 3s ease-in-out infinite;
|
||||
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
|
||||
animation: softSparkle 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes sparkle {
|
||||
@keyframes softSparkle {
|
||||
0%, 100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 0.7;
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
transform: scale(1.05) rotate(3deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.pixel-btn:hover svg {
|
||||
animation: sparkle 1.5s ease-in-out infinite;
|
||||
animation: softSparkle 1.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Efecto de resplandor en hover para botones principales */
|
||||
.pixel-btn:hover {
|
||||
background: linear-gradient(180deg, var(--pixel-warm-glow) 0%, var(--pixel-accent-3) 100%);
|
||||
transform: translate(2px, 2px);
|
||||
background: linear-gradient(135deg, var(--pixel-accent-2) 0%, var(--pixel-pumpkin) 100%);
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
4px 4px 0 0 rgba(0, 0, 0, 0.6),
|
||||
inset -2px -2px 0 0 rgba(0, 0, 0, 0.3),
|
||||
inset 2px 2px 0 0 rgba(255, 255, 255, 0.4),
|
||||
0 0 25px rgba(255, 179, 71, 0.7),
|
||||
0 0 40px rgba(255, 179, 71, 0.3);
|
||||
6px 6px 16px rgba(0, 0, 0, 0.5),
|
||||
inset 2px 2px 6px rgba(255, 255, 255, 0.2),
|
||||
0 0 30px rgba(255, 154, 86, 0.5);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.pixel-btn:active {
|
||||
transform: translate(4px, 4px);
|
||||
transform: translateY(-1px);
|
||||
box-shadow:
|
||||
2px 2px 0 0 rgba(0, 0, 0, 0.6),
|
||||
inset -1px -1px 0 0 rgba(0, 0, 0, 0.3),
|
||||
inset 1px 1px 0 0 rgba(255, 255, 255, 0.2);
|
||||
3px 3px 8px rgba(0, 0, 0, 0.5),
|
||||
inset 1px 1px 3px rgba(255, 255, 255, 0.1);
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
.pixel-btn-secondary {
|
||||
background: linear-gradient(180deg, var(--pixel-accent-2) 0%, var(--pixel-accent-5) 100%);
|
||||
background: linear-gradient(135deg, var(--pixel-accent-2) 0%, var(--pixel-accent-4) 100%);
|
||||
border-color: var(--pixel-border);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pixel-btn-secondary:hover {
|
||||
background: linear-gradient(180deg, var(--pixel-accent-5) 0%, var(--pixel-accent-2) 100%);
|
||||
background: linear-gradient(135deg, var(--pixel-accent-4) 0%, var(--pixel-accent-2) 100%);
|
||||
color: white;
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
6px 6px 16px rgba(0, 0, 0, 0.5),
|
||||
0 0 30px rgba(155, 123, 181, 0.4);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
/* Navbar Pixel Art */
|
||||
.pixel-navbar {
|
||||
background: linear-gradient(180deg, var(--pixel-bg-medium) 0%, var(--pixel-bg-dark) 100%);
|
||||
border-bottom: 4px solid var(--pixel-border);
|
||||
background: linear-gradient(180deg, var(--pixel-bg-2) 0%, var(--pixel-bg-dark) 100%);
|
||||
border-bottom: 3px solid var(--pixel-border);
|
||||
box-shadow:
|
||||
0 8px 0 0 rgba(0, 0, 0, 0.5),
|
||||
0 0 20px rgba(255, 179, 71, 0.2);
|
||||
0 6px 12px rgba(0, 0, 0, 0.4),
|
||||
0 0 25px rgba(155, 123, 181, 0.15);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pixel-navbar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
bottom: -6px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
height: 3px;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--pixel-accent-3) 0px,
|
||||
var(--pixel-accent-3) 8px,
|
||||
var(--pixel-warm-glow) 8px,
|
||||
var(--pixel-warm-glow) 16px,
|
||||
var(--pixel-accent-1) 16px,
|
||||
var(--pixel-accent-1) 24px
|
||||
var(--pixel-pumpkin) 0px,
|
||||
var(--pixel-pumpkin) 8px,
|
||||
var(--pixel-accent-2) 8px,
|
||||
var(--pixel-accent-2) 16px,
|
||||
var(--pixel-accent-4) 16px,
|
||||
var(--pixel-accent-4) 24px
|
||||
);
|
||||
animation: cozyScroll 3s linear infinite;
|
||||
animation: softScroll 4s linear infinite;
|
||||
}
|
||||
|
||||
/* Código Pixel Art */
|
||||
@@ -280,15 +297,15 @@ pre {
|
||||
|
||||
/* Links Pixel Art */
|
||||
a {
|
||||
color: var(--pixel-accent-3);
|
||||
color: var(--pixel-pumpkin);
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--pixel-warm-glow);
|
||||
text-shadow: 0 0 10px var(--pixel-warm-glow);
|
||||
color: var(--pixel-accent-3);
|
||||
text-shadow: 0 0 12px var(--pixel-accent-3);
|
||||
}
|
||||
|
||||
a::after {
|
||||
@@ -298,7 +315,7 @@ a::after {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, var(--pixel-accent-3), var(--pixel-warm-glow));
|
||||
background: linear-gradient(90deg, var(--pixel-pumpkin), var(--pixel-accent-2));
|
||||
transform: scaleX(0);
|
||||
transform-origin: right;
|
||||
transition: transform 0.3s ease;
|
||||
@@ -307,7 +324,7 @@ a::after {
|
||||
a:hover::after {
|
||||
transform: scaleX(1);
|
||||
transform-origin: left;
|
||||
box-shadow: 0 0 8px var(--pixel-warm-glow);
|
||||
box-shadow: 0 0 10px var(--pixel-accent-2);
|
||||
}
|
||||
|
||||
/* Badges Pixel Art */
|
||||
@@ -315,18 +332,19 @@ a:hover::after {
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
font-size: 10px;
|
||||
padding: 8px 16px;
|
||||
background: linear-gradient(135deg, var(--pixel-accent-1) 0%, var(--pixel-accent-5) 100%);
|
||||
background: linear-gradient(135deg, var(--pixel-pumpkin) 0%, var(--pixel-accent-2) 100%);
|
||||
color: white;
|
||||
border: 2px solid var(--pixel-border);
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
box-shadow:
|
||||
4px 4px 0 0 rgba(0, 0, 0, 0.5),
|
||||
inset -1px -1px 0 0 rgba(0, 0, 0, 0.3),
|
||||
inset 1px 1px 0 0 rgba(255, 255, 255, 0.3),
|
||||
0 0 15px var(--pixel-accent-1);
|
||||
animation: cozyFloat 3s ease-in-out infinite;
|
||||
4px 4px 10px rgba(0, 0, 0, 0.4),
|
||||
inset 1px 1px 2px rgba(255, 255, 255, 0.2),
|
||||
0 0 20px rgba(255, 154, 86, 0.3);
|
||||
animation: softFloat 3.5s ease-in-out infinite;
|
||||
position: relative;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.pixel-badge::before {
|
||||
@@ -389,66 +407,59 @@ tr:hover td {
|
||||
}
|
||||
|
||||
/* Animaciones Pixel Art */
|
||||
@keyframes pixelGlow {
|
||||
@keyframes softGlow {
|
||||
0%, 100% {
|
||||
text-shadow:
|
||||
3px 3px 0px rgba(0, 0, 0, 0.8),
|
||||
0 0 20px var(--pixel-warm-glow);
|
||||
2px 2px 2px rgba(0, 0, 0, 0.6),
|
||||
0 0 25px rgba(255, 154, 86, 0.4);
|
||||
}
|
||||
50% {
|
||||
text-shadow:
|
||||
3px 3px 0px rgba(0, 0, 0, 0.8),
|
||||
0 0 40px var(--pixel-accent-3),
|
||||
0 0 60px var(--pixel-warm-glow);
|
||||
2px 2px 2px rgba(0, 0, 0, 0.6),
|
||||
0 0 35px rgba(255, 154, 86, 0.6),
|
||||
0 0 50px rgba(155, 123, 181, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cozyPulse {
|
||||
@keyframes softPulse {
|
||||
0%, 100% {
|
||||
opacity: 0.15;
|
||||
opacity: 0.1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.25;
|
||||
transform: scale(1.02);
|
||||
opacity: 0.15;
|
||||
transform: scale(1.01);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cozyScroll {
|
||||
@keyframes softScroll {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: 24px 0; }
|
||||
}
|
||||
|
||||
@keyframes pixelBounce {
|
||||
@keyframes softBounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-4px); }
|
||||
50% { transform: translateY(-6px); }
|
||||
}
|
||||
|
||||
@keyframes pixelShake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
|
||||
20%, 40%, 60%, 80% { transform: translateX(2px); }
|
||||
}
|
||||
|
||||
/* Floating Animation (cozy) */
|
||||
@keyframes cozyFloat {
|
||||
@keyframes softFloat {
|
||||
0%, 100% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-5px) rotate(1deg);
|
||||
transform: translateY(-8px) rotate(2deg);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(5px) rotate(-1deg);
|
||||
transform: translateY(8px) rotate(-2deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Grid Background Pixel */
|
||||
.pixel-grid-bg {
|
||||
background:
|
||||
linear-gradient(rgba(255, 179, 71, 0.02) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 179, 71, 0.02) 1px, transparent 1px),
|
||||
linear-gradient(180deg, var(--pixel-night-sky) 0%, var(--pixel-bg-dark) 50%, var(--pixel-bg-medium) 100%);
|
||||
linear-gradient(rgba(155, 123, 181, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(155, 123, 181, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(180deg, var(--pixel-bg-dark) 0%, var(--pixel-bg-2) 50%, var(--pixel-bg-3) 100%);
|
||||
background-size: 16px 16px, 16px 16px, 100% 100%;
|
||||
position: relative;
|
||||
}
|
||||
@@ -462,8 +473,8 @@ tr:hover td {
|
||||
bottom: 0;
|
||||
background: radial-gradient(
|
||||
circle at 50% 20%,
|
||||
rgba(255, 179, 71, 0.1) 0%,
|
||||
transparent 50%
|
||||
rgba(255, 154, 86, 0.08) 0%,
|
||||
transparent 60%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
@@ -724,11 +735,187 @@ a[href="#primeros-pasos"] img {
|
||||
}
|
||||
|
||||
a[href="#primeros-pasos"]:hover img {
|
||||
filter: drop-shadow(0 6px 20px rgba(255, 179, 71, 0.6)) brightness(1.1);
|
||||
transform: translateY(-4px);
|
||||
filter: drop-shadow(0 6px 25px rgba(255, 154, 86, 0.6)) brightness(1.15);
|
||||
transform: translateY(-6px) scale(1.05);
|
||||
}
|
||||
|
||||
a[href="#primeros-pasos"]:active img {
|
||||
transform: translateY(-2px);
|
||||
filter: drop-shadow(0 4px 15px rgba(255, 179, 71, 0.5));
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
filter: drop-shadow(0 4px 18px rgba(255, 154, 86, 0.5));
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
DECORACIONES DE HALLOWEEN
|
||||
======================================== */
|
||||
|
||||
/* Calabaza Pixel Art */
|
||||
.pixel-pumpkin {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--pixel-pumpkin);
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--pixel-border);
|
||||
position: relative;
|
||||
box-shadow:
|
||||
3px 3px 8px rgba(0, 0, 0, 0.4),
|
||||
inset -2px -2px 6px rgba(0, 0, 0, 0.3),
|
||||
inset 2px 2px 6px rgba(255, 255, 255, 0.2);
|
||||
animation: softBounce 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pixel-pumpkin::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 8px;
|
||||
height: 10px;
|
||||
background: var(--pixel-accent-5);
|
||||
border: 2px solid var(--pixel-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.pixel-pumpkin::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
background:
|
||||
linear-gradient(to right, transparent 6px, var(--pixel-border) 6px, var(--pixel-border) 8px, transparent 8px, transparent 12px, var(--pixel-border) 12px, var(--pixel-border) 14px, transparent 14px),
|
||||
linear-gradient(to bottom, transparent 4px, var(--pixel-border) 4px, var(--pixel-border) 6px, transparent 6px);
|
||||
box-shadow:
|
||||
-2px 10px 0 0 var(--pixel-border),
|
||||
2px 10px 0 0 var(--pixel-border);
|
||||
}
|
||||
|
||||
/* Fantasma Pixel Art */
|
||||
.pixel-ghost {
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 36px;
|
||||
background: var(--pixel-ghost);
|
||||
border: 2px solid var(--pixel-border);
|
||||
border-radius: 50% 50% 0 0;
|
||||
position: relative;
|
||||
box-shadow:
|
||||
2px 2px 8px rgba(0, 0, 0, 0.3),
|
||||
inset 0 0 15px rgba(255, 255, 255, 0.4);
|
||||
animation: softFloat 3.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pixel-ghost::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
background:
|
||||
radial-gradient(circle at 25% 0, transparent 40%, var(--pixel-ghost) 40%),
|
||||
radial-gradient(circle at 75% 0, transparent 40%, var(--pixel-ghost) 40%);
|
||||
border-left: 2px solid var(--pixel-border);
|
||||
border-right: 2px solid var(--pixel-border);
|
||||
}
|
||||
|
||||
.pixel-ghost::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 6px;
|
||||
width: 14px;
|
||||
height: 6px;
|
||||
background:
|
||||
linear-gradient(to right, var(--pixel-border) 4px, transparent 4px, transparent 6px, var(--pixel-border) 6px, var(--pixel-border) 10px, transparent 10px);
|
||||
box-shadow: 0 8px 0 0 var(--pixel-border);
|
||||
}
|
||||
|
||||
/* Murciélago Pixel Art */
|
||||
.pixel-bat {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
animation: batFly 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pixel-bat::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 8px;
|
||||
height: 10px;
|
||||
background: var(--pixel-border);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.pixel-bat::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
background:
|
||||
linear-gradient(to right,
|
||||
transparent 0,
|
||||
var(--pixel-border) 4px,
|
||||
var(--pixel-border) 8px,
|
||||
transparent 8px,
|
||||
transparent 12px,
|
||||
var(--pixel-border) 12px,
|
||||
var(--pixel-border) 16px,
|
||||
transparent 16px,
|
||||
transparent 24px,
|
||||
var(--pixel-border) 24px,
|
||||
var(--pixel-border) 28px,
|
||||
transparent 28px,
|
||||
transparent 32px,
|
||||
var(--pixel-border) 32px,
|
||||
var(--pixel-border) 36px,
|
||||
transparent 36px
|
||||
);
|
||||
clip-path: polygon(
|
||||
0% 100%, 10% 0%, 20% 100%, 30% 50%, 50% 50%, 70% 50%, 80% 100%, 90% 0%, 100% 100%
|
||||
);
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
@keyframes batFly {
|
||||
0%, 100% {
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-8px) translateY(-4px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(8px) translateY(4px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Estrella Halloween */
|
||||
.pixel-star-halloween {
|
||||
display: inline-block;
|
||||
color: var(--pixel-accent-3);
|
||||
font-size: 20px;
|
||||
animation: twinkle 2.5s ease-in-out infinite;
|
||||
text-shadow: 0 0 12px var(--pixel-accent-3);
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
/* ============================================
|
||||
COZY PIXEL ART - SECTIONS OVERRIDES
|
||||
Diseño witchy/fantasy acogedor
|
||||
SOFT HALLOWEEN PIXEL ART - SECTIONS OVERRIDES
|
||||
Diseño suave con temática de Halloween
|
||||
============================================ */
|
||||
|
||||
/* Secciones Principales */
|
||||
section {
|
||||
background: linear-gradient(135deg, var(--pixel-bg-medium) 0%, var(--pixel-bg-light) 100%) !important;
|
||||
border: 4px solid var(--pixel-border) !important;
|
||||
border-radius: 0 !important;
|
||||
background: linear-gradient(135deg, var(--pixel-bg-2) 0%, var(--pixel-bg-3) 100%) !important;
|
||||
border: 3px solid var(--pixel-border) !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow:
|
||||
8px 8px 0 0 rgba(0, 0, 0, 0.5) !important,
|
||||
inset 0 0 0 2px rgba(255, 179, 71, 0.15) !important,
|
||||
0 0 20px rgba(255, 179, 71, 0.2) !important;
|
||||
4px 4px 12px rgba(0, 0, 0, 0.4) !important,
|
||||
inset 0 0 30px rgba(155, 123, 181, 0.1) !important,
|
||||
0 0 25px rgba(255, 154, 86, 0.15) !important;
|
||||
padding: 32px !important;
|
||||
margin-bottom: 32px;
|
||||
position: relative;
|
||||
@@ -25,7 +25,8 @@ section::before {
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
border: 2px solid rgba(255, 179, 71, 0.1);
|
||||
border: 2px solid rgba(155, 123, 181, 0.08);
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -40,8 +41,8 @@ section h2 {
|
||||
background-clip: unset !important;
|
||||
-webkit-text-fill-color: unset !important;
|
||||
text-shadow:
|
||||
2px 2px 0px var(--pixel-border),
|
||||
0 0 20px var(--pixel-warm-glow) !important;
|
||||
2px 2px 0px rgba(0, 0, 0, 0.4),
|
||||
0 0 20px rgba(255, 198, 92, 0.4) !important;
|
||||
margin-bottom: 24px !important;
|
||||
}
|
||||
|
||||
@@ -49,16 +50,16 @@ section h3 {
|
||||
font-family: 'Press Start 2P', cursive !important;
|
||||
font-size: 16px !important;
|
||||
line-height: 1.6 !important;
|
||||
color: var(--pixel-accent-5) !important;
|
||||
color: var(--pixel-accent-2) !important;
|
||||
margin-bottom: 16px !important;
|
||||
text-shadow: 1px 1px 0px var(--pixel-border);
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
section h4 {
|
||||
font-family: 'VT323', monospace !important;
|
||||
font-size: 22px !important;
|
||||
font-weight: bold !important;
|
||||
color: var(--pixel-accent-4) !important;
|
||||
color: var(--pixel-pumpkin) !important;
|
||||
margin-bottom: 12px !important;
|
||||
}
|
||||
|
||||
@@ -69,34 +70,34 @@ section p {
|
||||
}
|
||||
|
||||
section p strong {
|
||||
color: var(--pixel-accent-4) !important;
|
||||
color: var(--pixel-pumpkin) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Cajas de Información */
|
||||
section > div[class*="space-y"] {
|
||||
background: var(--pixel-bg-light) !important;
|
||||
background: var(--pixel-bg-3) !important;
|
||||
border: 3px solid var(--pixel-border) !important;
|
||||
border-radius: 0 !important;
|
||||
border-radius: 6px !important;
|
||||
padding: 20px !important;
|
||||
box-shadow:
|
||||
inset 0 0 20px rgba(0, 0, 0, 0.3),
|
||||
4px 4px 0 0 rgba(0, 0, 0, 0.5) !important;
|
||||
4px 4px 10px rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
|
||||
section > div[class*="border-indigo"] {
|
||||
border-color: var(--pixel-accent-3) !important;
|
||||
background: var(--pixel-bg-light) !important;
|
||||
border-color: var(--pixel-accent-2) !important;
|
||||
background: var(--pixel-bg-3) !important;
|
||||
}
|
||||
|
||||
/* Grid de Cards */
|
||||
section .grid > div {
|
||||
background: var(--pixel-bg-light) !important;
|
||||
background: var(--pixel-bg-3) !important;
|
||||
border: 3px solid var(--pixel-border) !important;
|
||||
border-radius: 0 !important;
|
||||
border-radius: 6px !important;
|
||||
box-shadow:
|
||||
4px 4px 0 0 rgba(0, 0, 0, 0.5),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
|
||||
4px 4px 10px rgba(0, 0, 0, 0.4),
|
||||
inset 0 0 20px rgba(155, 123, 181, 0.08) !important;
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
@@ -114,10 +115,10 @@ section ul li {
|
||||
}
|
||||
|
||||
section ul li::before {
|
||||
content: '■';
|
||||
content: '✦';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--pixel-accent-4);
|
||||
color: var(--pixel-pumpkin);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -141,27 +142,27 @@ section ol li::before {
|
||||
left: 0;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
font-size: 12px;
|
||||
color: var(--pixel-accent-4);
|
||||
color: var(--pixel-pumpkin);
|
||||
}
|
||||
|
||||
/* Code Blocks en Secciones */
|
||||
section code {
|
||||
background: var(--pixel-bg-dark) !important;
|
||||
border: 2px solid var(--pixel-accent-2) !important;
|
||||
color: var(--pixel-accent-4) !important;
|
||||
color: var(--pixel-accent-3) !important;
|
||||
padding: 4px 8px !important;
|
||||
font-family: 'VT323', monospace !important;
|
||||
font-size: 18px !important;
|
||||
border-radius: 0 !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
section pre {
|
||||
background: var(--pixel-bg-dark) !important;
|
||||
border: 3px solid var(--pixel-border) !important;
|
||||
padding: 20px !important;
|
||||
border-radius: 0 !important;
|
||||
border-radius: 6px !important;
|
||||
box-shadow:
|
||||
inset 4px 4px 0 0 rgba(0, 0, 0, 0.5) !important;
|
||||
inset 3px 3px 8px rgba(0, 0, 0, 0.5) !important;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@@ -169,7 +170,7 @@ section pre code {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
color: var(--pixel-accent-4) !important;
|
||||
color: var(--pixel-accent-3) !important;
|
||||
}
|
||||
|
||||
/* Tablas en Secciones */
|
||||
@@ -189,13 +190,15 @@ section th {
|
||||
font-size: 12px !important;
|
||||
text-transform: uppercase !important;
|
||||
text-align: left !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
section td {
|
||||
background: var(--pixel-bg-light) !important;
|
||||
background: var(--pixel-bg-3) !important;
|
||||
border: 3px solid var(--pixel-border) !important;
|
||||
padding: 12px !important;
|
||||
color: var(--pixel-text) !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
section tr:hover td {
|
||||
@@ -313,28 +316,29 @@ section a[class*="bg-"] {
|
||||
font-family: 'Press Start 2P', cursive !important;
|
||||
font-size: 12px !important;
|
||||
padding: 12px 24px !important;
|
||||
border: 4px solid var(--pixel-border) !important;
|
||||
background: var(--pixel-accent-2) !important;
|
||||
border: 3px solid var(--pixel-border) !important;
|
||||
background: linear-gradient(135deg, var(--pixel-pumpkin), var(--pixel-accent-2)) !important;
|
||||
color: white !important;
|
||||
text-transform: uppercase !important;
|
||||
cursor: pointer !important;
|
||||
border-radius: 0 !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow:
|
||||
6px 6px 0 0 rgba(0, 0, 0, 0.6) !important,
|
||||
inset -2px -2px 0 0 rgba(0, 0, 0, 0.3) !important,
|
||||
inset 2px 2px 0 0 rgba(255, 255, 255, 0.2) !important;
|
||||
transition: all 0.1s !important;
|
||||
4px 4px 10px rgba(0, 0, 0, 0.4) !important,
|
||||
inset 2px 2px 4px rgba(255, 255, 255, 0.15) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
backdrop-filter: none !important;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
section button:hover,
|
||||
section a[class*="bg-"]:hover {
|
||||
background: var(--pixel-accent-3) !important;
|
||||
transform: translate(2px, 2px) !important;
|
||||
background: linear-gradient(135deg, var(--pixel-accent-2), var(--pixel-pumpkin)) !important;
|
||||
transform: translateY(-3px) !important;
|
||||
box-shadow:
|
||||
4px 4px 0 0 rgba(0, 0, 0, 0.6) !important,
|
||||
inset -2px -2px 0 0 rgba(0, 0, 0, 0.3) !important,
|
||||
inset 2px 2px 0 0 rgba(255, 255, 255, 0.2) !important;
|
||||
6px 6px 16px rgba(0, 0, 0, 0.5) !important,
|
||||
inset 2px 2px 6px rgba(255, 255, 255, 0.2) !important,
|
||||
0 0 30px rgba(255, 154, 86, 0.4) !important;
|
||||
filter: brightness(1.1) !important;
|
||||
}
|
||||
|
||||
/* Formularios */
|
||||
|
||||
@@ -7,13 +7,13 @@
|
||||
<header class="relative overflow-hidden py-20 sm:py-28">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
|
||||
<div class="max-w-5xl mx-auto text-center space-y-12">
|
||||
<!-- Badge Pixel Art con decoración -->
|
||||
<!-- Badge Pixel Art con decoración de Halloween -->
|
||||
<div class="inline-block relative">
|
||||
<span class="pixel-star absolute -left-8 top-0"></span>
|
||||
<span class="pixel-pumpkin absolute -left-12 top-0"></span>
|
||||
<div class="pixel-badge">
|
||||
<%= appName %> • v<%= version %>
|
||||
</div>
|
||||
<span class="pixel-star absolute -right-8 top-0" style="animation-delay: 1s;"></span>
|
||||
<span class="pixel-ghost absolute -right-12 top-0" style="animation-delay: 1s;"></span>
|
||||
</div>
|
||||
|
||||
<!-- Título Principal -->
|
||||
@@ -26,11 +26,13 @@
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Decoración con velas -->
|
||||
<div class="flex justify-center gap-8">
|
||||
<span class="pixel-candle"></span>
|
||||
<span class="pixel-candle" style="animation-delay: 0.5s;"></span>
|
||||
<span class="pixel-candle" style="animation-delay: 1s;"></span>
|
||||
<!-- Decoración de Halloween con murciélagos y estrellas -->
|
||||
<div class="flex justify-center gap-8 items-center">
|
||||
<span class="pixel-bat"></span>
|
||||
<span class="pixel-star-halloween">✦</span>
|
||||
<span class="pixel-pumpkin" style="animation-delay: 0.5s;"></span>
|
||||
<span class="pixel-star-halloween" style="animation-delay: 0.8s;">✦</span>
|
||||
<span class="pixel-ghost" style="animation-delay: 1s;"></span>
|
||||
</div>
|
||||
|
||||
<!-- Descripción -->
|
||||
|
||||
@@ -48,25 +48,25 @@
|
||||
|
||||
<div class="pixel-border p-4 mb-6" style="background: linear-gradient(135deg, var(--pixel-bg-dark) 0%, var(--pixel-bg-medium) 100%);">
|
||||
<div class="pixel-status-bar justify-center">
|
||||
<span class="pixel-star" style="width: 12px; height: 12px;"></span>
|
||||
<span class="pixel-pumpkin" style="width: 16px; height: 16px;"></span>
|
||||
<span>VER <%= version %></span>
|
||||
<span>✦</span>
|
||||
<span>DJS <%= djsVersion %></span>
|
||||
<span>✦</span>
|
||||
<span><%= currentDateHuman %></span>
|
||||
<span class="pixel-star" style="width: 12px; height: 12px; animation-delay: 1.5s;"></span>
|
||||
<span class="pixel-ghost" style="width: 16px; height: 20px; animation-delay: 1.5s;"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-center text-xs pixel-text-dim mb-6 flex items-center justify-center gap-2">
|
||||
<span class="pixel-coin" style="width: 16px; height: 16px;"></span>
|
||||
<span class="pixel-bat" style="width: 24px; height: 12px;"></span>
|
||||
<span>Amayo © <%= new Date().getFullYear() %> — Documentación para usuarios finales de Discord</span>
|
||||
<span class="pixel-candle" style="width: 8px; height: 12px;"></span>
|
||||
<span class="pixel-star-halloween">✦</span>
|
||||
</p>
|
||||
|
||||
<div class="text-center">
|
||||
<a class="pixel-btn-secondary pixel-btn inline-block" href="#primeros-pasos">
|
||||
<span aria-hidden="true">✦</span> Volver arriba <span aria-hidden="true">✦</span>
|
||||
<span aria-hidden="true">🎃</span> Volver arriba <span aria-hidden="true">👻</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<nav class="fixed inset-x-0 top-0 z-50 pixel-navbar">
|
||||
<div class="mx-auto max-w-[120rem] px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
|
||||
<a href="#" class="flex items-center gap-3">
|
||||
<div class="pixel-coin" style="width: 20px; height: 20px;"></div>
|
||||
<span class="font-['Press_Start_2P'] text-sm" style="color: var(--pixel-accent-3);"><%= appName %></span>
|
||||
<span class="pixel-star" style="width: 12px; height: 12px;"></span>
|
||||
<div class="pixel-pumpkin" style="width: 20px; height: 20px;"></div>
|
||||
<span class="font-['Press_Start_2P'] text-sm" style="color: var(--pixel-pumpkin);"><%= appName %></span>
|
||||
<span class="pixel-star-halloween">✦</span>
|
||||
</a>
|
||||
<div class="hidden md:flex items-center gap-6">
|
||||
<a href="#primeros-pasos" class="pixel-tooltip" data-tooltip="✨ Empieza aquí">Guía</a>
|
||||
<a href="#primeros-pasos" class="pixel-tooltip" data-tooltip="🎃 Empieza aquí">Guía</a>
|
||||
<a href="#minijuegos" class="pixel-tooltip" data-tooltip="🎮 Juega">Minijuegos</a>
|
||||
<a href="#economia" class="pixel-tooltip" data-tooltip="💰 Gana">Economía</a>
|
||||
<a href="#faq" class="pixel-tooltip" data-tooltip="❓ Ayuda">FAQ</a>
|
||||
<a href="#faq" class="pixel-tooltip" data-tooltip="👻 Ayuda">FAQ</a>
|
||||
</div>
|
||||
<button id="toggle-nav" class="md:hidden" aria-label="Abrir navegación">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
Reference in New Issue
Block a user