Made card grids not ass
All checks were successful
Docker Deploy / build-and-push (push) Successful in 6m7s
All checks were successful
Docker Deploy / build-and-push (push) Successful in 6m7s
This commit is contained in:
@@ -10,15 +10,17 @@ const { title, description: blurb, pubDate } = post.data;
|
||||
const { slug } = post;
|
||||
---
|
||||
|
||||
<div class="card bg-accent text-accent-content w-full max-w-sm shrink shadow-md">
|
||||
<div class="card-body break-words">
|
||||
<div
|
||||
class="card bg-accent text-accent-content w-full shadow-lg hover:shadow-xl transition-shadow mb-4 sm:mb-6"
|
||||
>
|
||||
<div class="card-body wrap-break-word">
|
||||
<h2
|
||||
class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words"
|
||||
class="card-title text-xl md:text-2xl font-bold justify-center text-center wrap-break-word"
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<p class="text-center break-words my-4">
|
||||
<p class="text-center wrap-break-word my-4">
|
||||
{blurb || "No description available."}
|
||||
</p>
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ const { project } = Astro.props;
|
||||
---
|
||||
|
||||
<div
|
||||
class="card bg-accent text-accent-content w-full max-w-sm shrink shadow-lg hover:shadow-xl transition-shadow"
|
||||
class="card bg-accent text-accent-content w-full shadow-lg hover:shadow-xl transition-shadow mb-4 sm:mb-6"
|
||||
>
|
||||
<div class="card-body">
|
||||
<h2
|
||||
|
||||
@@ -49,9 +49,25 @@ const sortedProjects = projectsWithGiteaInfo.sort((a, b) => {
|
||||
---
|
||||
|
||||
<div
|
||||
class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto"
|
||||
class:list={[
|
||||
sortedProjects.length <= 2
|
||||
? "flex flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto px-4"
|
||||
: "columns-1 sm:columns-2 lg:columns-3 gap-4 sm:gap-6 max-w-6xl mx-auto px-4",
|
||||
]}
|
||||
>
|
||||
{sortedProjects.map((project) => <ProjectCard project={project} />)}
|
||||
{
|
||||
sortedProjects.map((project) => (
|
||||
<div
|
||||
class:list={[
|
||||
sortedProjects.length <= 2
|
||||
? "w-full sm:w-96"
|
||||
: "inline-block break-inside-avoid w-full",
|
||||
]}
|
||||
>
|
||||
<ProjectCard project={project} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
{
|
||||
|
||||
@@ -10,16 +10,16 @@ const { talk } = Astro.props;
|
||||
---
|
||||
|
||||
<div
|
||||
class="card bg-accent text-accent-content shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink"
|
||||
class="card bg-accent text-accent-content w-full shadow-lg hover:shadow-xl transition-shadow mb-4 sm:mb-6"
|
||||
>
|
||||
<div class="card-body p-6 break-words">
|
||||
<div class="card-body p-6 wrap-break-word">
|
||||
<h2
|
||||
class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words"
|
||||
class="card-title text-xl md:text-2xl font-bold justify-center text-center wrap-break-word"
|
||||
>
|
||||
{talk.name}
|
||||
</h2>
|
||||
|
||||
<p class="text-center break-words my-4">
|
||||
<p class="text-center wrap-break-word my-4">
|
||||
{talk.description}
|
||||
</p>
|
||||
|
||||
|
||||
@@ -21,9 +21,25 @@ const sortedPosts = posts.sort(
|
||||
Posts
|
||||
</h1>
|
||||
<div
|
||||
class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto"
|
||||
class:list={[
|
||||
sortedPosts.length <= 2
|
||||
? "flex flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto px-4"
|
||||
: "columns-1 sm:columns-2 lg:columns-3 gap-4 sm:gap-6 max-w-6xl mx-auto px-4",
|
||||
]}
|
||||
>
|
||||
{sortedPosts.map((post) => <PostCard post={post} />)}
|
||||
{
|
||||
sortedPosts.map((post) => (
|
||||
<div
|
||||
class:list={[
|
||||
sortedPosts.length <= 2
|
||||
? "w-full sm:w-96"
|
||||
: "inline-block break-inside-avoid w-full",
|
||||
]}
|
||||
>
|
||||
<PostCard post={post} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
{
|
||||
|
||||
@@ -141,7 +141,7 @@ if (!data) {
|
||||
data.summary &&
|
||||
resumeConfig.sections.enabled.includes("summary") && (
|
||||
<div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
|
||||
<div class="card-body p-4 sm:p-6 break-words">
|
||||
<div class="card-body p-4 sm:p-6 wrap-break-word">
|
||||
<h2 class="card-title text-xl sm:text-2xl">
|
||||
{resumeConfig.sections.summary?.title ||
|
||||
"Summary"}
|
||||
@@ -157,7 +157,7 @@ if (!data) {
|
||||
data.skills.length > 0 &&
|
||||
resumeConfig.sections.enabled.includes("skills") && (
|
||||
<div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
|
||||
<div class="card-body p-4 sm:p-6 break-words">
|
||||
<div class="card-body p-4 sm:p-6 wrap-break-word">
|
||||
<h2 class="card-title text-xl sm:text-2xl">
|
||||
{resumeConfig.sections.skills?.title ||
|
||||
"Skills"}
|
||||
@@ -180,7 +180,7 @@ if (!data) {
|
||||
data.experience.length > 0 &&
|
||||
resumeConfig.sections.enabled.includes("experience") && (
|
||||
<div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
|
||||
<div class="card-body p-4 sm:p-6 break-words">
|
||||
<div class="card-body p-4 sm:p-6 wrap-break-word">
|
||||
<h2 class="card-title text-xl sm:text-2xl">
|
||||
{resumeConfig.sections.experience?.title ||
|
||||
"Experience"}
|
||||
@@ -229,7 +229,7 @@ if (!data) {
|
||||
data.education.length > 0 &&
|
||||
resumeConfig.sections.enabled.includes("education") && (
|
||||
<div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
|
||||
<div class="card-body p-4 sm:p-6 break-words">
|
||||
<div class="card-body p-4 sm:p-6 wrap-break-word">
|
||||
<h2 class="card-title text-xl sm:text-2xl">
|
||||
{resumeConfig.sections.education?.title ||
|
||||
"Education"}
|
||||
@@ -271,7 +271,7 @@ if (!data) {
|
||||
data.volunteer.length > 0 &&
|
||||
resumeConfig.sections.enabled.includes("volunteer") && (
|
||||
<div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
|
||||
<div class="card-body p-4 sm:p-6 break-words">
|
||||
<div class="card-body p-4 sm:p-6 wrap-break-word">
|
||||
<h2 class="card-title text-xl sm:text-2xl">
|
||||
{resumeConfig.sections.volunteer?.title ||
|
||||
"Volunteer Work"}
|
||||
@@ -303,7 +303,7 @@ if (!data) {
|
||||
data.awards.length > 0 &&
|
||||
resumeConfig.sections.enabled.includes("awards") && (
|
||||
<div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
|
||||
<div class="card-body p-4 sm:p-6 break-words">
|
||||
<div class="card-body p-4 sm:p-6 wrap-break-word">
|
||||
<h2 class="card-title text-xl sm:text-2xl">
|
||||
{resumeConfig.sections.awards?.title ||
|
||||
"Awards & Recognition"}
|
||||
|
||||
@@ -12,9 +12,25 @@ import { config } from "../config";
|
||||
Talks
|
||||
</h1>
|
||||
<div
|
||||
class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto"
|
||||
class:list={[
|
||||
config.talks.length <= 2
|
||||
? "flex flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto px-4"
|
||||
: "columns-1 sm:columns-2 lg:columns-3 gap-4 sm:gap-6 max-w-6xl mx-auto px-4",
|
||||
]}
|
||||
>
|
||||
{config.talks.map((talk) => <TalkCard talk={talk} />)}
|
||||
{
|
||||
config.talks.map((talk) => (
|
||||
<div
|
||||
class:list={[
|
||||
config.talks.length <= 2
|
||||
? "w-full sm:w-96"
|
||||
: "inline-block break-inside-avoid w-full",
|
||||
]}
|
||||
>
|
||||
<TalkCard talk={talk} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user