Fix ui/ux issues

This commit is contained in:
Henry Hiles 2025-03-30 21:55:33 -04:00
parent fea905dbf3
commit f4374de263
Signed by: Henry-Hiles
SSH key fingerprint: SHA256:VKQUdS31Q90KvX7EkKMHMBpUspcmItAh86a+v7PGiIs
3 changed files with 12 additions and 4 deletions

View file

@ -17,7 +17,7 @@ import ButtonLink from "../components/ButtonLink.astro"
<Layout> <Layout>
<header id="home"> <header id="home">
<Image src={logoLong} alt="Henry Hiles" /> <Image src={logoLong} alt="Henry Hiles" />
<span>Multiplatform Flutter Developer and Frontend Web Developer</span> <span>Multiplatform Flutter Developer & Frontend Web Developer</span>
</header> </header>
<mdui-card variant="outlined"> <mdui-card variant="outlined">
<section id="about"> <section id="about">
@ -101,7 +101,7 @@ import ButtonLink from "../components/ButtonLink.astro"
development. development.
</p> </p>
</article> </article>
<aside> <aside class="double">
<Image <Image
src={jobProcessor} src={jobProcessor}
alt="The QJobProcessor mobile app" alt="The QJobProcessor mobile app"
@ -210,7 +210,7 @@ import ButtonLink from "../components/ButtonLink.astro"
></path></svg ></path></svg
></mdui-icon ></mdui-icon
> >
Contact me to receive a quote Contact me for a quote
</ButtonLink> </ButtonLink>
</section> </section>
</mdui-card> </mdui-card>

View file

@ -3,7 +3,7 @@ button,
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 0.3em; gap: 0.6em;
border: 2px solid rgb(var(--primary)); border: 2px solid rgb(var(--primary));
color: white; color: white;
border-radius: 50px; border-radius: 50px;

View file

@ -48,6 +48,10 @@ main > * > section {
padding: 1em; padding: 1em;
flex-wrap: wrap; flex-wrap: wrap;
@media (max-width: 500px) {
border: none;
}
& a { & a {
min-width: 150px; min-width: 150px;
width: 15%; width: 15%;
@ -84,6 +88,10 @@ main > * > section {
& img { & img {
border-radius: var(--mdui-shape-corner-medium); border-radius: var(--mdui-shape-corner-medium);
border: 2px solid rgb(var(--primary)); border: 2px solid rgb(var(--primary));
.double > & {
width: 45%;
}
} }
} }
:nth-child(2) > & { :nth-child(2) > & {