Add blog page css

This commit is contained in:
Florian RICHER 2023-11-26 21:36:28 +01:00
parent 178fa113a5
commit a31fa68e84
4 changed files with 42 additions and 16 deletions

View file

@ -3,8 +3,28 @@
@apply bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface;
@apply min-h-screen py-5;
& > h1 {
@apply font-bold text-3xl text-center;
& h1 {
@apply font-bold text-3xl;
}
& h2 {
@apply font-bold text-2xl;
}
& h3 {
@apply font-bold text-xl;
}
& h4 {
@apply font-bold text-lg;
}
& h5 {
@apply font-bold text-base;
}
& h6 {
@apply font-bold text-sm;
}
}
@ -12,7 +32,7 @@
& > .posts__cards {
@apply grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 m-5;
& > div {
& > a {
@apply rounded-xl overflow-hidden relative;
@apply bg-primary/10 dark:bg-dark_primary/10;
@apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
@ -23,12 +43,19 @@
& > div {
@apply p-5 flex flex-col gap-3;
& > h2 {
@apply font-bold text-2xl;
}
}
}
}
}
.post {
& > div {
@apply mx-auto max-w-3xl;
@apply flex flex-col gap-5;
}
& pre > code {
@apply rounded-md my-2;
}
}
}