Difference between revisions of "Template:MainTemplateModern/styles.css"
(Created page with "<!-- Template:MainTemplateModern/styles.css (TemplateStyles page) --> <!-- Create a separate page at: Template:MainTemplateModern/styles.css --> /* MainTemplateModern — resp...") |
|||
| 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; } | ||
Latest revision as of 16:59, 23 September 2025
/* 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); }
.hf-right .hf-card + .hf-card { margin-top: 0.75rem; }