Skip to content

Commit f988cef

Browse files
bp289bp289
authored
Footer (#51)
* converted everything to rem * converted everything to rem * refactoring * kebab case * kebab case * linting errors * linting errors * Finished mobile footer * added footer to course.html * fixed responsiev design, general css cleanup * re-added clear:both * changed from max-width to width * Update breakpoint footer.css * changed to rem * no comments * css changes based on comments * html changes and file names/locations changed * changes to course * put footer under page content and added breakpoint in p tag(copyright)
1 parent 98b19e0 commit f988cef

File tree

11 files changed

+297
-4
lines changed

11 files changed

+297
-4
lines changed

‎assets/images/icons/svgs/linkedin.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎assets/images/icons/svgs/mastodon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎assets/images/icons/svgs/twitter.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎assets/images/icons/svgs/youtube.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎assets/images/logo/svg/BC-Logo-White.svg‎

Lines changed: 79 additions & 0 deletions
Loading

‎assets/style/fonts.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ h4,
2323
h5,
2424
h6 {
2525
line-height: 120%;
26+
margin-bottom: 0.3rem; /* 5px */
2627
}
2728

2829
h1 {
@@ -85,12 +86,14 @@ h6 {
8586
}
8687
}
8788

88-
p {
89+
p,
90+
a {
8991
margin-top: 0;
9092
margin-bottom: 0;
9193
font-size: 1rem; /* 16px */
9294
line-height: 130%;
9395
letter-spacing: 0;
96+
text-decoration: none;
9497
}
9598

9699
.code {

‎assets/style/footer.css‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
footer {
2+
margin-left: auto;
3+
margin-right: auto;
4+
width: 100%; /* 1400p x */
5+
background-color: #121212;
6+
padding: 2.5rem 6.25rem; /* 40px, 100px */
7+
border-style: solid;
8+
border-width: 0.625rem 0 0; /* 10px */
9+
border-image: var(--gradient-brandreverse) 1;
10+
margin-top: 1.875rem; /* 30px */
11+
color: #fff;
12+
font-size: 0.7rem;
13+
height: auto;
14+
box-sizing: border-box;
15+
}
16+
17+
footer a {
18+
color: #fff;
19+
}
20+
.footer-container {
21+
max-width: 1400px;
22+
margin: auto;
23+
}
24+
25+
.link-container {
26+
display: grid;
27+
grid-template-columns: 1fr 1fr;
28+
}
29+
30+
.link-container-inner {
31+
display: flex;
32+
justify-content: flex-start;
33+
width: 100%;
34+
}
35+
36+
:is(.link-container-inner nav) {
37+
display: flex;
38+
flex-direction: column;
39+
align-items: start;
40+
gap: 0.625rem;
41+
padding-inline-start: 0px;
42+
margin-right: auto;
43+
}
44+
45+
.logo-contact-container {
46+
display: flex;
47+
justify-content: space-between;
48+
align-items: flex-end;
49+
}
50+
51+
.socials-logo-container {
52+
display: flex;
53+
align-items: center;
54+
gap: 4rem;
55+
}
56+
57+
.socials img {
58+
padding-right: 2rem; /* 30px */
59+
margin-bottom: 0;
60+
}
61+
62+
.socials {
63+
margin-top: 0.5rem;
64+
margin-top: 1.5rem;
65+
}
66+
67+
.footer-logo {
68+
width: 12rem;
69+
height: 3.5rem;
70+
padding-top: 1rem;
71+
}
72+
73+
@media (width <= 768px) {
74+
footer {
75+
display: flex;
76+
padding: 2rem;
77+
justify-content: center;
78+
}
79+
80+
.link-container {
81+
display: block;
82+
}
83+
84+
:is(.link-container-inner nav) {
85+
min-width: 10rem;
86+
margin-inline-end: 0px;
87+
}
88+
89+
.list-container-inner {
90+
margin-bottom: 1.25rem;
91+
}
92+
93+
.logo-contact-container {
94+
align-items: flex-start;
95+
flex-direction: column;
96+
}
97+
98+
.copyright {
99+
margin-top: 2rem;
100+
}
101+
102+
.footer-logo {
103+
width: 12rem;
104+
height: 3.5rem;
105+
}
106+
107+
.socials-logo-container {
108+
display: block;
109+
padding: 1rem 0rem;
110+
}
111+
112+
.socials {
113+
margin: auto;
114+
padding-right: 1rem;
115+
padding-left: 1rem;
116+
}
117+
}

‎layouts/_sitehead.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
<link rel="stylesheet" type="text/css" href="/style/bioconductor-v2.css" media="screen" />
6363
<link rel="stylesheet" type="text/css" href="/style/bioconductor.css" media="screen" /><% if item.identifier =~ /^\/help\/workflows\/.*\// %>
6464
<link rel="stylesheet" type="text/css" href="/style/workflows.css" media="screen" /><% end %>
65+
<link rel="stylesheet" type="text/css" href="/style/footer.css" media="screen"/>
6566
<link rel="SHORTCUT ICON" type="image/x-icon" href="/favicon.ico" />
6667
<link rel="ICON" type="image/x-icon" href="/favicon.ico" />
6768
<script type="text/javascript" src="/js/bioconductor.js"></script>

‎layouts/components/footer.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<footer >
2+
<div class="footer-container">
3+
<div class="link-container">
4+
<div class="link-container-inner">
5+
<nav >
6+
<a class="base" href="/about/index.html"><h3>About</h3></a>
7+
<a href="/about/annual-reports/">Annual Reports</a>
8+
<a href="/about/core-team/">Core Team</a>
9+
<a href="/about/mirrors/">Mirrors</a>
10+
<a href="/about/related-projects/">Related Projects</a>
11+
<a href="/about/code-of-conduct/">Code of Conduct</a>
12+
</nav>
13+
<nav>
14+
<a href="/developers/index.html"><h3>Community</h3></a>
15+
<a href="https://contributions.bioconductor.org/develop-overview.html">Package Guidelines</a>
16+
<a href="https://contributions.bioconductor.org/submission-overview.html">Package Submission</a>
17+
<a href="/developers/release-schedule/">Release Schedule</a>
18+
<a href="https://contributions.bioconductor.org/git-version-control.html">Source Control</a>
19+
<nav>
20+
</div>
21+
<div class="link-container-inner">
22+
<nav>
23+
<a href="/help/index.html"><h3>Learn</h3></a>
24+
<a href="/packages/release/workflows/">Workflows</a>
25+
<a href="/help/package-vignettes/">Package Vignettes</a>
26+
<a href="/help/faq/">FAQ</a>
27+
<a href="/help/support/">Support</a>
28+
<a href="http://cran.r-project.org/">Using R</a>
29+
<a href="/help/course-materials/">Courses</a>
30+
<a href="/help/publications/">Publications</a>
31+
<a href="/help/docker/">Docker Images</a>
32+
<a href="https://anvil.bioconductor.org/">Bioc in AnVIL</a>
33+
<a href="/help/community/">Community Resources</a>
34+
</nav>
35+
<nav>
36+
<a href="/install/index.html"><h3>Get started</h3></a>
37+
<a href="/install/index.html#install-R">Install R</a>
38+
<a href="/install/index.html#find-bioconductor-packages">Find Bioconductor Packages</a>
39+
<a href="/install/index.html#install-bioconductor-packages">Install Bioconductor Packages</a>
40+
<a href="/install/index.html#update-bioconductor-packages">Update Bioconductor Packages</a>
41+
<nav>
42+
</div>
43+
</div>
44+
<div class="logo-contact-container">
45+
<div class="copyright">
46+
<p>
47+
Contact us:<a class="text-underline" href="https://support.bioconductor.org/">support.bioconductor.org</a><br/>
48+
Copyright &copy; 2003 - <%= Time.now.year %> Bioconductor
49+
</p>
50+
</div>
51+
52+
<div class="socials-logo-container">
53+
<div class="socials">
54+
<img src="/images/icons/svgs/twitter.svg" />
55+
<img src="/images/icons/svgs/youtube.svg" />
56+
<img src="/images/icons/svgs/linkedin.svg" />
57+
<img src="/images/icons/svgs/mastodon.svg" />
58+
</div>
59+
<img class="footer-logo" src="/images/logo/svg/BC-Logo-White.svg" alt="BioConductor Logo in White" />
60+
</div>
61+
</div>
62+
</div>
63+
</footer>

‎layouts/course.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ <h2>Materials</h2>
2929
<%= render("/_bioc_release_packages/") %> <%= render("/_documentation/")
3030
%>
3131
</div>
32-
<%= render("/_footer/") %>
32+
<%= render("/components/footer") %>
3333
</div>
3434
</body>
3535
</html>

0 commit comments

Comments
 (0)