From 2a579e546cb97e7aa33e8ff4685219974087df41 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 17 Jun 2017 10:28:19 -0700
Subject: [PATCH] use flexbox order property to change order of content for
screenreaders
---
_layouts/docs.html | 13 +++++++------
assets/scss/_content.scss | 2 ++
assets/scss/_sidebar.scss | 2 ++
3 files changed, 11 insertions(+), 6 deletions(-)
diff --git a/_layouts/docs.html b/_layouts/docs.html
index feecf38759..2e0e1e85df 100644
--- a/_layouts/docs.html
+++ b/_layouts/docs.html
@@ -17,18 +17,19 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
{% include docs-sidebar.html %}
</div>
- <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
- <h1 class="bd-title" id="content">{{ page.title }}</h1>
- <p class="bd-lead">{{ page.description }}</p>
- {% include ads.html %}
- {{ content }}
- </main>
{% if page.toc %}
<div class="d-none d-xl-block col-xl-2 bd-toc">
{{ content | toc_only }}
</div>
{% endif %}
+
+ <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
+ <h1 class="bd-title" id="content">{{ page.title }}</h1>
+ <p class="bd-lead">{{ page.description }}</p>
+ {% include ads.html %}
+ {{ content }}
+ </main>
</div>
</div>
diff --git a/assets/scss/_content.scss b/assets/scss/_content.scss
index e617b8b5b2..70b4969bac 100644
--- a/assets/scss/_content.scss
+++ b/assets/scss/_content.scss
@@ -5,6 +5,8 @@
//
.bd-content {
+ order: 1;
+
// Hack the sticky header
> h2[id],
> h3[id],
diff --git a/assets/scss/_sidebar.scss b/assets/scss/_sidebar.scss
index ea78daa8f7..b8f311f209 100644
--- a/assets/scss/_sidebar.scss
+++ b/assets/scss/_sidebar.scss
@@ -10,6 +10,7 @@
top: 4rem;
max-height: calc(100vh - 4rem);
}
+ order: 2;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
overflow-x: visible;
@@ -49,6 +50,7 @@
//
.bd-sidebar {
+ order: 0;
background-color: #f5f2f9;
border-bottom: 1px solid rgba(0,0,0,.1);
--
GitLab