Skip to content
This repository was archived by the owner on Nov 29, 2022. It is now read-only.

Commit c971d36

Browse files
erickzhaoerickzhao
authored
feat: add OpenJSF copy and logo to footer (#3895)
1 parent c7ae708 commit c971d36

File tree

3 files changed

+131
-150
lines changed

3 files changed

+131
-150
lines changed

‎public/images/openjsf.svg

Lines changed: 60 additions & 58 deletions
Loading

‎public/styles/helpers/_footer.scss

Lines changed: 24 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,42 @@
11
.footer {
2-
position: relative;
3-
padding-top: 30px;
4-
padding-bottom: 30px;
5-
margin-top: 30px;
6-
font-size: 13px;
7-
line-height: 32px; // match height of .footer-mark
8-
text-align: center;
92
border-top: 1px solid $gray-1;
10-
margin-top: auto; // makes footer sticky (with flexbox)
11-
border-color: darken($main-bg-color-shade, 8%) !important;
12-
background: $main-bg-color-shade !important;
13-
}
14-
15-
.footer-mark {
16-
position: absolute;
17-
top: 50%;
18-
left: 50%;
19-
display: none;
20-
margin-top: -16px;
21-
margin-left: -16px;
22-
color: #ccc !important;
23-
24-
@include breakpoint(md) {
25-
display: block;
26-
}
27-
}
28-
29-
.footer-nav {
30-
@include breakpoint(md) {
31-
float: right;
32-
}
33-
}
34-
35-
.footer-nav-item {
36-
display: inline-block;
37-
38-
+ .footer-nav-item {
39-
margin-left: 20px;
40-
}
41-
}
3+
border-color: darken($main-bg-color-shade, 8%);
4+
background: $main-bg-color-shade;
425

43-
.footer a {
44-
color: $main-color-subtle !important;
45-
&:hover {
46-
color: $main-color !important;
6+
a {
7+
color: $main-color-strong;
8+
&:hover {
9+
color: $main-color-subtle;
10+
}
4711
}
4812
}
4913

50-
.footer-nav {
51-
@include breakpoint(md) {
52-
float: left;
53-
}
14+
.footer-nav-list {
15+
columns: 2;
16+
list-style: none;
5417
}
5518

56-
.footer-nav-item {
57-
&.icon {
58-
text-decoration: none !important;
59-
border: none !important;
60-
font-size: 130%;
61-
}
62-
63-
.devicon-twitter-plain {
64-
font-size: 150%;
65-
}
19+
.footer-openjs-logo {
20+
width: 150px;
6621
}
6722

6823
.footer-social {
69-
@include breakpoint(md) {
70-
float: right;
71-
}
24+
margin-bottom: $spacer-3;
7225
}
7326

74-
// RTL CODE
75-
html[dir="rtl"] .ltr-only {
76-
display: none;
77-
}
27+
.footer-social-list {
28+
margin-left: 0;
29+
list-style: none;
7830

79-
// swap social links and nav for right-to-left languages
80-
html[dir="rtl"] {
81-
.footer-nav {
82-
@include breakpoint(md) {
83-
float: right;
84-
}
31+
& > li {
32+
padding-right: $spacer-3;
33+
display: inline;
8534
}
35+
}
8636

87-
.footer-social {
88-
@include breakpoint(md) {
89-
float: left;
90-
}
37+
a.footer-social-icon {
38+
font-size: 200%;
39+
&:hover {
40+
text-decoration: none;
9141
}
9242
}

‎views/partials/footer.html

Lines changed: 47 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,51 @@
11
<footer class="footer PRIMER-REMOVE-ME">
2-
<div class="container-xl p-responsive">
3-
<nav class="footer-nav">
4-
<a class="footer-nav-item" href="/">Electron</a>
5-
<a class="footer-nav-item" href="/docs">{{localized.nav.docs}}</a>
6-
<a class="footer-nav-item" href="/blog">{{localized.nav.blog}}</a>
7-
<a class="footer-nav-item" href="/community">{{localized.nav.community}}</a>
8-
<a class="footer-nav-item" href="/apps">{{localized.nav.apps}}</a>
9-
<a class="footer-nav-item" href="/releases/stable">{{localized.nav.releases}}</a>
10-
<a class="footer-nav-item" href="https://github.com/electron/electron/tree/master/CODE_OF_CONDUCT.md">{{localized.nav.code_of_conduct}}</a>
11-
<a class="footer-nav-item" href="https://github.com/electron/electron/tree/master/LICENSE">{{localized.nav.license}}</a>
12-
<a class="footer-nav-item" href="https://github.com/electron/electron/tree/master/SECURITY.md">{{localized.nav.security}}</a>
13-
<a class="footer-nav-item" href="/languages">{{localized.nav.languages}}</a>
14-
<a class="footer-nav-item" href="/contact">{{localized.nav.contact}}</a>
15-
</nav>
2+
<div class="container-xl clearfix p-6">
3+
<div class="col-md-12 col-lg-4 float-left p-4 f5">
4+
<div class="footer-social">
5+
<ul class="footer-social-list">
6+
<li><a class="footer-social-icon" href="https://github.com/electron" title="Github Organization"><span
7+
class="mega-octicon octicon-mark-github vertical-middle"></span></a></li>
8+
<li><a class="footer-social-icon" href="https://twitter.com/electronjs" title="@electronjs on Twitter"><span
9+
class="devicon-twitter-plain vertical-middle"></span></a></li>
10+
</ul>
11+
</div>
12+
<nav class="footer-nav">
13+
<ul class="footer-nav-list m-0">
14+
<li class="footer-nav-item"><a href="/">Electron</a></li>
15+
<li class="footer-nav-item"><a href="/docs">{{localized.nav.docs}}</a></li>
16+
<li class="footer-nav-item"><a href="/blog">{{localized.nav.blog}}</a></li>
17+
<li class="footer-nav-item"><a href="/community">{{localized.nav.community}}</a></li>
18+
<li class="footer-nav-item"><a href="/apps">{{localized.nav.apps}}</a></li>
19+
<li class="footer-nav-item"><a href="/releases/stable">{{localized.nav.releases}}</a></li>
20+
<li><a class="footer-nav-item"
21+
href="https://github.com/electron/electron/tree/master/CODE_OF_CONDUCT.md">{{localized.nav.code_of_conduct}}</a>
22+
</li>
23+
<li><a class="footer-nav-item"
24+
href="https://github.com/electron/electron/tree/master/LICENSE">{{localized.nav.license}}</a></li>
25+
<li><a class="footer-nav-item"
26+
href="https://github.com/electron/electron/tree/master/SECURITY.md">{{localized.nav.security}}</a></li>
27+
<li class="footer-nav-item"><a href="/languages">{{localized.nav.languages}}</a></li>
28+
<li class="footer-nav-item"><a href="/contact">{{localized.nav.contact}}</a></li>
29+
</ul>
30+
</nav>
31+
</div>
32+
<div class="footer-openjs col-md-12 col-lg-8 float-right p-4 f6">
33+
<img class="footer-openjs-logo mb-4" src="/images/openjsf.svg" alt="OpenJS Foundation" />
34+
<p>Copyright <a href="https://openjsf.org">OpenJS Foundation</a> and Electron contributors. All rights
35+
reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks.
36+
For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a
37+
href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a
38+
href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a
39+
href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks&trade; or
40+
registered&reg; trademarks of their respective holders. Use of them does not imply any affiliation with or
41+
endorsement by them.</p>
1642

17-
<span class="footer-social">
18-
<a class="footer-nav-item icon" href="https://github.com/electron" title="Github Organization"><span class="mega-octicon octicon-mark-github vertical-middle"></span></a>
19-
<a class="footer-nav-item icon" href="https://twitter.com/electronjs" title="@electronjs on Twitter"><span class="devicon-twitter-plain vertical-middle"></span></a>
20-
</span>
43+
<p><a href="https://openjsf.org">The OpenJS Foundation</a> | <a href="https://terms-of-use.openjsf.org">Terms of
44+
Use</a> | <a href="https://privacy-policy.openjsf.org">Privacy Policy</a> | <a
45+
href="https://bylaws.openjsf.org">OpenJS Foundation Bylaws</a> | <a
46+
href="https://trademark-policy.openjsf.org">Trademark Policy</a> | <a
47+
href="https://trademark-list.openjsf.org">Trademark List</a> | <a
48+
href="https://www.linuxfoundation.org/cookies">Cookie Policy</a></p>
49+
</div>
2150
</div>
2251
</footer>

0 commit comments

Comments
 (0)