Skip to content

Commit 342679f

Browse files
claudiacodacyclaudiacodacy
committed
review footer
1 parent 91dad75 commit 342679f

File tree

4 files changed

+88
-84
lines changed

4 files changed

+88
-84
lines changed

‎docusaurus/docusaurus.config.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,17 @@ const config: Config = {
4343
locales: ['en'],
4444
},
4545

46+
scripts: [
47+
{
48+
src: "https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js",
49+
type: "module",
50+
},
51+
{
52+
src: "https://unpkg.com/[email protected]/dist/ionicons/ionicons.js",
53+
nomodule: true,
54+
},
55+
],
56+
4657
presets: [
4758
[
4859
'classic',
@@ -166,4 +177,6 @@ const config: Config = {
166177
},
167178
};
168179

180+
181+
169182
export default config;

‎docusaurus/src/css/imports/components/footer.css‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +0,0 @@
1-
.theme-layout-footer.footer {
2-
margin: 1rem;
3-
border-radius: 1rem;
4-
--ifm-footer-background-color: var(--ifm-color-emphasis-300)
5-
}
6-
7-
[data-theme='dark'] {
8-
.theme-layout-footer.footer {
9-
--ifm-footer-background-color: var(--ifm-color-emphasis-100)
10-
}
11-
12-
}
13-
14-
@media (min-width: 997px) {
15-
.theme-layout-footer.footer {
16-
margin: 2rem;
17-
}
18-
}

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

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import Link from '@docusaurus/Link';
3-
import Head from '@docusaurus/Head';
3+
import Ionicon from 'react/icons';
44
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
55

66
import styles from './styles.module.css';
@@ -22,18 +22,8 @@ export default function Footer(): React.JSX.Element {
2222

2323
return (
2424
<footer className={styles.footer}>
25-
<Head>
26-
<script
27-
type="module"
28-
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
29-
/>
30-
<script
31-
nomodule
32-
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
33-
/>
34-
</Head>
3525
<div className={styles.inner}>
36-
<div className={styles.left}>
26+
<div className={styles.group}>
3727
<div className={styles.social}>
3828
{socialLinks.map((item) => (
3929
<Link
@@ -53,13 +43,15 @@ export default function Footer(): React.JSX.Element {
5343
))}
5444
</nav>
5545
</div>
56-
<div className={styles.right}>
57-
{ privacyLink && (
58-
<Link className={styles.navLink} href={privacyLink.href}>
59-
{privacyLink.label}
60-
</Link>
61-
)}
62-
<span className={styles.copy}>© {year} Codacy</span>
46+
<div className={styles.group}>
47+
<div>
48+
{ privacyLink && (
49+
<Link className={styles.navLink} href={privacyLink.href}>
50+
{privacyLink.label}
51+
</Link>
52+
)}
53+
<span className={styles.copyright}>© {year} Codacy</span>
54+
</div>
6355
</div>
6456
</div>
6557
</footer>

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

Lines changed: 64 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,91 @@
11
.footer {
2-
border-top: 1px solid var(--ifm-color-emphasis-200);
3-
background: #ffffff;
2+
--footer-bg: var(--ifm-color-emphasis-300);
3+
--footer-text: var(--ifm-color-emphasis-800);
4+
--footer-link: var(--ifm-color-emphasis-800);
5+
--footer-gap: 2rem;
6+
--footer-radius: 1rem;
7+
--footer-padding: 2rem 1.5rem;
8+
margin: 1rem;
9+
border-radius: var(--footer-radius);
10+
background: var(--footer-bg);
11+
}
12+
13+
:global([data-theme='dark']) .footer {
14+
--footer-bg: var(--ifm-color-emphasis-100);
15+
--footer-text: var(--ifm-color-emphasis-900);
16+
--footer-link: var(--ifm-color-emphasis-900);
17+
}
18+
19+
@media (min-width: 997px) {
20+
.footer {
21+
margin: 2rem;
22+
}
423
}
524

625
.inner {
7-
display: flex;
8-
align-items: center;
9-
justify-content: space-between;
10-
gap: 2rem;
11-
max-width: 1200px;
12-
margin: 0 auto;
13-
padding: 2rem 1.5rem;
26+
display: flex;
27+
align-items: center;
28+
justify-content: space-between;
29+
padding: var(--footer-padding);
1430
}
1531

16-
.left {
17-
display: flex;
18-
align-items: center;
19-
gap: 2rem;
20-
flex-wrap: wrap;
32+
.group {
33+
display: flex;
34+
align-items: center;
35+
gap: calc(var(--footer-gap) * 2);
36+
flex-wrap: wrap;
2137
}
2238

2339
.social {
24-
display: flex;
25-
gap: 0.75rem;
40+
display: flex;
41+
gap: 0.75rem;
2642
}
2743

2844
.iconLink {
29-
display: inline-flex;
30-
align-items: center;
31-
justify-content: center;
32-
width: 36px;
33-
height: 36px;
34-
border-radius: 10px;
35-
background: #e9edf3;
36-
color: #445066;
45+
display: inline-flex;
46+
align-items: center;
47+
justify-content: center;
48+
width: 2rem;
49+
height: 2rem;
50+
border-radius: 0.5rem;
51+
color: var(--footer-text);
3752
}
3853

3954
.icon {
40-
font-size: 18px;
41-
display: block;
42-
color: currentColor;
55+
font-size: 18px;
56+
display: block;
57+
color: currentColor;
4358
}
4459

4560
.nav {
46-
display: flex;
47-
gap: 1.5rem;
48-
flex-wrap: wrap;
61+
display: flex;
62+
gap: 1.5rem;
63+
flex-wrap: wrap;
4964
}
5065

5166
.navLink {
52-
color: #445066;
53-
font-weight: 600;
54-
text-decoration: none;
67+
color: var(--footer-link);
68+
font-weight: 600;
69+
text-decoration: none;
5570
}
5671

57-
.right {
58-
display: flex;
59-
align-items: center;
60-
gap: 2rem;
61-
flex-wrap: wrap;
62-
}
63-
64-
.copy {
65-
color: #445066;
66-
font-weight: 600;
72+
.copyright {
73+
color: var(--footer-link);
74+
font-weight: 600;
75+
margin-left: var(--footer-gap);
6776
}
6877

6978
@media (max-width: 900px) {
70-
.inner {
71-
flex-direction: column;
72-
align-items: flex-start;
73-
}
79+
.inner {
80+
flex-direction: column;
81+
align-items: flex-start;
82+
}
83+
84+
.group {
85+
gap: 1.5rem;
86+
}
87+
88+
.copyright {
89+
margin-left: 0;
90+
}
7491
}

0 commit comments

Comments
 (0)