mirror of
https://github.com/zen-browser/astro-site-test.git
synced 2025-07-07 22:09:58 +02:00
chore: update .gitignore and improve package scripts; refactor how-much component styles
This commit is contained in:
parent
54874f4677
commit
3c3cb9965d
5 changed files with 72 additions and 69 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -1 +1,3 @@
|
|||
node_modules
|
||||
.astro/settings.json
|
||||
dist
|
|
@ -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"
|
||||
|
|
|
@ -53,7 +53,7 @@ import { Image } from "astro:assets";
|
|||
@apply flex flex-1 flex-col gap-4;
|
||||
}
|
||||
|
||||
.img {
|
||||
img {
|
||||
@apply w-full rounded-lg;
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue