doc: move sponsorship logos into bottom of content

Signed-off-by: Outsider <outsideris@gmail.com>
mochajs · Feb 4, 2022 · bddc02e · bddc02e
1 parent 47ce564
commit bddc02e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 21 deletions.
diff --git a/docs/_includes/default.liquid b/docs/_includes/default.liquid
@@ -25,6 +25,15 @@
 
     <main id="content">{{ content }}</main>
 
+    <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 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>
+    </div>
+
     <footer>
       <div id="copyright-notice">
         <a rel="home" href="https://mochajs.org/">mochajs.org</a> is licensed
@@ -67,16 +76,10 @@
         </p>
       </div>
 
-      <div class="sponsorship">
+      <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>
-        <a href="https://matomo.org/" rel="external noopener" title="Mocha is sponsored by Matomo">
-          <img src="images/matomo-logo.png?trim" loading="lazy" width="80" alt="Matomo logo">
-        </a>
-        <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="120" alt="Wallaby logo">
-        </a>
       </div>
 
       <div id="external-links">

diff --git a/docs/css/style.css b/docs/css/style.css
@@ -45,7 +45,7 @@ header {
 }
 
 #content {
-  padding-bottom: 60px;
+  padding-bottom: 30px;
 }
 
 #_header h1 {
@@ -284,6 +284,10 @@ footer {
   content: ' | ';
 }
 
+.openjsf-logo {
+  margin-bottom: 10px;
+}
+
 #external-links .netlify-badge {
   position: absolute;
   right: 0;
@@ -293,23 +297,14 @@ footer {
 .sponsorship {
   display: flex;
   align-items: center;
+  justify-content: center;
+  margin-bottom: 30px;
 }
 
 .sponsorship a {
   display: inline-block;
-  margin-right: 10px;
-  margin-bottom: 0;
-}
-
-@media all and (max-width: 400px) {
-  .sponsorship {
-    display: block;
-  }
-
-  .sponsorship a {
-    display: block;
-    margin-bottom: 10px;
-  }
+  margin-right: 15px;
+  margin-left: 15px;
 }
 
 .dl-inline dt,