diff --git a/src/images/background/bg-photo-1.png b/src/images/background/bg-photo-1.png new file mode 100644 index 000000000..de51be8d8 Binary files /dev/null and b/src/images/background/bg-photo-1.png differ diff --git a/src/images/background/bg-photo-2.png b/src/images/background/bg-photo-2.png new file mode 100644 index 000000000..13abb82a8 Binary files /dev/null and b/src/images/background/bg-photo-2.png differ diff --git a/src/images/background/bg-photo-3.png b/src/images/background/bg-photo-3.png new file mode 100644 index 000000000..d37defb24 Binary files /dev/null and b/src/images/background/bg-photo-3.png differ diff --git a/src/images/icons/icon-arrow-light.svg b/src/images/icons/icon-arrow-light.svg new file mode 100644 index 000000000..799b8a91d --- /dev/null +++ b/src/images/icons/icon-arrow-light.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/icon-arrow.svg b/src/images/icons/icon-arrow.svg new file mode 100644 index 000000000..0da1e9b20 --- /dev/null +++ b/src/images/icons/icon-arrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 000000000..f2cfd07c0 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-facebook.svg b/src/images/icons/icon-facebook.svg new file mode 100644 index 000000000..7702febec --- /dev/null +++ b/src/images/icons/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-instagram.svg b/src/images/icons/icon-instagram.svg new file mode 100644 index 000000000..724f731bc --- /dev/null +++ b/src/images/icons/icon-instagram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/icons/icon-menu.svg b/src/images/icons/icon-menu.svg new file mode 100644 index 000000000..4808d19e1 --- /dev/null +++ b/src/images/icons/icon-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/logo.svg b/src/images/icons/logo.svg new file mode 100644 index 000000000..afda68b0f --- /dev/null +++ b/src/images/icons/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/paintings/painting-1.png b/src/images/paintings/painting-1.png new file mode 100644 index 000000000..c744ad033 Binary files /dev/null and b/src/images/paintings/painting-1.png differ diff --git a/src/images/paintings/painting-2.png b/src/images/paintings/painting-2.png new file mode 100644 index 000000000..a053c3391 Binary files /dev/null and b/src/images/paintings/painting-2.png differ diff --git a/src/images/paintings/painting-3(2).png b/src/images/paintings/painting-3(2).png new file mode 100644 index 000000000..a5bcac35f Binary files /dev/null and b/src/images/paintings/painting-3(2).png differ diff --git a/src/images/paintings/painting-3.png b/src/images/paintings/painting-3.png new file mode 100644 index 000000000..0c2e9f017 Binary files /dev/null and b/src/images/paintings/painting-3.png differ diff --git a/src/images/paintings/painting-4.png b/src/images/paintings/painting-4.png new file mode 100644 index 000000000..60ace0768 Binary files /dev/null and b/src/images/paintings/painting-4.png differ diff --git a/src/images/paintings/painting-5.png b/src/images/paintings/painting-5.png new file mode 100644 index 000000000..9588a91c2 Binary files /dev/null and b/src/images/paintings/painting-5.png differ diff --git a/src/images/paintings/painting-6.png b/src/images/paintings/painting-6.png new file mode 100644 index 000000000..5b5f39b4a Binary files /dev/null and b/src/images/paintings/painting-6.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..60d1e249d 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,44 @@ 'use strict'; + +/* global IntersectionObserver */ + +document.addEventListener('DOMContentLoaded', () => { + const slider = document.getElementById('gallery-slider'); + const items = document.querySelectorAll('.gallery__item'); + const dots = document.querySelectorAll('.gallery__dot'); + + if (slider && dots.length > 0) { + const observerOptions = { + root: slider, + threshold: 0.6, + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const index = Array.from(items).indexOf(entry.target); + + dots.forEach((dot) => dot.classList.remove('gallery__dot--active')); + + if (dots[index]) { + dots[index].classList.add('gallery__dot--active'); + } + } + }); + }, observerOptions); + + items.forEach((i) => observer.observe(i)); + + dots.forEach((dot, index) => { + dot.addEventListener('click', () => { + if (items[index]) { + items[index].scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + inline: 'center', + }); + } + }); + }); + } +}); 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 index 3280c3fe1..b92dff3bf 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,18 @@ @import 'utils/vars'; @import 'utils/mixins'; -@import 'utils/extends'; + +@import 'blocks/page'; +@import 'blocks/button'; +@import 'blocks/header'; +@import 'blocks/icon'; +@import 'blocks/nav'; +@import 'blocks/schedule'; +@import 'blocks/menu'; +@import 'blocks/main'; +@import 'blocks/actual-events'; +@import 'blocks/event'; +@import 'blocks/lecture'; +@import 'blocks/gallery'; +@import 'blocks/about-us'; +@import 'blocks/contacts'; +@import 'blocks/contact-info'; diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..d9b594da4 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,58 @@ +.about-us { + &__bg-photo { + display: block; + grid-column: 1 / -1; + grid-row: 1; + + min-height: 45vh; + + object-fit: cover; + + @include bg-photo; + } + + &__wrapper { + position: relative; + align-items: center; + width: 100%; + + @include page-grid; + } + + &__content { + grid-column: 1 / -1; + grid-row: 1; + color: $color-light; + + @include on-tablet { + grid-column: 2 / 6; + } + + @include on-desktop { + grid-column: 4 / 10; + } + } + + &__description { + margin-top: 20px; + font-size: 18px; + text-align: center; + + @include on-tablet { + margin-top: 16px; + } + } + + &__button { + width: 100%; + margin-top: 50px; + + @include on-tablet { + margin-top: 64px; + } + + @include on-desktop { + margin-top: 72px; + } + } +} diff --git a/src/styles/blocks/actual-events.scss b/src/styles/blocks/actual-events.scss new file mode 100644 index 000000000..491699ae1 --- /dev/null +++ b/src/styles/blocks/actual-events.scss @@ -0,0 +1,28 @@ +.actual-events { + margin-bottom: 60px; + + @include on-tablet { + margin: 88px 0 104px; + } + + @include on-desktop { + margin-top: 200px; + } + + &__wrapper { + display: grid; + row-gap: 60px; + width: 100%; + margin-top: 40px; + + @include on-tablet { + row-gap: 64px; + margin-top: 48px; + } + + @include on-desktop { + row-gap: 104px; + margin-top: 56px; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..fa4cadc8c --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,191 @@ +.button { + position: relative; + z-index: 5; + + overflow: hidden; + display: flex; + align-items: center; + + box-sizing: border-box; + width: 100%; + height: 50px; + padding: 0; + border: $button-border solid $color-system; + + color: inherit; + text-decoration: none; + text-transform: uppercase; + + background-color: $color-light; + + transition: all $transition-time ease; + + &::after { + content: ''; + + position: absolute; + z-index: -5; + inset: 0; + transform-origin: right; + transform: scaleX(0); + + background-color: $color-system; + + transition: transform $transition-time ease; + } + + &__txt { + display: flex; + flex-grow: 1; + align-items: center; + justify-content: center; + + transition: color $transition-time ease; + } + + &__input { + position: relative; + z-index: 10; + + flex-grow: 1; + + height: 100%; + padding: 0 0 0 24px; + border: none; + + font-family: inherit; + line-height: 1; + color: $color-dark; + + background: transparent; + outline: none; + + transition: + background-position $transition-time ease, + color $transition-time ease 0.15s; + + &::placeholder { + color: $color-title; + } + + &:focus { + color: $color-dark; + } + + .button--about-us & { + background: linear-gradient( + to right, + $color-light 50%, + $color-accent 50% + ); + background-position: 0 0; + background-size: 200% 100%; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus, + &:-webkit-autofill:active { + transition: background-color $transition-time ease; + + -webkit-text-fill-color: $color-dark; + } + + .button:hover &::placeholder { + color: $color-dark; + } + + .button:has(.button__arrow--about-us:hover) & { + color: $color-light; + background-position: 100% 0; + + &::placeholder { + color: $color-light; + } + + &:-webkit-autofill { + -webkit-text-fill-color: $color-light; + } + } + } + + &__arrow { + position: relative; + z-index: 5; + + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + + width: 50px; + height: 100%; + border: none; + + background-color: $color-system; + + @include on-tablet { + width: 70px; + } + + &--about-us { + cursor: pointer; + background-color: $color-accent; + + &:hover { + .icon--arrow { + background-image: url(../images/icons/icon-arrow-light.svg); + } + } + } + } + + &--about-us { + border: 0; + background-color: transparent; + + &::after { + display: none; + } + + &:hover { + transform: none !important; + } + + @include on-tablet { + gap: 16px; + } + + @include on-desktop { + gap: 30px; + } + } + + &:hover { + &::after { + transform: scaleX(1); + } + + .button__txt { + color: $color-light; + } + } + + &:focus { + border-color: $color-accent; + + &::after { + background-color: $color-accent; + } + + .button__arrow { + background-color: $color-accent; + } + } + + @include on-tablet { + height: 70px; + } + + @include hover(transform, scale($transform-button-scale)); +} diff --git a/src/styles/blocks/contact-info.scss b/src/styles/blocks/contact-info.scss new file mode 100644 index 000000000..c74af0fe4 --- /dev/null +++ b/src/styles/blocks/contact-info.scss @@ -0,0 +1,25 @@ +.contact-info { + grid-column: 2; + grid-row: 2; + align-content: start; + margin: 0; + + @include on-tablet { + grid-column: 4 / 6; + grid-row: 1; + } + + @include on-desktop { + grid-column: 5 / 7; + } + + &__title { + margin-bottom: 20px; + line-height: 141%; + } + + &__link { + color: inherit; + text-decoration: none; + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 000000000..7951656c5 --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,92 @@ +.contacts { + &__content { + row-gap: 40px; + margin: 50px 0; + + @include page-grid; + + @include on-tablet { + row-gap: 64px; + } + + @include on-desktop { + row-gap: 80px; + } + } + + &__logos-container { + display: flex; + grid-column: 1 / -1; + grid-row: 1; + align-items: center; + justify-content: space-between; + + @include on-tablet { + grid-column: 1; + grid-row: 1; + flex-direction: column; + gap: 60px; + justify-content: start; + } + } + + &__logo { + @include hover(transform, scale($transform-icon-scale)); + } + + &__icon-container { + display: flex; + gap: 20px; + } + + &__line { + grid-column: 1 / -1; + grid-row: 3; + + width: 100%; + height: 1px; + margin-top: 30px; + + opacity: 0.5; + background-color: currentColor; + + @include on-tablet { + grid-column: 2 / 6; + grid-row: 2; + margin: 0; + } + + @include on-desktop { + grid-column: 7; + grid-row: 1; + width: 1px; + height: 100%; + } + } + + &__copyright-details { + display: flex; + grid-column: 1 / -1; + grid-row: 5; + flex-direction: column; + align-items: center; + + margin-top: 40px; + + font-size: 12px; + font-weight: 300; + line-height: 1.41; + + @include on-tablet { + grid-row: 4; + flex-direction: row-reverse; + justify-content: space-between; + margin-top: 56px; + } + + @include on-desktop { + grid-row: 2; + margin: 0; + } + } +} diff --git a/src/styles/blocks/event.scss b/src/styles/blocks/event.scss new file mode 100644 index 000000000..19df16818 --- /dev/null +++ b/src/styles/blocks/event.scss @@ -0,0 +1,104 @@ +.event { + @include page-grid; + + &__photo { + grid-column: 1 / -1; + width: 100%; + margin: 0; + object-fit: cover; + + @include hover(transform, scale($transform-photo-scale)); + + @include on-desktop { + grid-column: 1 / 8; + } + } + + &__description { + grid-column: 1 / -1; + gap: 10px; + width: 100%; + margin-top: 20px; + + @include on-tablet { + margin-top: 40px; + } + + @include on-desktop { + grid-column: 9 / -1; + margin: 0; + margin: auto; + } + } + + &__details-container { + display: flex; + gap: 40px; + align-items: center; + margin: 0; + + &--lecture { + gap: 20px; + justify-content: space-between; + padding: 20px; + + @include on-tablet { + padding: 0; + } + } + } + + &__type { + color: $color-title; + text-transform: uppercase; + + @include title; + } + + &__period { + font-size: 16px; + font-weight: 700; + color: $color-system; + } + + &__title-container { + display: flex; + gap: 10px; + align-items: center; + margin: 0; + } + + &__title { + font-family: $txt-title-font; + font-size: 28px; + line-height: 1; + + @include on-tablet { + font-size: 36px; + } + + &--lecture { + text-align: center; + + @include on-tablet { + text-align: start; + } + } + } + + &__accent-point { + width: 10px; + height: 10px; + background-color: $color-accent; + + @include on-tablet { + width: 15px; + height: 15px; + } + } + + &__description-txt { + font-size: 16px; + color: $color-title; + } +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 000000000..3aa73313b --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,131 @@ +.gallery { + margin: 100px 0; + + @include on-tablet { + margin: 88px 0; + } + + @include on-desktop { + margin: 200px 0; + } + + &__content { + margin-top: 40px; + + @include page-grid; + + @include on-tablet { + margin-top: 48px; + } + + @include on-desktop { + margin-top: 56px; + } + } + + &__slider-wrapper { + overflow: hidden; + grid-column: 1 / -1; + } + + &__slider { + scrollbar-width: none; + scroll-snap-type: x mandatory; + + overflow-x: auto; + display: flex; + gap: 16px; + + &::-webkit-scrollbar { + display: none; + } + + @include on-tablet { + gap: 20px; + } + + @include on-desktop { + overflow-x: visible; + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 30px; + } + } + + &__item { + scroll-snap-align: center; + flex: 0 0 100%; + + @include on-tablet { + scroll-snap-align: start; + flex: 0 0 calc((100% - 20px) / 2); + } + + @include on-desktop { + flex: none; + + &--1 { + grid-column: 1 / 5; + grid-row: 1 / 2; + } + &--2 { + grid-column: 5 / 13; + grid-row: 1 / 2; + } + &--3 { + grid-column: 1 / 10; + grid-row: 2 / 3; + } + &--4 { + grid-column: 10 / 13; + grid-row: 2 / 3; + } + + &--1-2 { + display: none; + } + } + } + + &__img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + + @include hover(transform, scale($transform-photo-scale)); + } + + &__pagination { + display: flex; + grid-column: 1 / -1; + gap: 22px; + justify-content: center; + + margin-top: 20px; + + @include on-tablet { + margin-top: 32px; + } + + @include on-desktop { + display: none; + } + } + + &__dot { + cursor: pointer; + + width: 9px; + height: 9px; + border-radius: 50%; + + background-color: $color-light-gray; + + transition: background-color $transition-time; + + &--active { + background-color: $color-system; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..842afa8e4 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,134 @@ +.header { + &__content { + row-gap: 20px; + align-items: center; + min-height: 100vh; + + @include page-grid; + } + + &__img { + display: block; + grid-column: 1 / -1; + grid-row: 1; + + width: calc(100% + 40px); + height: 100%; + margin-right: 20px; + margin-left: -20px; + + object-fit: cover; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 1 / 4; + width: calc(100% + 39px); + margin: 0; + } + + @include on-desktop { + grid-column: 6 / -1; + width: calc(100% + 55px); + } + } + + &__logo { + z-index: 2; + + grid-column: 1 / -1; + grid-row: 1; + place-self: start center; + + margin-top: 9px; + + @include hover(transform, scale($transform-icon-scale)); + + @include on-tablet { + grid-column: 4 / 6; + margin-top: 15px; + } + + @include on-desktop { + grid-column: 6 / 8; + } + } + + &__icon { + z-index: 2; + + grid-column: 1; + grid-row: 1; + align-self: start; + + margin-top: 27px; + + @include on-tablet { + margin-top: 39px; + } + } + + &__title { + grid-column: 1 / -1; + grid-row: 2; + + margin: 0; + + font-size: 45px; + text-align: center; + text-transform: uppercase; + + @include big-title; + + @include on-tablet { + grid-column: 1 / 4; + font-size: 54px; + line-height: 1.2; + text-align: left; + } + + @include on-desktop { + grid-column: 1 / 6; + font-size: 72px; + } + } + + &__button { + grid-column: 1 / -1; + grid-row: 3; + margin-bottom: 70px; + + @include on-tablet { + grid-column: 1 / 3; + } + + @include on-desktop { + grid-column: 3 / 6; + } + } + + &__events { + display: none; + + @include on-desktop { + transform: rotate(180deg); + + display: flex; + grid-column: 1; + grid-row: 3; + gap: 20px; + place-self: end start; + align-items: center; + + writing-mode: vertical-lr; + color: $color-title; + text-transform: uppercase; + white-space: nowrap; + } + } + + &__ev-line { + width: 1px; + height: 70px; + background-color: currentColor; + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..6751c25b9 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,38 @@ +.icon { + display: block; + + width: 24px; + height: 24px; + + background-repeat: no-repeat; + background-position: center; + background-size: auto; + + @include hover(transform, scale($transform-icon-scale)); + + &--menu { + background-image: url(../images/icons/icon-menu.svg); + } + + &--arrow-light { + background-image: url(../images/icons/icon-arrow-light.svg); + } + + &--arrow { + background-image: url(../images/icons/icon-arrow.svg); + } + + &--close { + grid-column: 1; + grid-row: 1; + background-image: url(../images/icons/icon-close.svg); + } + + &--facebook { + background-image: url(../images/icons/icon-facebook.svg); + } + + &--instagram { + background-image: url(../images/icons/icon-instagram.svg); + } +} diff --git a/src/styles/blocks/lecture.scss b/src/styles/blocks/lecture.scss new file mode 100644 index 000000000..be032485a --- /dev/null +++ b/src/styles/blocks/lecture.scss @@ -0,0 +1,42 @@ +.lecture { + &__bg-photo { + display: block; + object-fit: cover; + + @include bg-photo; + } + + &__wrapper { + position: relative; + z-index: 2; + width: 100%; + margin-top: -75px; + + @include page-grid; + + @include on-tablet { + margin-top: -125px; + } + + @include on-desktop { + margin-top: -150px; + } + } + + &__content { + grid-column: 1 / -1; + margin: 0 auto; + background-color: $color-light; + box-shadow: 0 2px 0 0 rgba(26, 90, 76, 0.25); + + @include on-tablet { + grid-column: 2 / 6; + padding: 45px 55px; + } + + @include on-desktop { + grid-column: 4 / 10; + padding: 45px 100px; + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..4ef6a99ee --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,21 @@ +.main { + position: relative; + z-index: 1; + + &__title { + margin: 0; + font-size: 36px; + text-align: center; + + @include big-title; + + @include on-tablet { + font-size: 48px; + text-align: start; + } + + &--about-us { + text-align: center; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..2a7feabfd --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,43 @@ +.menu { + z-index: 100; + color: $color-light; + background-color: $color-system; + + &__content { + display: grid; + grid-template-columns: 24px 1fr; + gap: 24px 28px; + align-items: start; + + margin: 27px 0; + + @include on-tablet { + grid-template-columns: 24px auto 1px auto; + gap: 0 38px; + justify-content: start; + margin: 39px 0; + } + + @include on-desktop { + gap: 0 102px; + } + } + + &__line { + grid-column: 1 / -1; + grid-row: 2; + + width: 100%; + height: 1px; + + opacity: 0.5; + background-color: currentColor; + + @include on-tablet { + grid-column: 3; + grid-row: 1; + width: 1px; + height: 100%; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..5ec4476b0 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,52 @@ +.nav { + grid-column: 2; + grid-row: 1; + + @include title; + + &__list { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 24px 28px; + + margin: 0; + padding: 0; + + list-style: none; + } + + &__link { + color: inherit; + text-decoration: none; + + @include title; + + @include on-desktop { + font-size: 22px; + } + } + + &__item { + @include hover(transform, scale($transform-button-scale)); + } + + &--contacts { + grid-column: 1 / -1; + grid-row: 4; + + @include on-tablet { + grid-column: 2 / 6; + grid-row: 3; + } + + @include on-desktop { + grid-column: 8 / 12; + grid-row: 1; + } + + .nav__link { + font-size: 14px; + font-weight: normal; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..303ba176f --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,51 @@ +.page { + user-select: none; + position: relative; + overflow-x: hidden; + + &::after { + pointer-events: none; + content: ''; + + position: fixed; + z-index: 90; + inset: 0; + + opacity: 0; + background-color: rgba(0, 0, 0, 0.5); + + transition: opacity $transition-time ease; + } + + &__body { + min-width: $mobile-width; + margin: 0; + } + + &:has(.page__menu:target)::after { + pointer-events: all; + opacity: 1; + } + + &__menu { + pointer-events: none; + + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateY(-100%); + + transition: all $transition-time ease; + + &:target { + pointer-events: all; + transform: translateY(0); + opacity: 1; + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/schedule.scss b/src/styles/blocks/schedule.scss new file mode 100644 index 000000000..00f07e700 --- /dev/null +++ b/src/styles/blocks/schedule.scss @@ -0,0 +1,75 @@ +.schedule { + display: grid; + grid-column: 1 / -1; + grid-row: 3; + margin: 0; + + @include on-tablet { + grid-column: 4; + grid-row: 1; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr; + gap: 0 26px; + } + + @include on-desktop { + gap: 0 30px; + } + + &__title { + margin-bottom: 20px; + line-height: 141%; + + @include on-tablet { + grid-column: 1 / -1; + } + } + + &__list { + margin: 0 0 16px; + padding: 0; + list-style: none; + + @include on-tablet { + grid-column: 1; + margin: 0; + } + } + + &__item { + display: flex; + flex-wrap: wrap; + column-gap: 5px; + } + + &__txt-bold { + flex-shrink: 0; + font-weight: bold; + } + + &__info { + @include on-tablet { + grid-column: 2; + max-width: 170px; + } + + &--contacts { + grid-column: 1; + margin-top: 20px; + } + } + + &--contacts { + grid-column: 1; + grid-row: 2; + + @include on-tablet { + grid-column: 2 / 4; + grid-row: 1; + } + + @include on-desktop { + grid-column: 3 / 5; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..40e5b7820 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,16 @@ @import 'utils'; -@import 'fonts'; -@import 'typography'; -body { - background: $c-gray; +html { + scroll-behavior: smooth; + + font-family: $txt-regular-font; + font-size: 14px; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; + line-height: 1.5; + color: $color-dark; + letter-spacing: 0; + + background-color: $color-light; } 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 index 80c79780d..9c037d69a 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,81 @@ +@mixin on-tablet { + @media (min-width: $tablet-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-width) { + @content; + } +} + +@mixin content-padding-inline() { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-desktop { + padding-inline: 55px; + } +} + +.container { + @include content-padding-inline; +} + +@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 hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + cursor: pointer; + transition: #{$_property} $transition-time ease; + &:hover { #{$_property}: $_toValue; } } + +@mixin title { + font-size: 16px; + font-weight: 500; + line-height: 1; +} + +@mixin big-title { + font-family: $txt-title-font; + font-weight: 700; + line-height: 1; +} + +@mixin bg-photo { + width: calc(100% + 40px); + margin-left: -20px; + + @include on-tablet { + width: calc(100% + 78px); + margin-left: -39px; + } + + @include on-desktop { + width: calc(100% + 110px); + margin-left: -55px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..1cbca1c14 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,18 @@ -$c-gray: #eee; +$mobile-width: 320px; +$tablet-width: 768px; +$desktop-width: 1280px; +$txt-regular-font: + IBM Plex Sans, + sans-serif; +$txt-title-font: Montserrat, sans-serif; +$color-dark: rgba(15, 14, 8, 1); +$color-light: rgba(255, 255, 255, 1); +$color-title: rgba(104, 116, 128, 1); +$color-accent: rgba(249, 81, 46, 1); +$color-system: rgba(26, 90, 76, 1); +$color-light-gray: rgba(224, 224, 224, 1); +$button-border: 1px; +$transition-time: 0.3s; +$transform-button-scale: 1.05; +$transform-photo-scale: 1.03; +$transform-icon-scale: 1.2;