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>
</head>
<body>
<Nav />
<slot />
<Top />
<main>
<Nav />
<slot />
<Top />
</main>
</body>
</html>

8
src/pages/index.astro
View file

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

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

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

8
src/styles/Home.css
View file

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

10
src/styles/Layout.css
View file

@ -34,23 +34,29 @@ img {
main {
display: flex;
gap: 2rem;
gap: 3rem;
flex-direction: column;
align-items: center;
padding-bottom: 10em;
}
main > section {
scroll-margin-top: 9rem;
display: flex;
flex-direction: column;
border-radius: 1rem;
background: rgb(0 0 0 / 0.3);
padding: 2rem;
width: 90%;
scroll-margin: 1rem;
transition: scale 0.2s;
}
main > section:hover {
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 {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
font-weight: bold;

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

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