Add a link at the top of the page to skip to main content
This link is hidden and only shows when on focus
MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
<link rel="stylesheet" href="{{ '/static/styles.css' | url }}">
</head>
<body>
+
<div class="container">
+ <div class="skip-to-content">
+ <a href="#main-content">Skip to main content</a>
+ </div>
<div class="header-mobile">
<a class="logo" href="{{ '/' | url }}">
<h1>Your next-gen JavaScript toolchain.</h1>
<h2>Focus on code, let Rome take care of the rest!</h2>
</div>
- <div class="content">
+ <div id="main-content" class="content">
{{ content | safe }}

MODIFY
website/src/styles/index.scss
website/src/styles/index.scss
.mode-switch{
text-align: center;
color: var(--background-color);
- background: var(--font-color);
+ background: var(--logo-font-color);
border: 0;
padding: 5px 10px;
cursor: pointer;
display: flex;
width: 100%;
}
+
+.skip-to-content a{
+ @include transition-timing;
+ transition-property: top;
+ position: absolute;
+ right: 0;
+ top: -40px;
+ padding: $unit / 2 $unit;
+ z-index: 100;
+ background: var(--logo-font-color);
+ color: var(--background-color);
+ font-weight: bold;
+}
+
+.skip-to-content a:focus{
+ position: absolute;
+ right: 0;
+ top: 0;
+ padding: $unit;
+ z-index: 100;
+}
\ No newline at end of file

Add a link at the top of the page to skip to main content

This link is hidden and only shows when on focus