juanmanzanero/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styles improvements

Browse Source
This commit is contained in:
Juan Carlos Manzanero Domínguez 2024-07-01 22:07:06 -06:00
parent 53c56e05b8
commit befd417f7a
3 changed files with 58 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/footer.tsx
View File

@ -4,8 +4,8 @@ import formatDate from "@/utils/format-date";
export default function Footer() {
return (
<footer className="border-t border-secondary px-6 py-10 text-center text-sm font-light md:px-16">
<section className="space-y-2">
<footer className="border-t border-secondary px-6 py-10 text-center text-sm md:px-16 prose prose-invert">
<section>
<p>
Developed by{" "}
<strong className="font-bold text-primary">juancmandev</strong>
@ -23,10 +23,9 @@ export default function Footer() {
</a>
</Button>
</p>
<p>Last built {formatDate(new Date())}</p>
<p>Last built {formatDate(new Date())}.</p>
</section>
<ul className="mx-auto mt-4 flex max-w-[200px] justify-between">
<li>
<section className="w-max mx-auto flex items-center gap-12">
<Button
asChild
size={null}
@ -38,8 +37,6 @@ export default function Footer() {
Source Code
</a>
</Button>
</li>
<li>
<Button
asChild
size={null}
@ -51,8 +48,7 @@ export default function Footer() {
RSS feed
</a>
</Button>
</li>
</ul>
</section>
</footer>
);
}

2
src/layouts/Layout.astro
View File

@ -31,7 +31,7 @@ const { title, description, lang } = Astro.props;
</head>
<body>
<Navbar />
<main class="px-4 min-h-screen max-w-[65ch] py-32 mx-auto">
<main class="px-4 min-h-screen max-w-[65ch] py-28 mx-auto">
<slot />
</main>
<Footer />

56
src/pages/index.astro
View File

@ -17,32 +17,28 @@ sortContentByDate(allProjects);
const last3Projects = allProjects.slice(0, 3);
---
<Layout title="juancmandev" description="Welcome to my domain, stranger.">
<div class="space-y-16">
<section class="flex flex-col items-start gap-5">
<div class="space-y-1">
<h1 class="text-3xl font-bold text-primary">
Welcome to my domain, stranger.
</h1>
<h2 class="text-xl">
I am <span class="font-semibold text-primary"
>juancmandev</span
>.
</h2>
<p class="text-lg font-light">
I like computers, and all stuff related to technology.
<Layout
title="juancmandev"
description="Welcome to my domain, stranger. I am juancmandev, web developer, Linux enthusiast, and privacy defender."
>
<div class="prose prose-invert">
<h1 class="text-primary">Welcome to my domain, stranger.</h1>
<p>
I am <span class="font-semibold text-primary">juancmandev</span>, <strong
>Web Developer</strong
>, <strong>Linux</strong> enthusiast, and <strong>privacy</strong> defender.
</p>
<p class="text-lg font-light">
Take a seat, drink some tea, and enjoy your stay.
<p>
This is my <strong>website</strong>, a piece of the Internet that I
could call my <strong>home base</strong>. Here, I share my knowledge
about my career and talk about other topics.
</p>
</div>
</section>
<section>
<h2 class="text-3xl">Latest posts</h2>
<ul class="mt-4 flex flex-col gap-4">
<h2>Latest posts</h2>
<ul class="mt-0 p-0 list-none">
{
last3Blogs.map((blogpost: any) => (
<li>
<li class="p-0">
<PostItem
type="blog"
slug={blogpost.slug}
@ -53,16 +49,18 @@ const last3Projects = allProjects.slice(0, 3);
))
}
</ul>
<LinkButton variant="secondary" href="/blog" className="mt-8"
>More posts</LinkButton
<LinkButton
variant="secondary"
href="/blog"
className="no-underline">More posts</LinkButton
>
</section>
<section>
<h2 class="text-3xl">Latest projects</h2>
<ul class="mt-4 flex flex-col gap-4">
<h2>Latest projects</h2>
<ul class="mt-0 p-0 list-none">
{
last3Projects.map((project: any) => (
<li>
<li class="p-0">
<PostItem
type="portfolio"
slug={project.slug}
@ -73,8 +71,10 @@ const last3Projects = allProjects.slice(0, 3);
))
}
</ul>
<LinkButton variant="secondary" href="/portfolio" className="mt-8"
>More projects</LinkButton
<LinkButton
variant="secondary"
href="/portfolio"
className="no-underline">More projects</LinkButton
>
</section>
</div>