doc: fix to show sponsors in narrow view (#4793)

* doc: move sponsorship logos into footer
* doc: move sponsorship logos into bottom of content

Signed-off-by: Outsider <[email protected]>

Author: outsideris

docs/_includes/default.liquid

@@ -25,38 +25,14 @@
 
     <main id="content">{{ content }}</main>
 
-    <aside class="sponsorship">
-      <a
-        href="https://matomo.org/"
-        rel="external noopener"
-        title="Mocha is sponsored by Matomo"
-      >
-        <img src="images/matomo-logo.png?trim" loading="lazy" alt="Matomo logo" />
+    <div class="sponsorship">
+      <a href="https://matomo.org/" rel="external noopener" title="Mocha is sponsored by Matomo">
+        <img src="images/matomo-logo.png?trim" loading="lazy" width="100" alt="Matomo logo">
       </a>
-      <a
-        title="Mocha is an OpenJS Foundation Project"
-        href="https://openjsf.org"
-        rel="external noopener"
-      >
-        <img
-          src="/images/openjsf-logo.svg"
-          loading="lazy"
-          width="300"
-          height="94"
-          alt="OpenJS Foundation Logo"
-        />
+      <a href="https://wallabyjs.com" rel="external noopener" title="Mocha is sponsored by Wallaby" id="wallaby-logo">
+        <img src="https://wallabyjs.com/assets/img/logoWithText.svg" loading="lazy" width="140" alt="Wallaby logo">
       </a>
-      <a
-        href="https://wallabyjs.com"
-        rel="external noopener"
-        title="Mocha is sponsored by Wallaby"
-      >
-        <figure id="wallaby-logo">
-          <img src="images/wallaby-logo.png" loading="lazy" alt="Wallaby logo" />
-          <figcaption>Wallaby</figcaption>
-        </figure>
-      </a>
-    </aside>
+    </div>
 
     <footer>
       <div id="copyright-notice">
@@ -100,6 +76,12 @@
         </p>
       </div>
 
+      <div class="openjsf-logo">
+        <a title="Mocha is an OpenJS Foundation Project" href="https://openjsf.org" rel="external noopener" >
+          <img src="/images/openjsf-logo.svg" loading="lazy" width="120" alt="OpenJS Foundation Logo">
+        </a>
+      </div>
+
       <div id="external-links">
         <ul id="openjsf-links">
           <li>
@@ -148,9 +130,7 @@
         </ul>
         <div class="netlify-badge">
           <a href="https://www.netlify.com">
-            <img
-              src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" loading="lazy"
-            />
+            <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" loading="lazy">
           </a>
         </div>
       </div>

docs/css/style.css

@@ -45,7 +45,7 @@ header {
 }
 
 #content {
-  padding-bottom: 60px;
+  padding-bottom: 30px;
 }
 
 #_header h1 {
@@ -242,31 +242,6 @@ img.screenshot {
   max-width: 100%;
 }
 
-.sponsorship a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.sponsorship a img {
-  display: block;
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-}
-
-.sponsorship {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 60px;
-  align-items: center;
-}
-
-.sponsorship a {
-  padding: 0 40px;
-  text-decoration: none;
-}
-
 footer {
   background-color: #eee;
   border-top: 1px solid #ddd;
@@ -309,12 +284,29 @@ footer {
   content: ' | ';
 }
 
+.openjsf-logo {
+  margin-bottom: 10px;
+}
+
 #external-links .netlify-badge {
   position: absolute;
   right: 0;
   bottom: 0;
 }
 
+.sponsorship {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 30px;
+}
+
+.sponsorship a {
+  display: inline-block;
+  margin-right: 15px;
+  margin-left: 15px;
+}
+
 .dl-inline dt,
 .dl-inline dd {
   display: inline;
@@ -335,23 +327,6 @@ blockquote {
   padding: 10px;
 }
 
-figure#wallaby-logo {
-  vertical-align: top;
-  display: inline-block;
-  text-align: center;
-}
-figure#wallaby-logo figcaption {
-  margin-top: 10px;
-  display: block;
-  font-family: 'Open Sans', -apple-system, system-ui, 'Segoe UI', Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-weight: 400;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-  color: #2c2c2c;
-  -webkit-font-smoothing: antialiased;
-}
-
 table {
   width: 100%;
 }