blob: 9ce0dd1fe2ee39520204db17bb7fc3ead9541e0d [file] [log] [blame]
<!--
Copyright 2021 The Go Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
{{define "title"}}<title>Style Guide ยท pkg.go.dev</title>{{end}}
{{define "pre-content"}}
<link href="/static/frontend/unit/unit.css" rel="stylesheet">
<link href="/static/frontend/styleguide/styleguide.css" rel="stylesheet">
{{end}}
{{define "post-content"}}
<script type="module">
loadScript("/static/frontend/unit/unit.js", {async: true})
loadScript("/static/frontend/styleguide/styleguide.js", {async: true})
</script>
{{end}}
{{define "main"}}
<main class="go-Main">
<header class="go-Main-header js-mainHeader">
{{- block "main-header" .}}{{end -}}
</header>
<aside class="js-mainAside"></aside>
<nav class="go-Main-nav go-Main-nav--sticky js-mainNav" aria-label="Outline">
{{- block "main-nav" .}}{{end -}}
</nav>
<article class="go-Main-article js-mainContent">
{{- block "main-content" .}}{{end -}}
</article>
</main>
{{end}}
{{define "main-header"}}
<nav class="go-Main-headerBreadcrumb go-Breadcrumb" aria-label="Breadcrumb">
<ol>
<li><a href="/" data-gtmc="breadcrumb link">Discover Packages</a></li>
<li>
<a href="#breadcrumb" data-gtmc="breadcrumb link" aria-current="location">Style Guide</a>
</li>
</ol>
</nav>
<div class="go-Main-headerContent">
<div class="go-Main-headerTitle">
<a class="go-Main-headerLogo" href="https://go.dev/" aria-hidden="true" tabindex="-1" data-gtmc="header link"
aria-label="Link to Go Homepage">
<img height="78" width="207" src="/static/shared/logo/go-blue.svg" alt="Go">
</a>
<h1>Style Guide</h1>
</div>
<div class="go-Main-headerDetails">
<fieldset class="go-Main-headerDetailItem go-Label go-Label--inline MainHeader-toggle">
<legend>Theme</legend>
<div class="go-InputGroup">
<button class="go-Button go-Button--inverted js-toggleTheme" data-value="light" title="Light"
aria-label="Set light theme">
<img class="go-Icon" height="24" width="24" src="/static/shared/icon/light_mode_gm_grey_24dp.svg"
alt="">
</button>
<button class="go-Button go-Button--inverted js-toggleTheme" data-value="dark" title="Dark"
aria-label="Set dark theme">
<img class="go-Icon" height="24" width="24" alt=""
src="/static/shared/icon/brightness_2_gm_grey_24dp.svg">
</button>
</div>
</fieldset>
<fieldset class="go-Main-headerDetailItem go-Label go-Label--inline MainHeader-toggle">
<legend>Layout</legend>
<div class="go-InputGroup">
<button class="go-Button go-Button--inverted js-toggleLayout" data-value="responsive"
title="Responsive" aria-label="Set responsive layout">
<img class="go-Icon" height="24" width="24" src="/static/shared/icon/responsive_layout_gm_grey_24dp.svg"
alt="">
</button>
<button class="go-Button go-Button--inverted js-toggleLayout" data-value="stacked"
title="Stacked" aria-label="Set stacked layout">
<img class="go-Icon" height="24" width="24" src="/static/shared/icon/table_rows_gm_grey_24dp.svg"
alt="">
</button>
<button class="go-Button go-Button--inverted js-toggleLayout" data-value="compact"
title="Compact" aria-label="Set compact layout">
<img class="go-Icon" height="24" width="24" src="/static/shared/icon/toolbar_gm_grey_24dp.svg"
alt="">
</button>
</div>
</fieldset>
</div>
</div>
{{end}}
{{define "main-nav"}}
<div class="go-Main-navDesktop">
{{template "tree-nav" .Outline}}
</div>
<div class="go-Main-navMobile js-mainNavMobile">
<!-- Generated -->
</div>
{{end}}
{{define "main-content"}}
<div class="StyleGuide">
{{range .Sections}}
<section class="{{.Title}}">
{{.Content}}
</section>
{{end}}
</div>
{{end}}