From 83a56a89a5bf3fc43e66dd506bc8148055490b9b Mon Sep 17 00:00:00 2001 From: Yuriy Plotnikov Date: Mon, 27 Apr 2026 23:41:29 +0300 Subject: [PATCH 01/42] Add slug functionality for collections items --- .../categories/[categories-detail]/page.tsx | 10 +++++----- src/app/in-stock/[in-stock-detail]/page.tsx | 18 ++++++++++------- src/app/in-stock/page.tsx | 4 ++-- src/app/news/[news-detail]/page.tsx | 18 +++++++++++------ src/app/sitemap.xml/route.ts | 12 +++++------ src/app/works/[works-detail]/page.tsx | 19 +++++++++++------- src/app/works/page.tsx | 4 ++-- src/components/Categories/Categories.tsx | 4 ++-- src/components/Main/Categories/Categories.tsx | 4 ++-- src/components/Main/InStock/InStock.tsx | 4 ++-- src/components/Main/LastWorks/LastWorks.tsx | 4 ++-- src/components/Main/Masters/Masters.tsx | 4 ++-- src/components/Main/News/News.tsx | 4 ++-- src/components/News/News.tsx | 4 ++-- src/lib/CockpitAPI.ts | 20 ++++++++++++++++++- src/types/types.ts | 4 ++++ 16 files changed, 87 insertions(+), 50 deletions(-) diff --git a/src/app/categories/[categories-detail]/page.tsx b/src/app/categories/[categories-detail]/page.tsx index eef8bc1a..8ba66dd8 100644 --- a/src/app/categories/[categories-detail]/page.tsx +++ b/src/app/categories/[categories-detail]/page.tsx @@ -13,10 +13,10 @@ type PageProps = { } export async function generateMetadata({ params }: PageProps): Promise { - const { ['categories-detail']: categoryId } = await params + const { ['categories-detail']: slug } = await params try { - const category: CategoryFromServer = await cockpit.getCollectionItem('category', categoryId) + const category: CategoryFromServer = (await cockpit.getCollectionItemByField('category', 'slug', slug)) || (await cockpit.getCollectionItem('category', slug)) return { title: `${category.title} | Иконописная Артель`, @@ -27,7 +27,7 @@ export async function generateMetadata({ params }: PageProps): Promise images: category.image ? [{ url: cockpit.getImageUrl(category.image._id, 1200, 630), alt: category.title }] : [], }, alternates: { - canonical: `${process.env.SITE_URL || process.env.NEXT_PUBLIC_SITE_URL}/categories/${category._id}`, + canonical: `${process.env.SITE_URL || process.env.NEXT_PUBLIC_SITE_URL}/categories/${category.slug || category._id}`, }, } } catch { @@ -38,12 +38,12 @@ export async function generateMetadata({ params }: PageProps): Promise } export default async function Page({ params }: PageProps): Promise { - const { ['categories-detail']: categoryId } = await params + const { ['categories-detail']: slug } = await params let category: CategoryFromServer try { - category = await cockpit.getCollectionItem('category', categoryId) + category = (await cockpit.getCollectionItemByField('category', 'slug', slug)) || (await cockpit.getCollectionItem('category', slug)) } catch { notFound() } diff --git a/src/app/in-stock/[in-stock-detail]/page.tsx b/src/app/in-stock/[in-stock-detail]/page.tsx index 2097a4be..a875e28c 100644 --- a/src/app/in-stock/[in-stock-detail]/page.tsx +++ b/src/app/in-stock/[in-stock-detail]/page.tsx @@ -1,6 +1,6 @@ import type { Metadata } from 'next' import { JSX } from 'react' -import { notFound } from 'next/navigation' +import { notFound, redirect } from 'next/navigation' import { BreadcrumbItem, MasterFromServer, SlideItem, WorkFromServer } from '@/types/types' import Heading from '@/components/Heading/Heading' import Detail from '@/components/Detail/Detail' @@ -14,8 +14,8 @@ type PageProps = { } export async function generateMetadata({ params }: PageProps): Promise { - const { ['in-stock-detail']: workId } = await params - const work: WorkFromServer | null = await cockpit.getCollectionItem('works', workId) + const { ['in-stock-detail']: slug } = await params + const work: WorkFromServer | null = (await cockpit.getCollectionItemByField('works', 'slug', slug)) || (await cockpit.getCollectionItem('works', slug)) if (!work) { return { @@ -34,7 +34,7 @@ export async function generateMetadata({ params }: PageProps): Promise images: work.image? [{ url: cockpit.getImageUrl(work.image._id, 1200, 630), alt: work.title }] : [], }, alternates: { - canonical: `${process.env.SITE_URL || process.env.NEXT_PUBLIC_SITE_URL}/in-stock/${work._id}`, + canonical: `${process.env.SITE_URL || process.env.NEXT_PUBLIC_SITE_URL}/in-stock/${work.slug || work._id}`, }, } } @@ -45,18 +45,22 @@ export async function generateStaticParams() { }) return works.map((work) => ({ - 'in-stock-detail': work._id, + 'in-stock-detail': work.slug || work._id, })) } export default async function Page({ params }: PageProps): Promise { - const { ['in-stock-detail']: workId } = await params - const work: WorkFromServer | null = await cockpit.getCollectionItem('works', workId) + const { ['in-stock-detail']: slug } = await params + const work: WorkFromServer | null = (await cockpit.getCollectionItemByField('works', 'slug', slug)) || (await cockpit.getCollectionItem('works', slug)) if (!work) { notFound() } + if (work.slug && work.slug !== slug) { + redirect(`/in-stock/${work.slug}`) + } + const breadcrumbsList: BreadcrumbItem[] = [ { title: 'Главная', diff --git a/src/app/in-stock/page.tsx b/src/app/in-stock/page.tsx index 858df62f..96e95c1c 100644 --- a/src/app/in-stock/page.tsx +++ b/src/app/in-stock/page.tsx @@ -30,10 +30,10 @@ export default async function Page(): Promise { }) const inStockList: CardItem[] = (worksData || []).map((work) => ({ - id: work._id, + id: work.slug || work._id, title: work.title, description: work.description, - href: `/in-stock/${work._id}`, + href: `/in-stock/${work.slug || work._id}`, image: cockpit.getImageUrl(work.image._id, 400, 400), alt: work.image.title || work.title, })) diff --git a/src/app/news/[news-detail]/page.tsx b/src/app/news/[news-detail]/page.tsx index 184db44a..8f181b92 100644 --- a/src/app/news/[news-detail]/page.tsx +++ b/src/app/news/[news-detail]/page.tsx @@ -1,6 +1,6 @@ import type { Metadata } from 'next' import { JSX } from 'react' -import { notFound } from 'next/navigation' +import { notFound, redirect } from 'next/navigation' import { BreadcrumbItem, NewsFromServer, SlideItem } from '@/types/types' import Heading from '@/components/Heading/Heading' import Detail from '@/components/Detail/Detail' @@ -13,8 +13,9 @@ type PageParams = { } export async function generateMetadata({ params }: PageParams): Promise { - const { ['news-detail']: id } = await params - const news: NewsFromServer | null = await cockpit.getCollectionItem('news', id) + const { ['news-detail']: slug } = await params + // Try to resolve by slug first (new), fallback to id if needed + const news: NewsFromServer | null = (await cockpit.getCollectionItemByField('news', 'slug', slug)) || (await cockpit.getCollectionItem('news', slug)) if (!news) { return { @@ -33,19 +34,24 @@ export async function generateMetadata({ params }: PageParams): Promise { - const { ['news-detail']: id } = await params - const news: NewsFromServer | null = await cockpit.getCollectionItem('news', id) + const { ['news-detail']: slug } = await params + const news: NewsFromServer | null = (await cockpit.getCollectionItemByField('news', 'slug', slug)) || (await cockpit.getCollectionItem('news', slug)) if (!news) { notFound() } + // If route used an id but the item has a slug, redirect to canonical slug URL for SEO + if (news.slug && news.slug !== slug) { + redirect(`/news/${news.slug}`) + } + const breadcrumbsList: BreadcrumbItem[] = [ { title: 'Главная', diff --git a/src/app/sitemap.xml/route.ts b/src/app/sitemap.xml/route.ts index 52e982c9..7b9940bf 100644 --- a/src/app/sitemap.xml/route.ts +++ b/src/app/sitemap.xml/route.ts @@ -27,22 +27,22 @@ export async function GET() { if (Array.isArray(works)) { works.forEach((w: unknown) => { - const item = w as { _id?: string } - if (item && item._id) urls.push(`${siteUrl}/works/${item._id}`) + const item = w as { _id?: string; slug?: string } + if (item && (item.slug || item._id)) urls.push(`${siteUrl}/works/${item.slug || item._id}`) }) } if (Array.isArray(news)) { news.forEach((n: unknown) => { - const item = n as { _id?: string } - if (item && item._id) urls.push(`${siteUrl}/news/${item._id}`) + const item = n as { _id?: string; slug?: string } + if (item && (item.slug || item._id)) urls.push(`${siteUrl}/news/${item.slug || item._id}`) }) } if (Array.isArray(categories)) { categories.forEach((c: unknown) => { - const item = c as { _id?: string } - if (item && item._id) urls.push(`${siteUrl}/categories/${item._id}`) + const item = c as { _id?: string; slug?: string } + if (item && (item.slug || item._id)) urls.push(`${siteUrl}/categories/${item.slug || item._id}`) }) } } catch (e) { diff --git a/src/app/works/[works-detail]/page.tsx b/src/app/works/[works-detail]/page.tsx index 04817a3c..cd0addc3 100644 --- a/src/app/works/[works-detail]/page.tsx +++ b/src/app/works/[works-detail]/page.tsx @@ -1,6 +1,6 @@ import type { Metadata } from 'next' import { JSX } from 'react' -import { notFound } from 'next/navigation' +import { notFound, redirect } from 'next/navigation' import { BreadcrumbItem, MasterFromServer, SlideItem, WorkFromServer } from '@/types/types' import Heading from '@/components/Heading/Heading' import Detail from '@/components/Detail/Detail' @@ -14,8 +14,9 @@ type PageProps = { } export async function generateMetadata({ params }: PageProps): Promise { - const { ['works-detail']: workId } = await params - const work: WorkFromServer | null = await cockpit.getCollectionItem('works', workId) + const { ['works-detail']: slug } = await params + // Resolve work by slug first, fallback to id for backwards compatibility + const work: WorkFromServer | null = (await cockpit.getCollectionItemByField('works', 'slug', slug)) || (await cockpit.getCollectionItem('works', slug)) if (!work) { return { @@ -34,7 +35,7 @@ export async function generateMetadata({ params }: PageProps): Promise images: work.image? [{ url: cockpit.getImageUrl(work.image._id, 1200, 630), alt: work.title }] : [], }, alternates: { - canonical: `${process.env.SITE_URL || process.env.NEXT_PUBLIC_SITE_URL}/works/${work._id}`, + canonical: `${process.env.SITE_URL || process.env.NEXT_PUBLIC_SITE_URL}/works/${work.slug || work._id}`, }, } } @@ -43,18 +44,22 @@ export async function generateStaticParams() { const works: WorkFromServer[] = await cockpit.getCollection('works') return works.map((work) => ({ - 'works-detail': work._id, + 'works-detail': work.slug || work._id, })) } export default async function Page({ params }: PageProps): Promise { - const { ['works-detail']: workId } = await params - const work: WorkFromServer | null = await cockpit.getCollectionItem('works', workId) + const { ['works-detail']: slug } = await params + const work: WorkFromServer | null = (await cockpit.getCollectionItemByField('works', 'slug', slug)) || (await cockpit.getCollectionItem('works', slug)) if (!work) { notFound() } + if (work.slug && work.slug !== slug) { + redirect(`/works/${work.slug}`) + } + const breadcrumbsList: BreadcrumbItem[] = [ { title: 'Главная', diff --git a/src/app/works/page.tsx b/src/app/works/page.tsx index ab8a1b4c..653d8bf9 100644 --- a/src/app/works/page.tsx +++ b/src/app/works/page.tsx @@ -29,10 +29,10 @@ export default async function Page(): Promise { }) const worksList: CardItem[] = (worksData || []).map((work) => ({ - id: work._id, + id: work.slug || work._id, title: work.title, description: work.description, - href: `/works/${work._id}`, + href: `/works/${work.slug || work._id}`, image: cockpit.getImageUrl(work.image._id, 400, 400), alt: work.image.title || work.title, })) diff --git a/src/components/Categories/Categories.tsx b/src/components/Categories/Categories.tsx index 00450c60..916713ea 100644 --- a/src/components/Categories/Categories.tsx +++ b/src/components/Categories/Categories.tsx @@ -15,10 +15,10 @@ export default async function Categories(): Promise { } const categoriesList: CardItem[] = categoriesData.map((category) => ({ - id: category._id, + id: category.slug || category._id, title: category.title, description: category.description, - href: `/categories/${category._id}`, + href: `/categories/${category.slug || category._id}`, image: cockpit.getImageUrl(category.image._id, 400, 400), alt: category.image.title || category.title, })) diff --git a/src/components/Main/Categories/Categories.tsx b/src/components/Main/Categories/Categories.tsx index 489ed3f3..70fba0c8 100644 --- a/src/components/Main/Categories/Categories.tsx +++ b/src/components/Main/Categories/Categories.tsx @@ -17,10 +17,10 @@ export default async function Categories(): Promise { } const categoriesList: CardItem[] = categoriesData.map((category) => ({ - id: category._id, + id: category.slug || category._id, title: category.title, description: category.description, - href: `/categories/${category._id}`, + href: `/categories/${category.slug || category._id}`, image: cockpit.getImageUrl(category.image._id, 400, 400), alt: category.image.title || category.title, })) diff --git a/src/components/Main/InStock/InStock.tsx b/src/components/Main/InStock/InStock.tsx index 044dbae8..9673f7e1 100644 --- a/src/components/Main/InStock/InStock.tsx +++ b/src/components/Main/InStock/InStock.tsx @@ -18,10 +18,10 @@ export default async function InStock(): Promise { } const inStockList: CardItem[] = worksData.map((work) => ({ - id: work._id, + id: work.slug || work._id, title: work.title, description: work.description, - href: `/in-stock/${work._id}`, + href: `/in-stock/${work.slug || work._id}`, image: cockpit.getImageUrl(work.image._id, 400, 400), alt: work.image.title || work.title, })) diff --git a/src/components/Main/LastWorks/LastWorks.tsx b/src/components/Main/LastWorks/LastWorks.tsx index df2c95a5..675ef0c3 100644 --- a/src/components/Main/LastWorks/LastWorks.tsx +++ b/src/components/Main/LastWorks/LastWorks.tsx @@ -17,10 +17,10 @@ export default async function LastWorks(): Promise { } const worksList: CardItem[] = worksData.map((work) => ({ - id: work._id, + id: work.slug || work._id, title: work.title, description: work.description, - href: `/works/${work._id}`, + href: `/works/${work.slug || work._id}`, image: cockpit.getImageUrl(work.image._id, 400, 400), alt: work.image.title || work.title, })) diff --git a/src/components/Main/Masters/Masters.tsx b/src/components/Main/Masters/Masters.tsx index fda4ce2e..0c9ea4b8 100644 --- a/src/components/Main/Masters/Masters.tsx +++ b/src/components/Main/Masters/Masters.tsx @@ -17,10 +17,10 @@ export default async function Masters(): Promise { } const mastersList: CardItem[] = mastersData.map((master) => ({ - id: master._id, + id: master.slug || master._id, title: master.name, description: master.description, - href: `/masters/${master._id}`, + href: `/masters/${master.slug || master._id}`, image: cockpit.getImageUrl(master.image._id, 400, 400), alt: master.image.title || master.name, })) diff --git a/src/components/Main/News/News.tsx b/src/components/Main/News/News.tsx index c1485696..93069d81 100644 --- a/src/components/Main/News/News.tsx +++ b/src/components/Main/News/News.tsx @@ -17,10 +17,10 @@ export default async function News(): Promise { } const newsList: CardItem[] = newsData.map((news) => ({ - id: news._id, + id: news.slug || news._id, title: news.title, description: news.description, - href: `/news/${news._id}`, + href: `/news/${news.slug || news._id}`, image: cockpit.getImageUrl(news.image._id, 400, 400), alt: news.image.title || news.title, })) diff --git a/src/components/News/News.tsx b/src/components/News/News.tsx index ef5663b3..328d6d5d 100644 --- a/src/components/News/News.tsx +++ b/src/components/News/News.tsx @@ -13,10 +13,10 @@ export default async function News(): Promise { } const newsList: CardItem[] = newsData.map((news) => ({ - id: news._id, + id: news.slug || news._id, title: news.title, description: news.description, - href: `/news/${news._id}`, + href: `/news/${news.slug || news._id}`, image: cockpit.getImageUrl(news.image._id, 400, 400), alt: news.image.title || news.title, })) diff --git a/src/lib/CockpitAPI.ts b/src/lib/CockpitAPI.ts index bd91344d..25e80ea1 100644 --- a/src/lib/CockpitAPI.ts +++ b/src/lib/CockpitAPI.ts @@ -1,6 +1,7 @@ interface CockpitOptions { locale?: string - filter?: Record + // filter values can be string, number, boolean or complex objects (e.g. { field: value }) + filter?: Record sort?: Record limit?: number skip?: number @@ -52,6 +53,23 @@ class CockpitClient { } } + /** + * Fetch single item from a collection by arbitrary field (e.g. slug) + * Returns first matched item or null + */ + async getCollectionItemByField(modelId: string, field: string, value: string, options: CockpitOptions = {}) { + try { + const filter = { ...(options.filter || {}), [field]: value } + const items: unknown[] = await this.getCollection(modelId, { ...options, filter, limit: 1 }) + + if (Array.isArray(items) && items.length > 0) return items[0] as unknown + return null + } catch (e) { + console.error('Cockpit getCollectionItemByField error', e) + return null + } + } + async getTree(modelId: string, options: CockpitOptions = {}) { const query = this.createQueryString(options) const endpoint = `content/tree/${modelId}${query}` diff --git a/src/types/types.ts b/src/types/types.ts index 0e6211d7..9bdaecc3 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -99,6 +99,7 @@ export type CategoryFromServer = { description: string image: ImageItem slider: ImageItem[] + slug?: string } export type WorkFromServer = { @@ -110,6 +111,7 @@ export type WorkFromServer = { date: string master: MasterFromServer | null in_stock: boolean + slug?: string } export type NewsFromServer = { @@ -120,6 +122,7 @@ export type NewsFromServer = { image: ImageItem _id: string date: string + slug?: string } export type ReviewFromServer = { @@ -135,6 +138,7 @@ export type MasterFromServer = { name: string description: string image: ImageItem + slug?: string } export type OrderFromServer = { From bada3bc772be9571d0a48a77725aa3fa64010e57 Mon Sep 17 00:00:00 2001 From: Yuriy Plotnikov Date: Wed, 29 Apr 2026 23:15:36 +0300 Subject: [PATCH 02/42] Fix main slider height --- src/components/Main/SliderMain/SliderMain.module.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Main/SliderMain/SliderMain.module.scss b/src/components/Main/SliderMain/SliderMain.module.scss index 13aa7cd4..f22c256d 100644 --- a/src/components/Main/SliderMain/SliderMain.module.scss +++ b/src/components/Main/SliderMain/SliderMain.module.scss @@ -3,18 +3,18 @@ .slider-main { overflow: hidden; - padding: 0; -} - -.slider-main__item { height: 800px; max-height: calc(100vh - 80px); + padding: 0; @supports (max-height: calc(100svh - 80px)) { max-height: calc(100svh - 80px); } } +.slider-main__item { +} + .slider-main__item-image { filter: brightness(0.75); } From 08a415f6e9e35be0f5a984514444bcd3e4b9de2d Mon Sep 17 00:00:00 2001 From: Yuriy Plotnikov Date: Thu, 30 Apr 2026 00:12:50 +0300 Subject: [PATCH 03/42] Fix styles --- src/components/Address/Address.module.scss | 6 +- .../Breadcrumbs/Breadcrumbs.module.scss | 2 +- src/components/Card/Card.module.scss | 18 +++--- .../Categories/Categories.module.scss | 8 +-- src/components/Contacts/Contacts.module.scss | 4 +- .../ContactsPage/ContactsPage.module.scss | 10 +-- src/components/Detail/Detail.module.scss | 10 +-- .../Developer/Developer.module.scss | 2 +- src/components/Footer/Footer.module.scss | 20 +++--- src/components/Footer/Footer.tsx | 4 +- .../GalleryPage/GalleryPage.module.scss | 8 +-- src/components/Header/Header.module.scss | 16 ++--- src/components/Header/Header.tsx | 2 +- .../HeaderMenu/HeaderMenu.module.scss | 12 ++-- src/components/Heading/Heading.module.scss | 2 +- src/components/Logo/Logo.module.scss | 13 ++-- src/components/Logo/Logo.tsx | 15 ++--- src/components/Main/About/About.module.scss | 22 +++---- .../Main/Advantages/Advantages.module.scss | 16 ++--- src/components/Main/Anchor/Anchor.module.scss | 12 ++-- .../Main/Calculation/Calculation.module.scss | 2 +- .../Main/Categories/Categories.module.scss | 2 +- src/components/Main/Faq/Faq.module.scss | 22 +++---- .../Main/Gallery/Gallery.module.scss | 2 +- .../Main/InStock/InStock.module.scss | 10 +-- .../Main/LastWorks/LastWorks.module.scss | 2 +- .../Main/Masters/Masters.module.scss | 2 +- src/components/Main/News/News.module.scss | 2 +- .../Main/Process/Process.module.scss | 43 +++++++++---- .../Main/Restoration/Restoration.module.scss | 26 ++++---- .../Main/SliderMain/SliderMain.module.scss | 38 +++++------ src/components/Master/Master.module.scss | 14 ++-- src/components/Menu/Menu.module.scss | 6 +- src/components/Menu/Menu.tsx | 8 ++- src/components/News/News.module.scss | 8 +-- src/components/NotFound/NotFound.module.scss | 26 ++++---- src/components/Payment/Payment.module.scss | 2 +- .../ReviewsList/ReviewsList.module.scss | 34 ++++++---- .../SliderDetail/SliderDetail.module.scss | 10 +-- src/components/Social/Social.module.scss | 6 +- src/components/Works/Works.module.scss | 8 +-- src/css/style.scss | 0 src/styles/blocks/button.scss | 16 ++--- src/styles/blocks/container.scss | 12 ++-- src/styles/blocks/section.scss | 26 ++++---- src/styles/globals.scss | 12 ++-- src/styles/modules/form.module.scss | 64 +++++++++++-------- src/styles/modules/slider.module.scss | 26 ++++---- 48 files changed, 337 insertions(+), 294 deletions(-) delete mode 100644 src/css/style.scss diff --git a/src/components/Address/Address.module.scss b/src/components/Address/Address.module.scss index 4d70373b..644bd171 100644 --- a/src/components/Address/Address.module.scss +++ b/src/components/Address/Address.module.scss @@ -1,14 +1,14 @@ -@use '../../styles/variables.scss' as var; +@use '../../styles/variables.scss' as *; .address { font-size: 18px; font-style: normal; - @media (max-width: var.$desktop-mid-width) { + @media (max-width: $desktop-mid-width) { font-size: 16px; } - @media (max-width: var.$tablet-mid-width) { + @media (max-width: $tablet-mid-width) { display: none; } } diff --git a/src/components/Breadcrumbs/Breadcrumbs.module.scss b/src/components/Breadcrumbs/Breadcrumbs.module.scss index 77ad9aa9..75e4c83e 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.module.scss +++ b/src/components/Breadcrumbs/Breadcrumbs.module.scss @@ -1,4 +1,4 @@ -@use '../../styles/variables.scss' as var; +@use '../../styles/variables.scss' as *; .breadcrumbs { } diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss index d824da20..dd44e733 100644 --- a/src/components/Card/Card.module.scss +++ b/src/components/Card/Card.module.scss @@ -1,4 +1,4 @@ -@use '../../styles/variables.scss' as var; +@use '../../styles/variables.scss' as *; @use '../../styles/mixins' as mixin; .card { @@ -9,8 +9,8 @@ width: 100%; height: 500px; - background-color: var.$accent-light-bg; - box-shadow: var.$cardShadow; + background-color: $accent-light-bg; + box-shadow: $cardShadow; border-radius: 40px; @media (hover: hover) { @@ -22,11 +22,11 @@ } } - @media (max-width: var.$desktop-min-width) { + @media (max-width: $desktop-min-width) { height: 400px; } - @media (max-width: var.$tablet-min-width) { + @media (max-width: $tablet-min-width) { height: 300px; .card__content { @@ -49,9 +49,9 @@ height: 100%; padding: 30px; - color: var.$bg-text-color; + color: $bg-text-color; - background: var.$cardGradient; + background: $cardGradient; transition: 0.6s ease-in-out; } @@ -64,7 +64,7 @@ @include mixin.line-clamp(2); - @media (max-width: var.$tablet-min-width) { + @media (max-width: $tablet-min-width) { font-size: 22px; } } @@ -76,7 +76,7 @@ @include mixin.line-clamp(8); - @media (max-width: var.$tablet-min-width) { + @media (max-width: $tablet-min-width) { font-size: 14px; } } diff --git a/src/components/Categories/Categories.module.scss b/src/components/Categories/Categories.module.scss index 78826672..e943abbc 100644 --- a/src/components/Categories/Categories.module.scss +++ b/src/components/Categories/Categories.module.scss @@ -1,4 +1,4 @@ -@use '../../styles/variables' as var; +@use '../../styles/variables' as *; .categories__list { display: grid; @@ -6,13 +6,13 @@ grid-auto-rows: 1fr; gap: 30px; - @media (max-width: var.$desktop-min-width) { + @media (max-width: $desktop-min-width) { grid-template-columns: 1fr 1fr 1fr; } - @media (max-width: var.$tablet-mid-width) { + @media (max-width: $tablet-mid-width) { grid-template-columns: 1fr 1fr; } - @media (max-width: var.$tablet-min-width) { + @media (max-width: $tablet-min-width) { grid-template-columns: 1fr; } } diff --git a/src/components/Contacts/Contacts.module.scss b/src/components/Contacts/Contacts.module.scss index be346eb1..34bcb0ad 100644 --- a/src/components/Contacts/Contacts.module.scss +++ b/src/components/Contacts/Contacts.module.scss @@ -1,4 +1,4 @@ -@use '../../styles/variables.scss' as var; +@use '../../styles/variables.scss' as *; .contacts { } @@ -14,7 +14,7 @@ transition: opacity 0.4s ease-in-out; - @media (max-width: var.$desktop-mid-width) { + @media (max-width: $desktop-mid-width) { font-size: 16px; } diff --git a/src/components/ContactsPage/ContactsPage.module.scss b/src/components/ContactsPage/ContactsPage.module.scss index c2cdcb92..1866a89b 100644 --- a/src/components/ContactsPage/ContactsPage.module.scss +++ b/src/components/ContactsPage/ContactsPage.module.scss @@ -1,4 +1,4 @@ -@use '../../styles/variables.scss' as var; +@use '../../styles/variables.scss' as *; .contacts { } @@ -8,7 +8,7 @@ grid-template-rows: repeat(3, auto); grid-template-columns: 1fr 1fr; - @media (max-width: var.$tablet-min-width) { + @media (max-width: $tablet-min-width) { display: flex; flex-direction: column; } @@ -20,7 +20,7 @@ font-size: 18px; - @media (max-width: var.$desktop-mid-width) { + @media (max-width: $desktop-mid-width) { font-size: 16px; } } @@ -50,7 +50,7 @@ transition: opacity 0.4s ease-in-out; - @media (max-width: var.$desktop-mid-width) { + @media (max-width: $desktop-mid-width) { font-size: 16px; } @@ -77,5 +77,5 @@ grid-column: 2 / 3; min-height: 500px; - background-color: var.$form-bg; + background-color: $form-bg; } diff --git a/src/components/Detail/Detail.module.scss b/src/components/Detail/Detail.module.scss index 5c069a1e..2639b030 100644 --- a/src/components/Detail/Detail.module.scss +++ b/src/components/Detail/Detail.module.scss @@ -1,4 +1,4 @@ -@use '../../styles/variables.scss' as var; +@use '../../styles/variables.scss' as *; .detail { } @@ -7,7 +7,7 @@ display: grid; grid-template-columns: 1fr 1fr; - @media (max-width: var.$tablet-mid-width) { + @media (max-width: $tablet-mid-width) { grid-template-columns: 1fr; } } @@ -17,7 +17,7 @@ flex-direction: column; gap: 30px; - @media (max-width: var.$tablet-mid-width) { + @media (max-width: $tablet-mid-width) { order: 2; } } @@ -36,12 +36,12 @@ width: 100%; height: 500px; - @media (max-width: var.$tablet-min-width) { + @media (max-width: $tablet-min-width) { height: 400px; } } .detail__image { border-radius: 40px; - box-shadow: var.$cardShadow; + box-shadow: $cardShadow; } diff --git a/src/components/Developer/Developer.module.scss b/src/components/Developer/Developer.module.scss index 711be93a..6db2d103 100644 --- a/src/components/Developer/Developer.module.scss +++ b/src/components/Developer/Developer.module.scss @@ -1,4 +1,4 @@ -@use '../../styles/variables.scss' as var; +@use '../../styles/variables.scss' as *; .developer { transition: opacity 0.4s ease-in-out; diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss index 5a2ebfd1..4535c2d8 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/Footer/Footer.module.scss @@ -1,24 +1,24 @@ -@use '../../styles/variables.scss' as var; +@use '../../styles/variables.scss' as *; .footer { margin-top: auto; padding: 30px 0; - color: var.$bg-text-color; + color: $bg-text-color; - background-color: var.$accent-dark-bg; + background-color: $accent-dark-bg; } .footer__container { display: grid; grid-template-rows: repeat(3, auto); - grid-template-columns: 200px 1fr; + grid-template-columns: 350px 1fr; gap: 30px; - @media (max-width: var.$tablet-mid-width) { + @media (max-width: $tablet-mid-width) { gap: 20px; } - @media (max-width: var.$tablet-min-width) { + @media (max-width: $tablet-min-width) { display: flex; flex-direction: column; } @@ -41,7 +41,7 @@ grid-column: 2 / 3; gap: 30px; - @media (max-width: var.$tablet-mid-width) { + @media (max-width: $tablet-mid-width) { flex-direction: column; gap: 20px; } @@ -55,7 +55,7 @@ place-items: start; - @media (max-width: var.$tablet-mid-width) { + @media (max-width: $tablet-mid-width) { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); font-size: 18px; @@ -71,9 +71,9 @@ gap: 20px; padding: 20px 0 0; - border-top: 1px solid var.$accent-add-bg; + border-top: 1px solid $accent-add-bg; - @media (max-width: var.$tablet-mid-width) { + @media (max-width: $tablet-mid-width) { flex-direction: column-reverse; } } diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index d5c47d3f..a9d4585e 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -10,12 +10,12 @@ export default function Footer(): JSX.Element { return (