Nulo/alfadatizar
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

acortar

Browse source
This commit is contained in:
Cat /dev/Nulo 2023-07-03 12:08:45 -03:00
parent e0b4d9f375
commit bb89b9d817
1 changed files with 5 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/index.11ty.jsx
View file

@ -59,22 +59,16 @@ export async function render(data) {
{Object.entries(data.frontpageCuadrados).map(
([color, { título, content }]) => {
// ¿por qué así en vez de `bg-${color}`? para que lo detecte tailwind.
const bgs = {
const classes = {
celeste: "bg-celeste",
amarillo: "bg-amarillo",
naranja: "bg-naranja",
violeta: "bg-violeta",
};
const pos = {
celeste: "",
amarillo: "lg:order-last xl:order-none",
naranja: "xl:order-last",
violeta: "lg:order-last",
amarillo: "bg-amarillo lg:order-last xl:order-none",
naranja: "bg-naranja xl:order-last",
violeta: "bg-violeta lg:order-last",
};
return (
<div class="grid lg:grid-cols-2">
<div
class={`aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll ${bgs[color]} ${pos[color]}`}
class={`aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll ${classes[color]}`}
></div>
<div class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll p-8">
<h2 class="mb-4 text-4xl">{título}</h2>