diff --git a/src/images/events-1.png b/src/images/events-1.png new file mode 100644 index 000000000..4ef5e83a8 Binary files /dev/null and b/src/images/events-1.png differ diff --git a/src/images/events-2.png b/src/images/events-2.png new file mode 100644 index 000000000..0394f393a Binary files /dev/null and b/src/images/events-2.png differ diff --git a/src/images/exhibition-1.png b/src/images/exhibition-1.png new file mode 100644 index 000000000..21818272e Binary files /dev/null and b/src/images/exhibition-1.png differ diff --git a/src/images/exhibition-2.png b/src/images/exhibition-2.png new file mode 100644 index 000000000..2b45fdcf8 Binary files /dev/null and b/src/images/exhibition-2.png differ diff --git a/src/images/header-bg.png b/src/images/header-bg.png new file mode 100644 index 000000000..5c5f6683d Binary files /dev/null and b/src/images/header-bg.png differ diff --git a/src/images/icons/arrow-right-icon.svg b/src/images/icons/arrow-right-icon.svg new file mode 100644 index 000000000..43f997158 --- /dev/null +++ b/src/images/icons/arrow-right-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/close-icon.svg b/src/images/icons/close-icon.svg new file mode 100644 index 000000000..97c11e4ad --- /dev/null +++ b/src/images/icons/close-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/dropdown-icon.svg b/src/images/icons/dropdown-icon.svg new file mode 100644 index 000000000..0e01947fd --- /dev/null +++ b/src/images/icons/dropdown-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook-icon.svg b/src/images/icons/facebook-icon.svg new file mode 100644 index 000000000..6c0bad825 --- /dev/null +++ b/src/images/icons/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/instagram-icon.svg b/src/images/icons/instagram-icon.svg new file mode 100644 index 000000000..5af50bb18 --- /dev/null +++ b/src/images/icons/instagram-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/menu-icon.svg b/src/images/icons/menu-icon.svg new file mode 100644 index 000000000..bc5d4069d --- /dev/null +++ b/src/images/icons/menu-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/scroll-up-icon.svg b/src/images/icons/scroll-up-icon.svg new file mode 100644 index 000000000..c49ca0cbe --- /dev/null +++ b/src/images/icons/scroll-up-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/telegram-icon.svg b/src/images/icons/telegram-icon.svg new file mode 100644 index 000000000..a4369c774 --- /dev/null +++ b/src/images/icons/telegram-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter-icon.png b/src/images/icons/twitter-icon.png new file mode 100644 index 000000000..6cb01f2da Binary files /dev/null and b/src/images/icons/twitter-icon.png differ diff --git a/src/images/icons/twitter-icon.svg b/src/images/icons/twitter-icon.svg new file mode 100644 index 000000000..a180591c8 --- /dev/null +++ b/src/images/icons/twitter-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/menu-bg.png b/src/images/menu-bg.png new file mode 100644 index 000000000..77ce337a4 Binary files /dev/null and b/src/images/menu-bg.png differ diff --git a/src/images/namu-logo-white.svg b/src/images/namu-logo-white.svg new file mode 100644 index 000000000..a243122cc --- /dev/null +++ b/src/images/namu-logo-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/namu-logo.svg b/src/images/namu-logo.svg new file mode 100644 index 000000000..8b9dc25ef --- /dev/null +++ b/src/images/namu-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/news-1.png b/src/images/news-1.png new file mode 100644 index 000000000..33268d554 Binary files /dev/null and b/src/images/news-1.png differ diff --git a/src/images/news-2.png b/src/images/news-2.png new file mode 100644 index 000000000..f7dcb27cb Binary files /dev/null and b/src/images/news-2.png differ diff --git a/src/images/visit-bg.png b/src/images/visit-bg.png new file mode 100644 index 000000000..96b7413b1 Binary files /dev/null and b/src/images/visit-bg.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..f5cc8c6f1 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,582 @@ - + + - Title + NAMU + + + + - -

Hello Mate Academy

+ + + + + + + + + + + +
+
+
+

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

+ +
+ Exhibition 1 + +
+

11.07 - 22.09

+

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

+

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

+
+ + + Купити квиток + +
+ +
+ Exhibition 2 +

Діє постійно

+

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

+

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

+ + Купити квиток + +
+ + + Архів квитків + +
+
+
+ + + +
+
+
+

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

+ +
+ events 1 + +
+

14.08 о 13:00

+

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

+

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

+ + Зареєструватись + +
+
+ +
+ events 2 +
+

16.08 о 13:00

+

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

+

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

+ + Зареєструватись + +
+
+ + + Календар подій + +
+
+
+ + + +
+
+
+

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

+

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

+ + + Почати + +
+
+
+ + + +
+
+
+

Новини

+ +
+ news + +

9 серпня 2019

+

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

+

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

+
+ +
+ news + +

9 серпня 2019

+

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

+

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

+
+ + + Усі новини + +
+
+
+ + + +
+
+
+

+ Підпишіться на дайджест +

+

+ Першими дізнавайтесь про новини музею та розіграші, отримуйте + запрошення на події та читайте статті від кураторів +

+ +
+ + +
+ +
+
+
+ + + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..4f9cd1901 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,84 @@ 'use strict'; + +// #region dropdown +const dropdown = document.querySelector('.dropdown'); +const trigger = dropdown.querySelector('.dropdown__trigger'); +const languageListItems = document.querySelectorAll('.language-list__item'); + +trigger.addEventListener('click', () => { + dropdown.classList.toggle('dropdown--active'); +}); + +document.addEventListener('click', (e) => { + if (!dropdown.contains(e.target)) { + dropdown.classList.remove('dropdown--active'); + } +}); + +languageListItems.forEach((item) => { + item.addEventListener('click', () => { + const selectedLanguage = item.textContent.trim(); + + trigger.textContent = selectedLanguage; + dropdown.classList.remove('dropdown--active'); + }); +}); +// #endregion + +// #region aside menu +const body = document.querySelector('body'); +const menu = document.querySelector('.page__menu'); +const openMenuButton = document.querySelector('.icon--menu'); +const closeMenuButton = document.querySelector('.icon--close'); +const navLinks = menu.querySelectorAll('.nav__link'); + +function openMenu() { + menu.classList.add('page__menu--open'); + body.classList.add('menu-lock'); +} + +function closeMenu() { + menu.classList.remove('page__menu--open'); + body.classList.remove('menu-lock'); +} + +openMenuButton.addEventListener('click', openMenu); + +closeMenuButton.addEventListener('click', (e) => { + e.preventDefault(); + closeMenu(); +}); + +navLinks.forEach((link) => { + link.addEventListener('click', closeMenu); +}); +// #endregion + +// #region menu items class change +function updateMenuTitleClass() { + const menuLinks = document.querySelectorAll('.menu__nav .nav__link'); + + menuLinks.forEach((menuLink) => { + if (window.innerWidth < 768) { + menuLink.classList.remove('title--h3'); + menuLink.classList.add('title--h5'); + } else { + menuLink.classList.remove('title--h5'); + menuLink.classList.add('title--h3'); + } + }); +} + +updateMenuTitleClass(); + +window.addEventListener('resize', updateMenuTitleClass); +// #endregion + +// #region form button +const form = document.getElementById('digestForm'); + +form.addEventListener('submit', (e) => { + e.preventDefault(); + form.querySelector('input').value = ''; +}); +// #endregion 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/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..45ee34cb3 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,59 @@ +.button { + box-sizing: border-box; + height: 60px; + padding-block: 22px; + + font-size: 16px; + font-weight: bold; + line-height: 100%; + text-align: center; + + @include effects; + + &--primary { + border: none; + color: $white; + background-color: $accent-color; + + &:hover { + background-color: $hover-color; + } + + &:focus { + background-color: $focus-color; + } + + &:disabled { + background-color: $disable-color; + } + } + + &--secondary { + display: flex; + gap: 8px; + align-items: center; + justify-content: center; + + border: 1px solid currentColor; + + color: $accent-color; + + &::after { + content: ''; + + display: inline-block; + + width: 20px; + height: 20px; + + background-color: currentColor; + + -webkit-mask: url('../images/icons/arrow-right-icon.svg') center / contain + no-repeat; + mask: url('../images/icons/arrow-right-icon.svg') center / contain + no-repeat; + } + + @include ui-states; + } +} diff --git a/src/styles/blocks/cards.scss b/src/styles/blocks/cards.scss new file mode 100644 index 000000000..d7f566640 --- /dev/null +++ b/src/styles/blocks/cards.scss @@ -0,0 +1,154 @@ +.card { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + justify-content: space-between; + + margin-bottom: 60px; + + @include effects; + + &:hover { + transform: scale(1.02); + } + + &__img { + width: 100%; + height: 356px; + margin-bottom: 20px; + object-fit: cover; + } + + &__date { + margin-bottom: 10px; + color: $accent-color; + } + + &__title { + margin-bottom: 20px; + + @include on-tablet { + margin-bottom: auto; + } + } + + &__description { + margin-bottom: 30px; + color: $secondary-color; + + @include on-tablet { + margin-top: 20px; + margin-bottom: 40px; + } + } + + &--exhibit { + @include on-tablet { + grid-column: span 3; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: span 6; + } + + &:last-of-type { + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 0; + } + } + + .card__img { + @include on-tablet { + height: 420px; + margin-bottom: 30px; + } + + @include on-desktop { + height: 484px; + margin-bottom: 20px; + } + } + + .card__title { + @include on-tablet { + margin-bottom: auto; + } + } + + .card__description { + @include on-tablet { + margin-top: 20px; + margin-bottom: 40px; + } + + @include on-desktop { + margin-bottom: 50px; + } + } + } + + &--events { + @include on-tablet { + grid-column: 1 / -1; + flex-direction: row; + column-gap: 30px; + margin-bottom: 70px; + } + + @include on-desktop { + display: grid; + grid-column: 1 / -1; + grid-template-columns: repeat(12, 1fr); + margin-bottom: 60px; + } + + &:last-of-type { + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 0; + } + } + + .card__info { + display: flex; + grid-column: span 6; + flex-direction: column; + } + + .card__img { + @include on-tablet { + height: 424px; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: span 4; + height: 475px; + margin-bottom: 0; + } + } + + .card__title { + @include on-tablet { + margin-bottom: 20px; + } + } + + .card__description { + @include on-tablet { + margin-top: 0; + margin-bottom: 50px; + } + } + + .card__button { + @include on-desktop { + max-width: 270px; + } + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..57a3f5954 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,14 @@ +.container { + margin: 0 auto; + padding-inline: 20px; + + @include on-tablet { + max-width: 768px; + padding-inline: 39px; + } + + @include on-desktop { + max-width: 1280px; + padding-inline: 55px; + } +} diff --git a/src/styles/blocks/digest.scss b/src/styles/blocks/digest.scss new file mode 100644 index 000000000..28f9d7d9b --- /dev/null +++ b/src/styles/blocks/digest.scss @@ -0,0 +1,90 @@ +.digest { + &__wrapper { + @include page-grid; + + margin-bottom: 80px; + + @include on-tablet { + margin-bottom: 128px; + } + + @include on-desktop { + margin-bottom: 200px; + } + } + + &__title { + grid-column: 1 / -1; + margin-bottom: 20px; + + @include on-desktop { + grid-column: 1 / 7; + margin-bottom: 50px; + } + } + + &__text { + grid-column: 1 / -1; + margin-bottom: 50px; + + @include on-tablet { + grid-column: 1 / 6; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__form { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + margin-bottom: 30px; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 6; + margin-bottom: 40px; + } + } + + &__label { + @include visually-hidden; + } + + &__input { + border-bottom: currentColor solid 1px; + color: #000; + + &::placeholder { + color: currentColor; + } + + @include ui-states; + + &:focus { + outline: none; + + &::placeholder { + opacity: 0; + } + } + + &:not(:placeholder-shown) { + font-weight: 700; + color: currentColor; + } + } + + &__button { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..6495cd76b --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,21 @@ +.events { + &__wrapper { + margin-bottom: 90px; + + @include on-tablet { + margin-bottom: 100px; + } + + @include on-desktop { + margin-bottom: 110px; + } + } + + &__title { + margin-bottom: 60px; + + @include on-tablet { + margin-bottom: 75px; + } + } +} diff --git a/src/styles/blocks/exhibit.scss b/src/styles/blocks/exhibit.scss new file mode 100644 index 000000000..db90a77d6 --- /dev/null +++ b/src/styles/blocks/exhibit.scss @@ -0,0 +1,21 @@ +.exhibit { + &__wrapper { + margin-bottom: 120px; + + @include on-tablet { + margin-bottom: 160px; + } + + @include on-desktop { + margin-bottom: 200px; + } + } + + &__title { + margin-bottom: 60px; + + @include on-tablet { + margin-bottom: 75px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..09eabb3c3 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,122 @@ +.footer { + padding-block: 30px; + color: $white; + background-color: $background; + + &__wrapper { + @include page-grid; + + row-gap: 50px; + } + + &__contacts { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + + @include on-tablet { + grid-column: 1 / 3; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &__social-media { + display: flex; + gap: 20px; + margin-top: 30px; + + @include on-tablet { + margin-top: 50px; + } + } + + &__opening-hours { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 3 / 5; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &__nav { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: -3 / -1; + } + + @include on-desktop { + grid-column: span 4; + } + + .nav__list { + gap: 0; + + @include on-tablet { + gap: 10px; + } + } + } + + &__bottom { + display: flex; + grid-column: 1 / -1; + gap: 24px; + align-items: center; + + @include on-tablet { + gap: 22px; + } + + @include on-desktop { + gap: 102px; + } + } + + &__arrow { + margin-left: auto; + } + + &__title { + margin-bottom: 10px; + font-size: 18px; + + @include on-tablet { + font-size: 20px; + } + + @include on-tablet { + margin-bottom: 30px; + } + } + + &__link { + position: relative; + + &::after { + content: ''; + + position: absolute; + bottom: -1px; + left: 0; + + width: 0; + height: 1px; + + background-color: currentColor; + + @include effects; + } + + &:hover::after { + width: 100%; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..405941c04 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,124 @@ +.header { + position: relative; + color: $white; + background-color: $background; + + &__top-bar { + margin-bottom: 50px; + } + + &__content { + @include page-grid; + + margin-bottom: 90px; + + @include on-tablet { + margin-bottom: 100px; + } + + @include on-desktop { + margin-bottom: 110px; + } + } + + &__date { + grid-column: 1 / -1; + margin-bottom: 10px; + + @include on-tablet { + grid-column: 1 / 3; + } + } + + &__title { + grid-column: 1 / -1; + margin-bottom: 30px; + font-size: 48px; + line-height: 100%; + + @include on-tablet { + grid-column: 1 / -2; + margin-bottom: 20px; + font-size: 72px; + + @include on-desktop { + grid-column: 1 / 7; + margin-bottom: 30px; + font-size: 96px; + } + } + } + + &__info { + grid-column: 1 / -1; + margin-bottom: 40px; + + @include on-tablet { + grid-column: span 3; + margin-bottom: 50px; + } + + @include on-desktop { + grid-column: 1 / 6; + margin-bottom: 81px; + } + } + + &__button { + grid-column: 1 / -1; + margin-bottom: 40px; + + @include on-tablet { + grid-column: 1 / 4; + margin-bottom: 70px; + } + + @include on-desktop { + grid-column: 1 / 4; + margin-bottom: 135px; + } + } + + &__background { + grid-column: 1 / -1; + height: 273px; + margin: 0 auto; + object-fit: cove; + + @include on-tablet { + height: 494px; + } + + @include on-desktop { + position: absolute; + right: 0; + bottom: 0; + height: 663px; + } + } + + &__subtitle { + display: none; + + @include on-desktop { + display: flex; + grid-column: 1 / 7; + gap: 20px; + align-items: center; + justify-content: space-between; + + margin-bottom: 50px; + + &::after { + content: ''; + + display: inline-block; + + width: 469px; + height: 1px; + + background-color: currentColor; + } + } + } +} diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss new file mode 100644 index 000000000..428021eb4 --- /dev/null +++ b/src/styles/blocks/icons.scss @@ -0,0 +1,78 @@ +.icon { + display: block; + + width: 20px; + height: 20px; + + color: $white; + + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include ui-states; + @include effects; + + &--menu { + background-color: currentColor; + -webkit-mask: url('../images/icons/menu-icon.svg') center / contain + no-repeat; + mask: url('../images/icons/menu-icon.svg') center / contain no-repeat; + + @include on-tablet { + width: 30px; + height: 30px; + } + } + + &--close { + background-color: currentColor; + -webkit-mask: url('../images/icons/close-icon.svg') center / contain + no-repeat; + mask: url('../images/icons/close-icon.svg') center / contain no-repeat; + + @include on-tablet { + width: 30px; + height: 30px; + } + } + + &--facebook { + background-color: currentColor; + -webkit-mask: url('../images/icons/facebook-icon.svg') center / contain + no-repeat; + mask: url('../images/icons/facebook-icon.svg') center / contain no-repeat; + } + + &--twitter { + background-color: currentColor; + -webkit-mask: url('../images/icons/twitter-icon.svg') center / contain + no-repeat; + mask: url('../images/icons/twitter-icon.svg') center / contain no-repeat; + } + + &--telegram { + background-color: currentColor; + -webkit-mask: url('../images/icons/telegram-icon.svg') center / contain + no-repeat; + mask: url('../images/icons/telegram-icon.svg') center / contain no-repeat; + } + + &--instagram { + background-color: currentColor; + -webkit-mask: url('../images/icons/instagram-icon.svg') center / contain + no-repeat; + mask: url('../images/icons/instagram-icon.svg') center / contain no-repeat; + } + + &--back-to-top { + width: 30px; + height: 30px; + + background-color: currentColor; + + -webkit-mask: url('../images/icons/scroll-up-icon.svg') center / contain + no-repeat; + mask: url('../images/icons/scroll-up-icon.svg') center / contain no-repeat; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..4999c02ad --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,111 @@ +.menu { + color: $white; + + &__wrapper { + position: relative; + + @include on-desktop { + padding-bottom: 108px; + } + } + + &__top-bar { + margin-bottom: 20px; + + @include on-tablet { + margin-bottom: 30px; + } + + @include on-desktop { + margin-bottom: 20px; + } + } + + &__content { + @include page-grid; + + row-gap: 40px; + + @include on-tablet { + row-gap: 50px; + margin-bottom: 30px; + } + + @include on-desktop { + row-gap: 70px; + margin-bottom: 0; + } + } + + &__info { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + row-gap: 20px; + justify-content: space-between; + + @include on-desktop { + grid-column: span 5; + flex-direction: row; + column-gap: 83px; + justify-content: flex-start; + } + } + + &__text { + font-weight: 600; + } + &__nav { + grid-column: 1 / -1; + + @include on-desktop { + grid-column: 1 / 7; + } + + &::after { + content: ''; + + display: block; + + width: 100%; + height: 1px; + margin-top: 40px; + + background-color: $white; + + @include on-tablet { + margin-top: 50px; + } + + @include on-desktop { + margin-top: 60px; + } + } + } + + &__button { + grid-column: 1 / -1; + + @include on-desktop { + grid-column: 1 / 4; + } + } + + &__background { + display: none; + + @include on-tablet { + display: block; + height: 466px; + margin: 0 auto; + object-fit: cover; + } + + @include on-desktop { + position: absolute; + right: 0; + bottom: 0; + height: 697px; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..e5fd686bc --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,39 @@ +.nav { + &__list { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + gap: 30px; + } + + @include on-desktop { + gap: 60px; + } + } + + &__link { + position: relative; + color: $white; + + &::after { + content: ''; + + position: absolute; + bottom: -1px; + left: 0; + + width: 0; + height: 1px; + + background-color: currentColor; + + @include effects; + } + + &:hover::after { + width: 100%; + } + } +} diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss new file mode 100644 index 000000000..49649f871 --- /dev/null +++ b/src/styles/blocks/news.scss @@ -0,0 +1,76 @@ +.news { + &__wrapper { + @include page-grid; + + margin-bottom: 120px; + + @include on-tablet { + margin-bottom: 160px; + } + + @include on-desktop { + margin-bottom: 200px; + } + } + + &__title { + margin-bottom: 60px; + + @include on-tablet { + margin-bottom: 75px; + } + + @include on-desktop { + margin-bottom: 55px; + } + } + + &__article { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + margin-bottom: 50px; + + @include effects; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + + &:last-of-type { + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 0; + } + } + + &:hover { + transform: scale(1.02); + } + } + + &__img { + height: 281px; + margin-bottom: 20px; + object-fit: cover; + + @include on-tablet { + height: 330px; + margin-bottom: 30px; + } + + @include on-desktop { + height: 370px; + margin-bottom: 20px; + } + } + + &__name { + margin-bottom: 20px; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..ea9157aea --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,37 @@ +.page { + scroll-behavior: smooth; + + &__body { + font-family: Raleway, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 150%; + letter-spacing: 0; + } + + &__menu { + pointer-events: none; + + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateX(100%); + + min-height: 100vh; + + opacity: 0; + background-color: $background; + + &--open { + pointer-events: auto; + z-index: 100; + transform: translateX(0); + opacity: 1; + } + } +} + +.menu-lock { + overflow: hidden; +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 000000000..bad784129 --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,30 @@ +.section { + &__wrapper { + @include page-grid; + } + + &__title { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__button { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: -3 / -1; + grid-row: 1 / 2; + } + + @include on-desktop { + grid-column: -4 / -1; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..6fbcbbae7 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,73 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding-block: 20px; + + @include on-desktop { + padding-block: 25px; + } + + &__logo { + display: block; + width: 123px; + height: 40px; + } + + &__right { + display: flex; + gap: 40px; + align-items: center; + justify-content: space-between; + } + + &__dropdown { + display: none; + + @include on-tablet { + display: block; + } + } +} + +.dropdown { + position: relative; + + &__content { + position: absolute; + overflow: hidden; + height: 0; + } + &--active &__content { + overflow: visible; + height: auto; + } + + &__trigger { + cursor: pointer; + display: flex; + gap: 3px; + align-items: center; + + @include ui-states; + + &::after { + content: ''; + + display: block; + + width: 8px; + height: 8px; + + background-color: currentColor; + + -webkit-mask: url(../images/icons/dropdown-icon.svg) no-repeat center / + contain; + mask: url(../images/icons/dropdown-icon.svg) no-repeat center / contain; + } + } +} + +.language-list__item { + @include ui-states; +} diff --git a/src/styles/blocks/visit.scss b/src/styles/blocks/visit.scss new file mode 100644 index 000000000..020188387 --- /dev/null +++ b/src/styles/blocks/visit.scss @@ -0,0 +1,68 @@ +.visit { + background-color: $background; + + @include on-desktop { + background-image: url(../images/visit-bg.png); + background-repeat: no-repeat; + background-position: left center; + } + + &__wrapper { + @include page-grid; + + margin-bottom: 90px; + padding-block: 50px; + + @include on-tablet { + margin-bottom: 120px; + padding-block: 80px; + } + + @include on-desktop { + margin-bottom: 110px; + padding-block: 205px; + } + } + + &__title { + grid-column: 1 / -1; + margin-bottom: 20px; + color: $white; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: 6 / -1; + margin-bottom: 10px; + } + } + &__text { + grid-column: 1 / -1; + margin-bottom: 40px; + color: $white; + + @include on-tablet { + grid-column: span 4; + margin-bottom: 60px; + } + + @include on-desktop { + grid-column: 6 / -3; + margin-bottom: 50px; + } + } + + &__button { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: 6 / 9; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..f31c168e3 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,20 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import './utils/vars'; +@import './utils/mixins'; +@import './utils/normalize'; +@import './utils/typography'; +@import './blocks/container'; +@import './blocks/page'; +@import './blocks/header'; +@import './blocks/top-bar'; +@import './blocks/icons'; +@import './blocks/button'; +@import './blocks/menu'; +@import './blocks/nav'; +@import './blocks/section'; +@import './blocks/cards'; +@import './blocks/exhibit'; +@import './blocks/events'; +@import './blocks/visit'; +@import './blocks/news'; +@import './blocks/digest'; +@import './blocks/footer'; 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/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 000000000..c2f278010 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,63 @@ +@mixin on-tablet { + @media (min-width: $tablet-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-width) { + @content; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-desktop { + --columns: 12; + } +} + +@mixin ui-states { + &:hover { + color: $hover-color; + } + + &:focus { + color: $focus-color; + } + + &:disabled { + color: $disable-color; + } +} + +@mixin visually-hidden { + position: absolute; + + overflow: hidden; + + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; + + white-space: nowrap; + + clip: rect(0, 0, 0, 0); +} + +@mixin effects { + transition: all $animation-duration ease-in-out; +} diff --git a/src/styles/utils/normalize.scss b/src/styles/utils/normalize.scss new file mode 100644 index 000000000..e89cacbd2 --- /dev/null +++ b/src/styles/utils/normalize.scss @@ -0,0 +1,284 @@ +/* === normalize + reset === */ +@layer reset { + *, + *::before, + *::after { + box-sizing: border-box; + } + + * { + margin: 0; + } + + html { + font-size: 16px; + -webkit-text-size-adjust: 100%; + text-size-adjust: 100%; + color-scheme: light dark; + } + + body { + min-height: 100dvh; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: 1.5; + color: #111; + + background: #fff; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font: inherit; + } + + p, + figure, + blockquote, + dl, + dd { + margin: 0; + } + + b, + strong { + font-weight: bolder; + } + + i, + em { + font-style: italic; + } + + small { + font: inherit; + } + + sub, + sup { + position: relative; + font-size: 0.75em; + line-height: 0; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + + a { + display: inline-block; + color: inherit; + text-decoration: none; + + -webkit-tap-highlight-color: transparent; + } + a:focus-visible { + outline: 2px solid #1a73e8; + outline-offset: 2px; + } + a:not([class]) { + text-decoration-thickness: from-font; + text-decoration-skip-ink: auto; + text-underline-offset: 0.15em; + } + + ul, + ol { + padding-left: 0; + list-style: none; + } + + img, + svg, + video, + canvas, + audio, + iframe, + embed, + object { + display: block; + max-width: 100%; + } + img { + height: auto; + } + picture { + display: block; + } + + table { + border-spacing: 0; + border-collapse: collapse; + width: 100%; + text-indent: 0; + } + th, + td { + padding: 0; + } + + button, + input, + select, + textarea { + margin: 0; + padding: 0; + border: 0; + + font: inherit; + color: inherit; + letter-spacing: inherit; + + background: transparent; + outline: none; + } + + button, + [role='button'], + input[type='button'], + input[type='submit'], + input[type='reset'] { + cursor: pointer; + } + + :disabled { + cursor: not-allowed; + } + + textarea { + resize: vertical; + } + textarea::placeholder, + input::placeholder { + opacity: 0.6; + } + + /* Safari/Chrome form controls */ + input, + textarea, + select { + border-radius: 0; + -webkit-appearance: none; + appearance: none; + } + + input[type='number'] { + -moz-appearance: textfield; + } + input[type='number']::-webkit-outer-spin-button, + input[type='number']::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; + } + + /* Safari search */ + input[type='search'] { + -webkit-appearance: none; + outline-offset: 0; + } + input[type='search']::-webkit-search-decoration { + -webkit-appearance: none; + } + + input[type='file'] { + font: inherit; + } + + input[type='checkbox'], + input[type='radio'] { + width: 1em; + height: 1em; + margin: 0; + + -webkit-appearance: none; + appearance: none; + } + + :focus-visible { + outline: 2px solid #1a73e8; + outline-offset: 2px; + } + :focus:not(:focus-visible) { + outline: none; + } + + fieldset { + min-width: 0; + margin: 0; + padding: 0; + border: 0; + } + legend { + padding: 0; + } + + label { + cursor: pointer; + } + + ::selection { + color: #000; + background: #bcdcff; + } + + hr { + height: 0; + border: 0; + border-top: 1px solid rgba(0, 0, 0, 0.12); + } + + details { + display: block; + } + summary { + cursor: pointer; + list-style: none; + } + summary::-webkit-details-marker { + display: none; + } + + [hidden] { + display: none; + } + template { + display: none; + } +} + +@layer reset { + .visually-hidden { + position: absolute; + + overflow: hidden; + + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; + + white-space: nowrap; + + clip: rect(0 0 0 0); + } +} + +/* Autofill fix з underline */ +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus { + border-bottom: 1px solid #000 !important; + -webkit-box-shadow: 0 0 0 1000px transparent inset !important; + transition: background-color 9999s ease-in-out 0s !important; + + -webkit-text-fill-color: #000 !important; +} diff --git a/src/styles/utils/typography.scss b/src/styles/utils/typography.scss new file mode 100644 index 000000000..442d351f7 --- /dev/null +++ b/src/styles/utils/typography.scss @@ -0,0 +1,64 @@ +.title { + font-family: 'Playfair Display', serif; + font-weight: bold; + letter-spacing: 0; + + &--h2 { + font-size: 38px; + line-height: 100%; + + @include on-tablet { + font-size: 62px; + } + + @include on-desktop { + font-size: 80px; + } + } + + &--h3 { + font-size: 28px; + line-height: 125%; + + @include on-tablet { + font-size: 40px; + } + + @include on-desktop { + font-size: 48px; + line-height: 120%; + } + } + + &--h4 { + font-size: 20px; + line-height: 125%; + + @include on-tablet { + font-size: 24px; + } + } + + &--h5 { + font-size: 20px; + line-height: 150%; + + @include on-tablet { + font-size: 20px; + } + } + + &--h6 { + font-size: 14px; + line-height: 125%; + + @include on-tablet { + font-size: 14px; + } + } +} + +.additional-text { + font-size: 14px; + line-height: 140%; +} diff --git a/src/styles/utils/vars.scss b/src/styles/utils/vars.scss new file mode 100644 index 000000000..bb824a883 --- /dev/null +++ b/src/styles/utils/vars.scss @@ -0,0 +1,11 @@ +$accent-color: #cd4d31; +$white: #f1f5f4; +$background: #3f5252; +$main-color: #1c1b29; +$secondary-color: #504f5e; +$hover-color: #af3419; +$focus-color: #ea340d; +$disable-color: #dd836f; +$tablet-width: 640px; +$desktop-width: 1280px; +$animation-duration: 0.3s;