Add index sponsor

docs/_includes/index/sponsor.html

@@ -1,44 +1,51 @@
-<div class="intro-partners">
-  <div class="intro-sponsor">
-    <div class="bd-sponsor">
-    <p class="bd-sponsor-title">Sponsors</p>
-    <div class="bd-sponsor-list">
-      <a href="https://themeisle.com/" target="_blank" rel="nofollow">
-        <img src="{{ site.url }}/images/sponsors/themeisle.png" alt="themeisle logo">
-      </a>
-      <a href="https://chainaxe.io/" target="_blank" rel="nofollow">
-        {%
-          include elements/responsive-image.html
-          path="sponsors/chainaxe"
-          extension="png"
-          alt="chainaxe logo"
-          width="99"
-          height="70"
-        %}
-      </a>
-      <a href="https://www.keycdn.com/" target="_blank" rel="nofollow">
-        {%
-          include elements/responsive-image.html
-          path="sponsors/keycdn"
-          extension="png"
-          alt="keycdn logo"
-          width="200"
-          height="58"
-        %}
-      </a>
-      <a href="http://tooltwist.com/" target="_blank" rel="nofollow">
-        {%
-          include elements/responsive-image.html
-          path="sponsors/tooltwist"
-          extension="png"
-          alt="tooltwist logo"
-          width="200"
-          height="64"
-        %}
-      </a>
+<div class="section bd-partners">
+  <div class="container">
+    <div class="bd-partners-list">
+      <div class="bd-partner bd-is-sponsor">
+        <p class="bd-partner-title">Sponsors</p>
+        <div class="bd-partner-sponsors">
+          <a href="https://themeisle.com/" target="_blank" rel="nofollow">
+            <img src="{{ site.url }}/images/sponsors/themeisle.png" alt="themeisle logo" width="160" height="40">
+          </a>
+          <a href="https://chainaxe.io/" target="_blank" rel="nofollow">
+            {%
+              include elements/responsive-image.html
+              path="sponsors/chainaxe"
+              extension="png"
+              alt="chainaxe logo"
+              width="85"
+              height="60"
+            %}
+          </a>
+          <a href="https://www.keycdn.com/" target="_blank" rel="nofollow">
+            {%
+              include elements/responsive-image.html
+              path="sponsors/keycdn"
+              extension="png"
+              alt="keycdn logo"
+              width="150"
+              height="43.5"
+            %}
+          </a>
+          <a href="http://tooltwist.com/" target="_blank" rel="nofollow">
+            {%
+              include elements/responsive-image.html
+              path="sponsors/tooltwist"
+              extension="png"
+              alt="tooltwist logo"
+              width="160"
+              height="51"
+            %}
+          </a>
+        </div>
+      </div>
+
+      <div class="bd-partner bd-is-carbon">
+        <p class="bd-partner-title">Ads via Carbon</p>
+        <div class="bd-partner-carbon">
+          {% include elements/carbon.html %}
+        </div>
+      </div>
     </div>
   </div>
-  <div class="intro-carbon">
-    {% include elements/carbon.html %}
-  </div>
 </div>

docs/_sass/global.sass

@@ -4,7 +4,6 @@ svg
 
 $carbon-spacing: 1rem
 $carbon-shadow-size: 0.75rem
-$carbon-height: 100px
 $carbon-image-height: 100px
 $carbon-image-width: 130px
 $carbon-poweredby-height: 20px

docs/_sass/index.sass

@@ -1,6 +1,6 @@
 .bd-focus
   margin: 6rem auto 0
-  max-width: 1080px
+  max-width: $intro-width
 
 .bd-focus-item
   .subtitle
@@ -174,12 +174,6 @@
     &:hover
       opacity: 1
 
-.intro-partners
-  margin-top: 6rem
-
-.intro-carbon
-  margin-top: 0.5rem
-
 +mobile
   .intro-buttons
     .button

docs/_sass/sponsors.sass

@@ -8,28 +8,44 @@
     margin-right: 3rem
     width: 150px
 
-.bd-sponsor
-  margin-left: auto
-  margin-right: auto
-  text-align: center
-
-.bd-sponsor-title
-  font-size: $size-small
-  margin-bottom: 1em
-  opacity: 0.5
-
-.bd-sponsor-list
+.bd-partner-sponsors
   align-items: center
   display: flex
   flex-wrap: wrap
-  justify-content: center
+  justify-content: space-between
+  margin-bottom: -1rem
   a
     align-items: center
     display: flex
     justify-content: center
-    margin: 1rem
-    width: 160px
-    img
-      max-height: 60px
-      width: auto
+    margin: 0 1rem 1rem 0
+    min-height: $carbon-height
+
+.bd-partners
+  background-color: $white-bis
+  .container
+    max-width: $intro-width
+  #carbonads
+    .carbon-text
+      padding-bottom: 0
+    .carbon-poweredby
+      display: none
 
+.bd-partner-title
+  color: $grey-light
+  font-size: 0.875rem
+  margin-bottom: 1rem
+
++tablet
+  .bd-partners-list
+    align-items: flex-start
+    display: flex
+  .bd-partner
+    &.bd-is-sponsor
+      flex-grow: 1
+      flex-shrink: 1
+    &.bd-is-carbon
+      flex-grow: 0
+      flex-shrink: 0
+      margin-left: ($main-spacing * 2)
+      width: $carbon-width

docs/bulma-docs.sass

@@ -13,7 +13,9 @@ $star: #FFD257
 $rss: #f26522
 
 $carbon-width: 300px
+$carbon-height: 100px
 $main-spacing: 3rem
+$intro-width: 1130px
 
 =selection($current-selector: false)
   @if $current-selector

docs/css/bulma-docs.css

@@ -10091,7 +10091,7 @@ svg {
 
 .bd-focus {
   margin: 6rem auto 0;
-  max-width: 1080px;
+  max-width: 1130px;
 }
 
 .bd-focus-item .subtitle {
@@ -10324,14 +10324,6 @@ svg {
   opacity: 1;
 }
 
-.intro-partners {
-  margin-top: 6rem;
-}
-
-.intro-carbon {
-  margin-top: 0.5rem;
-}
-
 @media screen and (max-width: 768px) {
   .intro-buttons .button {
     display: flex;
@@ -12164,36 +12156,59 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   width: 150px;
 }
 
-.bd-sponsor {
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-}
-
-.bd-sponsor-title {
-  font-size: 0.75rem;
-  margin-bottom: 1em;
-  opacity: 0.5;
-}
-
-.bd-sponsor-list {
+.bd-partner-sponsors {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: space-between;
+  margin-bottom: -1rem;
 }
 
-.bd-sponsor-list a {
+.bd-partner-sponsors a {
   align-items: center;
   display: flex;
   justify-content: center;
-  margin: 1rem;
-  width: 160px;
+  margin: 0 1rem 1rem 0;
+  min-height: 100px;
 }
 
-.bd-sponsor-list a img {
-  max-height: 60px;
-  width: auto;
+.bd-partners {
+  background-color: #fafafa;
+}
+
+.bd-partners .container {
+  max-width: 1130px;
+}
+
+.bd-partners #carbonads .carbon-text {
+  padding-bottom: 0;
+}
+
+.bd-partners #carbonads .carbon-poweredby {
+  display: none;
+}
+
+.bd-partner-title {
+  color: #b5b5b5;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+}
+
+@media screen and (min-width: 769px), print {
+  .bd-partners-list {
+    align-items: flex-start;
+    display: flex;
+  }
+  .bd-partner.bd-is-sponsor {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+  .bd-partner.bd-is-carbon {
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-left: 6rem;
+    width: 300px;
+  }
 }
 
 @keyframes fadeIn {

docs/index.html

@@ -6,8 +6,9 @@ fixed_navbar: true
 
 {% include global/navbar.html id="Index" %}
 {% include index/intro.html %}
-{% include index/tws.html %}
+{% include index/sponsor.html %}
 {% include index/columns.html %}
+{% include index/tws.html %}
 <!-- {% include index/tiles.html %} -->
 {% include index/level.html %}
 {% include index/media-object.html %}