jbergner
33e971bab7
All checks were successful
release-tag / release-image (push) Successful in 1m57s
177 lines
7.1 KiB
HTML
177 lines
7.1 KiB
HTML
{{define "background.html"}}
|
|
<!doctype html>
|
|
<html lang="{{.Lang}}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>{{.Background.Title}} · {{.Name}}</title>
|
|
<meta name="description" content="{{.Background.MetaDescription}}">
|
|
<link rel="canonical" href="{{.BaseURL}}/background?lang={{.Lang}}">
|
|
{{range .LanguageLinks}}<link rel="alternate" hreflang="{{.Code}}" href="{{.AbsoluteURL}}">{{end}}
|
|
<link rel="alternate" hreflang="x-default" href="{{.DefaultLanguageURL}}">
|
|
{{if not .WhiteLabel}}
|
|
<meta name="theme-color" content="#F8FAFC">
|
|
<link rel="icon" href="/static/brand/favicon.ico" sizes="any">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/static/brand/ucng-icon-32.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="/static/brand/ucng-icon-192.png">
|
|
<link rel="icon" type="image/png" sizes="512x512" href="/static/brand/ucng-icon-512.png">
|
|
<link rel="apple-touch-icon" sizes="192x192" href="/static/brand/ucng-icon-192.png">
|
|
<meta property="og:image" content="{{.BaseURL}}/static/brand/ucng-open-graph.png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
{{end}}
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body class="background-page">
|
|
<header class="site-header background-header">
|
|
<a class="brand" href="/?lang={{.Lang}}">{{if .WhiteLabel}}<span class="brand-text">{{.Name}}</span>{{else}}<img src="/static/brand/ucng-logo.png" width="800" height="233" alt="UCNG — Universal Content Notation Guidelines">{{end}}</a>
|
|
<nav>
|
|
<a href="/product?lang={{.Lang}}">{{.Background.NavProduct}}</a>
|
|
<a href="/?lang={{.Lang}}#generator">{{.Background.NavGenerator}}</a>
|
|
<a href="/background?lang={{.Lang}}" aria-current="page">{{.Background.NavBackground}}</a>
|
|
</nav>
|
|
<form class="language-switch" method="get" action="/background">
|
|
<label for="background-language" class="sr-only">{{.Background.LanguageLabel}}</label>
|
|
<select id="background-language" name="lang" data-language-switch>
|
|
{{range .Languages}}<option value="{{.Code}}" {{if eq $.Lang .Code}}selected{{end}}>{{.Name}}</option>{{end}}
|
|
</select>
|
|
<noscript><button type="submit">OK</button></noscript>
|
|
</form>
|
|
</header>
|
|
|
|
<main class="background-main">
|
|
<section class="background-hero">
|
|
<div class="background-hero-copy">
|
|
<p class="eyebrow">{{.Background.Eyebrow}}</p>
|
|
<h1>{{.Background.Title}}</h1>
|
|
<p class="lead">{{.Background.Lead}}</p>
|
|
</div>
|
|
<aside class="legal-status" aria-label="{{.Background.StatusTitle}}">
|
|
<p class="feature-kicker">{{.Background.StatusKicker}}</p>
|
|
<h2>{{.Background.StatusTitle}}</h2>
|
|
<p>{{.Background.StatusText}}</p>
|
|
</aside>
|
|
</section>
|
|
|
|
<nav class="background-toc" aria-labelledby="background-toc-title">
|
|
<p id="background-toc-title" class="eyebrow">{{.Background.ContentsTitle}}</p>
|
|
<ol>
|
|
<li><a href="#overview">{{index .Background.Contents 0}}</a></li>
|
|
<li><a href="#scope">{{index .Background.Contents 1}}</a></li>
|
|
<li><a href="#articles">{{index .Background.Contents 2}}</a></li>
|
|
<li><a href="#requirements">{{index .Background.Contents 3}}</a></li>
|
|
<li><a href="#standard">{{index .Background.Contents 4}}</a></li>
|
|
<li><a href="#sources">{{index .Background.Contents 5}}</a></li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<article class="background-article">
|
|
<section id="overview" class="background-section prose-section">
|
|
<p class="section-number">01</p>
|
|
<div>
|
|
<h2>{{.Background.OverviewTitle}}</h2>
|
|
{{range .Background.OverviewParagraphs}}<p>{{.}}</p>{{end}}
|
|
</div>
|
|
</section>
|
|
|
|
<section id="scope" class="background-section">
|
|
<p class="section-number">02</p>
|
|
<div>
|
|
<div class="section-heading compact">
|
|
<h2>{{.Background.ScopeTitle}}</h2>
|
|
<p>{{.Background.ScopeLead}}</p>
|
|
</div>
|
|
<div class="legal-card-grid">
|
|
{{range .Background.Obligations}}
|
|
<article class="legal-card">
|
|
<p class="feature-kicker">{{.Kicker}}</p>
|
|
<h3>{{.Title}}</h3>
|
|
<p>{{.Description}}</p>
|
|
</article>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="articles" class="background-section">
|
|
<p class="section-number">03</p>
|
|
<div>
|
|
<div class="section-heading compact">
|
|
<h2>{{.Background.ArticleTitle}}</h2>
|
|
<p>{{.Background.ArticleLead}}</p>
|
|
</div>
|
|
<div class="scenario-list">
|
|
{{range .Background.Scenarios}}
|
|
<article class="scenario-row">
|
|
<div><span class="scenario-status">{{.Status}}</span></div>
|
|
<div><h3>{{.Title}}</h3><p>{{.Description}}</p></div>
|
|
</article>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="requirements" class="background-section">
|
|
<p class="section-number">04</p>
|
|
<div>
|
|
<div class="section-heading compact">
|
|
<h2>{{.Background.RequirementsTitle}}</h2>
|
|
<p>{{.Background.RequirementsLead}}</p>
|
|
</div>
|
|
<div class="principle-grid">
|
|
{{range .Background.Principles}}
|
|
<article class="principle-card">
|
|
<p class="feature-kicker">{{.Kicker}}</p>
|
|
<h3>{{.Title}}</h3>
|
|
<p>{{.Description}}</p>
|
|
</article>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="standard" class="background-section prose-section">
|
|
<p class="section-number">05</p>
|
|
<div>
|
|
<h2>{{.Background.ProjectTitle}}</h2>
|
|
{{range .Background.ProjectParagraphs}}<p>{{.}}</p>{{end}}
|
|
<ul class="project-scope-list">{{range .Background.ProjectItems}}<li>{{.}}</li>{{end}}</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="sources" class="background-section">
|
|
<p class="section-number">06</p>
|
|
<div>
|
|
<div class="section-heading compact">
|
|
<h2>{{.Background.SourcesTitle}}</h2>
|
|
<p>{{.Background.SourcesLead}}</p>
|
|
</div>
|
|
<div class="source-list">
|
|
{{range .Background.Sources}}
|
|
<a class="source-card" href="{{.URL}}" target="_blank" rel="noopener noreferrer">
|
|
<span><strong>{{.Title}}</strong><small>{{.Description}}</small></span>
|
|
<span aria-hidden="true">↗</span>
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
|
|
<aside class="background-disclaimer">
|
|
<h2>{{.Background.DisclaimerTitle}}</h2>
|
|
<p>{{.Background.DisclaimerText}}</p>
|
|
</aside>
|
|
|
|
<section class="background-cta">
|
|
<div><h2>{{.Background.CTATitle}}</h2><p>{{.Background.CTALead}}</p></div>
|
|
<a class="button primary" href="/?lang={{.Lang}}#generator">{{.Background.CTAButton}}</a>
|
|
</section>
|
|
</main>
|
|
|
|
<footer><span>{{if not .WhiteLabel}}{{.Background.Footer}}{{end}}</span><span><a href="/legal?lang={{.Lang}}">{{legalLabel .Lang "legal"}}</a> · <a href="/privacy?lang={{.Lang}}">{{legalLabel .Lang "privacy"}}</a> · <a href="/accessibility?lang={{.Lang}}">{{legalLabel .Lang "accessibility"}}</a></span></footer>
|
|
<script src="/static/marketing.js" defer></script>
|
|
</body>
|
|
</html>
|
|
{{end}}
|