diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/README.md b/README.md index 5f9e97051..bcc04cdb7 100644 --- a/README.md +++ b/README.md @@ -1,55 +1,28 @@ -# Museum landing page -Implement landing page according to [Figma design](https://www.figma.com/file/cRBCqE06cDrY3s4jX7h3iY/%D0%9D%D0%90%D0%9C%D0%A3-(Edit)?node-id=0%3A1) - Use BEM and SCSS +# NAMU Landing Page -Check font styles. Use [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Plex+Sans?query=ibm), [Montserrat](https://fonts.google.com/specimen/Montserrat?query=mon) +[Live Demo](https://razor5000.github.io/Museum-landing/) -- The design 1440px -- Desktop 1280px -- Tablet 640px -- Mobile (> 320px) -1. Implement the header with hamburger menu. -1. Implement `Художній Музей` block. -1. Implement `Актуальні події` block with two similar blocks `Йду і повертаюсь`, `І спогади і мрії`. -1. Implement `Від класицизму до романтизму` block. -1. Implement `Галерея` block and slider. -1. Implement `Підписка` block. -1. Implement footer. +![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) +![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) +![Sass](https://img.shields.io/badge/Sass-hotpink.svg?style=for-the-badge&logo=Sass&logoColor=white) +![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white) -## Checklist for preparing a portfolio project for HR review +## 📋 Описание проекта +Адаптивный лендинг для национального художественного музея украины. В проекте реализована верстка по макету Figma, использованы современные подходы к стилизации и сборке. -1. Don’t forget to add a title for the whole web page (it could be the name of your landing) -2. A landing page is implemented strictly according to the design in Figma -4. Links in the header and footer menus should lead to the corresponding blocks of the landing page -5. The speed of animations is the same throughout the landing page (for example, increasing when hovering or moving blocks when scrolling) -6. Placeholders in the forms suggest what to enter, and if there is a validation of the form, then it is clear in what format to enter the phone number -7. Make sure everything looks neat on mobile and without horizontal scrolling -8. Add favicon -9. Add a smooth scroll for the whole page -10. When you try to send the form there is no 405 error and the form is automatically cleared after submit and is scrolled to the top of the page or the page is reloaded -11. The form shouldn’t submit empty -12. The buttons "exhibitions" and "tickets" should lead to the block with current events -13. The button "about us" should lead to the email digest -14. Facebook and Instagram icons in the footer should be clickable and open the museum's social networks in a new tab -15. Pictures in the gallery and exhibitions sections should increase on hover -16. OPTIONAL: After everything is done, you can add a slider for viewing pictures in the gallery (for mobile version) +превью проекта +## 🛠 Технологии +* **HTML5 / SCSS** (БЭМ методология) +* **Vite** (сборка проекта) +* **Cypress** (тестирование) +* **GitHub Pages** (хостинг) -## Github flow -1. **Fork** the repo. -2. **Clone** the forked one. (The project link should have your name but not `mate-academy`) -3. Run `npm install` (or just `npm i`). -4. Run `npm start`. -5. Open one more terminal window for the next steps. -6. `git checkout -b develop` - to create new branch and switch on it. -7. Write you code in `src` folder. -8. Run `npm run lint` and fix code style errors. -9. Run `npm run deploy` to deploy your solution to `gh-pages`. -10. `git add . && git commit -m 'solution'` to save your changes. -11. `git push origin develop` - to send you code for PR. -12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. -13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/Museum/). -14. Copy `DEMO LINK` to the PR description. - -> To update you PR repeat steps 7-11. +## 🚀 Как запустить локально +1. Клонировать репозиторий: + `git clone https://github.com/razor5000/Museum-landing.git` +2. Установить зависимости: + `npm install` +3. Запустить режим разработки: + `npm run dev` diff --git a/index.html b/index.html index d339e6856..0d0af15a3 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -6,14 +7,427 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + Museum + + + + + - -

Hello Mate Academy

- + + + + + + + + + +
+

Актуальні події

+ +
+ + + + Йду і повертаюсь + +
+
+
ВИСТАВКА
+ +
+

Йду і повертаюсь

+

+ Національний Художній Музей України презентує унікальну частину колекції Градобанку - українське мистецтво другої половини 1980-1995 років. +

+
+
+ + + +
+ + + + Йду і повертаюсь + +
+
+
ВИСТАВКА
+ +
+

І спогади і мрії

+

+ Національний художній музей України до 100 річчя від дня народження видатної української художниці Тетяни Яблонської відкриває ретроспективну ювілейну виставку «І спогади і мрії». +

+
+
+ + +
+ + + + Йду і повертаюсь + +
+
+
ЛЕКЦІЯ
+ +
+

Від класицизму до романтизму

+ +
+
+ + + + + + + +
+ + + + + + + diff --git a/package-lock.json b/package-lock.json index fbfeb1428..3bf64afbb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", @@ -1875,10 +1875,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index ab5f87b9b..a0e9b6780 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "museum", "version": "1.0.0", "description": "museum", - "homepage": "Museum", + "homepage": "https://razor5000.github.io/Museum-landing/", "scripts": { "init": "mate-scripts init", "start": "mate-scripts start", @@ -24,7 +24,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", diff --git a/src/icons/arrow.svg b/src/icons/arrow.svg new file mode 100644 index 000000000..3ac7d7967 --- /dev/null +++ b/src/icons/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/burger.svg b/src/icons/burger.svg new file mode 100644 index 000000000..4808d19e1 --- /dev/null +++ b/src/icons/burger.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/close.svg b/src/icons/close.svg new file mode 100644 index 000000000..f2cfd07c0 --- /dev/null +++ b/src/icons/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/facebook.svg b/src/icons/facebook.svg new file mode 100644 index 000000000..7702febec --- /dev/null +++ b/src/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/instagram.svg b/src/icons/instagram.svg new file mode 100644 index 000000000..b080c7a38 --- /dev/null +++ b/src/icons/instagram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/icons/na_mu.svg b/src/icons/na_mu.svg new file mode 100644 index 000000000..f9d6c858d --- /dev/null +++ b/src/icons/na_mu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/vector-header.svg b/src/icons/vector-header.svg new file mode 100644 index 000000000..ad9be9fe3 --- /dev/null +++ b/src/icons/vector-header.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/vector-subscribe.svg b/src/icons/vector-subscribe.svg new file mode 100644 index 000000000..4bd4df415 --- /dev/null +++ b/src/icons/vector-subscribe.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/bgi/desktop/header-bgi.png b/src/images/bgi/desktop/header-bgi.png new file mode 100644 index 000000000..5a0b8a083 Binary files /dev/null and b/src/images/bgi/desktop/header-bgi.png differ diff --git a/src/images/bgi/desktop/subscribe-bgi.gif b/src/images/bgi/desktop/subscribe-bgi.gif new file mode 100644 index 000000000..8297ca702 Binary files /dev/null and b/src/images/bgi/desktop/subscribe-bgi.gif differ diff --git a/src/images/bgi/mobile/header-bgi.png b/src/images/bgi/mobile/header-bgi.png new file mode 100644 index 000000000..510ebfb3a Binary files /dev/null and b/src/images/bgi/mobile/header-bgi.png differ diff --git a/src/images/bgi/mobile/subscribe-bgi.jpg b/src/images/bgi/mobile/subscribe-bgi.jpg new file mode 100644 index 000000000..33005b58b Binary files /dev/null and b/src/images/bgi/mobile/subscribe-bgi.jpg differ diff --git a/src/images/bgi/tablet/header-bgi.png b/src/images/bgi/tablet/header-bgi.png new file mode 100644 index 000000000..2056b01ea Binary files /dev/null and b/src/images/bgi/tablet/header-bgi.png differ diff --git a/src/images/bgi/tablet/subscribe-bgi.jpg b/src/images/bgi/tablet/subscribe-bgi.jpg new file mode 100644 index 000000000..3f37f1434 Binary files /dev/null and b/src/images/bgi/tablet/subscribe-bgi.jpg differ diff --git a/src/images/events/desktop/events-painting-1.avif b/src/images/events/desktop/events-painting-1.avif new file mode 100644 index 000000000..3aeb40e34 Binary files /dev/null and b/src/images/events/desktop/events-painting-1.avif differ diff --git a/src/images/events/desktop/events-painting-1.png b/src/images/events/desktop/events-painting-1.png new file mode 100644 index 000000000..507bebd79 Binary files /dev/null and b/src/images/events/desktop/events-painting-1.png differ diff --git a/src/images/events/desktop/events-painting-2.avif b/src/images/events/desktop/events-painting-2.avif new file mode 100644 index 000000000..39dd521d1 Binary files /dev/null and b/src/images/events/desktop/events-painting-2.avif differ diff --git a/src/images/events/desktop/events-painting-2.png b/src/images/events/desktop/events-painting-2.png new file mode 100644 index 000000000..9fda888d9 Binary files /dev/null and b/src/images/events/desktop/events-painting-2.png differ diff --git a/src/images/events/desktop/events-painting-3-1.jpg b/src/images/events/desktop/events-painting-3-1.jpg new file mode 100644 index 000000000..71eb75d93 Binary files /dev/null and b/src/images/events/desktop/events-painting-3-1.jpg differ diff --git a/src/images/events/desktop/events-painting-3.avif b/src/images/events/desktop/events-painting-3.avif new file mode 100644 index 000000000..92b6e9582 Binary files /dev/null and b/src/images/events/desktop/events-painting-3.avif differ diff --git a/src/images/events/desktop/events-painting-3.png b/src/images/events/desktop/events-painting-3.png new file mode 100644 index 000000000..e8dc05d99 Binary files /dev/null and b/src/images/events/desktop/events-painting-3.png differ diff --git a/src/images/events/mobile/events-painting-1.png b/src/images/events/mobile/events-painting-1.png new file mode 100644 index 000000000..9dc455112 Binary files /dev/null and b/src/images/events/mobile/events-painting-1.png differ diff --git a/src/images/events/mobile/events-painting-2.png b/src/images/events/mobile/events-painting-2.png new file mode 100644 index 000000000..258f35453 Binary files /dev/null and b/src/images/events/mobile/events-painting-2.png differ diff --git a/src/images/events/mobile/events-painting-3.png b/src/images/events/mobile/events-painting-3.png new file mode 100644 index 000000000..7d98cb886 Binary files /dev/null and b/src/images/events/mobile/events-painting-3.png differ diff --git a/src/images/events/tablet/events-painting-1.avif b/src/images/events/tablet/events-painting-1.avif new file mode 100644 index 000000000..aa7055bb7 Binary files /dev/null and b/src/images/events/tablet/events-painting-1.avif differ diff --git a/src/images/events/tablet/events-painting-1.png b/src/images/events/tablet/events-painting-1.png new file mode 100644 index 000000000..a0f0edbe3 Binary files /dev/null and b/src/images/events/tablet/events-painting-1.png differ diff --git a/src/images/events/tablet/events-painting-2.avif b/src/images/events/tablet/events-painting-2.avif new file mode 100644 index 000000000..27e1553cd Binary files /dev/null and b/src/images/events/tablet/events-painting-2.avif differ diff --git a/src/images/events/tablet/events-painting-2.png b/src/images/events/tablet/events-painting-2.png new file mode 100644 index 000000000..58c5c936c Binary files /dev/null and b/src/images/events/tablet/events-painting-2.png differ diff --git a/src/images/events/tablet/events-painting-3.avif b/src/images/events/tablet/events-painting-3.avif new file mode 100644 index 000000000..cc232cc5e Binary files /dev/null and b/src/images/events/tablet/events-painting-3.avif differ diff --git a/src/images/events/tablet/events-painting-3.png b/src/images/events/tablet/events-painting-3.png new file mode 100644 index 000000000..7d836a0bd Binary files /dev/null and b/src/images/events/tablet/events-painting-3.png differ diff --git a/src/images/gallery/desktop/gluhoman'.avif b/src/images/gallery/desktop/gluhoman'.avif new file mode 100644 index 000000000..034f50ec5 Binary files /dev/null and b/src/images/gallery/desktop/gluhoman'.avif differ diff --git a/src/images/gallery/desktop/gluhoman'.png b/src/images/gallery/desktop/gluhoman'.png new file mode 100644 index 000000000..e0d15cb48 Binary files /dev/null and b/src/images/gallery/desktop/gluhoman'.png differ diff --git a/src/images/gallery/desktop/na-more.avif b/src/images/gallery/desktop/na-more.avif new file mode 100644 index 000000000..226b38222 Binary files /dev/null and b/src/images/gallery/desktop/na-more.avif differ diff --git a/src/images/gallery/desktop/na-more.png b/src/images/gallery/desktop/na-more.png new file mode 100644 index 000000000..0b6c06438 Binary files /dev/null and b/src/images/gallery/desktop/na-more.png differ diff --git a/src/images/gallery/desktop/nevesta.avif b/src/images/gallery/desktop/nevesta.avif new file mode 100644 index 000000000..a6f0a8583 Binary files /dev/null and b/src/images/gallery/desktop/nevesta.avif differ diff --git a/src/images/gallery/desktop/nevesta.png b/src/images/gallery/desktop/nevesta.png new file mode 100644 index 000000000..b0f8dbefd Binary files /dev/null and b/src/images/gallery/desktop/nevesta.png differ diff --git a/src/images/gallery/desktop/solnechnyy-den'.avif b/src/images/gallery/desktop/solnechnyy-den'.avif new file mode 100644 index 000000000..3bab9df57 Binary files /dev/null and b/src/images/gallery/desktop/solnechnyy-den'.avif differ diff --git a/src/images/gallery/desktop/solnechnyy-den'.png b/src/images/gallery/desktop/solnechnyy-den'.png new file mode 100644 index 000000000..48b51a0b9 Binary files /dev/null and b/src/images/gallery/desktop/solnechnyy-den'.png differ diff --git a/src/images/gallery/mobile/gusy.avif b/src/images/gallery/mobile/gusy.avif new file mode 100644 index 000000000..f37fe565d Binary files /dev/null and b/src/images/gallery/mobile/gusy.avif differ diff --git a/src/images/gallery/mobile/gusy.png b/src/images/gallery/mobile/gusy.png new file mode 100644 index 000000000..af1c266c8 Binary files /dev/null and b/src/images/gallery/mobile/gusy.png differ diff --git a/src/images/gallery/mobile/nevesta.avif b/src/images/gallery/mobile/nevesta.avif new file mode 100644 index 000000000..0054234d7 Binary files /dev/null and b/src/images/gallery/mobile/nevesta.avif differ diff --git a/src/images/gallery/mobile/nevesta.png b/src/images/gallery/mobile/nevesta.png new file mode 100644 index 000000000..f289f715f Binary files /dev/null and b/src/images/gallery/mobile/nevesta.png differ diff --git a/src/images/gallery/tablet/gusy.avif b/src/images/gallery/tablet/gusy.avif new file mode 100644 index 000000000..f37fe565d Binary files /dev/null and b/src/images/gallery/tablet/gusy.avif differ diff --git a/src/images/gallery/tablet/gusy.png b/src/images/gallery/tablet/gusy.png new file mode 100644 index 000000000..e9b2b842e Binary files /dev/null and b/src/images/gallery/tablet/gusy.png differ diff --git a/src/images/gallery/tablet/nevesta.avif b/src/images/gallery/tablet/nevesta.avif new file mode 100644 index 000000000..d70beca78 Binary files /dev/null and b/src/images/gallery/tablet/nevesta.avif differ diff --git a/src/images/gallery/tablet/nevesta.png b/src/images/gallery/tablet/nevesta.png new file mode 100644 index 000000000..ef7e013dc Binary files /dev/null and b/src/images/gallery/tablet/nevesta.png differ diff --git a/src/images/preview.jpg b/src/images/preview.jpg new file mode 100644 index 000000000..f15788df7 Binary files /dev/null and b/src/images/preview.jpg differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..704200b26 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,28 @@ 'use strict'; + +import '../styles/base/_styles.scss'; + +document.addEventListener('DOMContentLoaded', () => { + const menuBtn = document.querySelector('.header__menu-button'); + + if (menuBtn) { + menuBtn.onclick = () => { + document.body.classList.toggle('is-locked'); + document.querySelector('.menu').classList.toggle('is-active'); + }; + } + + const closeElements = document.querySelectorAll('.menu__link, .menu__close'); + + closeElements.forEach(link => { + link.addEventListener('click', () => { + document.body.classList.remove('is-locked'); + + const menu = document.querySelector('.menu'); + + if (menu) { + menu.classList.remove('is-active'); + } + }); + }); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss new file mode 100644 index 000000000..aee48301d --- /dev/null +++ b/src/styles/base/_base.scss @@ -0,0 +1,16 @@ +html { + scroll-behavior: smooth; + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +body { + margin: 0; + font-family: 'IBM Plex Sans', sans-serif; + background: $c-gray; +} diff --git a/src/styles/base/_fonts.scss b/src/styles/base/_fonts.scss new file mode 100644 index 000000000..e51988fff --- /dev/null +++ b/src/styles/base/_fonts.scss @@ -0,0 +1,6 @@ +// @font-face { +// font-family: Roboto, Arial, Helvetica, sans-serif; +// src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); +// font-weight: normal; +// font-style: normal; +// } diff --git a/src/styles/base/_styles.scss b/src/styles/base/_styles.scss new file mode 100644 index 000000000..e9f6130ec --- /dev/null +++ b/src/styles/base/_styles.scss @@ -0,0 +1,18 @@ +@import 'utils'; +@import 'fonts'; +@import 'typography'; +@import 'base'; +@import '../body/header'; +@import '../body/promo-group'; +@import '../body/menu'; +@import '../body/time-table'; +@import '../body/body'; +@import '../body/events-group'; +@import '../body/articles'; +@import '../body/lection'; +@import '../body/gallery'; +@import '../body/subscribe'; +@import '../body/email-group'; +@import '../body/footer'; +@import '../body/logo'; +@import '../body/contacts'; diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss new file mode 100644 index 000000000..f6cc4a358 --- /dev/null +++ b/src/styles/base/_typography.scss @@ -0,0 +1,31 @@ +h1 { + @extend %h1; +} + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} + +h4 { + @extend %h4; +} + +h5 { + @extend %h5; +} + +p { + @extend %p-base; +} + +small { + @extend %small; +} + +time { + @extend %time; +} diff --git a/src/styles/base/_utils.scss b/src/styles/base/_utils.scss new file mode 100644 index 000000000..72bd79967 --- /dev/null +++ b/src/styles/base/_utils.scss @@ -0,0 +1,4 @@ +@import '../utils/vars'; +@import '../utils/mixins'; +@import '../utils/extends'; +@import '../utils/sr-only'; diff --git a/src/styles/body/_articles.scss b/src/styles/body/_articles.scss new file mode 100644 index 000000000..c2476c61a --- /dev/null +++ b/src/styles/body/_articles.scss @@ -0,0 +1,44 @@ +.articles { + width: 100%; + + &__title { + display: block; + margin: 0; + margin-top: 40px; + + @include on-tablet { + padding-inline: 34px; + text-align: start; + } + + @include on-desktop { + padding-inline: 56px; + } + + &--after-lection { + display: block; + margin: 0; + margin-top: 180px; + + @include on-tablet { + padding-inline: 34px; + text-align: start; + } + + @include on-desktop { + padding-inline: 0; + } + } + } + + &__events-group { + margin-top: 40px; + &--inner { + margin-top: 60px; + } + } + + &__subscribe { + margin-top: 100px; + } +} diff --git a/src/styles/body/_body.scss b/src/styles/body/_body.scss new file mode 100644 index 000000000..6f57fe76a --- /dev/null +++ b/src/styles/body/_body.scss @@ -0,0 +1,33 @@ +.body { + min-width: 320px; + max-width: 1280px; + margin: 0 auto; + + &__menu { + pointer-events: none; + + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + + padding: 0; + + opacity: 0; + + transition: all $transition-time; + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } + } + +} + +.is-locked { + touch-action: none; + overflow: hidden; +} diff --git a/src/styles/body/_contacts.scss b/src/styles/body/_contacts.scss new file mode 100644 index 000000000..311184ca7 --- /dev/null +++ b/src/styles/body/_contacts.scss @@ -0,0 +1,30 @@ +.contacts { + @extend %p-medium; + + display: flex; + flex-direction: column; + align-items: start; + + &__subtitle { + margin: 0; + margin-top: 40px; + } + + &__value { + transform: scale(0.98); + margin: 0; + + @include hover(transform, scale(1)); + } + + &__address { + font-style: normal; + } + + &__link { + cursor: pointer; + color: $c-title; + text-align: start; + text-decoration: none; + } +} diff --git a/src/styles/body/_email-group.scss b/src/styles/body/_email-group.scss new file mode 100644 index 000000000..1969cf5bc --- /dev/null +++ b/src/styles/body/_email-group.scss @@ -0,0 +1,75 @@ +.email-group { + display: flex; + justify-content: space-between; + width: 280px; + height: 50px; + + @include on-tablet { + width: 460px; + height: 70px; + } + + @include on-desktop { + width: 570px; + height: 70px; + } + + &__input { + width: 230px; + padding: 18px 24px; + + &::placeholder { + @extend %h-email; + + padding: 18px 24px; + color: $c-event-name; + + @include on-desktop { + font-size: 16px; + } + } + + &:focus { + padding: 18px 24px; + &::placeholder { + padding: 0; + } + } + + @include reset-form; + + @include on-tablet { + width: 372px; + } + + @include on-desktop { + width: 470px; + font-size: 16px; + } + + @include placeholder-style; + } + + &__button { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + width: 50px; + + background-color: $c-bullet; + background-image: url(../../icons/vector-subscribe.svg); + background-repeat: no-repeat; + background-position: center; + + @include hover(transform, scale(1.05)); + + @include reset-form; + + @include on-tablet { + width: 70px; + } + } +} diff --git a/src/styles/body/_events-group.scss b/src/styles/body/_events-group.scss new file mode 100644 index 000000000..2d80ddd78 --- /dev/null +++ b/src/styles/body/_events-group.scss @@ -0,0 +1,82 @@ +.events-group { + padding-inline: 20px; + + @include article-core; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + flex-direction: row; + gap: 130px; + justify-content: space-between; + padding-inline: 56px; + } + + &__img { + @include hover(transform, scale(1.05)); + + @include on-desktop { + max-width: 670px; + } + } + + &__info-box { + display: flex; + flex-direction: column; + + @include on-tablet { + align-self: flex-start; + width: 460px; + } + + @include on-desktop { + align-self: center; + width: 370px; + } + } + + &__subtitle { + display: flex; + gap: 12px; + align-items: center; + align-self: start; + + margin: 0; + margin-top: 15px; + + &::after { + content: ''; + + display: block; + flex-shrink: 0; + + width: 10px; + height: 10px; + + background-color: $c-bullet; + } + } + + &__description { + display: block; + margin: 0; + margin-top: 10px; + color: $c-p-base; + } + + &__date-container { + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + margin-top: 20px; + + @include on-desktop { + gap: 20px; + justify-content: flex-start; + } + } +} diff --git a/src/styles/body/_footer.scss b/src/styles/body/_footer.scss new file mode 100644 index 000000000..0cb46f9f4 --- /dev/null +++ b/src/styles/body/_footer.scss @@ -0,0 +1,254 @@ +.footer { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: repeat(6, minmax(0, mincontent)); + column-gap: 20px; + + padding: 40px 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(5, minmax(0, mincontent)); + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + grid-template-rows: repeat(3, minmax(0, mincontent)); + } + + &__social { + display: flex; + grid-column: 2 / 3; + grid-row: 1 / 2; + gap: 20px; + place-self: center end; + + @include on-tablet { + grid-column: 1 / 2; + grid-row: 2 / 3; + place-self: start; + } + } + + &__facebook { + width: 24px; + height: 24px; + + background-image: url(../../icons/facebook.svg); + background-repeat: no-repeat; + background-position: center; + + @include hover(transform, scale(1.2)); + } + + &__instagram { + width: 24px; + height: 24px; + + background-image: url(../../icons/instagram.svg); + background-repeat: no-repeat; + background-position: center; + + @include hover(transform, scale(1.2)); + } + + &__na-mu { + grid-column: 1 / 2; + grid-row: 1 / 2; + justify-self: start; + + @include on-tablet { + grid-column: 1 / 2; + } + } + + &__time-table { + grid-column: 1 / 2; + justify-self: start; + + @include on-tablet { + grid-column: 2 / 4; + grid-row: 1 / 3; + } + + @include on-desktop { + grid-column: 3 / 5; + } + } + + &__time-table-footer { + &__subtitle { + margin-top: 40px; + color: $c-title; + + @include on-tablet { + margin: 0; + } + } + + &__list { + color: $c-title; + } + + &__typo { + margin: 0; + margin-top: 20px; + color: $c-title; + } + } + + &__contacts-container { + grid-column: 2 / 3; + justify-self: start; + + @include on-tablet { + grid-column: 4 / 6; + grid-row: 1 / 3; + } + + @include on-desktop { + grid-column: 5 / 7; + } + } + + &__arrow-box { + grid-column: 2 / 3; + justify-self: end; + + width: 50px; + height: 50px; + border: solid 1px $c-main-acent; + border-radius: 50%; + + @include on-tablet { + display: none; + } + } + + &__arrow-up { + background-image: url(../../icons/arrow.svg); + background-repeat: no-repeat; + background-position: center; + } + + &__decoration { + grid-column: 1 / -1; + + min-width: 280px; + height: 1px; + margin-top: 20px; + + background-color: $c-footer-decoration; + + @include on-tablet { + grid-column: 2 / 6; + grid-row: 3 / 4; + margin-top: 64px; + } + + @include on-desktop { + grid-column: 7 / 8; + grid-row: 1 / 3; + place-self: center start; + + width: 1px; + min-width: 1px; + min-height: 260px; + margin: 0; + } + } + + &__nav { + position: relative; + + display: grid; + grid-column: 1 / -1; + grid-template: + 'link1 link2' min-content + 'link3 link4' min-content + / 1fr 1fr; + gap: 20px; + place-items: center start; + + width: 100%; + + @include on-tablet { + grid-column: 2 / 5; + margin-top: 64px; + } + + @include on-desktop { + grid-column: 8 / 11; + grid-template: + 'link1 . link2' + 'link3 . link4' + / 1fr 1fr 1fr; + margin-top: 64px; + } + } + + &__link { + @extend %p-medium; + + margin-top: 40px; + color: $c-title; + text-decoration: none; + + &::after { + content: ''; + + bottom: -1px; + transform-origin: center; + transform: scale(0); + + display: block; + + width: 100%; + height: 1px; + + background-color: $c-title; + + transition: transform $transition-time; + } + + &:nth-child(1) { + grid-area: link1; + } + &:nth-child(2) { + grid-area: link2; + } + &:nth-child(3) { + grid-area: link3; + } + &:nth-child(4) { + grid-area: link4; + } + + &:hover { + transform: scale(1.1); + } + + &:hover::after { + transform: scale(1); + } + + @include on-tablet { + margin: 0; + } + } + + &__copyright { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 10px; + align-items: center; + + margin-top: 80px; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + } + } +} diff --git a/src/styles/body/_gallery.scss b/src/styles/body/_gallery.scss new file mode 100644 index 000000000..230a3903f --- /dev/null +++ b/src/styles/body/_gallery.scss @@ -0,0 +1,130 @@ +.gallery { + width: 100%; + + @include on-desktop { + padding-inline: 56px; + } + + &--on-mobile { + @include on-desktop { + display: none; + } + } + + &--on-desktop { + display: none; + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: repeat(2, minmax(0, min-content)); + gap: 20px; + + max-width: 1280px; + margin-top: 56px; + padding: 0; + } + } + + &__viewport { + scrollbar-width: none; + scroll-snap-type: x mandatory; + + overflow-x: auto; + + width: 100%; + margin-top: 40px; + + &::-webkit-scrollbar { + display: none; + } + } + + &__track { + display: flex; + padding-left: 20px; + + @include on-tablet { + padding-left: 34px; + } + } + + &__slide { + scroll-snap-align: center; + flex: 0 0 auto; + margin-right: 15px; + } + + &__picture { + width: 100%; + } + + &__img-mobile { + display: block; + width: 280px; + height: 410px; + object-fit: cover; + + @include on-tablet { + width: 340px; + height: 543px; + } + } + + &__img-desktop { + display: block; + grid-column: 1 / 5; + grid-row: 1 / 2; + + width: 100%; + max-width: 100%; + + object-fit: cover; + + &:nth-child(2) { + grid-column: 5 / -1; + } + + &:nth-child(3) { + grid-column: 1 / 9; + grid-row: 2 / 3; + } + + &:nth-child(4) { + grid-column: 9 / -1; + grid-row: 2 / 3; + } + + @include hover(transform, scale(1.05)); + } + + &__pagination { + display: flex; + gap: 22px; + justify-content: center; + + width: 100%; + margin-top: 20px; + + @include on-desktop { + display: none; + } + } + + &__bullet { + cursor: pointer; + + width: 9px; + height: 9px; + border-radius: 50%; + + background-color: $c-bullet-none-active; + + transition: all $transition-time ease; + + &--active { + transform: scale(1.2); + background-color: $c-main-acent; + } + } +} diff --git a/src/styles/body/_header.scss b/src/styles/body/_header.scss new file mode 100644 index 000000000..317cf7e6b --- /dev/null +++ b/src/styles/body/_header.scss @@ -0,0 +1,165 @@ +.header { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(4, min-content); + gap: clamp(10px, 4vh, 20px) 20px; + place-items: center; + + width: 100%; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + grid-template-rows: minmax(70px, auto) repeat(2, 1fr); + gap: 38px 24px; + } + + &__bgi { + grid-column: 1 / -1; + grid-row: 1 / 3; + + aspect-ratio: 320 / 300; + width: 100%; + height: 100%; + max-height: 300px; + + background-image: url(../../images/bgi/mobile/header-bgi.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 1 / 4; + + aspect-ratio: auto; + min-width: 240px; + max-height: 654px; + } + + @include on-desktop { + aspect-ratio: 320 / 300; + max-height: 654px; + } + } + + &__menu-button { + display: block; + grid-column: 1 / 2; + grid-row: 1 / 2; + place-self: start; + + width: 18px; + height: 12px; + padding: 20px 28px; + + background-image: url(../../icons/burger.svg); + background-repeat: no-repeat; + background-position: center; + + transition: transform $transition-time ease; + + @include on-tablet { + margin: 34px 40px; + } + + @include on-desktop { + margin: 40px 56px; + } + + &:hover { + transform: scale(1.1); + } + } + + &__na-mu { + grid-column: 1 / -1; + grid-row: 1 / 2; + padding-top: 9px; + + @include on-tablet { + grid-column: 4 / 6; + padding-top: 15px; + } + } + + &__title { + display: block; + grid-column: 1 / -1; + margin: 0; + padding-inline: 20px; + + @include on-tablet { + grid-column: 1 / 4; + justify-self: start; + padding-inline: 34px; + text-align: left; + } + + @include on-desktop { + padding-inline: 56px; + } + } + + &__promo-group { + grid-column: 1 / -1; + grid-row: 4 / 5; + transition: transform $transition-time ease; + + @include on-tablet { + grid-row: 3 / 4; + justify-self: start; + margin-left: 34px; + } + + @include on-desktop { + margin-left: 0; + } + + &:hover { + transform: scale(1.02); + } + } + + &__promo-group-container { + display: flex; + grid-column: 1 / -1; + justify-content: center; + width: 100%; + + @include on-tablet { + grid-column: 1 / 4; + justify-content: space-between; + } + } + + &__side-title-container { + display: none; + + @include on-desktop { + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; + + padding-left: 56px; + } + + &::after { + content: ''; + + display: block; + + width: 1px; + height: 60px; + + background-color: $c-main-acent; + } + } + + &__side-title { + transform: rotate(180deg); + display: block; + writing-mode: vertical-rl; + color: $c-event-name; + } +} diff --git a/src/styles/body/_lection.scss b/src/styles/body/_lection.scss new file mode 100644 index 000000000..70eb1456a --- /dev/null +++ b/src/styles/body/_lection.scss @@ -0,0 +1,64 @@ +.lection { + position: relative; + right: 50%; + left: 50%; + + width: 100vw; + margin-left: -50vw; + + @include article-core; + + &__picture { + width: 100%; + } + + &__container { + position: absolute; + bottom: 0; + transform: translateY(50%); + + display: flex; + flex-direction: column; + + width: 80%; + max-width: 570px; + min-height: 140px; + max-height: 204px; + + background-color: #fff; + box-shadow: 0 2px 0 0 #1a5a4c40; + + transition: transform 0.3s ease; + + &:hover { + transform: translateY(50%) scale(1.02); + } + } + + &__date-container { + display: flex; + gap: 14px; + align-items: center; + justify-content: flex-start; + + margin-top: 20px; + padding-inline: 21px; + + @include on-tablet { + gap: 140px; + padding-inline: 55px; + } + } + + &__subtitle { + margin: 0; + margin: 24px 0 20px; + text-align: center; + + @include on-tablet { + padding-bottom: 50px; + padding-inline: 55px; + text-align: left; + } + } +} diff --git a/src/styles/body/_logo.scss b/src/styles/body/_logo.scss new file mode 100644 index 000000000..22824a3b6 --- /dev/null +++ b/src/styles/body/_logo.scss @@ -0,0 +1,14 @@ +.na-mu { + display: block; + align-self: start; + + font-family: Montserrat, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 100%; + color: $c-title; + text-align: center; + text-decoration: none; + + @include hover(transform, scale(1.1)); +} diff --git a/src/styles/body/_menu.scss b/src/styles/body/_menu.scss new file mode 100644 index 000000000..93b54a31e --- /dev/null +++ b/src/styles/body/_menu.scss @@ -0,0 +1,217 @@ +.menu { + position: relative; + z-index: 1; + + display: grid; + grid-template-columns: 1fr; + grid-template-rows: minmax(0, auto) 1fr; + + width: 100%; + max-width: 1280px; + height: 100dvh; + margin: 0 auto; + padding: 27px 20px; + + @include on-tablet { + grid-template-columns: repeat(2, 1fr); + } + + &__spacer { + background-color: $c-overlay; + + @include on-tablet { + grid-column: 1 / -1; + grid-row: 2 / 3; + } + } + + &__content { + display: grid; + grid-column: 1 / -1; + grid-template-columns: 1fr; + grid-template-rows: repeat(2, auto); + + background-color: $c-main-acent; + + @include on-tablet { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + } + } + + &__link { + @extend %h5; + + color: $c-typo-secondary; + text-decoration: none; + transition: transform $transition-time ease; + + &::after { + content: ''; + + position: absolute; + bottom: -8px; + transform-origin: center; + transform: scale(0); + + display: block; + + width: 100%; + height: 1px; + + background-color: $c-typo-secondary; + + transition: transform $transition-time; + } + + &:nth-child(1) { + grid-area: link1; + } + &:nth-child(2) { + grid-area: link2; + } + &:nth-child(3) { + grid-area: link3; + } + &:nth-child(4) { + grid-area: link4; + } + + &:hover { + transform: scale(1.1); + } + + &:hover::after { + transform: scale(1); + } + + @include on-desktop { + font-size: 22px; + } + } + + &__close { + display: block; + place-self: center; + + width: 24px; + height: 24px; + + background-image: url(../../icons/close.svg); + background-repeat: no-repeat; + background-position: center; + + transition: transform $transition-time ease; + + @include on-tablet { + place-self: start; + } + + &:hover { + transform-origin: right; + transform: scale(1.1); + } + } + + &__nav { + position: relative; + + display: grid; + grid-template: + 'close link1 link2' 50px + '. link3 link4' 50px + / 50px 1fr 1fr; + gap: 24px; + place-items: center start; + + width: 100%; + + @include on-tablet { + align-items: start; + padding: 40px 35px; + } + + @include on-desktop { + padding: 56px 40px; + } + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + + display: block; + + width: 85%; + height: 1px; + + background-color: #fff; + + @include on-tablet { + display: none; + } + } + } + + &__time-table { + width: 100%; + padding-inline: 20px; + + @include on-tablet { + display: flex; + grid-column: 2 / 3; + align-items: center; + + &::before { + content: ''; + + display: block; + + width: 1px; + height: 85%; + + background-color: $c-typo-secondary; + } + } + } + + &__time-table-header { + @include on-tablet { + display: grid; + grid-template-columns: 170px 1fr; + grid-template-rows: minmax(min-content, auto) 1 fr; + padding: 40px 35px; + } + + @include on-desktop { + padding-left: 102px; + } + + &__subtitle { + margin-top: 20px; + color: $c-typo-secondary; + } + + &__typo { + @extend %p-medium; + + margin: 20px 0; + color: $c-typo-secondary; + + @include on-tablet { + grid-column: 2 / 3; + } + } + + &__list { + color: $c-typo-secondary; + + @include on-tablet { + grid-column: 1 / 2; + } + } + } +} diff --git a/src/styles/body/_promo-group.scss b/src/styles/body/_promo-group.scss new file mode 100644 index 000000000..9fb88b037 --- /dev/null +++ b/src/styles/body/_promo-group.scss @@ -0,0 +1,39 @@ +.promo-group { + display: inline-flex; + align-items: stretch; + + width: 280px; + height: 50px; + border: solid 1px $c-main-acent; + + text-decoration: none; + + &__name { + @extend %h5; + + display: flex; + align-items: center; + justify-content: center; + + width: 230px; + + color: $c-title; + } + + &__icon { + display: flex; + align-items: center; + justify-content: center; + + width: 70px; + + color: $c-promo-icon; + + background-color: $c-main-acent; + } + + @include on-tablet { + width: 270px; + height: 70px; + } +} diff --git a/src/styles/body/_subscribe.scss b/src/styles/body/_subscribe.scss new file mode 100644 index 000000000..f07e9f67a --- /dev/null +++ b/src/styles/body/_subscribe.scss @@ -0,0 +1,70 @@ +.subscribe { + position: relative; + right: 50%; + left: 50%; + + display: flex; + flex-direction: column; + align-items: center; + + width: 100vw; + height: 50vh; + max-height: 380px; + margin-right: -50vw; + margin-left: -50vw; + + color: $c-typo-secondary; + + background-image: + linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), + url(../../images/bgi/mobile/subscribe-bgi.jpg); + background-position: center; + background-size: cover; + + @include on-tablet { + justify-content: center; + + height: 60vh; + min-height: 380px; + max-height: 550px; + + background-image: + linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), + url(../../images/bgi/tablet/subscribe-bgi.jpg); + } + + @include on-desktop { + height: 80vh; + } + + + &__content { + justify-content: center; + + width: 100%; + min-width: 280px; + margin-top: 88px; + padding-inline: 20px; + + @include on-tablet { + margin: 0; + } + } + + &__title { + margin: 0; + } + + &__typo { + margin: 0; + margin-top: 20px; + } + + &__email-group { + margin-top: 50px; + } + + @media (min-width: 1280px) { + max-height: 600px; + } +} diff --git a/src/styles/body/_time-table.scss b/src/styles/body/_time-table.scss new file mode 100644 index 000000000..bfb593552 --- /dev/null +++ b/src/styles/body/_time-table.scss @@ -0,0 +1,36 @@ +.time-table { + width: 100%; + + &__typo { + @extend %p-medium; + + display: block; + max-width: 180px; + } + + &__subtitle { + display: block; + margin-bottom: 0; + + @include on-tablet { + margin: 0; + } + } + + &__list { + margin: 0; + margin-top: 20px; + padding: 0; + list-style: none; + } + + &__highlight { + @extend %p-medium; + + font-weight: 600; + } + + &__item { + @extend %p-medium; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d12..000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..021f75d10 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,99 @@ %h1 { - font-family: Roboto, sans-serif; + font-family: Montserrat, sans-serif; + font-size: 45px; + font-weight: 700; + line-height: 100%; + color: $c-title; + text-align: center; + + @include on-tablet { + font-size: 54px; + } + + @include on-desktop { + font-size: 72px; + } +} + +%h2 { + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 100%; + text-align: center; + letter-spacing: 0%; + + @include on-tablet { + font-size: 48px; + } +} + +%h3 { + font-family: Montserrat, sans-serif; + font-size: 28px; + font-weight: 400; + line-height: 100%; + + @include on-tablet { + font-size: 36px; + } +} + +%h4 { + font-size: 18px; font-weight: 400; + line-height: 150%; + text-align: center; +} + +%h5 { + font-size: 16px; + font-weight: 500; + line-height: 100%; + + @include on-tablet { + font-size: 14px; + } +} + +%p-base { + font-size: 16px; + font-weight: 300; + line-height: 150%; +} + +%time { + font-size: 16px; + font-weight: 700; + line-height: 150%; + + @include on-tablet { + font-size: 14px; + } +} + +%p-medium { + font-size: 14px; + font-weight: 400; + line-height: 150%; +} + +%p-light { + font-size: 14px; + font-weight: 300; + line-height: 150%; +} + +%h-email { + font-family: Montserrat, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 100%; +} + +%small { + font-size: 12px; + font-weight: 300; + line-height: 141%; + text-align: center; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..df8e40aac 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,73 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} #{$transition-time}; &:hover { #{$_property}: $_toValue; } } + +@mixin article-core { + display: flex; + flex-direction: column; + align-items: center; + + &__img { + display: block; + width: 100%; + } + + &__event-name { + display: block; + margin: 0; + color: $c-event-name; + } + + &__time { + color: $c-main-acent; + } +} + +@mixin reset-form { + margin: 0; + border: none; + border-radius: 0; + + outline: none; + box-shadow: none; + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + transition: background-color 5000s ease-in-out 0s; + + -webkit-shadow-box: 0 0 0 1000px white inset !important; + -webkit-text-fill-color: #000 !important; + } +} + +@mixin placeholder-style { + &::placeholder { + transition: all $transition-time ease-in-out; + } + &:hover { + &::placeholder { + color: $c-bullet; + } + } + &:focus { + &::placeholder { + opacity: 0; + } + } +} diff --git a/src/styles/utils/_sr-only.scss b/src/styles/utils/_sr-only.scss new file mode 100644 index 000000000..8020239f0 --- /dev/null +++ b/src/styles/utils/_sr-only.scss @@ -0,0 +1,6 @@ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + visibility: hidden; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..37700de02 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,15 @@ +$tablet-min-width: 576px; +$desktop-min-width: 1024px; +$transition-time: 0.3s; $c-gray: #eee; +$c-title: #0f0e08; +$c-main-acent: #1a5a4c; +$c-overlay: rgba(30, 30, 30, 0.6); +$c-promo-icon: #d7dde3; +$c-typo-secondary: #fff; +$c-p-base: #4e4e4e; +$c-event-name: #687480; +$c-bullet: #f14a27; +$c-bullet-none-active: #e0e0e0; +$c-footer-decoration: #1a5a4c80; +$transition-time: 0.3s; diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 000000000..b0ec786db --- /dev/null +++ b/vite.config.js @@ -0,0 +1,5 @@ +import { defineConfig } from 'vite'; + +export default defineConfig({ + base: '/Museum-landing/', +});