Skip to content

skip to main #2054

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 25, 2025
Merged

skip to main #2054

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d0dc19e
skip to main
moshe742 Apr 27, 2025
2d77c66
add the actual link
moshe742 Apr 27, 2025
5afe2d0
Update _style.scss
moshe742 Apr 27, 2025
8738cf3
moved the id to main tag
moshe742 May 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions djangoproject/scss/_style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3620,3 +3620,19 @@ ul.corporate-members li {
}
}
}

// added for skip to main functionality
.skip-link {
position: absolute;
top: -5em;
z-index: 1;
background: var(--body-bg);
color: var(--link-color);
border: 0.5em solid var(--primary);
padding: 0.5em 2em;
transition: top 0.5s ease-out;

&:focus {
top: 0;
}
}
2 changes: 2 additions & 0 deletions djangoproject/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@

<body id="{% block sectionid %}generic{% endblock %}" class="{% block body_class %}{% endblock %}">

<a href="#main-content" class="skip-link">Skip to main content</a>
{% include "includes/header.html" %}

<section class="copy-banner">
Expand Down Expand Up @@ -86,6 +87,7 @@
</ul>
{% endif %}
{% endblock %}
<div id="main-content"></div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we add the id on the main tag instead? This will avoid adding a new tag, especially a div only for that and the messages will be visible.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done


{% block content %}{% endblock %}
<a href="#top" class="backtotop"><i class="icon icon-chevron-up"></i> Back to Top</a>
Expand Down