mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
81 lines
2.1 KiB
Text
81 lines
2.1 KiB
Text
---
|
|
import Layout from "../../layouts/Layout.astro";
|
|
import Card from "../../components/global/Card.astro";
|
|
import Footer from "../../components/global/FooterComponent.astro";
|
|
import { getCollection } from "astro:content";
|
|
|
|
const blogPosts = await getCollection("blog");
|
|
---
|
|
|
|
<Layout
|
|
title="Blog"
|
|
description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
|
|
>
|
|
<div id="blog-component" class="mt-10 pt-20">
|
|
<h1 class="text-center text-5xl">Blog</h1>
|
|
<div class="mt-10 flex flex-col items-center justify-center">
|
|
<div style="width: clamp(310px, 50vw, 800px);" class="mb-10">
|
|
<p class="text-center text-lg">
|
|
This is where I upload my blogs. No paywalls, no ads, no
|
|
bullshit.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Series of blog posts -->
|
|
<div style="width: clamp(310px, 50vw, 800px);">
|
|
{
|
|
blogPosts.map((blog) => (
|
|
<a class="group mb-5" href={`/blog/${blog.slug}`}>
|
|
<Card
|
|
primaryColor={
|
|
blog.data.color ?? "rgba(0,0,0,0)"
|
|
}
|
|
pixelHeight="50px"
|
|
>
|
|
<div class="card-content relative px-8 py-3 text-left">
|
|
<h2 class="mb-1 text-xl font-bold">
|
|
{blog.data.title}
|
|
</h2>
|
|
<p class="line-clamp-2">
|
|
{blog.data.description}
|
|
</p>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
class="absolute top-3 right-3 size-6 stroke-white transition-all duration-150 group-hover:top-2 group-hover:right-2 group-hover:stroke-green-400"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</Card>
|
|
</a>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-10">
|
|
<Footer />
|
|
</div>
|
|
</Layout>
|
|
|
|
<style>
|
|
.card-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-image: radial-gradient(
|
|
rgba(255, 255, 255, 0.1) 1px,
|
|
transparent 1px
|
|
);
|
|
background-position: 50% 50%;
|
|
background-size: 1.1rem 1.1rem;
|
|
border-radius: 1.25rem;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|