@media screen and (min-width: 1024px) {
- .main-wrapper {
+ .body {
display: flex;
}
- .main {
+ main {
flex: auto;
/* min-width: 0 required for flexbox to constrain overflowing elements */
min-width: 0;
</head>
<body class="status-404">
{{> header}}
-{{> main}}
+{{> body}}
{{> footer}}
</body>
</html>
</head>
<body class="article">
{{> header}}
-{{> main}}
+{{> body}}
{{> footer}}
</body>
</html>
--- /dev/null
+<div class="body">
+{{> nav}}
+{{> main}}
+</div>
+++ /dev/null
-<nav class="crumbs" aria-label="breadcrumbs">
- {{#if page.breadcrumbs}}
- <ul>
- {{#with page.componentVersion}}
- {{#if (and ./title (not (or ./root (eq @root.page.breadcrumbs.0.content ./title))))}}
- <li class="crumb"><a href="{{{relativize @root.page.url ./url}}}">{{{./title}}}</a></li>
- {{/if}}
- {{/with}}
- {{#each page.breadcrumbs}}
- <li class="crumb">
- {{~#if (and ./url (eq ./urlType 'internal'))~}}
- <a href="{{{relativize @root.page.url ./url}}}">{{{./content}}}</a>
- {{~else~}}
- {{{./content}}}
- {{~/if~}}
- </li>
- {{/each}}
- </ul>
- {{/if}}
-</nav>
--- /dev/null
+<nav class="crumbs" aria-label="breadcrumbs">
+ {{#if page.breadcrumbs}}
+ <ul>
+ {{#with page.componentVersion}}
+ {{#if (and ./title (not (or ./root (eq @root.page.breadcrumbs.0.content ./title))))}}
+ <li class="crumb"><a href="{{{relativize @root.page.url ./url}}}">{{{./title}}}</a></li>
+ {{/if}}
+ {{/with}}
+ {{#each page.breadcrumbs}}
+ <li class="crumb">
+ {{~#if (and ./url (eq ./urlType 'internal'))~}}
+ <a href="{{{relativize @root.page.url ./url}}}">{{{./content}}}</a>
+ {{~else~}}
+ {{{./content}}}
+ {{~/if~}}
+ </li>
+ {{/each}}
+ </ul>
+ {{/if}}
+</nav>
--- /dev/null
+{{!-- Add header scripts here --}}
+{{> header-scripts}}
{{> header-content}}
-<div class="main-wrapper">
-{{> navigation}}
- <main class="main">
+<main role="main">
{{> toolbar}}
{{> article}}
- </main>
-</div>
+</main>
--- /dev/null
+<div class="navigation-explore{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore">
+ {{#if page.component}}
+ <div class="context">
+ <span class="title">{{page.component.title}}</span>
+ <span class="version">{{page.componentVersion.displayVersion}}</span>
+ </div>
+ {{/if}}
+ <ul class="components">
+ {{#each site.components}}
+ <li class="component{{#if (eq this @root.page.component)}} is-current{{/if}}">
+ <span class="title">{{{./title}}}</span>
+ <ul class="versions">
+ {{#each ./versions}}
+ <li class="version
+ {{~#if (and (eq ../this @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if~}}
+ {{~#if (eq this ../latestVersion)}} is-latest{{/if}}">
+ <a href="{{{relativize @root.page.url ./url}}}">{{./displayVersion}}</a>
+ </li>
+ {{/each}}
+ </ul>
+ </li>
+ {{/each}}
+ </ul>
+</div>
--- /dev/null
+{{#if page.navigation}}
+<div class="navigation-menu is-active" data-panel="menu">
+ <nav class="nav-menu">
+ <h3 class="title"><a href="{{relativize page.url page.componentVersion.url}}">{{page.component.title}}</a></h3>
+{{> nav-tree navigation=page.navigation}}
+ </nav>
+</div>
+{{/if}}
--- /dev/null
+<button class="navigation-toggle"></button>
--- /dev/null
+{{#if navigation.length}}
+<ul class="nav-list">
+ {{#each navigation}}
+ <li class="nav-item{{#if (eq @root.page.url ./url)}} is-current-page{{/if}}" data-depth="{{or ../level 0}}">
+ {{#if ./content}}
+ {{#if ./items.length}}
+ <button class="nav-toggle"></button>
+ {{/if}}
+ {{#if ./url}}
+ <a class="nav-link" href="
+ {{~#if (eq ./urlType 'internal')}}{{{relativize @root.page.url ./url}}}
+ {{~else}}{{{./url}}}{{~/if}}">{{{./content}}}</a>
+ {{else}}
+ <span class="nav-text">{{{./content}}}</span>
+ {{/if}}
+ {{/if}}
+{{> nav-tree navigation=./items level=(increment ../level)}}
+ </li>
+ {{/each}}
+</ul>
+{{/if}}
--- /dev/null
+<div class="navigation-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
+ <aside class="navigation">
+ <div class="panels">
+{{> nav-menu}}
+{{> nav-explore}}
+ </div>
+ </aside>
+</div>
+++ /dev/null
-<div class="navigation-explore{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore">
- {{#if page.component}}
- <div class="context">
- <span class="title">{{page.component.title}}</span>
- <span class="version">{{page.componentVersion.displayVersion}}</span>
- </div>
- {{/if}}
- <ul class="components">
- {{#each site.components}}
- <li class="component{{#if (eq this @root.page.component)}} is-current{{/if}}">
- <span class="title">{{{./title}}}</span>
- <ul class="versions">
- {{#each ./versions}}
- <li class="version
- {{~#if (and (eq ../this @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if~}}
- {{~#if (eq this ../latestVersion)}} is-latest{{/if}}">
- <a href="{{{relativize @root.page.url ./url}}}">{{./displayVersion}}</a>
- </li>
- {{/each}}
- </ul>
- </li>
- {{/each}}
- </ul>
-</div>
+++ /dev/null
-{{#if page.navigation}}
-<div class="navigation-menu is-active" data-panel="menu">
- <nav class="nav-menu">
- <h3 class="title"><a href="{{relativize page.url page.componentVersion.url}}">{{page.component.title}}</a></h3>
-{{> navigation-tree navigation=page.navigation}}
- </nav>
-</div>
-{{/if}}
+++ /dev/null
-{{#if navigation.length}}
-<ul class="nav-list">
- {{#each navigation}}
- <li class="nav-item{{#if (eq @root.page.url ./url)}} is-current-page{{/if}}" data-depth="{{or ../level 0}}">
- {{#if ./content}}
- {{#if ./items.length}}
- <button class="nav-toggle"></button>
- {{/if}}
- {{#if ./url}}
- <a class="nav-link" href="
- {{~#if (eq ./urlType 'internal')}}{{{relativize @root.page.url ./url}}}
- {{~else}}{{{./url}}}{{~/if}}">{{{./content}}}</a>
- {{else}}
- <span class="nav-text">{{{./content}}}</span>
- {{/if}}
- {{/if}}
-{{> navigation-tree navigation=./items level=(increment ../level)}}
- </li>
- {{/each}}
-</ul>
-{{/if}}
+++ /dev/null
-<div class="navigation-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
- <aside class="navigation">
- <div class="panels">
-{{> navigation-menu}}
-{{> navigation-explore}}
- </div>
- </aside>
-</div>
<div class="toolbar" role="navigation">
- <button class="navigation-toggle"></button>
+{{> nav-toggle}}
{{#if site.homeUrl}}
<a href="{{relativize page.url site.homeUrl}}" class="home-link{{#if page.home}} is-current{{/if}}"></a>
{{/if}}
-{{> breadcrumbs}}
+{{> crumbs}}
{{> page-versions}}
{{#if (and page.editUrl (not page.origin.private))}}
<div class="edit-this-page"><a href="{{page.editUrl}}">Edit this Page</a></div>