Primer commit, volcado de todos los archivos
This commit is contained in:
Admin de hacklab
commit
2f96306686
109 changed files with 4567 additions and 0 deletions
212
styles.css
Normal file
212
styles.css
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
/* styles.css — INDEX (botones grandes a pantalla casi completa + marquees laterales) */
|
||||
|
||||
/* Fuentes (opcional) */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
|
||||
|
||||
:root{
|
||||
--bg: #000000;
|
||||
--green: #00ff00;
|
||||
--green-dark: #008000;
|
||||
--pink: #ff69b4;
|
||||
--accent-cyan: #00ffff;
|
||||
--text: #cfcfcf;
|
||||
|
||||
/* Marquees laterales */
|
||||
--marquee-w: 20px;
|
||||
|
||||
/* Alturas para layout index */
|
||||
--header-space: 120px; /* altura aproximada título + marquee superior */
|
||||
--vpad: 28px; /* padding vertical del área de página */
|
||||
--grid-max-w: 1400px; /* ancho máximo de la cuadrícula */
|
||||
}
|
||||
|
||||
/* Reset mínimo */
|
||||
*{ box-sizing:border-box; margin:0; padding:0; }
|
||||
html,body{ height:100%; }
|
||||
|
||||
/* Body base */
|
||||
body{
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: 'Special Elite','Courier New', monospace;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ------------------ Marquees laterales (la versión que pediste) ------------------ */
|
||||
.vertical-marquee {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: var(--marquee-w);
|
||||
background-color: #000;
|
||||
color: var(--green);
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 0.8em;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
}
|
||||
.vertical-marquee.left { left: 0; }
|
||||
.vertical-marquee.right { right: 0; }
|
||||
|
||||
.scrolling-text{
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
text-align: center;
|
||||
color: var(--green);
|
||||
animation: scrollUp 10s linear infinite;
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
padding: 2px 0;
|
||||
}
|
||||
@keyframes scrollUp{
|
||||
0%{ transform: translateY(100%); }
|
||||
100%{ transform: translateY(-100%); }
|
||||
}
|
||||
|
||||
/* ------------------ Contenedor principal entre marquees ------------------ */
|
||||
.page{
|
||||
min-height: 100vh;
|
||||
padding-top: var(--vpad);
|
||||
padding-left: calc(var(--marquee-w) + 18px);
|
||||
padding-right: calc(var(--marquee-w) + 18px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Header / título del index */
|
||||
.site-header{
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
text-align: center;
|
||||
padding: 6px 12px 8px;
|
||||
}
|
||||
.site-header h1{
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: clamp(28px, 5vw, 64px);
|
||||
color: #ff69b4;
|
||||
text-transform: uppercase;
|
||||
text-shadow:
|
||||
3px 3px 0 #ff0000,
|
||||
-1px -1px 0 #ff0000,
|
||||
1px -1px 0 #ff0000,
|
||||
-1px 1px 0 #ff0000,
|
||||
1px 1px 0 #ff0000;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.top-marquee{
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
color: #ff0080;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* ------------------ Zona de botones: ocupar casi toda la pantalla ------------------ */
|
||||
.main-area{
|
||||
width: 100%;
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/* Altura disponible = alto viewport - (título + marquee superior + paddings) */
|
||||
min-height: calc(100vh - var(--header-space) - var(--vpad) - 8px);
|
||||
padding: 10px 0 28px;
|
||||
}
|
||||
|
||||
/* La cuadrícula ocupa casi toda el área disponible */
|
||||
.grid-buttons{
|
||||
width: min(100%, var(--grid-max-w));
|
||||
height: min(78vh, 860px); /* controla altura global de la cuadrícula */
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr; /* 2 filas que crecen para llenar */
|
||||
gap: clamp(12px, 2vw, 24px);
|
||||
align-items: stretch;
|
||||
justify-items: stretch;
|
||||
padding: clamp(6px, 1.2vw, 16px);
|
||||
}
|
||||
|
||||
/* Botones llenan su celda y crecen */
|
||||
.big-button{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
background-color: var(--green);
|
||||
border: 2px solid var(--green);
|
||||
box-shadow: 0 8px var(--green-dark);
|
||||
border-radius: 12px;
|
||||
padding: clamp(10px, 2vw, 24px);
|
||||
|
||||
font-family: 'Special Elite','Courier New', monospace;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
|
||||
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
|
||||
}
|
||||
|
||||
.big-button .title{
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
font-size: clamp(20px, 3.2vw, 36px);
|
||||
text-shadow: 1px 1px 0 var(--accent-cyan);
|
||||
}
|
||||
.big-button .subtitle{
|
||||
margin-top: 8px;
|
||||
color: rgba(0,17,0,0.92);
|
||||
font-size: clamp(12px, 1.6vw, 16px);
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.big-button:hover,
|
||||
.big-button:focus{
|
||||
background-color: var(--pink);
|
||||
color: var(--green);
|
||||
box-shadow: 0 12px var(--green), 0 0 22px var(--pink);
|
||||
transform: translateY(-6px);
|
||||
outline: none;
|
||||
}
|
||||
.big-button:focus-visible{
|
||||
outline: 3px solid rgba(0,255,255,0.14);
|
||||
outline-offset: 6px;
|
||||
}
|
||||
|
||||
/* Responsive: móvil apila los 4, y oculta marquees (como te gustaba) */
|
||||
@media (max-width: 720px){
|
||||
.vertical-marquee{ display: none; }
|
||||
.page{
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
.grid-buttons{
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
height: auto;
|
||||
min-height: 72vh;
|
||||
padding: clamp(2px, 0.6vw, 8px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue