mirror of
https://github.com/Fluffy-Bean/website.git
synced 2025-05-14 08:02:16 +00:00
Skip to content button
This commit is contained in:
parent
e62077348d
commit
6fac6596b2
8 changed files with 39 additions and 5 deletions
|
@ -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>
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}/>
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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 => (
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue