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

* Move ads to right sidebar to reduce reflow

* Adjust and fix linter

* More

diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
index 3eda2a576bd9beaab783e79533b5b847e36613cf..37e6ec0c2d25b1fef5b091ae2660bf793711eccb 100644 (file)
--- a/site/src/layouts/DocsLayout.astro
+++ b/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">
         {

diff --git a/site/src/scss/_ads.scss b/site/src/scss/_ads.scss
index cc56340969765de499daa806514cbc3eed425369..8d006a15681f66f5c2260de1071d5382f06f11e7 100644 (file)
--- a/site/src/scss/_ads.scss
+++ b/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;
 }

diff --git a/site/src/scss/_masthead.scss b/site/src/scss/_masthead.scss
index c6566d95d73d07452feef8efeee50cb3bd9d53cd..c1bcfbc3b48f0250fe65daf4eded3356e6b89ba6 100644 (file)
--- a/site/src/scss/_masthead.scss
+++ b/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) {

diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss
index 32bf3cf625c562e7229132e11534ba6fa3a3c6f8..7b840ab7437b2b822e72b6d7db2be5d697a295ca 100644 (file)
--- a/site/src/scss/_toc.scss
+++ b/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;