Move ads to right sidebar to reduce reflow (#41506)

* Move ads to right sidebar to reduce reflow

* Adjust and fix linter

* More

Author: mdo

site/src/layouts/DocsLayout.astro

@@ -78,12 +78,12 @@ if (frontmatter.toc) {
         <div class="bd-subtitle">
           {frontmatter.description && <Fragment set:html={processMarkdownToHtml(frontmatter.description)} />}
         </div>
-        <Ads />
       </div>
 
-      {
-        frontmatter.toc && headings && (
-          <div class="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
+
+      <div class="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
+        {
+          frontmatter.toc && headings && (
             <button
               class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none"
               type="button"
@@ -104,9 +104,10 @@ if (frontmatter.toc) {
                 <TableOfContents headings={headings} />
               </nav>
             </div>
-          </div>
-        )
-      }
+          )
+        }
+        <Ads />
+      </div>
 
       <div class="bd-content ps-lg-2">
         {

site/src/scss/_ads.scss

@@ -6,10 +6,9 @@
 
 #carbonads {
   position: static;
-  display: block;
   max-width: 400px;
   padding: 15px 15px 15px 160px;
-  margin: 2rem 0;
+  margin: 1rem 0;
   overflow: hidden;
   @include font-size(.8125rem);
   line-height: 1.4;
@@ -31,8 +30,33 @@
   margin-left: -145px;
 }
 
+@container (max-width: 240px) {
+  #carbonads {
+    padding-left: 15px;
+  }
+
+  .carbon-img {
+    display: block;
+    float: none;
+    margin-left: 0;
+  }
+
+  .carbon-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+  }
+
+  .carbon-img > img {
+    width: 100%;
+    max-width: 100% !important;
+    height: auto;
+    @include border-radius(var(--bs-border-radius-sm));
+  }
+}
+
 .carbon-poweredby {
   display: block;
   margin-top: .75rem;
-  color: var(--bs-body-color) !important;
+  color: var(--bs-fg-3) !important;
 }

site/src/scss/_masthead.scss

@@ -54,7 +54,9 @@
   }
 
   #carbonads { // stylelint-disable-line selector-max-id
+    max-width: 400px;
     margin-inline: auto;
+    margin-block: 2rem;
   }
 
   @include media-breakpoint-up(md) {

site/src/scss/_toc.scss

@@ -1,6 +1,9 @@
 // stylelint-disable selector-max-type, selector-no-qualifying-type
 
 .bd-toc {
+  font-size: .875rem;
+  container-type: inline-size;
+
   @include media-breakpoint-up(lg) {
     position: sticky;
     top: 5rem;