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

Update css

Browse source
This commit is contained in:
Henry Hiles 2023-06-04 14:38:11 -04:00
parent 18ad462281
commit 4b2562379e
7 changed files with 67 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/layouts/Layout.astro
View file

@ -44,8 +44,10 @@ const { page, title = page, description } = Astro.props
<title>Henry Hiles - {page}</title> <title>Henry Hiles - {page}</title>
</head> </head>
<body> <body>
<Nav /> <main>
<slot /> <Nav />
<Top /> <slot />
<Top />
</main>
</body> </body>
</html> </html>

8
src/pages/index.astro
View file

@ -11,9 +11,7 @@ import "../styles/Home.css"
title="Henry Hiles" title="Henry Hiles"
description="Full Stack Web Developer and Discord Bot Developer" description="Full Stack Web Developer and Discord Bot Developer"
> >
<main> <Jumbo />
<Jumbo /> <Portfolio />
<Portfolio /> <About />
<About />
</main>
</Layout> </Layout>

97
src/pages/projects/[route].astro
View file

@ -17,56 +17,51 @@ if (project == null) return
--- ---
<Layout page={project.name} description={project.description}> <Layout page={project.name} description={project.description}>
<main> <section id={styles.jumbo}>
<section id={styles.jumbo}> <h1 class={styles.title}>{project.name}</h1>
<h1 class={styles.title}>{project.name}</h1> <Divider />
<p class={styles.overview}>{project.overview}</p>
</section>
<section id={styles.details} class={styles.row}>
<article class={styles.longDescription}>
<h2>Description</h2>
<Divider /> <Divider />
<p class={styles.overview}>{project.overview}</p> <section>
</section> <p>
<section id={styles.details} class={styles.row}> {project.description}
<article class={styles.longDescription}> {project.technologies}
<h2>Description</h2> </p>
<Divider /> <div class={styles.buttonRow}>
<section> {
<p> project.github && (
{project.description} <ButtonLink href={project.github} newTab>
{project.technologies} Source Code
</p> </ButtonLink>
<div class={styles.buttonRow}> )
{ }
project.github && ( {
<ButtonLink href={project.github} newTab> project.demoLink && (
Source Code <ButtonLink href={project.demoLink} newTab>
</ButtonLink> Go to demo
) </ButtonLink>
} )
{ }
project.demoLink && ( {
<ButtonLink href={project.demoLink} newTab> project.customLink && (
Go to demo <ButtonLink href={project.customLink.link} newTab>
</ButtonLink> {project.customLink.name}
) </ButtonLink>
} )
{ }
project.customLink && ( </div>
<ButtonLink </section>
href={project.customLink.link} </article>
newTab <article class={styles.image}>
> <img
{project.customLink.name} src={`/images/${project.mainImage}`}
</ButtonLink> alt={`Image of ${project.name}`}
) class={styles.screenshot}
} />
</div> </article>
</section> </section>
</article>
<article class={styles.image}>
<img
src={`/images/${project.mainImage}`}
alt={`Image of ${project.name}`}
class={styles.screenshot}
/>
</article>
</section>
</main>
</Layout> </Layout>

8
src/styles/Home.css
View file

@ -1,10 +1,10 @@
main > section {
min-height: 80vh;
}
main > section > :is(h1, h2) { main > section > :is(h1, h2) {
font-size: 2.5rem; font-size: 2.5rem;
margin: 0; margin: 0;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
} }
main > section {
min-height: 80vh;
}

10
src/styles/Layout.css
View file

@ -34,23 +34,29 @@ img {
main { main {
display: flex; display: flex;
gap: 2rem; gap: 3rem;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-bottom: 10em; padding-bottom: 10em;
} }
main > section { main > section {
scroll-margin-top: 9rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 1rem; border-radius: 1rem;
background: rgb(0 0 0 / 0.3); background: rgb(0 0 0 / 0.3);
padding: 2rem; padding: 2rem;
width: 90%; width: 90%;
scroll-margin: 1rem;
transition: scale 0.2s; transition: scale 0.2s;
} }
main > section:hover { main > section:hover {
scale: 1.03; scale: 1.03;
} }
@media (min-width: 500px) {
main > section {
scroll-margin: 6rem;
}
}

1
src/styles/Nav.module.css
View file

@ -1,5 +1,6 @@
.nav { .nav {
display: flex; display: flex;
width: 100%;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-weight: bold; font-weight: bold;

4
src/styles/Project.module.css
View file

@ -1,7 +1,3 @@
main {
padding: 2em 0;
}
.overview { .overview {
width: 100%; width: 100%;
padding: 20px; padding: 20px;