Update css

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

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

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>

View file

@ -17,7 +17,6 @@ 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 /> <Divider />
@ -49,10 +48,7 @@ if (project == null) return
} }
{ {
project.customLink && ( project.customLink && (
<ButtonLink <ButtonLink href={project.customLink.link} newTab>
href={project.customLink.link}
newTab
>
{project.customLink.name} {project.customLink.name}
</ButtonLink> </ButtonLink>
) )
@ -68,5 +64,4 @@ if (project == null) return
/> />
</article> </article>
</section> </section>
</main>
</Layout> </Layout>

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;
}

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;
}
}

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;

View file

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