internetforkids/layouts/_default/single.html

{{ define "main" }}
<div style="max-width:64rem;margin:0 auto;padding:3rem 1rem;display:grid;grid-template-columns:1fr 240px;gap:3rem">

  {{/* Main article column */}}
  <article>
    <header style="margin-bottom:2rem">
      <h1 style="font-family:var(--ifk-font);font-size:2.75rem;font-weight:600;line-height:1.15;letter-spacing:-0.01em;margin-bottom:1rem">
        {{ .Title }}
      </h1>
      <div style="color:#6b7280;font-family:system-ui,-apple-system,sans-serif;font-size:0.95rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center">
        {{ if .Date }}
        <time datetime="{{ .Date.Format "2006-01-02" }}">
          {{ .Date.Format "January 2, 2006" }}
        </time>
        {{ end }}
        {{ with .Params.author }}
        <span>{{ . }}</span>
        {{ end }}
        {{ if .ReadingTime }}
        <span>{{ .ReadingTime }} min read</span>
        {{ end }}
      </div>

      {{ with .Params.tags }}
      <div style="margin-top:0.75rem;display:flex;gap:0.5rem;flex-wrap:wrap">
        {{ range . }}
        <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" style="font-family:system-ui,sans-serif;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ifk-accent);text-decoration:none;border:1px solid #e5e7eb;padding:0.2rem 0.6rem;border-radius:4px">
          {{ . }}
        </a>
        {{ end }}
      </div>
      {{ end }}
    </header>

    <div class="article-body" style="font-family:var(--ifk-font);font-size:1.375rem;line-height:1.65">
      {{ .Content }}
    </div>

    {{/* Essential reading: link to the layered-protection pillar on every article except itself */}}
    {{ if ne .Params.translationKey "layers-of-protection" }}
      {{ $lang := .Page.Language.Lang }}
      {{ $layers := where (where .Site.AllPages "Params.translationKey" "layers-of-protection") "Lang" $lang }}
      {{ with index $layers 0 }}
      <aside style="margin-top:3rem;padding:1.5rem 1.75rem;border-left:3px solid var(--ifk-accent);background:#f8fafc;border-radius:4px;font-family:system-ui,-apple-system,sans-serif">
        <div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:#6b7280;font-weight:600;margin-bottom:0.5rem">
          {{ if eq $lang "de" }}Weiterführend
          {{ else if eq $lang "fr" }}Lecture essentielle
          {{ else }}Essential reading{{ end }}
        </div>
        <a href="{{ .Permalink }}" style="font-family:var(--ifk-font);font-size:1.15rem;color:var(--ifk-text);text-decoration:none;font-weight:600;line-height:1.3">
          {{ .Title }} &rarr;
        </a>
      </aside>
      {{ end }}
    {{ end }}

    {{ if or .NextInSection .PrevInSection }}
    <nav style="margin-top:3rem;padding-top:2rem;border-top:1px solid #e5e7eb;display:flex;justify-content:space-between;gap:1rem">
      {{ with .PrevInSection }}
      <a href="{{ .Permalink }}" style="flex:1;padding:1rem;border:1px solid #e5e7eb;border-radius:6px;text-decoration:none;color:var(--ifk-text)">
        <div style="font-size:0.75rem;font-family:system-ui,sans-serif;text-transform:uppercase;color:#6b7280;margin-bottom:0.25rem">&larr; {{ i18n "previous" | default "Previous" }}</div>
        <div style="font-family:var(--ifk-font);font-size:1.1rem">{{ .Title }}</div>
      </a>
      {{ end }}
      {{ with .NextInSection }}
      <a href="{{ .Permalink }}" style="flex:1;padding:1rem;border:1px solid #e5e7eb;border-radius:6px;text-decoration:none;color:var(--ifk-text);text-align:right">
        <div style="font-size:0.75rem;font-family:system-ui,sans-serif;text-transform:uppercase;color:#6b7280;margin-bottom:0.25rem">{{ i18n "next" | default "Next" }} &rarr;</div>
        <div style="font-family:var(--ifk-font);font-size:1.1rem">{{ .Title }}</div>
      </a>
      {{ end }}
    </nav>
    {{ end }}
  </article>

  {{/* Sidebar */}}
  <aside style="font-family:system-ui,-apple-system,sans-serif">
    {{/* Table of Contents */}}
    {{ if .TableOfContents }}
    <div style="position:sticky;top:5rem">
      <h3 style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:#6b7280;font-weight:600;margin-bottom:0.75rem">
        {{ i18n "table_of_contents" | default "Contents" }}
      </h3>
      <div id="sidebar-toc" style="font-size:0.8rem;line-height:1.6;border-left:2px solid #e5e7eb;padding-left:0.75rem">
        {{ .TableOfContents }}
      </div>

      {{/* Recent articles */}}
      {{ $pages := where .Site.RegularPages "Section" .Section }}
      {{ $recent := first 5 $pages }}
      {{ if gt (len $recent) 1 }}
      <h3 style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:#6b7280;font-weight:600;margin-top:2rem;margin-bottom:0.75rem">
        {{ i18n "recent_articles" | default "Recent" }}
      </h3>
      <div style="font-size:0.85rem;line-height:1.6">
        {{ range $recent }}
        {{ if ne .Permalink $.Permalink }}
        <a href="{{ .Permalink }}" style="display:block;color:var(--ifk-text);text-decoration:none;padding:0.4rem 0;border-bottom:1px solid #f3f4f6">
          {{ .Title }}
        </a>
        {{ end }}
        {{ end }}
      </div>
      {{ end }}
    </div>
    {{ end }}
  </aside>

</div>

<style>
@media (max-width: 768px) {
  div[style*="grid-template-columns:1fr 240px"] {
    display: block !important;
  }
  div[style*="grid-template-columns:1fr 240px"] > aside {
    display: none;
  }
}
</style>
{{ end }}