Skip to content

Commit b740121

Browse files
cuteshauncuteshaun
committed
fix: move footer from sidebar to main layout template, to meet accessibility standarts
1 parent 934354b commit b740121

5 files changed

Lines changed: 99 additions & 1 deletion

File tree

‎docs/_config.yml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,17 @@ url: https://UCL-ARC.github.io/python-tooling
66

77
color_scheme: dark
88

9+
layouts_dir: _layouts
10+
911
aux_links:
1012
Source repository: https://github.com/UCL-ARC/python-tooling
1113
aux_links_new_tab: true
1214

1315
logo: "https://raw.githubusercontent.com/UCL-ARC/python-tooling/main/images/logo.svg"
16+
17+
# defaults:
18+
# -
19+
# scope:
20+
# path: "" # Means apply to all files
21+
# values:
22+
# layout: "default-custom" # Name of your custom layout

docs/_includes/header_custom.html renamed to docs/_includes/components/header_custom.html

File renamed without changes.

‎docs/_includes/components/sidebar.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{%- comment -%} Include as: {%- include components/sidebar.html -%} Depends on: page(?), site.
2+
Results in: HTML for the side bar. Includes: title.html, components/site_nav.html,
3+
nav_footer_custom.html Overwrites: nav_footer_custom. Should not be cached, because
4+
nav_footer_custom.html might depend on page. {%- endcomment -%}
5+
6+
<div class="side-bar">
7+
<div class="site-header" role="banner">
8+
<a href="{{ '/' | relative_url }}" class="site-title lh-tight">{% include title.html %}</a>
9+
<button
10+
id="menu-button"
11+
class="site-button btn-reset"
12+
aria-label="Toggle menu"
13+
aria-pressed="false"
14+
>
15+
<svg viewBox="0 0 24 24" class="icon" aria-hidden="true">
16+
<use xlink:href="#svg-menu"></use>
17+
</svg>
18+
</button>
19+
</div>
20+
21+
{% include_cached components/site_nav.html %}
22+
</div>

‎docs/_layouts/default.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="{{ site.lang | default: 'en-US' }}">
3+
{% include head.html %}
4+
<body>
5+
<a class="skip-to-main" href="#main-content">Skip to main content</a>
6+
{% include icons/icons.html %}
7+
8+
{% if page.nav_enabled == true %}
9+
{% include components/sidebar.html %}
10+
{% elsif layout.nav_enabled == true and page.nav_enabled == nil %}
11+
{% include components/sidebar.html %}
12+
{% elsif site.nav_enabled != false and layout.nav_enabled == nil and page.nav_enabled == nil %}
13+
{% include components/sidebar.html %}
14+
{% endif %}
15+
16+
<div class="main" id="top">
17+
{% include components/header.html %}
18+
19+
<div class="main-content-wrap">
20+
{% include components/breadcrumbs.html %}
21+
<div id="main-content" class="main-content">
22+
<main>
23+
{% if site.heading_anchors != false %}
24+
{% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
25+
{% else %}
26+
{{ content }}
27+
{% endif %}
28+
29+
{% if page.has_toc != false %}
30+
{% include components/children_nav.html %}
31+
{% endif %}
32+
</main>
33+
</div>
34+
</div>
35+
36+
<footer class="site-footer">
37+
This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
38+
</footer>
39+
40+
{% if site.search_enabled != false %}
41+
{% include components/search_footer.html %}
42+
{% endif %}
43+
</div>
44+
45+
{% if site.mermaid %}
46+
{% include components/mermaid.html %}
47+
{% endif %}
48+
</body>
49+
</html>

‎docs/_sass/custom/custom.scss‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
html,
2+
body {
3+
height: 100%;
4+
margin: 0;
5+
}
6+
17
div.site-header {
28
max-height: 15em;
39
height: 15em;
@@ -7,6 +13,18 @@ div.site-logo {
713
background-position: center center;
814
}
915

10-
footer.site-footer {
16+
.main {
17+
display: flex;
18+
flex-direction: column;
19+
min-height: 100%;
20+
}
21+
22+
.main-content-wrap {
23+
flex: 1;
24+
}
25+
26+
.site-footer {
27+
position: static;
28+
width: 100%;
1129
color: #6A686D;
1230
}

0 commit comments

Comments
 (0)