Xarkanoth at 16:59, 23 September 2025

2025-09-23T16:59:04Z

Xarkanoth: Created page with " /* MainTemplateModern — resp..."

2025-09-23T16:56:35Z

Created page with "  /* MainTemplateModern — resp..."

New page

/* MainTemplateModern — responsive grid + modern cards */
:root {
--hf-bg: #0e1116;
--hf-card-bg: #161b22;
--hf-border: #2a2f36;
--hf-text: #e6edf3;
--hf-muted: #9aa4b2;
--hf-accent: #3da9fc;
--hf-radius: 14px;
--hf-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Light mode (auto) */
@media (prefers-color-scheme: light) {
:root {
--hf-bg: #f6f7f9;
--hf-card-bg: #ffffff;
--hf-border: #e6e8eb;
--hf-text: #111418;
--hf-muted: #5b6472;
--hf-accent: #1b74e4;
}
}

.hf-main {
background: var(--hf-bg);
margin: 0;
padding: 0.5rem 0 1.5rem 0;
}

.hf-grid {
display: grid;
grid-template-columns: 300px minmax(0, 1fr) 360px;
gap: 1rem;
align-items: start;
}

/* Breakpoints */
@media (max-width: 1280px) {
.hf-grid { grid-template-columns: 280px minmax(0,1fr); }
.hf-right { display:none; }
}

@media (max-width: 980px) {
.hf-grid { grid-template-columns: 1fr; }
.hf-left { order: -1; position: static; }
}

.hf-left {
position: sticky;
top: 0.75rem; /* keeps the section nav visible while scrolling */
}

.hf-center { min-width: 0; }

.hf-right { min-width: 0; }

.hf-card {
background: var(--hf-card-bg);
color: var(--hf-text);
border: 1px solid var(--hf-border);
border-radius: var(--hf-radius);
box-shadow: var(--hf-shadow);
padding: 0; /* SectionTemplate supplies its own padding; keep container clean */
overflow: hidden;
}

/* Optional: tighten spacing between stacked cards */
.hf-center .hf-card + .hf-card { margin-top: 0.75rem; }

/* Right panel image/content tweaks */
.hf-right-card { position: sticky; top: 0.75rem; }
.hf-right-card img { max-width: 100%; height: auto; display: block; }

/* SectionTemplate-specific (safe enhancements) */
.hf-card #mf-content { padding: .5rem .8rem .8rem .8rem; }
.hf-card h2#mf-content {
margin: 0;
border: none;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.04));
color: var(--hf-text);
border: 1px solid var(--hf-border);
border-bottom: none;
font-variant: small-caps;
font-weight: 700;
letter-spacing: .02em;
text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* Lists inside cards */
.hf-card ul { margin: .4rem 0 .4rem 1.2rem; }
.hf-card li { margin: .15rem 0; }

/* Link accents */
.hf-card a { color: var(--hf-accent); text-decoration: none; }
.hf-card a:hover { text-decoration: underline; }

/* Smooth edges for images and tables within cards */
.hf-card img, .hf-card table { border-radius: 10px; }

/* Table polish inside cards */
.hf-card table.wikitable { border-color: var(--hf-border); }
.hf-card table.wikitable th, .hf-card table.wikitable td { border-color: var(--hf-border); }

/* Optional chips row (if you use them inside content) */
.hf-chiprow { display:flex; flex-wrap:wrap; gap:.4rem; margin:.25rem 0 .5rem; }
.hf-chip { border:1px solid var(--hf-border); padding:.2rem .5rem; border-radius:999px; font-size:.9em; color:var(--hf-muted); }

← Older revision		Revision as of 16:59, 23 September 2025
Line 125:		Line 125:
	.hf-chiprow { display:flex; flex-wrap:wrap; gap:.4rem; margin:.25rem 0 .5rem; }		.hf-chiprow { display:flex; flex-wrap:wrap; gap:.4rem; margin:.25rem 0 .5rem; }
	.hf-chip { border:1px solid var(--hf-border); padding:.2rem .5rem; border-radius:999px; font-size:.9em; color:var(--hf-muted); }		.hf-chip { border:1px solid var(--hf-border); padding:.2rem .5rem; border-radius:999px; font-size:.9em; color:var(--hf-muted); }
		+
		+	.hf-right .hf-card + .hf-card { margin-top: 0.75rem; }

Template:MainTemplateModern/styles.css - Revision history

Xarkanoth at 16:59, 23 September 2025

Xarkanoth: Created page with " /* MainTemplateModern — resp..."