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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

skip to main #2054

Show file tree
Hide file tree
Changes from all 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;
}
}
3 changes: 2 additions & 1 deletion 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 All @@ -72,7 +73,7 @@
<div id="billboard">{% block billboard %}{% endblock %}</div>

<div class="container {% block layout_class %}{% endblock %}">
<main>
<main id="main-content">

{% block messages %}
{% if messages %}
Expand Down
Loading