Update Carbon placement (#782)

This commit is contained in:
Sayz Lim 2023-03-13 23:46:49 +07:00 committed by GitHub
parent 5af530683a
commit 8be099d0a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 65 additions and 46 deletions

View File

@ -1,9 +1,12 @@
// data-md-component="toc" // data-md-component="toc"
document.addEventListener("DOMContentLoaded", function(event) { document.addEventListener("DOMContentLoaded", function(event) {
var toc_inner = document.querySelectorAll('[data-md-component=toc]')[0]; var toc_inner = document.querySelectorAll('.md-sidebar__inner')[1];
var script = document.createElement("script"); var script = document.createElement("script");
script.src = '//cdn.carbonads.com/carbon.js?serve=CK7DT2QW&placement=vaporcodes'; script.src = '//cdn.carbonads.com/carbon.js?serve=CK7DT2QW&placement=vaporcodes';
script.type = 'text/javascript'; script.type = 'text/javascript';
script.id = '_carbonads_js'; script.id = '_carbonads_js';
if(typeof toc_inner !== undefined && window.innerWidth > 960) {
toc_inner.appendChild(script); toc_inner.appendChild(script);
}
}); });

View File

@ -1,61 +1,77 @@
#carbonads * {
margin: initial;
padding: initial;
line-height: initial;
}
#carbonads { #carbonads {
margin-left: 10px; --carbon-font-size: 12px;
margin-top: 12px; --carbon-padding: 1.5ch;
display: block; --carbon-max-char: 20ch;
overflow: hidden; --carbon-bg-primary: hsl(0, 0%, 98%);
max-width: 160px; --carbon-bg-secondary: hsl(0, 0%, 92%);
border: solid 1px hsla(0, 0%, 0%, .1); --carbon-text-color: hsl(0, 0%, 20%);
border-radius: 4px; }
background-color: hsl(0, 0%, 98%);
text-align: center; #carbonads {
font-size: 12px; z-index: 10;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, font-size: var(--carbon-font-size);
Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: var(--carbon-font-family);
line-height: 1.5; }
#carbonads > span {
display: flex;
flex-direction: column;
min-inline-size: 130px;
max-inline-size: calc(
130px + calc(var(--carbon-padding) * 2)
);
margin-inline: 0.6rem;
margin-block-start: 0.6rem;
padding: var(--carbon-padding);
gap: var(--carbon-padding);
background-color: var(--carbon-bg-primary);
box-shadow: 0 0 0 1px var(--carbon-bg-secondary);
} }
#carbonads a { #carbonads a {
color: inherit; color: var(--carbon-text-color);
text-decoration: none; text-decoration: none;
} }
#carbonads a:hover { #carbonads a:hover {
color: inherit; color: var(--carbon-text-color);
} }
#carbonads span { #carbonads .carbon-wrap {
position: relative; display: flex;
display: block; flex-wrap: wrap;
overflow: hidden; gap: 1.5ex;
} }
.carbon-img { #carbonads .carbon-img {
display: block; flex: 0 0 130px;
margin-bottom: 8px;
max-width: 160px;
line-height: 1;
} }
.carbon-img img { #carbonads .carbon-img img {
display: block; display: block;
margin: 0 auto;
max-width: 160px !important;
width: 160px;
height: auto;
} }
.carbon-text { #carbonads .carbon-text {
display: block; flex-grow: 1;
padding: 0 1em 8px; flex-basis: var(--carbon-max-char);
line-height: 1.4;
text-align: left;
} }
.carbon-poweredby { #carbonads .carbon-poweredby {
display: block; padding: 6px 8px;
padding: 10px 12px; background: var(--carbon-bg-secondary);
background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4); color: var(--carbon-text-color);
text-transform: uppercase;
letter-spacing: .5px;
font-weight: 600; font-weight: 600;
font-size: 9px; font-size: 0.6em;
line-height: 0; line-height: 1.4;
letter-spacing: 0.2ch;
text-align: center;
text-transform: uppercase;
} }