fix: gridcell style

This commit is contained in:
Juan Di Toro 2023-08-14 16:13:11 +02:00
parent f7b3468055
commit a1b998e4b9
3 changed files with 13 additions and 5 deletions

View File

@ -33,7 +33,7 @@ const features = [
<section <section
id="grid" id="grid"
class="flex flex-col md:mx-20 lg:mx-40 justify-between items-start gap-y-10 md:flex-row md:flex-wrap" class="flex flex-col md:mx-20 lg:mx-40 justify-between items-start gap-y-10 md:grid md:grid-cols-3 md:gap-x-10 md:gap-y-10"
> >
<div class="w-[calc(33.33%-20px)] pl-12 pt-5 mx-[10px]"> <div class="w-[calc(33.33%-20px)] pl-12 pt-5 mx-[10px]">
<h2 class="text-primary font-display text-4xl leading-[1.6] font-bold"> <h2 class="text-primary font-display text-4xl leading-[1.6] font-bold">

View File

@ -7,7 +7,9 @@ export interface Props {
const { title, description } = Astro.props; const { title, description } = Astro.props;
--- ---
<div class="lg:w-[calc(33.33%-20px)] p-10 bg-black mx-[10px] space-y-5"> <div
class="md:w-full h-full p-10 rounded-md bg-black mx-[10px] space-y-5 hover:ring-2 ring-primary transition-all"
>
<h3 class="font-display text-xl md:text-2xl"> <h3 class="font-display text-xl md:text-2xl">
{title} {title}
</h3> </h3>

View File

@ -1,18 +1,24 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
variants: {
extend: {
boxShadow: ['active']
}
},
theme: { theme: {
extend: { extend: {
colors: { colors: {
primary: 'var(--color-aquamarine)', primary: 'var(--color-aquamarine)',
"dark-aquamarine": 'var(--color-dark-aquamarine)', "dark-aquamarine": 'var(--color-dark-aquamarine)',
body: 'var(--color-gray)', body: 'var(--color-gray)',
}, "gradient-aqua": "linear-gradient(to right, var(--color-dark-aquamarine), var(--color-aquamarine))",
}
}, },
fontFamily: { fontFamily: {
'body': '"Jaldi", sans-serif', 'body': '"Jaldi", sans-serif',
'display': '"JetBrains Mono", monospace', 'display': '"JetBrains Mono", monospace',
'display2': '"IBM Plex Sans Devanagari", monospace', 'display2': '"IBM Plex Sans Devanagari", monospace',
} },
} },
} }