Difference between revisions of "Template:MainTemplateModern"

From Holdfast: Nations At War
Jump to navigation Jump to search
(Created page with "{{MainTemplateModern | welcome = left|alt=... | blurb = Short description. | sections_title = On this page | sections_content...")
 
Line 1: Line 1:
−
{{MainTemplateModern
+
<!-- Template:MainTemplateModern -->
−
  | welcome          = [[File:Forum Logo.png|left|alt=...]]
+
<!-- Modern, responsive replacement for the table-based MainTemplate. Uses TemplateStyles for CSS. -->
−
  | blurb            = Short description.
+
<!-- Usage: {{MainTemplateModern
 +
  | welcome          = [[File:Forum Logo.png|left|alt=Server Hosting]]
 +
  | 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    = ...
+
  | about_content    = Some about text.
−
  | featured_title  = Featured
+
  | 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]]
+
  | image_content    = [[File:Holdfast screenshot.jpg|frameless|upright=1.1|alt=...]]
−
}}
+
}} -->
 +
 
 +
<noinclude>{{Documentation}}</noinclude>
 +
<templatestyles src="MainTemplateModern/styles.css"/>
 +
 
 +
<!-- Header -->
 +
{{HeaderTemplate|welcome={{{welcome|}}}|blurb={{{blurb|}}}}}
 +
 
 +
<!-- Outer wrapper -->
 +
<div class="hf-main">
 +
  <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 -->
 +
    <main class="hf-center" role="main">
 +
      {{#if:{{{about_content|}}}|
 +
      <section class="hf-card" id="about">
 +
        {{SectionTemplate|title={{{about_title|About}}}|content={{{about_content|}}}}}
 +
      </section>
 +
      }}
 +
 
 +
      {{#if:{{{featured_content|}}}|
 +
      <section class="hf-card" id="featured">
 +
        {{SectionTemplate|title={{{featured_title|Featured}}}|content={{{featured_content|}}}}}
 +
      </section>
 +
      }}
 +
 
 +
      {{#if:{{{news_content|}}}|
 +
      <section class="hf-card" id="news">
 +
        {{SectionTemplate|title={{{news_title|News}}}|content={{{news_content|}}}}}
 +
      </section>
 +
      }}
 +
    </main>
 +
 
 +
    <!-- 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>
 +
</div>
 +
 
 +
__NOTOC__
 +
__NOEDITSECTION__
 +
<noinclude>[[Category:Templates]]</noinclude>
 +
 
 +
 
 +
<!-- 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) */
 +
@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); }

Revision as of 16:54, 23 September 2025


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




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




   </main>



/* 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); }

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