Fix banner overflow

This commit is contained in:
Jeremy Thomas
2025-02-05 14:05:26 +00:00
parent 96a2497155
commit 7f4c17bb55
5 changed files with 17 additions and 6 deletions

View File

@@ -1,6 +1,6 @@
<div id="carboncontainer" class="bd-carbon"> <div id="carboncontainer" class="bd-carbon">
<div id="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"> <img src="{{ site.url }}/assets/images/masterclass/masterclass-carbon.png" height="260" width="400" alt="CSS Masterclass">
</a> </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> <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>

View File

@@ -93,6 +93,10 @@
} }
.bd-carbon { .bd-carbon {
aspect-ratio: 40 / 26;
max-height: 280px !important;
max-width: 400px !important;
&, &,
& > div { & > div {
align-items: center; align-items: center;
@@ -101,7 +105,6 @@
} }
> div { > div {
height: 280px !important; aspect-ratio: 40 / 26;
width: 400px !important;
} }
} }

View File

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

File diff suppressed because one or more lines are too long

View File

@@ -799,6 +799,7 @@ div.shine {
gap: 0.5rem 1rem; gap: 0.5rem 1rem;
white-space: nowrap; white-space: nowrap;
flex-direction: column; flex-direction: column;
overflow: hidden;
h3, h3,
small { small {
@@ -822,6 +823,7 @@ div.shine {
display: block; display: block;
opacity: 1; opacity: 1;
font-weight: 400; font-weight: 400;
white-space: normal;
} }
.launch-shine { .launch-shine {