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 afee6c841..a5a6bf220 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Check font styles. Use [Playfair Display](https://fonts.google.com/specimen/Play 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_2/). + [DEMO LINK](https://FedorLey.github.io/Museum_2/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/en.html b/en.html new file mode 100644 index 000000000..8b5c05fb5 --- /dev/null +++ b/en.html @@ -0,0 +1,355 @@ + + + + + + NAMU - National Art Museum of Ukraine + + + + + + + + + + + +
+
+
+
+ + +
+ +
+
+ EN +
+ +
+
+
+ +
+ +

Art of the ХІХ - ХХ c.

+

The contribution of Ukrainian artists to world culture of the 19th-20th centuries.

+ +
+ +
+ +
+
+ + Girl from Podillia +
+
+ +
+
+

Current Exhibitions

+ + +
+
+
+ Curatorial Exhibition “Angels” +
+
+ +

Curatorial Exhibition “Angels”

+

The exhibition project "Angels" is a landmark event for Ukrainian culture and at the same time the most large-scale...

+ +
+
+ +
+
+ Art of the 20th — 21st Centuries +
+
+
Permanent Exhibition
+

Art of the 20th — 21st Centuries

+

Iconic works by Alla Horska, Mykola Samokysh, Fedir Krychevsky, and other artists.

+ +
+
+
+
+
+ +
+
+

Upcoming Events

+ + +
+
+
+ Curatorial Exhibition “Angels” +
+
+ +

Curatorial Tours by Pavlo Hudimov

+

Secrets of preparation, histories of exhibits, the magic of the process before and during your presence will unfold...

+ +
+
+ +
+
+ Art of the 20th — 21st Centuries +
+
+ +

Masterclass “Journey to Australia”

+

This Sunday at 14:00, the final destination of the round-the-world journey awaits art travelers: Australia.

+ +
+
+
+
+
+ +
+
+

Plan Your
Museum Visit

+

Choose a convenient day, register for events of interest, and buy your ticket in advance so nothing prevents you from enjoying the art.

+ +
+
+ +
+
+

News

+ + +
+
+
+ Curatorial Exhibition “Angels” +
+
+ +

Winner Announcement

+

Friends, today is Friday! And that means it's time to announce the giveaway winner...

+
+
+ +
+
+ Art of the 20th — 21st Centuries +
+
+ +

International Cat Day

+

A museum with lions can't just skip International Cat Day!

+
+
+
+
+
+ + +
+ + + + diff --git a/index.html b/index.html index d339e6856..591f52c82 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,358 @@ - + - + - Title + > + NAMU - Національний художній музей України + href="src/styles/index.scss" + > + + + + + - -

Hello Mate Academy

- + + + + +
+
+
+
+ + +
+ +
+
+ UA +
+ +
+
+
+ +
+ +

Мистецтво ХІХ - ХХ ст.

+

Внесок українських митців у світову культуру 19-20 ст.

+ +
+ +
+ +
+
+ + Дівчина з Поділля +
+
+ + +
+
+

Актуальні виставки

+ + +
+
+
+ Кураторська виставка “Ангели” +
+
+ +

Кураторська виставка “Ангели”

+

Виставковий проект «Ангели» – знакова подія для української культури і водночас наймасштабніший...

+ +
+
+ +
+
+ Мистецтво ХХ ст. — XXI ст. +
+
+
Діє постійно
+

Мистецтво ХХ ст. — XXI ст.

+

Знакові роботи Алли Горської, Миколи Самокиша, Федора Кричевського та інших митців.

+ +
+
+
+
+
+ + +
+
+

Найближчі події

+ + +
+
+
+ Кураторська виставка “Ангели” +
+
+ +

Кураторські екскурсії від Павла Гудімова

+

Таємниці підготовки, історії експонатів, магія дійства до і в момент вашої присутності – розгортатиметься...

+ +
+
+ +
+
+ Мистецтво ХХ ст. — XXI ст. +
+
+ +

Майстер-клас “Подорож до Австралії”

+

Цієї неділі о 14:00 на арт-мандрівників чекає останній пункт кругосвітньої подорожі - Австралія.

+ +
+
+
+
+
+ + +
+
+

Сплануйте
візит до музею

+

Оберіть зручний день, зареєструйтесь на події, що цікавлять, купіть квиток заздалегідь, щоб ніщо не завадило вам насолоджуватись мистецтвом.

+ +
+
+ + +
+
+

Новини

+ + +
+
+
+ Кураторська виставка “Ангели” +
+
+ +

Оголошення переможця

+

Друзі, сьогодні п'ятниця! А це означає, що час оголосити переможця розіграшу...

+
+
+ +
+
+ Мистецтво ХХ ст. — XXI ст. +
+
+ +

Міжнародний день котів

+

Музей з левами не може просто так взяти і пропустити Міжнародний день котів!

+
+
+
+
+
+ + + +
+ + diff --git a/package-lock.json b/package-lock.json index 5d3b07d5a..6b9fd05c4 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 9e79dfff1..4cd3200dd 100644 --- a/package.json +++ b/package.json @@ -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/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/images/.gitkeep b/src/images/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/images/hero.png b/src/images/hero.png new file mode 100644 index 000000000..295be5a4b Binary files /dev/null and b/src/images/hero.png differ diff --git a/src/images/icons/arrow.svg b/src/images/icons/arrow.svg new file mode 100644 index 000000000..43f997158 --- /dev/null +++ b/src/images/icons/arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/cross.svg b/src/images/icons/cross.svg new file mode 100644 index 000000000..97c11e4ad --- /dev/null +++ b/src/images/icons/cross.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/dropdown.svg b/src/images/icons/dropdown.svg new file mode 100644 index 000000000..0e01947fd --- /dev/null +++ b/src/images/icons/dropdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 000000000..6c0bad825 --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 000000000..5af50bb18 --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/menu.svg b/src/images/icons/menu.svg new file mode 100644 index 000000000..bc5d4069d --- /dev/null +++ b/src/images/icons/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/scroll-up.svg b/src/images/icons/scroll-up.svg new file mode 100644 index 000000000..c49ca0cbe --- /dev/null +++ b/src/images/icons/scroll-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/telegram.svg b/src/images/icons/telegram.svg new file mode 100644 index 000000000..a4369c774 --- /dev/null +++ b/src/images/icons/telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter.svg b/src/images/icons/twitter.svg new file mode 100644 index 000000000..a180591c8 --- /dev/null +++ b/src/images/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 000000000..9a9dffcfe Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/menu.png b/src/images/menu.png new file mode 100644 index 000000000..eee8acd2e Binary files /dev/null and b/src/images/menu.png differ diff --git a/src/images/showcase1.jpg b/src/images/showcase1.jpg new file mode 100644 index 000000000..eba398f90 Binary files /dev/null and b/src/images/showcase1.jpg differ diff --git a/src/images/showcase2.jpg b/src/images/showcase2.jpg new file mode 100644 index 000000000..e327328a6 Binary files /dev/null and b/src/images/showcase2.jpg differ diff --git a/src/images/showcase3.jpg b/src/images/showcase3.jpg new file mode 100644 index 000000000..10fed4023 Binary files /dev/null and b/src/images/showcase3.jpg differ diff --git a/src/images/showcase4.jpg b/src/images/showcase4.jpg new file mode 100644 index 000000000..07e1012a9 Binary files /dev/null and b/src/images/showcase4.jpg differ diff --git a/src/images/showcase5.jpg b/src/images/showcase5.jpg new file mode 100644 index 000000000..a73328540 Binary files /dev/null and b/src/images/showcase5.jpg differ diff --git a/src/images/showcase6.jpg b/src/images/showcase6.jpg new file mode 100644 index 000000000..eddd5ed06 Binary files /dev/null and b/src/images/showcase6.jpg differ diff --git a/src/images/visit.png b/src/images/visit.png new file mode 100644 index 000000000..49a3091f4 Binary files /dev/null and b/src/images/visit.png differ diff --git a/src/scripts/index.js b/src/scripts/index.js new file mode 100644 index 000000000..ba1e077d7 --- /dev/null +++ b/src/scripts/index.js @@ -0,0 +1,5 @@ +import { initLanguageSwitcher } from './modules/language'; + +document.addEventListener('DOMContentLoaded', () => { + initLanguageSwitcher(); +}); diff --git a/src/scripts/lib/.gitkeep b/src/scripts/lib/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/scripts/main.js b/src/scripts/main.js deleted file mode 100644 index ad9a93a7c..000000000 --- a/src/scripts/main.js +++ /dev/null @@ -1 +0,0 @@ -'use strict'; diff --git a/src/scripts/modules/language.js b/src/scripts/modules/language.js new file mode 100644 index 000000000..9accd2935 --- /dev/null +++ b/src/scripts/modules/language.js @@ -0,0 +1,37 @@ +export const initLanguageSwitcher = () => { + const langLinks = document.querySelectorAll('.language__option'); + + if (!langLinks.length) { + return; + } + + langLinks.forEach((link) => { + link.addEventListener('click', (e) => { + e.preventDefault(); + + const targetLang = e.currentTarget.getAttribute('data-lang'); + const targetUrl = e.currentTarget.getAttribute('href'); + + if (targetLang) { + window.localStorage.setItem('preferredLang', targetLang); + } + + document.body.style.transition = 'opacity 0.3s ease'; + document.body.style.opacity = '0'; + + setTimeout(() => { + window.location.href = targetUrl; + }, 300); + }); + }); + + const savedLang = window.localStorage.getItem('preferredLang'); + const currentPath = window.location.pathname; + + const isEnglishPage = currentPath.includes('en.html'); + + if (savedLang === 'en' && !isEnglishPage) { + document.body.style.opacity = '0'; + window.location.replace('./en.html'); + } +}; diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 33c3ed2b3..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1 +0,0 @@ -// put fonts here 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/index.scss b/src/styles/index.scss new file mode 100644 index 000000000..512cfc315 --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,22 @@ +@use './utility/normalize'; +@use './utility/variables'; +@use './utility/mixins'; + +@use './modules/page'; +@use './modules/main'; + +@use './modules/icon'; +@use './modules/button'; +@use './modules/form'; + +@use './modules/navbar'; +@use './modules/language'; +@use './modules/heading'; +@use './modules/card'; + +@use './modules/menu'; +@use './modules/hero'; +@use './modules/showcase'; +@use './modules/visit'; +@use './modules/subscribe'; +@use './modules/footer'; 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/modules/button.scss b/src/styles/modules/button.scss new file mode 100644 index 000000000..94936ffa2 --- /dev/null +++ b/src/styles/modules/button.scss @@ -0,0 +1,70 @@ +@use '../utility/variables' as *; +@use '../utility/mixins' as *; + +.button { + display: inline-flex; + gap: 8px; + align-items: center; + justify-content: center; + + width: $button-width; + height: $button-height; + + @include text(button); + @include animate(background-color, color, border-color); + + &--primary { + color: $color-white; + background-color: $color-main; + + @include hover { + background-color: $color-hover; + } + + @include pressed { + background-color: $color-pressed; + } + + @include disabled { + background-color: $color-disabled; + } + } + + &--secondary { + border: 1px solid $color-main; + color: $color-main; + + &::after { + content: ''; + + display: block; + + width: 20px; + height: 20px; + + background-color: currentColor; + + @include mask-contain('/src/images/icons/arrow.svg'); + @include animate(transform); + } + + @include hover { + border-color: $color-hover; + color: $color-hover; + + &::after { + transform: translateX(5px); + } + } + + @include pressed { + border-color: $color-pressed; + color: $color-pressed; + } + + @include disabled { + border-color: $color-disabled; + color: $color-disabled; + } + } +} diff --git a/src/styles/modules/card.scss b/src/styles/modules/card.scss new file mode 100644 index 000000000..aaff64d08 --- /dev/null +++ b/src/styles/modules/card.scss @@ -0,0 +1,154 @@ +@use '../utility/variables' as *; +@use '../utility/mixins' as *; + +.card { + display: flex; + flex-direction: column; + row-gap: 20px; + height: 100%; + + @include tablet { + row-gap: 30px; + } + + @include desktop { + row-gap: 20px; + } + + @include hover { + .card__image { + transform: scale(1.05); + } + } + + &__frame { + overflow: hidden; + aspect-ratio: 4 / 5; + width: 100%; + + @include desktop { + aspect-ratio: 5 / 4; + } + } + + &__image { + width: 100%; + height: 100%; + object-fit: cover; + + @include animate(transform); + } + + &__content { + display: flex; + flex-direction: column; + flex-grow: 1; + height: fit-content; + } + + &__label { + margin-bottom: 10px; + + @include text(main); + + color: $color-main; + } + + &__title { + margin-bottom: 20px; + + @include text(h4); + } + + &__description { + margin-bottom: 30px; + + @include text(main); + + @include tablet { + margin-bottom: 40px; + } + + @include desktop { + margin-bottom: 50px; + } + } + + &__button { + width: 100%; + + @include tablet { + margin-top: auto; + } + + @include desktop { + width: 50%; + } + } + + // --- EVENTS --- // + &--events { + @include tablet { + flex-direction: row; + column-gap: $gap-tablet; + } + + @include desktop { + column-gap: $gap-desktop; + } + + .card__frame { + @include tablet { + width: 40%; + } + + @include desktop { + aspect-ratio: 4 / 5; + } + } + + .card__content { + @include tablet { + width: 60%; + } + } + + .card__description { + @include tablet { + margin-bottom: 50px; + } + } + + .card__button { + @include tablet { + margin-top: 0; + } + } + } + + // --- NEWS --- // + &--news { + .card__frame { + aspect-ratio: 1 / 1; + + @include desktop { + aspect-ratio: 3 / 2; + } + } + + .card__label { + margin-bottom: 0; + color: $color-black; + } + + .card__title { + @include tablet { + margin-bottom: 18px; + } + } + + .card__description { + margin-bottom: 0; + } + } +} diff --git a/src/styles/modules/footer.scss b/src/styles/modules/footer.scss new file mode 100644 index 000000000..732146434 --- /dev/null +++ b/src/styles/modules/footer.scss @@ -0,0 +1,104 @@ +@use '../utility/variables' as *; +@use '../utility/mixins' as *; + +.footer { + padding-block: 30px; + background-color: $color-background; + + @include tablet { + padding-block: 50px 30px; + } + + &__container { + color: $color-white; + } + + // --- Columns --- // + &__columns { + display: flex; + flex-direction: column; + row-gap: 50px; + + @include tablet { + flex-direction: row; + column-gap: $gap-tablet; + } + + @include desktop { + column-gap: $gap-desktop; + } + } + + &__column { + @include tablet { + flex: 1; + } + } + + &__title { + @include text(h5); + + margin-bottom: 10px; + font-size: 18px; + + @include tablet { + margin-bottom: 30px; + font-size: 20px; + } + } + + &__text { + @include text(main); + + &--nav { + display: flex; + flex-direction: column; + row-gap: 5px; + + @include tablet { + row-gap: 10px; + } + } + } + + &__link { + @include animate(color); + + @include hover { + color: $color-main; + } + } + + &__socials { + display: flex; + column-gap: 20px; + margin-top: 30px; + + @include tablet { + margin-top: 50px; + } + } + + // --- Bottom --- // + &__bottom { + display: flex; + align-items: flex-end; + justify-content: space-between; + margin-top: 60px; + + @include desktop { + margin-top: 70px; + } + } + + &__copyright { + display: flex; + column-gap: 24px; + + @include text(additional); + + @include desktop { + column-gap: 100px; + } + } +} diff --git a/src/styles/modules/form.scss b/src/styles/modules/form.scss new file mode 100644 index 000000000..c80ffc72b --- /dev/null +++ b/src/styles/modules/form.scss @@ -0,0 +1,43 @@ +@use '../utility/variables' as *; +@use '../utility/mixins' as *; + +.form { + &__input { + width: 100%; + padding: 0 0 3px; + border-bottom: 1px solid $color-black; + + color: $color-black; + + background-color: transparent; + outline: none; + caret-color: $color-main; + + @include text(main); + @include animate(color, border-color); + + &::placeholder { + color: $color-black; + opacity: 1; + + @include animate(color); + } + + @include hover { + border-color: $color-main; + + &::placeholder { + color: $color-main; + } + } + + &:focus { + border-color: $color-main; + } + + &:not(:placeholder-shown) { + font-weight: 700; + color: $color-black; + } + } +} diff --git a/src/styles/modules/heading.scss b/src/styles/modules/heading.scss new file mode 100644 index 000000000..0767cb55b --- /dev/null +++ b/src/styles/modules/heading.scss @@ -0,0 +1,10 @@ +@use '../utility/variables' as *; +@use '../utility/mixins' as *; + +.heading { + @include text(h3); + + @include desktop { + font-size: 48px; + } +} diff --git a/src/styles/modules/hero.scss b/src/styles/modules/hero.scss new file mode 100644 index 000000000..c4c1b9018 --- /dev/null +++ b/src/styles/modules/hero.scss @@ -0,0 +1,156 @@ +@use '../utility/variables' as *; +@use '../utility/mixins' as *; + +.hero { + margin-bottom: 90px; + background-color: $color-background; + + @include tablet { + margin-bottom: 100px; + } + + @include desktop { + margin-bottom: 110px; + } + + &__container { + position: relative; + + @include grid; + } + + // --- Navbar --- // + &__navbar { + grid-column: 1 / -1; + grid-row: 1; + margin-bottom: 50px; + + @include tablet { + margin-bottom: 100px; + } + + @include desktop { + margin-bottom: 90px; + } + } + + // --- Content --- // + &__content { + display: grid; + grid-column: 1 / -1; + grid-row: 2; + grid-template-columns: subgrid; + align-content: start; + + margin-bottom: 40px; + + color: $color-white; + + @include tablet { + grid-column: 1 / 6; + margin-bottom: 70px; + } + + @include desktop { + grid-column: 1 / 7; + margin-bottom: 0; + } + } + + &__label { + grid-column: 1 / -1; + margin-bottom: 10px; + + @include text(additional); + } + + &__title { + grid-column: 1 / -1; + margin-bottom: 30px; + + @include text(h1); + + @include tablet { + margin-bottom: 20px; + } + + @include desktop { + margin-bottom: 30px; + } + } + + &__description { + grid-column: 1 / -1; + margin-bottom: 40px; + + @include text(main); + + @include tablet { + grid-column: 1 / 4; + margin-bottom: 50px; + } + + @include desktop { + grid-column: 1 / -1; + margin-bottom: 80px; + } + } + + &__button { + grid-column: 1 / -1; + width: 100%; + + @include tablet { + grid-column: 1 / 4; + } + } + + // --- Date --- // + &__date { + display: none; + + @include desktop { + position: absolute; + right: 0; + bottom: 50px; + left: 0; + + display: flex; + grid-column: 1 / 7; + flex-wrap: nowrap; + gap: 20px; + align-items: center; + + font-family: $font-main; + color: $color-white; + text-wrap: nowrap; + + opacity: 0.5; + + @include text(h6); + } + } + + &__divider { + background-color: $color-white; + } + + // --- Image --- // + &__image { + grid-column: 1 / -1; + grid-row: 3; + justify-self: center; + max-width: 320px; + + @include tablet { + grid-column: 2 / 6; + max-width: 480px; + } + + @include desktop { + grid-column: 7 / -1; + grid-row: 2; + max-width: 100%; + } + } +} diff --git a/src/styles/modules/icon.scss b/src/styles/modules/icon.scss new file mode 100644 index 000000000..258d3b723 --- /dev/null +++ b/src/styles/modules/icon.scss @@ -0,0 +1,62 @@ +@use '../utility/variables' as *; +@use '../utility/mixins' as *; + +.icon { + display: inline-block; + width: 30px; + height: 30px; + background-color: $color-white; + + @include animate(background-color); + + @include hover { + background-color: $color-main; + } + + &--menu { + @include mask-contain('/src/images/icons/menu.svg'); + } + + &--cross { + @include mask-contain('/src/images/icons/cross.svg'); + } + + &--dropdown { + width: 10px; + height: 10px; + + @include mask-contain('/src/images/icons/dropdown.svg'); + } + + &--up { + @include mask-contain('/src/images/icons/scroll-up.svg'); + } + + &--facebook { + width: 20px; + height: 20px; + + @include mask-contain('/src/images/icons/facebook.svg'); + } + + &--twitter { + width: 20px; + height: 20px; + + @include mask-contain('/src/images/icons/twitter.svg'); + } + + &--telegram { + width: 20px; + height: 20px; + + @include mask-contain('/src/images/icons/telegram.svg'); + } + + &--instagram { + width: 20px; + height: 20px; + + @include mask-contain('/src/images/icons/instagram.svg'); + } +} diff --git a/src/styles/modules/language.scss b/src/styles/modules/language.scss new file mode 100644 index 000000000..2091ca9ef --- /dev/null +++ b/src/styles/modules/language.scss @@ -0,0 +1,72 @@ +@use '../utility/variables' as *; +@use '../utility/mixins' as *; + +.language { + cursor: pointer; + position: relative; + + &__current { + display: flex; + gap: 2px; + align-items: center; + + font-weight: 500; + color: $color-white; + + @include text(main); + @include animate(color); + + @include hover { + color: $color-main; + + .language__arrow { + background-color: $color-main; + } + } + } + + &__arrow { + @include animate(background-color, transform); + } + + &__list { + position: absolute; + z-index: 10; + top: 100%; + left: 50%; + transform: translate(-50%, -10px); + + padding: 8px 0 0; + + visibility: hidden; + opacity: 0; + + @include animate(opacity, visibility, transform); + } + + &__option { + color: $color-white; + opacity: 0.5; + + @include text(main); + @include animate(opacity, color); + + @include hover { + color: $color-main; + opacity: 1; + } + } + + &:hover, + &:focus-within { + .language__arrow { + transform: rotate(180deg); + } + + .language__list { + transform: translate(-50%, 0); + visibility: visible; + opacity: 1; + } + } +} diff --git a/src/styles/modules/main.scss b/src/styles/modules/main.scss new file mode 100644 index 000000000..c34afcd84 --- /dev/null +++ b/src/styles/modules/main.scss @@ -0,0 +1,6 @@ +@use '../utility/variables' as *; +@use '../utility/mixins' as *; + +.main { + flex-grow: 1; +} diff --git a/src/styles/modules/menu.scss b/src/styles/modules/menu.scss new file mode 100644 index 000000000..9e5da8b33 --- /dev/null +++ b/src/styles/modules/menu.scss @@ -0,0 +1,176 @@ +@use '../utility/variables' as *; +@use '../utility/mixins' as *; + +.menu { + background-color: $color-background; + + &__container { + @include grid; + + grid-template-rows: auto 1fr; + height: 100vh; + } + + &__navbar { + grid-column: 1 / -1; + grid-row: 1; + margin-bottom: 10px; + + @include tablet { + margin-bottom: 30px; + } + + @include desktop { + margin-bottom: 40px; + } + + .navbar__language { + display: block; + } + } + + &__content { + grid-column: 1 / -1; + grid-row: 2; + align-self: start; + color: $color-white; + + @include tablet { + margin-bottom: 30px; + } + + @include desktop { + grid-column: 1 / 7; + margin-bottom: 0; + } + } + + // --- Columns --- // + + &__columns { + display: flex; + flex-direction: column; + row-gap: 20px; + margin-bottom: 40px; + + @include tablet { + flex-direction: row; + column-gap: $gap-tablet; + margin-bottom: 50px; + } + + @include desktop { + column-gap: $gap-desktop; + margin-bottom: 70px; + } + } + + &__column { + display: flex; + flex: 1; + flex-direction: column; + } + + &__title { + @include text(additional); + } + + &__text { + font-family: $font-main; + font-size: 16px; + font-weight: 600; + line-height: 150%; + } + + // --- Navigation --- // + &__list { + display: flex; + flex-direction: column; + row-gap: 20px; + + @include tablet { + row-gap: 30px; + } + + @include desktop { + row-gap: 60px; + } + } + + &__item { + font-family: $font-title; + font-size: 20px; + font-weight: 700; + line-height: 150%; + + @include tablet { + font-size: 48px; + font-weight: 700; + line-height: 120%; + } + } + + &__link { + position: relative; + + &::after { + content: ''; + + position: absolute; + transform-origin: left; + transform: scale(0); + + display: block; + + width: 100%; + height: 1px; + + background-color: $color-white; + + @include animate(transform); + } + + &:hover::after { + transform: scale(1); + } + } + + // --- Other --- // + &__divider { + margin-block: 40px; + + @include tablet { + margin-block: 50px; + } + + @include desktop { + margin-block: 60px; + opacity: 0.5; + } + } + + &__button { + width: 100%; + } + + // --- Image --- // + &__image { + display: none; + + @include tablet { + display: block; + grid-column: 2 / 6; + grid-row: 3; + justify-self: center; + + max-width: 480px; + } + + @include desktop { + grid-column: 7 / -1; + grid-row: 2; + align-self: end; + max-width: 100%; + } + } +} diff --git a/src/styles/modules/navbar.scss b/src/styles/modules/navbar.scss new file mode 100644 index 000000000..8e594bb76 --- /dev/null +++ b/src/styles/modules/navbar.scss @@ -0,0 +1,37 @@ +@use '../utility/variables' as *; +@use '../utility/mixins' as *; + +.navbar { + display: flex; + align-items: center; + justify-content: space-between; + height: 80px; + + &__logo { + display: block; + width: 120px; + height: 40px; + + @include image-contain('/src/images/logo.png'); + } + + &__actions { + display: flex; + flex-direction: row-reverse; + gap: 30px; + align-items: center; + + @include tablet { + flex-direction: row; + gap: 40px; + } + } + + &__language { + display: none; + + @include tablet { + display: block; + } + } +} diff --git a/src/styles/modules/page.scss b/src/styles/modules/page.scss new file mode 100644 index 000000000..dc0a05cb1 --- /dev/null +++ b/src/styles/modules/page.scss @@ -0,0 +1,55 @@ +@use '../utility/variables' as *; +@use '../utility/mixins' as *; + +.page { + scroll-behavior: smooth; + scrollbar-color: $color-main $color-background; + scrollbar-width: thin; + + font-family: $font-main; + color: $color-black; + + background-color: $color-white; + + @keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + &__body { + display: flex; + flex-direction: column; + + min-width: 320px; + min-height: 100vh; + + animation: fade-in $transition-speed $transition-function forwards; + } + + &__menu { + pointer-events: none; + + position: fixed; + z-index: 100; + inset: 0; + transform: translateY(-100%); + + opacity: 0; + + @include animate(opacity, transform); + + &:target { + pointer-events: all; + transform: translateY(0); + opacity: 1; + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/modules/showcase.scss b/src/styles/modules/showcase.scss new file mode 100644 index 000000000..5ab39faf7 --- /dev/null +++ b/src/styles/modules/showcase.scss @@ -0,0 +1,119 @@ +@use '../utility/variables' as *; +@use '../utility/mixins' as *; + +.showcase { + margin-bottom: 120px; + + @include tablet { + margin-bottom: 160px; + } + + @include desktop { + margin-bottom: 200px; + } + + &--events { + margin-bottom: 90px; + + @include tablet { + margin-bottom: 100px; + } + + @include desktop { + margin-bottom: 110px; + } + } + + &__container { + @include grid; + + align-items: center; + } + + &__heading { + grid-column: 1 / -1; + grid-row: 1; + + @include tablet { + grid-column: 1 / 5; + } + + @include desktop { + grid-column: 1 / 7; + } + } + + &__button { + grid-column: 1 / -1; + grid-row: 3; + width: 100%; + + @include tablet { + display: inline-flex; + grid-column: 5 / -1; + grid-row: 1; + } + + @include desktop { + grid-column: 10 / -1; + } + } + + &__cards { + grid-column: 1 / -1; + grid-row: 2; + + @include grid; + + row-gap: 60px; + margin: 60px 0 30px; + + @include tablet { + row-gap: 70px; + margin: 70px 0 0; + } + + @include desktop { + row-gap: 60px; + } + + // --- STANDARD --- // + .card { + grid-column: 1 / -1; + + @include tablet { + grid-column: span 3; + } + + @include desktop { + grid-column: span 6; + } + } + + // --- EVENTS --- // + &--events { + .card { + @include tablet { + grid-column: 1 / -1; + } + + @include desktop { + grid-column: 1 / 11; + } + } + } + + &--news { + row-gap: 50px; + + @include tablet { + row-gap: 60px; + } + + @include desktop { + row-gap: 50px; + margin-top: 50px; + } + } + } +} diff --git a/src/styles/modules/subscribe.scss b/src/styles/modules/subscribe.scss new file mode 100644 index 000000000..8fcd84c45 --- /dev/null +++ b/src/styles/modules/subscribe.scss @@ -0,0 +1,65 @@ +@use '../utility/variables' as *; +@use '../utility/mixins' as *; + +.subscribe { + margin-bottom: 80px; + + @include tablet { + margin-bottom: 128px; + } + + @include desktop { + margin-bottom: 200px; + } + + &__container { + @include grid; + } + + &__heading { + grid-column: 1 / -1; + margin-bottom: 20px; + + @include desktop { + grid-column: 1 / 7; + margin-bottom: 50px; + } + } + + &__description { + grid-column: 1 / -1; + margin-bottom: 50px; + + @include tablet { + grid-column: 1 / 6; + } + + @include desktop { + grid-column: 7 / -1; + margin-bottom: 0; + } + } + + &__form { + grid-column: 1 / -1; + margin-bottom: 30px; + + @include tablet { + grid-column: 1 / 5; + } + + @include desktop { + grid-column: 1 / 6; + margin-bottom: 40px; + } + } + + &__button { + grid-column: 1 / -1; + width: 100%; + + @include tablet { + grid-column: 1 / 4; + } + } +} diff --git a/src/styles/modules/visit.scss b/src/styles/modules/visit.scss new file mode 100644 index 000000000..be2fc184b --- /dev/null +++ b/src/styles/modules/visit.scss @@ -0,0 +1,103 @@ +@use '../utility/variables' as *; +@use '../utility/mixins' as *; + +.visit { + position: relative; + + overflow: hidden; + + margin-bottom: 90px; + padding-block: 50px; + + background-color: $color-background; + + @include tablet { + margin-bottom: 120px; + padding-block: 80px; + } + + @include desktop { + margin-bottom: 110px; + padding-block: 200px; + } + + @include hover { + &::before { + transform: scale(1.05); + } + } + + &::before { + @include desktop { + content: ''; + + position: absolute; + z-index: 0; + top: 0; + bottom: 0; + left: 0; + transform-origin: left center; + + width: 40%; + + @include image-cover('/src/images/visit.png'); + @include animate(transform); + } + } + + &__container { + position: relative; + z-index: 1; + color: $color-white; + + @include grid; + } + + &__title { + grid-column: 1 / -1; + + @include text(h2); + + margin-bottom: 20px; + + @include tablet { + grid-column: 1 / 6; + } + + @include desktop { + grid-column: 6 / -1; + margin-bottom: 10px; + } + } + + &__description { + grid-column: 1 / -1; + + @include text(main); + + margin-bottom: 40px; + + @include tablet { + grid-column: 1 / 5; + margin-bottom: 60px; + } + + @include desktop { + grid-column: 6 / 11; + margin-bottom: 50px; + } + } + + &__button { + grid-column: 1 / -1; + width: 100%; + + @include tablet { + grid-column: 1 / 4; + } + + @include desktop { + grid-column: 6 / 9; + } + } +} diff --git a/src/styles/utility/_mixins.scss b/src/styles/utility/_mixins.scss new file mode 100644 index 000000000..0d2e79cb2 --- /dev/null +++ b/src/styles/utility/_mixins.scss @@ -0,0 +1,151 @@ +@use './variables.scss' as *; +@use 'sass:list'; +@use 'sass:map'; + +// Layout & Responsive +@mixin tablet { + @media (min-width: $bp-tablet) { + @content; + } +} + +@mixin desktop { + @media (min-width: $bp-desktop) { + @content; + } +} + +@mixin content-padding { + width: 100%; + margin-inline: auto; + padding-inline: $padding-mobile; + + @include tablet { + padding-inline: $padding-tablet; + } + + @include desktop { + padding-inline: $padding-desktop; + } +} + +.container { + @include content-padding; + + @include desktop { + max-width: $bp-desktop; + } +} + +// Layouts +@mixin grid($row-gap: false) { + --columns: #{$cols-mobile}; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + + @if $row-gap { + row-gap: $gap-mobile; + } + + column-gap: $gap-mobile; + + @include tablet { + --columns: #{$cols-tablet}; + + @if $row-gap { + row-gap: $gap-tablet; + } + + column-gap: $gap-tablet; + } + + @include desktop { + --columns: #{$cols-desktop}; + + @if $row-gap { + row-gap: $gap-desktop; + } + + column-gap: $gap-desktop; + } +} + +// Typography +@mixin text($level) { + $config: map.get($type-scale, $level); + $desktop-size: list.nth($config, 1); + $tablet-size: list.nth($config, 2); + $mobile-size: list.nth($config, 3); + $desktop-lh: list.nth($config, 4); + $tablet-lh: list.nth($config, 5); + $mobile-lh: list.nth($config, 6); + $weight: list.nth($config, 7); + $family: list.nth($config, 8); + + font-family: $family; + font-size: $mobile-size; + font-weight: $weight; + line-height: $mobile-lh; + letter-spacing: 0; + + @media (min-width: #{$bp-tablet}) { + font-size: $tablet-size; + line-height: $tablet-lh; + } + + @media (min-width: #{$bp-desktop}) { + font-size: $desktop-size; + line-height: $desktop-lh; + } +} + +// Visuals & Media +@mixin image-cover($path) { + background-image: url($path); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} + +@mixin image-contain($path) { + background-image: url($path); + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} + +@mixin mask-contain($url) { + -webkit-mask: url($url) no-repeat center / contain; + mask: url($url) no-repeat center / contain; +} + +// Interaction & States +@mixin hover { + @media (hover: hover) { + &:hover { + @content; + } + } +} + +@mixin pressed { + &:active { + @content; + } +} + +@mixin disabled { + &:disabled, + &.disabled { + pointer-events: none; + cursor: not-allowed; + @content; + } +} + +@mixin animate($property...) { + transition-timing-function: $transition-function; + transition-duration: $transition-speed; + transition-property: $property; +} diff --git a/src/styles/utility/_normalize.scss b/src/styles/utility/_normalize.scss new file mode 100644 index 000000000..3fad78544 --- /dev/null +++ b/src/styles/utility/_normalize.scss @@ -0,0 +1,133 @@ +//////////////////// +// --- Global --- // +//////////////////// + +*, +::after, +::before, +::backdrop, +::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; +} + +////////////////// +// --- Page --- // +////////////////// + +html { + scrollbar-gutter: stable; + font-family: sans-serif; + -webkit-text-size-adjust: 100%; +} + +body { + -webkit-font-smoothing: antialiased; + line-height: inherit; +} + +///////////////////////// +// --- Typographic --- // +///////////////////////// + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +ol, +ul, +menu { + list-style: none; +} + +a { + color: inherit; + text-decoration: none; +} + +hr { + width: 100%; + height: 1px; + background-color: white; +} + +address { + font-style: normal; +} + +/////////////////// +// --- Media --- // +/////////////////// + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object, +details { + display: block; +} + +img, +video { + max-width: 100%; + height: auto; +} + +/////////////////// +// --- Table --- // +/////////////////// + +table { + border-spacing: 0; + border-collapse: collapse; + border-color: inherit; + text-indent: 0; +} + +///////////////////////////// +// --- Forms & Buttons --- // +///////////////////////////// + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: inherit; + color: inherit; + + appearance: none; +} + +button, +[type='button'], +[type='reset'], +[type='submit'] { + cursor: pointer; +} + +textarea { + resize: vertical; +} + +///////////////////// +// --- Utility --- // +///////////////////// + +[hidden]:where(:not([hidden='until-found'])) { + display: none !important; +} diff --git a/src/styles/utility/_variables.scss b/src/styles/utility/_variables.scss new file mode 100644 index 000000000..f315336b8 --- /dev/null +++ b/src/styles/utility/_variables.scss @@ -0,0 +1,130 @@ +// Breakpoints +$bp-tablet: 768px; +$bp-desktop: 1280px; + +// Layout (Grid) +$padding-mobile: 20px; +$padding-tablet: 39px; +$padding-desktop: 55px; +$gap-mobile: 20px; +$gap-tablet: 30px; +$gap-desktop: 30px; +$cols-mobile: 2; +$cols-tablet: 6; +$cols-desktop: 12; + +// Button +$button-width: 270px; +$button-height: 60px; + +// Colors +$color-main: #cd4d31; +$color-background: #3f5252; +$color-white: #f1f5f4; +$color-black: #1c1b29; +$color-gray: #504f5e; +$color-hover: #af3419; +$color-pressed: #ea340d; +$color-disabled: #dd836f; + +// Fonts +$font-title: 'Playfair Display', serif; +$font-main: 'Raleway', sans-serif; + +// Typography +$type-scale: ( + h1: ( + 96px, + 72px, + 48px, + 100%, + 100%, + 100%, + 700, + $font-title, + ), + h2: ( + 80px, + 62px, + 38px, + 100%, + 100%, + 100%, + 700, + $font-title, + ), + h3: ( + 58px, + 40px, + 28px, + 120%, + 125%, + 125%, + 700, + $font-title, + ), + h4: ( + 24px, + 24px, + 20px, + 125%, + 125%, + 125%, + 700, + $font-title, + ), + h5: ( + 20px, + 20px, + 20px, + 150%, + 150%, + 150%, + 700, + $font-title, + ), + h6: ( + 14px, + 14px, + 14px, + 125%, + 125%, + 125%, + 700, + $font-title, + ), + button: ( + 16px, + 16px, + 16px, + 100%, + 100%, + 100%, + 600, + $font-main, + ), + main: ( + 16px, + 16px, + 16px, + 150%, + 150%, + 150%, + 400, + $font-main, + ), + additional: ( + 14px, + 14px, + 14px, + 140%, + 140%, + 140%, + 400, + $font-main, + ), +); + +// Animations +$transition-speed: 0.4s; +$transition-function: ease-out; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780d..000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffb..000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 000000000..e6f13b13e --- /dev/null +++ b/vite.config.js @@ -0,0 +1,11 @@ +export default { + base: '/Museum_2/', + build: { + rollupOptions: { + input: { + main: './index.html', + en: './en.html', + }, + }, + }, +};