Footer should be fixed on mobile

The festival should now display the right part of the image on desktop and mobile.
Makefile superfluous entried removed.
This commit is contained in:
Amritanshu Agrawal 2024-10-13 10:10:54 +05:30
parent 00fd57f256
commit 1523b58d6f
3 changed files with 12 additions and 39 deletions

View File

@ -1,35 +1,7 @@
.PHONY: build-development
build-development: ## Build the development docker image.
docker compose -f docker/development/docker-compose.yml build
.PHONY: start-development
start-development: ## Start the development docker container.
docker compose -f docker/development/docker-compose.yml up -d
.PHONY: stop-development
stop-development: ## Stop the development docker container.
docker compose -f docker/development/docker-compose.yml down
.PHONY: build-staging
build-staging: ## Build the staging docker image.
docker compose -f docker/staging/docker-compose.yml build
.PHONY: start-staging
start-staging: ## Start the staging docker container.
docker compose -f docker/staging/docker-compose.yml up -d
.PHONY: stop-staging
stop-staging: ## Stop the staging docker container.
docker compose -f docker/staging/docker-compose.yml down
.PHONY: build-production
build-production: ## Build the production docker image.
docker build --network=host --file Dockerfile --tag kakawa:latest .
.PHONY: start-production
start-production: ## Start the production docker container.
docker compose -f docker/production/docker-compose.yml up -d
.PHONY: stop-production
stop-production: ## Stop the production docker container.
docker compose -f docker/production/docker-compose.yml down
@docker buildx build \
--network=host \
--tag kakawa:latest \
$(shell grep -v '^#' .env.local | sed 's/^/--build-arg /') \
git@git.tanshu.com:tanshu/kakawa.git

View File

@ -20,7 +20,7 @@ export default function FestivalPage() {
<AnimatedImage
src={bannerPic}
alt='Praline'
className='w-full h-full object-cover object-[-8rem]'
className='w-full h-full object-cover object-[-8rem] md:object-center'
sizes='100vw'
/>
<a

View File

@ -1,7 +1,8 @@
.grid {
display: grid;
gap: 2rem /* 32px */;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
/* grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); */
grid-template-columns: repeat(4, 1fr); /* 4 columns */
padding-top: 3rem /* 48px */;
padding-bottom: 3rem /* 48px */;
@ -14,8 +15,8 @@
background-color: hsl(20, 18%, 97%);
}
@media screen and (width >= 768px) {
.productImage {
display: none;
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr); /* Still 4 columns */
}
}