Skip to content button

This commit is contained in:
Michał Gdula 2024-06-07 23:13:22 +01:00
parent e62077348d
commit 6fac6596b2
8 changed files with 39 additions and 5 deletions

View file

@ -114,6 +114,7 @@ const address = import.meta.env.PUBLIC_ADDRESS;
)}
</head>
<body>
<a href="#content-skip" tabindex="0" id="content-skip-button">Skip to content</a>
<div class="banner">
<img
src={Banner.src}
@ -135,3 +136,28 @@ const address = import.meta.env.PUBLIC_ADDRESS;
document.addEventListener("DOMContentLoaded", () => update(img))
</script>
</html>
<style lang="scss">
@import "../styles/vars.scss";
#content-skip-button {
padding: 16px 32px;
position: absolute;
top: -1000000px;
left: -1000000px;
z-index: 999999999;
font-weight: bolder;
text-decoration: none;
background-color: $accent;
color: $light;
&:focus {
top: 0;
left: 0;
outline: 0 solid transparent;
}
}
</style>

View file

@ -59,11 +59,7 @@ const comments = import.meta.env.PUBLIC_COMMENTS === "true";
</ul>
</div>
<!--<div class="header-follow">-->
<!-- <div>-->
<!-- <p>GwaGwa</p>-->
<!-- </div>-->
<!--</div>-->
<span id="content-skip" />
<div id="markdown">
<div style="margin-bottom: 32px" />

View file

@ -21,6 +21,8 @@ const posts = await getPosts("posts");
<Music />
</div>
<span id="content-skip" />
<div class="section">
<h2>Who am I</h2>
<p>My name is Michał, I go by Fluffy, I'm 19 and I like computers</p>

View file

@ -12,6 +12,8 @@ import GwaGwa from "../assets/fumble.jpg";
<p>GwaGwa</p>
</div>
<span id="content-skip" />
<div class="secrtion">
<img
src={GwaGwa.src}

View file

@ -20,6 +20,8 @@ const posts = await getPosts("posts");
<p>Books of egg</p>
</div>
<span id="content-skip" />
<ul role="list" class="project-list">
{posts.map(post => (
<Card {post}/>

View file

@ -16,6 +16,8 @@ import Mood from "../assets/art/mood.png";
<p>Maned Wolf moment</p>
</div>
<span id="content-skip" />
<div class="section">
<h2>Refsheet</h2>
<img src={Ref.src} alt="FluffyBean" class="art max" />

View file

@ -35,6 +35,8 @@ const filteredPosts = allPosts.filter((project) => project.data.tags.includes(ta
<p>Showing {filteredPosts.length}/{allPosts.length} posts</p>
</div>
<span id="content-skip" />
<div class="section">
<ul role="list" class="project-list">
{filteredPosts.map(post => (

View file

@ -28,6 +28,8 @@ tags.sort((a, b) => {
<p>Filter posts by tags</p>
</div>
<span id="content-skip" />
<ul role="list" class="pill-list">
{tags.map(tag => (
<li>