Skip to content

Commit d46bcaf

Browse files
manosimmanosim
authored
chore: Add the Formidable logo to the website Navbar (#75)
* chore: Add the Formidable logo to the website navbar * Update custom.css * chore: Add footer text
1 parent ab7ffd9 commit d46bcaf

4 files changed

Lines changed: 84 additions & 32 deletions

File tree

‎website/docusaurus.config.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ const config = {
2424
docs: {
2525
path: '../docs',
2626
sidebarPath: require.resolve('./sidebars.js'),
27-
// Please change this to your repo.
2827
editUrl:
2928
'https://github.com/FormidableLabs/react-native-owl/edit/main/website/',
3029
remarkPlugins: [
@@ -90,11 +89,16 @@ const config = {
9089
},
9190
{
9291
href: 'https://github.com/FormidableLabs/react-native-owl',
93-
9492
className: 'header-github-link',
9593
'aria-label': 'GitHub Repository',
9694
position: 'right',
9795
},
96+
{
97+
href: 'https://formidable.com',
98+
className: 'header-formidable-link',
99+
'aria-label': 'Formidable Website',
100+
position: 'right',
101+
},
98102
],
99103
},
100104
footer: {

‎website/src/css/custom.css‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414

1515
--ifm-h3-font-size: 2.2rem;
1616
--ifm-code-font-size: 95%;
17+
18+
--ifm-footer-padding-horizontal: 2rem;
19+
--ifm-footer-padding-vertical: 3.5rem;
1720
}
1821

1922
html[data-theme='dark'] {
@@ -25,6 +28,7 @@ html[data-theme='dark'] {
2528
.footer--dark {
2629
--ifm-navbar-background-color: var(--brand-blue);
2730
--ifm-footer-background-color: var(--brand-blue);
31+
2832
box-shadow: initial;
2933
}
3034

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

59+
.header-formidable-link:hover {
60+
opacity: 0.6;
61+
}
62+
63+
.header-formidable-link:before {
64+
content: '';
65+
width: 26px;
66+
height: 26px;
67+
display: flex;
68+
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")
69+
no-repeat;
70+
}
71+
5572
/* Content */
5673

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

99116
.footer {
100117
margin-top: 3rem;
101-
padding: 2rem;
118+
}
119+
120+
@media (max-width: 996px) {
121+
.footer {
122+
--ifm-footer-padding-horizontal: 2rem;
123+
}
102124
}
103125

104126
@media (min-width: 1416px) {
105127
.footer {
106128
margin-top: 5rem;
107-
padding: var(--ifm-footer-padding-horizontal);
108129
}
109130
}

‎website/src/theme/Footer/index.tsx‎

Lines changed: 37 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -14,37 +14,46 @@ export default function Footer() {
1414
return (
1515
<footer className="footer footer--dark">
1616
<div className="container container--fluid">
17-
<a href="https://formidable.com">
18-
<FormidableLogo className={styles.footerLogo} />
19-
</a>
20-
</div>
17+
<div className={styles.footerContent}>
18+
<div className={styles.logoLinksContainer}>
19+
<a href="https://formidable.com">
20+
<FormidableLogo className={styles.footerLogo} />
21+
</a>
2122

22-
<div className="container container--fluid">
23-
{links && links.length > 0 && (
24-
<div className="footer__links">
25-
{links.map((linkItem, i) => (
26-
<div key={i} className="margin-vert--md">
27-
{linkItem.title && (
28-
<h4 className="footer__title">{linkItem.title}</h4>
29-
)}
30-
{linkItem.items != null &&
31-
Array.isArray(linkItem.items) &&
32-
linkItem.items.length > 0
33-
? linkItem.items.map((item, key) => (
34-
<span key={item.to}>
35-
<Link className="footer__link-item" to={item.to}>
36-
{item.label}
37-
</Link>
38-
{key !== linkItem.items.length - 1 && (
39-
<span className="footer__link-separator">·</span>
40-
)}
41-
</span>
42-
))
43-
: null}
23+
{links && links.length > 0 && (
24+
<div className="footer__links">
25+
{links.map((linkItem, i) => (
26+
<div key={i} className="margin-vert--md">
27+
{linkItem.title && (
28+
<h4 className="footer__title">{linkItem.title}</h4>
29+
)}
30+
{linkItem.items != null &&
31+
Array.isArray(linkItem.items) &&
32+
linkItem.items.length > 0
33+
? linkItem.items.map((item, key) => (
34+
<span key={item.to}>
35+
<Link className="footer__link-item" to={item.to}>
36+
{item.label}
37+
</Link>
38+
{key !== linkItem.items.length - 1 && (
39+
<span className="footer__link-separator">·</span>
40+
)}
41+
</span>
42+
))
43+
: null}
44+
</div>
45+
))}
4446
</div>
45-
))}
47+
)}
48+
</div>
49+
50+
<div className={styles.footerDescription}>
51+
Formidable is a global design and engineering consultancy and open
52+
source software organization, specializing in digital products and
53+
transformation. We have location hubs in Seattle, London, Toronto,
54+
Denver, Atlanta, and Phoenix with remote consultants worldwide.
4655
</div>
47-
)}
56+
</div>
4857
</div>
4958

5059
<div className="container container--fluid">

‎website/src/theme/Footer/styles.module.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,21 @@
22
width: 12rem;
33
color: white;
44
}
5+
6+
.footerDescription {
7+
font-size: 1.2rem;
8+
margin: 1.5rem 0;
9+
}
10+
11+
@media (min-width: 1416px) {
12+
.footerContent {
13+
display: flex;
14+
flex-direction: row;
15+
align-items: center;
16+
}
17+
18+
.footerDescription {
19+
flex: 1;
20+
margin: 1.25rem 0 1.25rem 7.25rem;
21+
}
22+
}

0 commit comments

Comments
 (0)