diff --git a/.gitignore b/.gitignore index b512c09..784c123 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ -node_modules \ No newline at end of file +node_modules +.astro/settings.json +dist \ No newline at end of file diff --git a/package.json b/package.json index e204f33..9d0770b 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,9 @@ "private": true, "scripts": { "dev": "astro dev --port 3000", - "start": "astro preview", + "start": "astro preview --port 3000", "build": "astro build", - "preview": "astro preview", + "preview": "astro preview --port 3000", "astro": "astro", "format:write": "prettier --write ./src", "format": "prettier --check ./src" diff --git a/src/components/hero.astro b/src/components/hero.astro index 682dcdc..2d237bb 100644 --- a/src/components/hero.astro +++ b/src/components/hero.astro @@ -53,7 +53,7 @@ import { Image } from "astro:assets"; @apply flex flex-1 flex-col gap-4; } - .img { + img { @apply w-full rounded-lg; } diff --git a/src/components/how-much/index.astro b/src/components/how-much/index.astro index 32e487d..3278a8a 100644 --- a/src/components/how-much/index.astro +++ b/src/components/how-much/index.astro @@ -4,7 +4,6 @@ import compactImage from "@/assets/modes/compact.png"; import collapsedImage from "@/assets/modes/collapsed.png"; import standardImage from "@/assets/modes/standard.png"; import splitImage from "@/assets/modes/split.png"; -import "./styles.css"; type ModesOptions = "compact" | "collapsed" | "standard" | "split"; @@ -138,3 +137,69 @@ const modes: ModesOptions[] = ["compact", "collapsed", "standard", "split"]; updateImages(modeOrder[parseInt(slider.value)]); }); + + diff --git a/src/components/how-much/styles.css b/src/components/how-much/styles.css deleted file mode 100644 index a4f5f51..0000000 --- a/src/components/how-much/styles.css +++ /dev/null @@ -1,64 +0,0 @@ -@tailwind base; - -@layer base { - section { - @apply grid w-full grid-cols-1 justify-center xl:gap-8 xl:grid-cols-[1fr_2fr]; - } - - section>div { - @apply flex flex-col gap-md rounded-lg p-6; - } - - label { - @apply flex cursor-pointer items-center gap-3 rounded-md p-3 transition-colors hover:bg-gray-100; - } - - label span { - @apply text-lg; - } - - input[type="radio"] { - @apply h-4 w-4 text-secondary focus:ring-secondary; - } - - #image-container { - @apply relative aspect-[1.55/1] overflow-clip rounded-lg; - } - - #image-wrapper { - @apply absolute inset-0 transition-transform duration-300 ease-in-out flex flex-row xl:flex-col; - } - - img { - @apply aspect-[1.55/1] object-cover bg-[#272626]; - } - - #radio-group { - @apply hidden flex-col xl:flex; - } - - #carousel-indicators { - @apply absolute -xl:bottom-4 -xl:left-1/2 transform -translate-x-1/2 flex gap-2 xl:top-1/2 xl:right-4 xl:-translate-y-1/2 xl:flex-col; - } - - .indicator { - @apply h-3 w-3 cursor-pointer rounded-full bg-secondary bg-opacity-50 transition-all duration-300 ease-in-out; - } - - .indicator.active { - @apply w-8 xl:h-8 xl:w-3 bg-opacity-100; - } - - #slider-container { - @apply w-full xl:hidden grid grid-cols-[auto_1fr_auto] gap-md max-w-xl place-self-center; - } - - #view-slider { - @apply w-full; - } - - #slider-labels { - @apply text-xs; - } - -} \ No newline at end of file