Skip to content

chore: Add the Formidable logo to the website Navbar #75

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 19, 2022
Merged

chore: Add the Formidable logo to the website Navbar #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
16ab827
chore: Add the Formidable logo to the website navbar
manosim Jan 19, 2022
3a4a13d
Merge branch 'main' into website/add-header-logo
manosim Jan 19, 2022
d3a6528
Update custom.css
manosim Jan 19, 2022
83f08f0
chore: Add footer text
manosim Jan 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions website/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ const config = {
docs: {
path: '../docs',
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl:
'https://github.com/FormidableLabs/react-native-owl/edit/main/website/',
remarkPlugins: [
Expand Down Expand Up @@ -90,11 +89,16 @@ const config = {
},
{
href: 'https://github.com/FormidableLabs/react-native-owl',

className: 'header-github-link',
'aria-label': 'GitHub Repository',
position: 'right',
},
{
href: 'https://formidable.com',
className: 'header-formidable-link',
'aria-label': 'Formidable Website',
position: 'right',
},
],
},
footer: {
Expand Down
25 changes: 23 additions & 2 deletions website/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@

--ifm-h3-font-size: 2.2rem;
--ifm-code-font-size: 95%;

--ifm-footer-padding-horizontal: 2rem;
--ifm-footer-padding-vertical: 3.5rem;
}

html[data-theme='dark'] {
Expand All @@ -25,6 +28,7 @@ html[data-theme='dark'] {
.footer--dark {
--ifm-navbar-background-color: var(--brand-blue);
--ifm-footer-background-color: var(--brand-blue);

box-shadow: initial;
}

Expand Down Expand Up @@ -52,6 +56,19 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
no-repeat;
}

.header-formidable-link:hover {
opacity: 0.6;
}

.header-formidable-link:before {
content: '';
width: 26px;
height: 26px;
display: flex;
background: url("data:image/svg+xml,%3Csvg fill='%23ffffff' viewBox='0 0 39 50' xmlns='http://www.w3.org/2000/svg' aria-labelledby='header-formidable-logo-icon'%0A%3E%3Ctitle id='header-formidable-logo-icon'%3EFormidable Icon%3C/title%3E%3Cpath d='M33.527 17.493l4.546-7.942c.145-.253.145-.56 0-.814L33.291.398V.38c-.018-.018-.036-.036-.036-.072l-.018-.019c-.018-.018-.036-.054-.054-.072-.018-.018-.055-.036-.073-.054l-.018-.018c-.018-.018-.036-.036-.054-.036 0 0-.018 0-.018-.019-.055-.036-.109-.054-.181-.072h-.019c-.018 0-.054-.018-.072-.018H5.561h-.018c-.019 0-.055 0-.073.018h-.018c-.054.018-.127.036-.181.072 0 0-.018 0-.018.019-.018.018-.037.018-.055.036L5.18.163c-.018.018-.054.036-.072.054-.018.018-.036.054-.055.072l-.018.019C5.017.326 5 .344 5 .38v.018L.11 8.738c-.145.253-.145.56 0 .813l4.673 8.159v26.863c0 .018 0 .054.018.072v.019c.018.054.036.126.072.18 0 0 0 .019.018.019.019.018.019.036.037.054l.018.018c.018.018.036.054.054.072.018.018.054.036.073.055l.018.018c.018.018.036.036.072.036h.018l8.35 4.775c.127.073.272.109.399.109.145 0 .271-.036.398-.109l8.35-4.775h.018c.018-.018.037-.036.073-.036l.018-.018c.018-.019.054-.037.072-.055.018-.018.037-.054.055-.072l.018-.018c.018-.018.036-.036.036-.054 0 0 0-.019.018-.019.036-.054.055-.108.073-.18v-.019c0-.018.018-.054.018-.072v-.018-9.57H32.657c.019 0 .055 0 .073-.018h.018c.054-.018.127-.036.181-.072 0 0 .018 0 .018-.018.018-.018.036-.018.055-.036l.018-.018c.018-.018.054-.036.072-.055.018-.018.036-.036.054-.072l.019-.018c.018-.018.036-.036.036-.072v-.018l4.782-8.34c.144-.253.144-.56 0-.814l-4.456-7.941zm-6.195 7.525H13.983c-.2-.018-.398.054-.561.181l-.019.018-.036.036c-.145.145-.235.344-.235.58v13.386l-6.738 3.853V18.289h24.778l-3.84 6.73zM21.5 43.054L14.762 39.2V27.786l6.738 6.73v8.538zM27.332 8.32H10.85L6.992 1.61H31.19l-3.858 6.711zM10.85 9.95h16.482l3.858 6.73H6.992l3.858-6.73zm21.735 5.898l-3.84-6.712 3.84-6.711 3.84 6.711-3.84 6.712zM5.597 2.424l3.84 6.711-3.84 6.712-3.858-6.712 3.858-6.711zm8.35 45.876l-6.72-3.835 6.72-3.835 6.72 3.835-6.72 3.835zm8.694-14.943l-6.738-6.729h11.43l3.857 6.73h-8.549zm9.944-.814l-3.84-6.71 3.84-6.712 3.84 6.711-3.84 6.711z' fill-rule='nonzero' %3E%3C/path%3E%3C/svg%3E%0A")
no-repeat;
}

/* Content */

.main-wrapper {
Expand Down Expand Up @@ -98,12 +115,16 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {

.footer {
margin-top: 3rem;
padding: 2rem;
}

@media (max-width: 996px) {
.footer {
--ifm-footer-padding-horizontal: 2rem;
}
}

@media (min-width: 1416px) {
.footer {
margin-top: 5rem;
padding: var(--ifm-footer-padding-horizontal);
}
}
65 changes: 37 additions & 28 deletions website/src/theme/Footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,37 +14,46 @@ export default function Footer() {
return (
<footer className="footer footer--dark">
<div className="container container--fluid">
<a href="https://formidable.com">
<FormidableLogo className={styles.footerLogo} />
</a>
</div>
<div className={styles.footerContent}>
<div className={styles.logoLinksContainer}>
<a href="https://formidable.com">
<FormidableLogo className={styles.footerLogo} />
</a>

<div className="container container--fluid">
{links && links.length > 0 && (
<div className="footer__links">
{links.map((linkItem, i) => (
<div key={i} className="margin-vert--md">
{linkItem.title && (
<h4 className="footer__title">{linkItem.title}</h4>
)}
{linkItem.items != null &&
Array.isArray(linkItem.items) &&
linkItem.items.length > 0
? linkItem.items.map((item, key) => (
<span key={item.to}>
<Link className="footer__link-item" to={item.to}>
{item.label}
</Link>
{key !== linkItem.items.length - 1 && (
<span className="footer__link-separator">·</span>
)}
</span>
))
: null}
{links && links.length > 0 && (
<div className="footer__links">
{links.map((linkItem, i) => (
<div key={i} className="margin-vert--md">
{linkItem.title && (
<h4 className="footer__title">{linkItem.title}</h4>
)}
{linkItem.items != null &&
Array.isArray(linkItem.items) &&
linkItem.items.length > 0
? linkItem.items.map((item, key) => (
<span key={item.to}>
<Link className="footer__link-item" to={item.to}>
{item.label}
</Link>
{key !== linkItem.items.length - 1 && (
<span className="footer__link-separator">·</span>
)}
</span>
))
: null}
</div>
))}
</div>
))}
)}
</div>

<div className={styles.footerDescription}>
Formidable is a global design and engineering consultancy and open
source software organization, specializing in digital products and
transformation. We have location hubs in Seattle, London, Toronto,
Denver, Atlanta, and Phoenix with remote consultants worldwide.
</div>
)}
</div>
</div>

<div className="container container--fluid">
Expand Down
18 changes: 18 additions & 0 deletions website/src/theme/Footer/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,21 @@
width: 12rem;
color: white;
}

.footerDescription {
font-size: 1.2rem;
margin: 1.5rem 0;
}

@media (min-width: 1416px) {
.footerContent {
display: flex;
flex-direction: row;
align-items: center;
}

.footerDescription {
flex: 1;
margin: 1.25rem 0 1.25rem 7.25rem;
}
}