Skip to content

Commit

Permalink
Add Carbon to docs website
Browse files Browse the repository at this point in the history
  • Loading branch information
@oblador
oblador committed Jul 19, 2023
1 parent d55b264 commit 02c143c
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 62 deletions.
132 changes: 70 additions & 62 deletions website/core/Footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,70 +13,78 @@ function Footer(props) {
const pageUrl = (doc) => baseUrl + (language ? `${language}/` : '') + doc;

return (
<footer className="nav-footer" id="footer">
<section className="sitemap">
<a href={baseUrl} className="nav-home">
{config.footerIcon && (
<img
src={baseUrl + config.footerIcon}
alt={config.title}
width="52"
height="52"
/>
)}
</a>
<div>
<h5>Docs</h5>
<a href={docUrl('getting-started.html')}>Getting Started</a>
<a href={docUrl('configuration.html')}>API Reference</a>
<a href={docUrl('continuous-integration.html')}>Guides</a>
</div>
<div>
<h5>Community</h5>
<a href={pageUrl('users.html')}>User Showcase</a>
</div>
<div>
<h5>More</h5>
<a href="https://github.com/oblador/loki">GitHub</a>
<a
className="github-button"
href={config.repoUrl}
data-icon="octicon-star"
data-count-href="/oblador/loki/stargazers"
data-show-count="true"
data-count-aria-label="# stargazers on GitHub"
aria-label="Star this project on GitHub"
>
Star
</a>
{config.twitterUsername && (
<div className="social">
<a
href={`https://twitter.com/${config.twitterUsername}`}
className="twitter-follow-button"
>
Follow @{config.twitterUsername}
</a>
</div>
)}
{config.facebookAppId && (
<div className="social">
<div
className="fb-like"
data-href={config.url}
data-colorscheme="dark"
data-layout="standard"
data-share="true"
data-width="225"
data-show-faces="false"
<>
<script
async
type="text/javascript"
src="//cdn.carbonads.com/carbon.js?serve=CEAIV2JN&placement=lokijsorg"
id="_carbonads_js"
></script>
<footer className="nav-footer" id="footer">
<section className="sitemap">
<a href={baseUrl} className="nav-home">
{config.footerIcon && (
<img
src={baseUrl + config.footerIcon}
alt={config.title}
width="52"
height="52"
/>
</div>
)}
</div>
</section>
)}
</a>
<div>
<h5>Docs</h5>
<a href={docUrl('getting-started.html')}>Getting Started</a>
<a href={docUrl('configuration.html')}>API Reference</a>
<a href={docUrl('continuous-integration.html')}>Guides</a>
</div>
<div>
<h5>Community</h5>
<a href={pageUrl('users.html')}>User Showcase</a>
</div>
<div>
<h5>More</h5>
<a href="https://github.com/oblador/loki">GitHub</a>
<a
className="github-button"
href={config.repoUrl}
data-icon="octicon-star"
data-count-href="/oblador/loki/stargazers"
data-show-count="true"
data-count-aria-label="# stargazers on GitHub"
aria-label="Star this project on GitHub"
>
Star
</a>
{config.twitterUsername && (
<div className="social">
<a
href={`https://twitter.com/${config.twitterUsername}`}
className="twitter-follow-button"
>
Follow @{config.twitterUsername}
</a>
</div>
)}
{config.facebookAppId && (
<div className="social">
<div
className="fb-like"
data-href={config.url}
data-colorscheme="dark"
data-layout="standard"
data-share="true"
data-width="225"
data-show-faces="false"
/>
</div>
)}
</div>
</section>

<section className="copyright">{config.copyright}</section>
</footer>
<section className="copyright">{config.copyright}</section>
</footer>
</>
);
}

Expand Down
84 changes: 84 additions & 0 deletions website/static/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,3 +147,87 @@ body
display: none;
}
}

#carbonads * {
margin: initial;
padding: initial;
line-height: initial;
}

#carbonads {
--carbon-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
sans-serif;
--carbon-font-size: 14px;
--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%);
z-index: 10;
font-size: var(--carbon-font-size);
font-family: var(--carbon-font-family);
}

#carbonads > span {
display: flex;
flex-direction: column;
margin: 0 auto 2rem auto;
min-inline-size: 130px;
max-inline-size: calc(130px + var(--carbon-max-char) + 8ch);
padding: var(--carbon-padding);
gap: var(--carbon-padding);
background-color: var(--carbon-bg-primary);
box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.085), 0 0 2px hsl(0deg 0% 0% / 0.085),
0 0 4px hsl(0deg 0% 0% / 0.085), 0 0 8px hsl(0deg 0% 0% / 0.085);
}

#carbonads a {
color: var(--carbon-text-color);
text-decoration: none;
}

#carbonads a:hover {
color: var(--carbon-text-color);
}

#carbonads .carbon-wrap {
display: flex;
flex-wrap: wrap;
gap: 1.5ex;
}

#carbonads .carbon-img {
flex: 0 0 130px;
}

#carbonads .carbon-img img {
display: block;
}

#carbonads .carbon-text {
flex-grow: 1;
flex-basis: var(--carbon-max-char);
line-height: 1.4;
text-align: left;
}

#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;
}

@media (prefers-color-scheme: dark) {
#carbonads {
--carbon-bg-primary: hsl(0, 0%, 12%);
--carbon-bg-secondary: hsl(0, 0%, 15%);
--carbon-text-color: hsl(0, 0%, 90%);
}
}

0 comments on commit 02c143c

Please sign in to comment.