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

2
src/components/ButtonLink.astro
View file

@ -3,7 +3,7 @@ import styles from "../styles/ButtonLink.module.css"
export interface Props { export interface Props {
href: string href: string
newTab: boolean newTab?: boolean
} }
const { href, newTab } = Astro.props 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" import styles from "../styles/Nav.module.css"
--- ---
<nav class={styles.nav} aria-expanded="true"> <nav class={styles.nav}>
<section> <section>
<a href="/" id={styles.logo} <a href="/" id={styles.logo}
><img src="/images/logo.svg" alt="Henry Hiles" /></a ><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 "../styles/Layout.css"
import Top from "../components/Top.astro"
import Nav from "../components/Nav.astro" import Nav from "../components/Nav.astro"
export interface Props { export interface Props {
@ -47,5 +48,6 @@ const { page } = Astro.props
<body> <body>
<Nav /> <Nav />
<slot /> <slot />
<Top />
</body> </body>
</html> </html>

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

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

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

@ -1,6 +1,8 @@
.button { .button {
display: flex; display: flex;
background: var(--secondary); background: rgb(0 0 0 / 0.1);
border: 2px solid var(--secondary);
backdrop-filter: blur(20px);
border-radius: 20px; border-radius: 20px;
padding: 20px; padding: 20px;
text-decoration: none; text-decoration: none;
@ -11,5 +13,5 @@
} }
.button:hover { .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; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 1rem; border-radius: 1rem;
background: rgba(0 0 0 / 0.3); background: rgb(0 0 0 / 0.3);
padding: 2rem; padding: 2rem;
margin: 1rem; margin: 1rem;
width: 90%; 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%);
}