Fix banner overflow

jgthms · Feb 5, 2025 · 7f4c17b · 7f4c17b
1 parent 96a2497
commit 7f4c17b
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 6 deletions.
diff --git a/docs/_includes/website/carbon.html b/docs/_includes/website/carbon.html
@@ -1,6 +1,6 @@
 <div id="carboncontainer" class="bd-carbon">
   <div id="carbon">
-    <a id="masterclass-carbon" href="https://cssmasterclass.io/" target="_blank" style="display: none; width: 400px; height: 260px;">
+    <a id="masterclass-carbon" href="https://cssmasterclass.io/" target="_blank" style="display: none; aspect-ratio: 40 / 26; max-width: 400px; max-height: 260px;">
       <img src="{{ site.url }}/assets/images/masterclass/masterclass-carbon.png" height="260" width="400" alt="CSS Masterclass">
     </a>
     <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIE237&placement=bulmaio&format=cover" id="_carbonads_js" onerror="this.previousElementSibling.style.display = 'flex'"></script>

diff --git a/docs/_sass/docs/hero.scss b/docs/_sass/docs/hero.scss
@@ -93,6 +93,10 @@
 }
 
 .bd-carbon {
+  aspect-ratio: 40 / 26;
+  max-height: 280px !important;
+  max-width: 400px !important;
+
   &,
   & > div {
     align-items: center;
@@ -101,7 +105,6 @@
   }
 
   > div {
-    height: 280px !important;
-    width: 400px !important;
+    aspect-ratio: 40 / 26;
   }
 }
diff --git a/docs/assets/css/website.css b/docs/assets/css/website.css
@@ -34288,14 +34288,18 @@ has-background-moon.is-hoverable:active {
     --scale: 0.75;
   }
 }
+.bd-carbon {
+  aspect-ratio: 40/26;
+  max-height: 280px !important;
+  max-width: 400px !important;
+}
 .bd-carbon, .bd-carbon > div {
   align-items: center;
   display: flex;
   justify-content: center;
 }
 .bd-carbon > div {
-  height: 280px !important;
-  width: 400px !important;
+  aspect-ratio: 40/26;
 }
 
 .highlight {
@@ -37307,6 +37311,7 @@ div.shine {
   gap: 0.5rem 1rem;
   white-space: nowrap;
   flex-direction: column;
+  overflow: hidden;
 }
 .launch-code h3,
 .launch-code small {
@@ -37328,6 +37333,7 @@ div.shine {
   display: block;
   opacity: 1;
   font-weight: 400;
+  white-space: normal;
 }
 .launch-code .launch-shine {
   animation-duration: 1s;

diff --git a/docs/assets/css/website.min.css b/docs/assets/css/website.min.css
diff --git a/docs/website.scss b/docs/website.scss
@@ -799,6 +799,7 @@ div.shine {
   gap: 0.5rem 1rem;
   white-space: nowrap;
   flex-direction: column;
+  overflow: hidden;
 
   h3,
   small {
@@ -822,6 +823,7 @@ div.shine {
     display: block;
     opacity: 1;
     font-weight: 400;
+    white-space: normal;
   }
 
   .launch-shine {