mirror
/
vapor-docs
mirror of https://github.com/vapor/docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
theme/scripts/carbon.js
View File

@ -1,9 +1,12 @@
// data-md-component="toc"
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");
script.src = '//cdn.carbonads.com/carbon.js?serve=CK7DT2QW&placement=vaporcodes';
script.type = 'text/javascript';
script.id = '_carbonads_js';
toc_inner.appendChild(script);
if(typeof toc_inner !== undefined && window.innerWidth > 960) {
toc_inner.appendChild(script);
}
});

104
theme/styles/carbon.css
View File

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