diff options
author | Gaƫl Poupard <ffoodd@users.noreply.github.com> | 2020-09-10 12:33:11 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-09-10 12:33:11 +0300 |
commit | 28a92234e5f780e4d39261018b5d4b428914eac5 (patch) | |
tree | b8749b436b96307d93dd1ad650f7f372ec885855 /site | |
parent | cbe4daff6fe9f9623512154278d9cdbdba9421c8 (diff) |
docs(layout): ensure content sits in main (#31610)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'site')
-rw-r--r-- | site/assets/scss/_layout.scss | 34 | ||||
-rw-r--r-- | site/layouts/_default/docs.html | 52 |
2 files changed, 51 insertions, 35 deletions
diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss index 4d43276a09..707c4949d1 100644 --- a/site/assets/scss/_layout.scss +++ b/site/assets/scss/_layout.scss @@ -2,20 +2,12 @@ @include media-breakpoint-up(md) { display: grid; gap: $grid-gutter-width; - grid-template-areas: - "sidebar intro" - "sidebar toc" - "sidebar content"; + grid-template-areas: "sidebar main"; grid-template-columns: 1fr 3fr; - grid-template-rows: auto auto 1fr; } @include media-breakpoint-up(lg) { - grid-template-areas: - "sidebar intro toc" - "sidebar content toc"; - grid-template-columns: 1fr 4fr 1fr; - grid-template-rows: auto 1fr; + grid-template-columns: 1fr 5fr; } } @@ -23,6 +15,28 @@ grid-area: sidebar; } +.bd-main { + grid-area: main; + + @include media-breakpoint-up(md) { + display: grid; + gap: inherit; + grid-template-areas: + "intro" + "toc" + "content"; + grid-template-rows: auto auto 1fr; + } + + @include media-breakpoint-up(lg) { + grid-template-areas: + "intro toc" + "content toc"; + grid-template-columns: 4fr 1fr; + grid-template-rows: auto 1fr; + } +} + .bd-intro { grid-area: intro; } diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index e75a6a3f4e..5d390a5f80 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -10,41 +10,43 @@ {{ partial "docs-subnav" . }} <div class="container-xxl my-4 bd-layout"> - <div class="bd-sidebar"> + <aside class="bd-sidebar"> {{ partial "docs-sidebar" . }} - </div> + </aside> - <div class="bd-intro pt-md-3 pl-lg-4"> - <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> - <a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="{{ .Site.Params.repo }}/tree/main/site/content/{{ .Page.File.Path }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a> - <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1> + <main class="bd-main order-1"> + <div class="bd-intro pt-md-3 pl-lg-4"> + <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> + <a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="{{ .Site.Params.repo }}/tree/main/site/content/{{ .Page.File.Path }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a> + <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1> + </div> + <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p> + {{ partial "ads" . }} </div> - <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p> - {{ partial "ads" . }} - </div> - {{ if (eq .Page.Params.toc true) }} + {{ if (eq .Page.Params.toc true) }} <div class="bd-toc pl-xl-3 text-muted mb-lg-5"> <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong> {{ .TableOfContents }} </div> - {{ end }} - - <main class="bd-content order-1 pl-lg-4"> - {{ if .Page.Params.sections }} - <div class="row g-3"> - {{ range .Page.Params.sections }} - <div class="col-md-6"> - <a class="d-block text-decoration-none" href="../{{ urlize .title }}/"> - <strong class="d-block h5 mb-0">{{ .title }}</strong> - <span class="text-secondary">{{ .description }}</span> - </a> - </div> - {{ end }} - </div> {{ end }} - {{ .Content }} + <div class="bd-content pl-lg-4"> + {{ if .Page.Params.sections }} + <div class="row g-3"> + {{ range .Page.Params.sections }} + <div class="col-md-6"> + <a class="d-block text-decoration-none" href="../{{ urlize .title }}/"> + <strong class="d-block h5 mb-0">{{ .title }}</strong> + <span class="text-secondary">{{ .description }}</span> + </a> + </div> + {{ end }} + </div> + {{ end }} + + {{ .Content }} + </div> </main> </div> |