Henry-Hiles/website-old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add scroll to top and others

Browse source
This commit is contained in:
Henry Hiles 2023-06-01 15:52:23 -04:00
parent 19708a1577
commit e668c4feb3
9 changed files with 47 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/About.astro
View file

@ -12,10 +12,7 @@ import Divider from "./Divider.astro"
extensive experience with React, SolidJS, Node.js, and ASP.NET Razor
Pages. I have used my Node.js knowledge to create{" "}
<a href="/projects/quadraticbot2.0">QuadraticBot 2.0</a>, a giveaway
bot for discord.
</p>
<p>
For more projects, check out{" "}
bot for discord. For more projects, check out{" "}
<a
href="https://github.com/Henry-Hiles"
target="_blank"

2
src/components/ButtonLink.astro
View file

@ -3,7 +3,7 @@ import styles from "../styles/ButtonLink.module.css"
export interface Props {
href: string
newTab: boolean
newTab?: boolean
}
const { href, newTab } = Astro.props

2
src/components/Nav.astro
View file

@ -3,7 +3,7 @@ import { Icon } from "astro-icon"
import styles from "../styles/Nav.module.css"
---
<nav class={styles.nav} aria-expanded="true">
<nav class={styles.nav}>
<section>
<a href="/" id={styles.logo}
><img src="/images/logo.svg" alt="Henry Hiles" /></a

16
src/components/Top.astro Normal file
View file

@ -0,0 +1,16 @@
---
import ButtonLink from "./ButtonLink.astro"
import { Icon } from "astro-icon"
import styles from "../styles/Top.module.css"
---
<div class={styles.up} aria-hidden="true" id="up">
<ButtonLink href="#"><Icon name="mdi:arrow-up" /></ButtonLink>
<script defer>
const up = document.querySelector("#up")
document.addEventListener("scroll", () =>
up.setAttribute("aria-hidden", window.scrollY == 0)
)
</script>
</div>

2
src/layouts/Layout.astro
View file

@ -1,5 +1,6 @@
---
import "../styles/Layout.css"
import Top from "../components/Top.astro"
import Nav from "../components/Nav.astro"
export interface Props {
@ -47,5 +48,6 @@ const { page } = Astro.props
<body>
<Nav />
<slot />
<Top />
</body>
</html>

2
src/styles/About.module.css
View file

@ -8,7 +8,7 @@
}
.about {
text-align: center;
text-align: justify;
font-size: 1.5em;
display: flex;
gap: 1em;

6
src/styles/ButtonLink.module.css
View file

@ -1,6 +1,8 @@
.button {
display: flex;
background: var(--secondary);
background: rgb(0 0 0 / 0.1);
border: 2px solid var(--secondary);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 20px;
text-decoration: none;
@ -11,5 +13,5 @@
}
.button:hover {
background: var(--secondary-hover);
background: rgb(0 0 0 / 0.3);
}

2
src/styles/Layout.css
View file

@ -45,7 +45,7 @@ main > section {
display: flex;
flex-direction: column;
border-radius: 1rem;
background: rgba(0 0 0 / 0.3);
background: rgb(0 0 0 / 0.3);
padding: 2rem;
margin: 1rem;
width: 90%;

20
src/styles/Top.module.css Normal file
View file

@ -0,0 +1,20 @@
.up {
position: fixed;
width: 3em;
bottom: 1em;
transition: visibility 1s, opacity 1s;
right: 1em;
}
.up[aria-hidden="true"] {
visibility: hidden;
opacity: 0;
}
.up a {
padding: 0.4em;
}
.up svg {
color: hsl(209 28% 60%);
}