Improve sponsors and backers layout on homepage

sinonjs · Mar 27, 2021 · 6e32a9b · 6e32a9b
1 parent e86b23e
commit 6e32a9b
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 94 deletions.
diff --git a/docs/_layouts/homepage.html b/docs/_layouts/homepage.html
@@ -24,7 +24,9 @@ <h1>
             }}" alt="">Star Sinon.JS on Github</a
           >
         </p>
+      </div>
 
+      <div class="container">
         <div class="backed">
           <div class="wrap">
             <p class="centre-line">
@@ -123,15 +125,15 @@ <h1>
               </a>
             </div>
             <div class="backer">
-              <span>Become a sponsor and get your logo on our README on GitHub with a link to your site.</span>
-              <a
-                class="btn btn-primary"
-                target="blank"
-                href="https://opencollective.com/sinon/"
-                >Become a sponsor</a
-              >
+              <a target="blank" href="https://opencollective.com/sinon/">
+                Become a sponsor and get your logo on our README on GitHub with a link to your site
+              </a>
             </div>
+          </div>
+        </div>
 
+        <div class="backed">
+          <div class="wrap">
             <p class="centre-line">
               <span>Proudly Backed By</span>
             </p>
@@ -229,16 +231,9 @@ <h1>
             </div>
           </div>
           <div class="backer">
-            <span
-              >Become a backer and support Sinon.JS with a monthly
-              donation.</span
-            >
-            <a
-              class="btn btn-primary"
-              target="blank"
-              href="https://opencollective.com/sinon/"
-              >Become a backer</a
-            >
+            <a target="blank" href="https://opencollective.com/sinon/">
+              Become a backer and support Sinon.JS with a monthly donation.
+            </a>
           </div>
         </div>
       </div>

diff --git a/docs/_sass/_base.scss b/docs/_sass/_base.scss
@@ -45,9 +45,6 @@ a {
         position: relative;
         margin-top: 60px;
 
-        &:first-child {
-            margin-top: 0px;
-        }
         &:before {
             content: "";
             width: 34px;
@@ -193,26 +190,22 @@ a {
                 margin-bottom: 20px;
             }
         }
-        .backed {
-            .wrap {
-                margin: 0px !important;
-            }
-            p.centre-line {
-                display: block;
-                width: 100% !important;
-            }
+    }
+    .backed {
+        .wrap {
+            margin-top: 25px !important;
         }
-        .backer {
-            span {
-                margin-right: 0px !important;
-                display: block;
-                line-height: 24px;
-                margin-bottom: 20px;
-            }
-            .btn-primary {
-                text-align: center;
-                margin-right: 0px;
-            }
+        p.centre-line {
+            display: block;
+            width: 100% !important;
+        }
+    }
+    .backer {
+        span {
+            margin-right: 0px !important;
+            display: block;
+            line-height: 24px;
+            margin-bottom: 20px;
         }
     }
 }

diff --git a/docs/assets/css/main.scss b/docs/assets/css/main.scss
@@ -90,7 +90,7 @@ body {
     }
 }
 .home-header {
-    padding: 50px 0px 20px 0px;
+    padding: 50px 0px;
     text-align: center;
     .btn-top {
         margin-top: 35px;
@@ -136,73 +136,65 @@ body {
         margin: 0 auto;
     }
 
-    // Backed Badge
-    .backed {
-        .wrap {
-            height: 100px;
-            position: relative;
-            margin-top: 50px;
-        }
-        p.centre-line {
-            text-align: center;
-            border-bottom: 1px solid #dcccbe;
-            line-height: 0.1em;
-            width: 40%;
-            display: inline-block;
-            span {
-                background: #fff9f4;
-                font-size: 14px;
-                padding: 5px 20px;
-                color: #4b352a;
-            }
-        }
+}
 
-        .people {
-            display: block;
-            img {
-                margin-top: 20px;
-                width: 42px;
-                display: inline-block;
-            }
-            span {
-                position: relative;
-                top: 10px;
-                margin-left: 10px;
-                font-size: 13px;
-                color: #656565;
-                a {
-                    color: #000;
-                    &:hover {
-                        color: #469a4c;
-                    }
-                }
-            }
+// Backed Badge
+.backed {
+    text-align: center;
+    .wrap {
+        position: relative;
+        margin-top: 50px;
+    }
+    p.centre-line {
+        text-align: center;
+        border-bottom: 1px solid #dcccbe;
+        line-height: 0.1em;
+        width: 40%;
+        display: inline-block;
+        span {
+            background: #fff9f4;
+            font-size: 14px;
+            padding: 5px 20px;
+            color: #4b352a;
         }
+    }
 
-        .backer {
-            span {
-                font-size: 13px;
-                color: #281d18;
-                margin-right: 25px;
-            }
-            .btn-primary {
-                border: 1px solid #eadcd5;
-                font-size: 14px;
-                color: #281d18;
-                background: none;
-                font-weight: 800;
+    .people {
+        display: block;
+        margin: 25px 0;
+        img {
+            margin: 3px 4px;
+            max-width: 120px;
+            max-height: 40px;
+            display: inline-block;
+        }
+        span {
+            position: relative;
+            top: 10px;
+            margin-left: 10px;
+            font-size: 13px;
+            color: #656565;
+            a {
+                color: #000;
                 &:hover {
                     color: #469a4c;
-                    border: 1px solid #469a4c;
                 }
             }
         }
     }
+
+    .backer {
+        span {
+            font-size: 13px;
+            color: #281d18;
+            margin-right: 25px;
+        }
+    }
 }
 
 // Content
 .content {
-    padding: 30px 0px 60px 0px;
+    padding: 60px 0px;
 }
 
 // Pages