ZenBrowserMirrors/astro-site-test
1
0
Fork 0
mirror of https://github.com/zen-browser/astro-site-test.git synced 2025-07-08 00:49:58 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update .gitignore and improve package scripts; refactor how-much component styles

Browse source
This commit is contained in:
taroj1205 2024-11-11 17:58:23 +13:00
parent 54874f4677
commit 3c3cb9965d
5 changed files with 72 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -1 +1,3 @@
node_modules
.astro/settings.json
dist

4
package.json
View file

@ -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"

2
src/components/hero.astro
View file

@ -53,7 +53,7 @@ import { Image } from "astro:assets";
@apply flex flex-1 flex-col gap-4;
}
.img {
img {
@apply w-full rounded-lg;
}

67
src/components/how-much/index.astro
View file

@ -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)]);
});
</script>
<style>
@tailwind base;
@layer base {
section {
@apply grid w-full grid-cols-1 justify-center xl:grid-cols-[1fr_2fr] xl:gap-8;
}
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 flex flex-row transition-transform duration-300 ease-in-out xl:flex-col;
}
img {
@apply aspect-[1.55/1] bg-[#272626] object-cover;
}
#radio-group {
@apply hidden flex-col xl:flex;
}
#carousel-indicators {
@apply -xl:bottom-4 -xl:left-1/2 absolute flex -translate-x-1/2 transform 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 bg-opacity-100 xl:h-8 xl:w-3;
}
#slider-container {
@apply grid w-full max-w-xl grid-cols-[auto_1fr_auto] gap-md place-self-center xl:hidden;
}
#view-slider {
@apply w-full;
}
#slider-labels {
@apply text-xs;
}
}
</style>

64
src/components/how-much/styles.css
View file

@ -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;
}
}