Skip to content

Commit 4c1e6bd

Browse files
borsbors
committed
Auto merge of #4158 - Turbo87:footer, r=pichfl
Redesign `Footer` component <img width="1226" alt="Bildschirmfoto 2021-11-11 um 14 33 26" src="https://user-images.githubusercontent.com/141300/141307167-e3fd2914-064f-4076-b415-fc12a8f8bcbe.png"> <img width="635" alt="Bildschirmfoto 2021-11-11 um 14 33 50" src="https://user-images.githubusercontent.com/141300/141307171-21dac1bd-64fd-472e-946b-7d904381f020.png"> <img width="318" alt="Bildschirmfoto 2021-11-11 um 14 34 34" src="https://user-images.githubusercontent.com/141300/141307173-e7651630-a486-4508-baad-683cf6d5e3af.png">
2 parents f4d4928 + b49c86e commit 4c1e6bd

File tree

6 files changed

+114
-45
lines changed

6 files changed

+114
-45
lines changed

‎app/components/footer.hbs

Lines changed: 35 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,42 @@
11
<footer local-class="footer">
2-
<div local-class='after-main-links'>
2+
<div local-class="content">
33
<div>
4-
<a href='https://doc.rust-lang.org/cargo/'>Getting started</a>
5-
<span local-class="sep">|</span>
6-
<a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a>
7-
<span local-class="sep">|</span>
8-
<a href='mailto:[email protected]'>Send us an email</a>
9-
<span local-class="sep">|</span>
10-
<a href='https://www.rust-lang.org/policies/security'>Report a security issue</a>
4+
<h1>Rust</h1>
5+
<ul role="list">
6+
<li><a href="https://www.rust-lang.org/">rust-lang.org</a></li>
7+
<li><a href="https://foundation.rust-lang.org/">Rust Foundation</a></li>
8+
<li><a href="https://www.rust-lang.org/governance/teams/crates-io">the crates.io team</a></li>
9+
</ul>
1110
</div>
11+
1212
<div>
13-
<a href='https://github.com/rust-lang/crates.io'>Fork on GitHub</a>
14-
<span local-class="sep">|</span>
15-
<a href='https://github.com/rust-lang/crates.io/issues/new/choose'>Report a general issue</a>
16-
<span local-class="sep">|</span>
17-
<a href='https://foundation.rust-lang.org/policies/privacy-policy/'>Privacy policy</a>
18-
<span local-class="sep">|</span>
19-
<LinkTo @route="policies">Policies</LinkTo>
13+
<h1>Get Help</h1>
14+
<ul role="list">
15+
<li><a href="https://doc.rust-lang.org/cargo/">The Cargo Book</a></li>
16+
<li><a href="mailto:[email protected]">Email Support</a></li>
17+
<li><a href="https://status.crates.io/">System Status</a></li>
18+
<li><a href="https://github.com/rust-lang/crates.io/issues/new/choose">Report a bug</a></li>
19+
</ul>
20+
</div>
21+
22+
<div>
23+
<h1>Policies</h1>
24+
<ul role="list">
25+
<li><LinkTo @route="policies">Package Policies</LinkTo></li>
26+
<li><a href="https://www.rust-lang.org/policies/security">Security</a></li>
27+
<li><a href="https://foundation.rust-lang.org/policies/privacy-policy/">Privacy Policy</a></li>
28+
<li><a href="https://www.rust-lang.org/policies/code-of-conduct">Code of Conduct</a></li>
29+
<li><LinkTo @route="data-access">Data Access</LinkTo></li>
30+
</ul>
31+
</div>
32+
33+
<div>
34+
<h1>Social</h1>
35+
<ul role="list">
36+
<li><a href="https://github.com/rust-lang/crates.io/">{{svg-jar "github"}} rust-lang/crates.io</a></li>
37+
<li><a href="https://twitter.com/cratesiostatus">{{svg-jar "twitter"}} @cratesiostatus</a></li>
38+
<li><a href="https://discord.gg/rust-lang">{{svg-jar "discord"}} #crates-io-team</a></li>
39+
</ul>
2040
</div>
2141
</div>
2242
</footer>

‎app/components/footer.module.css

Lines changed: 68 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,83 @@
1-
.footer {
2-
display: flex;
3-
justify-content: center;
4-
width: 100%;
5-
background: var(--footer-bg-color);
1+
:root {
2+
--footer-bg-color: var(--green800);
3+
--footer-header-color: var(--yellow500);
4+
--footer-header-shadow-color: var(--green900);
5+
--footer-link-color: #fff;
6+
--footer-link-hover-color: var(--yellow500);
7+
--footer-link-hover-shadow-color: var(--green900);
68
}
79

8-
.sep {
9-
margin: 0 5px;
10-
color: var(--separator-color);
10+
.footer {
11+
display: grid;
12+
justify-items: center;
13+
background: var(--footer-bg-color);
1114
}
1215

13-
.after-main-links {
16+
.content {
1417
composes: width-limit from '../styles/application.module.css';
18+
display: grid;
19+
gap: 40px 20px;
20+
padding: 30px;
1521

16-
margin: 20px;
22+
@media only screen and (min-width: 551px) {
23+
grid-template-columns: repeat(2, 1fr);
24+
justify-content: center;
25+
padding: 50px 30px;
26+
}
1727

18-
div {
19-
margin: 10px 0;
20-
text-align: center;
28+
@media only screen and (min-width: 751px) {
29+
grid-template-columns: repeat(4, 1fr);
30+
}
2131

22-
a { color: white; }
23-
a:hover { color: darken(white, 10%); }
32+
h1 {
33+
margin: 0 0 20px;
34+
font-size: 20px;
35+
font-weight: 500;
36+
color: var(--footer-header-color);
37+
text-shadow: 1px 1px 1px var(--footer-header-shadow-color);
38+
}
2439

25-
@media only screen and (max-width: 450px) {
26-
margin: 20px;
27-
.sep { display: none; }
28-
display: flex;
29-
flex-direction: column;
30-
align-items: center;
40+
ul {
41+
list-style: none;
42+
margin: 0;
43+
padding: 0;
3144

32-
a {
33-
width: 50%;
34-
font-size: 110%;
35-
padding: 5px;
45+
> * + * {
46+
margin-top: 15px;
47+
}
48+
}
49+
50+
li {
51+
height: 16px;
52+
}
53+
54+
a {
55+
display: inline-flex;
56+
/* slightly increased click targets */
57+
margin: -5px;
58+
padding: 5px;
59+
color: #fff;
60+
font-size: 16px;
61+
line-height: 16px;
62+
white-space: nowrap;
63+
transition: 300ms;
3664

37-
&:not(:first-child) {
38-
border-top: 1px solid var(--separator-color);
39-
}
65+
&:hover {
66+
color: var(--footer-link-hover-color);
67+
text-shadow: 1px 1px 1px var(--footer-link-hover-shadow-color);
68+
/* apply color fade only on mouse-out */
69+
transition: 0s;
70+
71+
svg {
72+
filter: drop-shadow(1px 1px 1px var(--footer-link-hover-shadow-color));
4073
}
4174
}
4275
}
76+
77+
svg {
78+
height: 20px;
79+
width: 20px;
80+
margin: -2px 10px -2px 0;
81+
flex-shrink: 0;
82+
}
4383
}

‎app/styles/application.module.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
--grey600: hsl(200, 13%, 60%);
66
--grey200: hsl(200, 17%, 96%);
77
--green800: hsl(115, 31%, 31%);
8+
--green900: hsl(115, 31%, 21%);
89
--yellow500: hsl(44, 100%, 60%);
910

1011
--header-bg-color: var(--green800);
11-
--footer-bg-color: var(--green800);
1212

1313
--font-sans: "Fira Sans", sans-serif;
1414
--font-monospace: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
@@ -47,7 +47,6 @@ body {
4747
font-size: 16px;
4848
display: flex;
4949
flex-direction: column;
50-
align-items: center;
5150
min-height: 100vh;
5251
}
5352

‎public/assets/discord.svg

Lines changed: 4 additions & 0 deletions
Loading

‎public/assets/github.svg

Lines changed: 3 additions & 0 deletions
Loading

‎public/assets/twitter.svg

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)