Difference between revisions of "Template:MainTemplateModern"

From Holdfast: Nations At War
Jump to navigation Jump to search
Line 2: Line 2:
 
<!-- Modern, responsive replacement for the table-based MainTemplate. Uses TemplateStyles for CSS. -->
 
<!-- Modern, responsive replacement for the table-based MainTemplate. Uses TemplateStyles for CSS. -->
 
<!-- Usage: {{MainTemplateModern
 
<!-- Usage: {{MainTemplateModern
−
| welcome         = [[File:Forum Logo.png|left|alt=Server Hosting]]
+
| welcome = [[File:Forum Logo.png|left|alt=Server Hosting]]
−
| blurb           = Short description of the page.
+
| blurb = Short description of the page.
−
| sections_title   = On this page
+
| sections_title = On this page
−
| sections_content = * [[#Intro]]\n* [[#Setup]]\n* [[#FAQ]]
+
| sections_content = * [[#Intro]]\n* [[#Setup]]\n* [[#FAQ]]
−
| about_title     = About this wiki
+
| about_title = About this wiki
−
| about_content   = Some about text.
+
| about_content = Some about text.
−
| featured_title   = Featured content
+
| featured_title = Featured content
−
| featured_content = {{:{{FULLPAGENAME}}/Body}}
+
| featured_content = {{:{{FULLPAGENAME}}/Body}}
−
| news_title       = News
+
| news_title = News
−
| news_content     = * 2025-09-23 — Something shipped.
+
| news_content = * 2025-09-23 — Something shipped.
−
| image_content   = [[File:Holdfast screenshot.jpg|frameless|upright=1.1|alt=...]]
+
| image_content = [[File:Holdfast screenshot.jpg|frameless|upright=1.1|alt=...]]
−
}} -->
+
}} -->
 +
 
  
 
<noinclude>{{Documentation}}</noinclude>
 
<noinclude>{{Documentation}}</noinclude>
 
<templatestyles src="MainTemplateModern/styles.css"/>
 
<templatestyles src="MainTemplateModern/styles.css"/>
 +
  
 
<!-- Header -->
 
<!-- Header -->
 
{{HeaderTemplate|welcome={{{welcome|}}}|blurb={{{blurb|}}}}}
 
{{HeaderTemplate|welcome={{{welcome|}}}|blurb={{{blurb|}}}}}
 +
  
 
<!-- Outer wrapper -->
 
<!-- Outer wrapper -->
 
<div class="hf-main">
 
<div class="hf-main">
−
  <div class="hf-grid">
+
<div class="hf-grid">
  
−
    <!-- LEFT / Sections (optional) -->
 
−
    {{#if:{{{sections_content|}}}|
 
−
    <aside class="hf-left" role="complementary">
 
−
      {{SectionTemplate
 
−
        | title  = {{{sections_title|On this page}}}
 
−
        | content = {{{sections_content|}}}
 
−
      }}
 
−
    </aside>
 
−
    }}
 
  
−
    <!-- CENTER / Stacked cards -->
+
<!-- LEFT / Sections (optional) -->
−
    <main class="hf-center" role="main">
+
{{#if:{{{sections_content|}}}|
−
      {{#if:{{{about_content|}}}|
+
<aside class="hf-left" role="complementary">
−
      <section class="hf-card" id="about">
+
{{SectionTemplate
−
        {{SectionTemplate|title={{{about_title|About}}}|content={{{about_content|}}}}}
+
| title = {{{sections_title|On this page}}}
−
      </section>
+
| content = {{{sections_content|}}}
−
      }}
+
}}
 +
</aside>
 +
}}
  
−
      {{#if:{{{featured_content|}}}|
 
−
      <section class="hf-card" id="featured">
 
−
        {{SectionTemplate|title={{{featured_title|Featured}}}|content={{{featured_content|}}}}}
 
−
      </section>
 
−
      }}
 
  
−
      {{#if:{{{news_content|}}}|
+
<!-- CENTER / Stacked cards -->
−
      <section class="hf-card" id="news">
+
<main class="hf-center" role="main">
−
        {{SectionTemplate|title={{{news_title|News}}}|content={{{news_content|}}}}}
+
{{#if:{{{about_content|}}}|
−
      </section>
+
<section class="hf-card" id="about">
−
      }}
+
{{SectionTemplate|title={{{about_title|About}}}|content={{{about_content|}}}}}
−
    </main>
+
</section>
 +
}}
  
−
    <!-- RIGHT / Image or custom (optional) -->
 
−
    {{#if:{{{image_content|}}}|
 
−
    <aside class="hf-right" role="complementary">
 
−
      <div class="hf-card hf-right-card">
 
−
        {{{image_content|}}}
 
−
      </div>
 
−
    </aside>
 
−
    }}
 
  
−
  </div>
+
{{#if:{{{featured_content|}}}|
−
</div>
+
<section class="hf-card" id="featured">
 +
{{SectionTemplate|title={{{featured_title|Featured}}}|content={{{featured_content|}}}}}
 +
</section>
 +
}}
  
−
__NOTOC__
 
−
__NOEDITSECTION__
 
−
<noinclude>[[Category:Templates]]</noinclude>
 
  
 +
{{#if:{{{news_content|}}}|
 +
<section class="hf-card" id="news">
 +
{{SectionTemplate|title={{{news_title|News}}}|content={{{news_content|}}}}}
 +
</section>
 +
}}
 +
</main>
  
−
<!-- Template:MainTemplateModern/styles.css (TemplateStyles page) -->
 
−
<!-- Create a separate page at: Template:MainTemplateModern/styles.css -->
 
−
/* 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) */
+
<!-- RIGHT / Image or custom (optional) -->
−
@media (prefers-color-scheme: light) {
+
{{#if:{{{image_content|}}}|
−
  :root {
+
<aside class="hf-right" role="complementary">
−
    --hf-bg: #f6f7f9;
+
<div class="hf-card hf-right-card">
−
    --hf-card-bg: #ffffff;
+
{{{image_content|}}}
−
    --hf-border: #e6e8eb;
+
</div>
−
    --hf-text: #111418;
+
</aside>
−
    --hf-muted: #5b6472;
+
}}
−
    --hf-accent: #1b74e4;
 
−
  }
 
−
}
 
  
−
.hf-main {
 
−
  background: var(--hf-bg);
 
−
  margin: 0;
 
−
  padding: 0.5rem 0 1.5rem 0;
 
−
}
 
  
−
.hf-grid {
+
</div>
−
  display: grid;
+
</div>
−
  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) {
+
__NOTOC__
−
  .hf-grid { grid-template-columns: 1fr; }
+
__NOEDITSECTION__
−
  .hf-left { order: -1; position: static; }
+
<noinclude>[[Category:Templates]]</noinclude>
−
}
 
−
 
 
−
.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); }
 

Revision as of 16:55, 23 September 2025



<templatestyles src="MainTemplateModern/styles.css"/>





<main class="hf-center" role="main">




</main>



Retrieved from "https://wiki.holdfastgame.com/index.php?title=Template:MainTemplateModern&oldid=3641"