diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
index 3eda2a576b..37e6ec0c2d 100644
--- a/site/src/layouts/DocsLayout.astro
+++ b/site/src/layouts/DocsLayout.astro
@@ -78,12 +78,12 @@ if (frontmatter.toc) {
+
+
+ {
+ frontmatter.toc && headings && (
-
- )
- }
+ )
+ }
+
{
diff --git a/site/src/scss/_ads.scss b/site/src/scss/_ads.scss
index cc56340969..8d006a1568 100644
--- 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 c6566d95d7..c1bcfbc3b4 100644
--- 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 32bf3cf625..7b840ab743 100644
--- 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;