Combine three super footer elements into one section (#16724)

* Combine three super footer elements into one section

* Update support-section.html

* Update heading font sizes

Author: heiskr

includes/article.html

@@ -69,8 +69,6 @@ <h2 id="in-this-article" class="f5 mb-2"><a class="link-gray-dark" href="#in-thi
       {% if currentLearningTrack and currentLearningTrack.trackName %}
         {% include learning-track-nav %}
       {% endif %}
-      {% include helpfulness %}
-      {% unless page.hidden %}{% include contribution %}{% endunless %}
     </div>
   </article>
 </div>

includes/contribution.html

@@ -1,6 +1,6 @@
 {% unless enterpriseServerReleases.isOldestReleaseDeprecated and currentVersion contains enterpriseServerReleases.oldestSupported %}
-<div class="mt-3 f5 contribution">
-  <h2 class="f5">{% data ui.contribution_cta.title %}</h2>
+<div class="f5 contribution">
+  <h2 class="f4">{% data ui.contribution_cta.title %}</h2>
   <p class="text-gray f6">{% data ui.contribution_cta.body %}</p>
   <a class="btn btn-outline" href={{ "https://github.com/github/docs/edit/main/content/" | append: page.relativePath }}>
     {% octicon "git-pull-request" height="16" %}

includes/helpfulness.html

@@ -1,10 +1,10 @@
 {% unless enterpriseServerReleases.isOldestReleaseDeprecated and currentVersion contains enterpriseServerReleases.oldestSupported %}
-<form class="js-helpfulness mt-4 f5">
+<form class="js-helpfulness f5">
   <h2
     data-help-start
     data-help-yes
     data-help-no
-    class="mb-1 f5"
+    class="mb-1 f4"
   >
     {% data ui.helpfulness.able_to_find %}
   </h2>

includes/support-section.html

@@ -0,0 +1,13 @@
+<section class="mt-lg-9 py-7 px-3 px-md-6 no-print" style="background:#fafbfc">
+  <div class="container-xl gutter-lg-spacious clearfix">
+    <div class="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0 float-left">
+      {% include helpfulness %}
+    </div>
+    <div class="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0 float-left">
+      {% include contribution %}
+    </div>
+    <div class="col-12 col-lg-12 col-xl-4 float-left">
+      {% include support %}
+    </div>
+  </div>
+</section>

includes/support.html

@@ -1,17 +1,15 @@
 <!-- Contact support banner -->
-<section class="mt-lg-9 py-7 no-print js-support-banner" style="background-color: #fafbfc;">
-  <div class="container-xl px-3 px-md-6 ">
-    <h3 class="mb-2 f4">
-      {% data ui.support.still_need_help %}
-    </h3>
-    {% if currentVersion contains 'enterprise' %}{% assign isEnterprise = true %}{% else %}{% assign isEnterprise = false %}{% endif %}
-    <a id="ask-community" href="https://github.community" class="btn btn-outline mr-4 mt-2">
-      {% octicon "people" width="16" %}
-      {% data ui.support.ask_community %}
-    </a>
-    <a id="contact-us" href="{% unless isEnterprise %}https://support.github.com/contact{% else %}https://enterprise.github.com/support{% endunless %}" class="btn btn-outline mt-2">
-      {% octicon "comment-discussion" width="16" %}
-      {% data ui.support.contact_support %}
-    </a>
-  </div>
-</section>
+<div>
+  <h3 class="mb-2 f4">
+    {% data ui.support.still_need_help %}
+  </h3>
+  {% if currentVersion contains 'enterprise' %}{% assign isEnterprise = true %}{% else %}{% assign isEnterprise = false %}{% endif %}
+  <a id="ask-community" href="https://github.community" class="btn btn-outline mr-4 mt-2">
+    {% octicon "people" width="16" %}
+    {% data ui.support.ask_community %}
+  </a>
+  <a id="contact-us" href="{% unless isEnterprise %}https://support.github.com/contact{% else %}https://enterprise.github.com/support{% endunless %}" class="btn btn-outline mt-2">
+    {% octicon "comment-discussion" width="16" %}
+    {% data ui.support.contact_support %}
+  </a>
+</div>

layouts/default.html

@@ -13,7 +13,7 @@
       {% else %}
         {% include article %}
       {% endif %}
-      {% include support %}
+      {% include support-section %}
       {% include small-footer %}
     </main>
   </body>