Skip to content

Commit

Permalink
Adding CNCF logo to footer (#163)
Browse files Browse the repository at this point in the history
Addressing logo requirements for CNCF onboarding:
https://github.com/cncf/toc/issues/1299

---------

Co-authored-by: Nick Snyder <[email protected]>
  • Loading branch information
perezd and nicksnyder authored May 21, 2024
1 parent e3303ae commit 5eb473f
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 9 deletions.
1 change: 1 addition & 0 deletions src/theme/Footer/cncf-sandbox-horizontal-black.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 15 additions & 9 deletions src/theme/Footer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import React, { PropsWithChildren } from "react";

import IconGithub from "./icon-github--gray.svg";
import IconSlack from "./icon-slack--gray.svg";
import CncfSandbox from "./cncf-sandbox-horizontal-black.svg";
import styles from "./styles.module.css";

type LinkProps = {
Expand Down Expand Up @@ -153,15 +154,20 @@ function Footer(): JSX.Element | null {
})}
</div>

<div
className={styles.copyright}
// Developer provided the HTML, so assume it's safe.
// eslint-disable-next-line react/no-danger
// ^^^ comment by FB
dangerouslySetInnerHTML={{
__html: copyright ?? "",
}}
/>
<div className={styles.copyright}>
<div
// Developer provided the HTML, so assume it's safe.
// eslint-disable-next-line react/no-danger
// ^^^ comment by FB
dangerouslySetInnerHTML={{
__html: copyright ?? "",
}}
/>
<span>
We are a Cloud Native Computing Foundation sandbox project
</span>
<CncfSandbox width={200} opacity={0.2} className={styles.cncfLogo} />
</div>
</div>
</footer>
);
Expand Down
12 changes: 12 additions & 0 deletions src/theme/Footer/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@
color: #93b4be;
}

.cncfLogo {
padding-top: 0.3rem;
}

.legalGroup {
display: flex;
flex-direction: row;
Expand All @@ -32,6 +36,9 @@
}

.copyright {
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.875rem;
color: var(--buf-footer-color);
font-family: var(--buf-sans-font);
Expand All @@ -54,6 +61,7 @@
ease-in-out, ease-in-out, ease-in-out, ease-in-out;
transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0s, 0s;
}

.socialLink:hover {
opacity: 0.75;
}
Expand All @@ -73,6 +81,7 @@
background-size 0.4s ease-in-out,
opacity 0.4s ease-in-out;
}

.legalLink:hover {
text-decoration: none;
background-size: 100% 100%;
Expand All @@ -88,15 +97,18 @@
justify-content: center;
position: relative;
}

.legalGroup {
position: absolute;
left: 0;
padding: 0;
color: var(--buf-footer-color-light);
}

.copyright {
color: var(--buf-footer-color-light);
position: absolute;
align-items: end;
right: 0;
}
}
1 change: 1 addition & 0 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
// This file is not used in compilation. It is here just for a nice editor experience.
"extends": "@tsconfig/docusaurus/tsconfig.json",
"compilerOptions": {
"jsx": "react",
"baseUrl": "."
}
}

0 comments on commit 5eb473f

Please sign in to comment.