docs(home): wrap all content in <main> & use <section> (twbs#31580)

Co-authored-by: XhmikosR <[email protected]>
olsza · Oct 3, 2020 · 2530891 · 2530891
1 parent 3b70553
commit 2530891
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/site/layouts/_default/home.html b/site/layouts/_default/home.html
@@ -8,8 +8,10 @@
 
     {{ partial "docs-navbar" . }}
 
-    {{ partial "home/masthead" . }}
-    {{ partial "home/masthead-followup" . }}
+    <main>
+      {{ partial "home/masthead" . }}
+      {{ partial "home/masthead-followup" . }}
+    </main>
 
     {{ .Content }}
 

diff --git a/site/layouts/partials/home/masthead-followup.html b/site/layouts/partials/home/masthead-followup.html
@@ -1,5 +1,5 @@
 <div class="container masthead-followup px-4 px-md-3">
-  <div class="row mb-5 pb-md-4 align-items-center">
+  <section class="row mb-5 pb-md-4 align-items-center">
     <div class="col-md-5">
       <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-success">
         {{ partial "icons/code.svg" (dict "width" "32" "height" "32") }}
@@ -15,9 +15,9 @@ <h2 class="display-5 font-weight-normal">Installation</h2>
       {{ highlight "npm install bootstrap" "sh" "" }}
       {{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}
     </div>
-  </div>
+  </section>
 
-  <div class="row mb-5 pb-md-4 align-items-center">
+  <section class="row mb-5 pb-md-4 align-items-center">
     <div class="col-md-5">
       <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-primary">
         {{ partial "icons/cloud-fill.svg" (dict "width" "32" "height" "32") }}
@@ -39,9 +39,9 @@ <h2 class="display-5 font-weight-normal">BootstrapCDN</h2>
 <script src="%s" integrity=%q crossorigin="anonymous"></script>
 `) .Site.Params.cdn.popper (.Site.Params.cdn.popper_hash | safeHTMLAttr) .Site.Params.cdn.js (.Site.Params.cdn.js_hash | safeHTMLAttr)) "html" "" }}
     </div>
-  </div>
+  </section>
 
-  <div class="row mb-5 pb-md-4 align-items-center">
+  <section class="row mb-5 pb-md-4 align-items-center">
     <div class="col-md-5">
       <div class="masthead-followup-icon d-inline-block mb-2 text-white bd-bg-purple-bright">
         {{ partial "icons/circle-square.svg" (dict "width" "32" "height" "32") }}
@@ -61,9 +61,9 @@ <h2 class="display-5 font-weight-normal">Bootstrap Icons</h2>
                                                src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png"
                                                alt="Bootstrap Icons" width="966" height="600" loading="lazy">
     </div>
-  </div>
+  </section>
 
-  <div class="row mb-5 pb-md-4 align-items-center">
+  <section class="row mb-5 pb-md-4 align-items-center">
     <div class="col-md-5">
       <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
         {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
@@ -83,5 +83,5 @@ <h2 class="display-5 font-weight-normal">Official Themes</h2>
                                                src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png"
                                                alt="Bootstrap Icons" width="700" height="500" loading="lazy">
     </div>
-  </div>
+  </section>
 </div>
diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
@@ -1,4 +1,4 @@
-<main class="bd-masthead mb-3 mb-md-5" id="content">
+<div class="bd-masthead mb-3 mb-md-5" id="content">
   <div class="container px-4 px-md-3">
     <div class="row align-items-lg-center">
       <div class="col-8 mx-auto col-md-4 order-md-2 col-lg-5">
@@ -23,4 +23,4 @@ <h1 class="mb-3">Build fast, responsive sites with Bootstrap</h1>
     </div>
     {{ partial "ads.html" . }}
   </div>
-</main>
+</div>