About project modal (#118)

* Add `<AboutProjectModal />`

* Update `<Team>` codestyle

* Move html/body rules to globals.css

* Add a spacer at the bottom of the modal

* Update list & domain in team

* Fix styles in TeamPerson

* Update typography

* Update modal width

* Update photo

* Fixed layout shift when opening a modal window

* Update team.json

* Update content in modal

* Remove photos borders

* Add custom scrollbar to Modal

components/AboutProjectModal/AboutProjectModal.jsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { Modal } from './Modal/Modal'
+import { Team } from './Team/Team'
+import { Logo } from '../Logo/Logo'
+import { Button } from '../Button/Button'
+
+import TelegramIcon from './icon-telegram.svg'
+import GithubIcon from './icon-github.svg'
+
+export function AboutProjectModal({ open, onClose: handleClose }) {
+    return (
+        <Modal open={open} onClose={handleClose}>
+            <header>
+                <Logo small />
+                <h2>Делаем городские стандарты удобными и&nbsp;доступными</h2>
+            </header>
+            <p>
+                У&nbsp;администрации Екатеринбурга есть множество полезных руководств
+                и&nbsp;методических рекомендаций о&nbsp;том, как правильно развивать город. Чтобы
+                их&nbsp;было легко найти и изучить, мы&nbsp;разработали &laquo;Руководства
+                Екатеринбурга&raquo;&nbsp;&mdash; сервис, где в&nbsp;одном месте собраны все
+                официальные стандарты.
+            </p>
+
+            <h3>Цель</h3>
+            <p>
+                Мы&nbsp;создаём единую базу знаний о&nbsp;городе, которую легко изучать, развивать и
+                дополнять. Вместо долгой вёрстки неповоротливых PDF-файлов авторы стандартов пишут
+                их&nbsp;в&nbsp;удобном веб-интерфейсе, а&nbsp;читатель не&nbsp;тратит время
+                на&nbsp;поиски и&nbsp;скачивание файлов.
+            </p>
+
+            <h3>Планы</h3>
+            <p>
+                Это первая версия сервиса. В&nbsp;будущем мы&nbsp;планируем добавить поиск, выгрузку
+                стандартов в&nbsp;PDF (т.&nbsp;к. для официального утверждения требуется файл),
+                заменить ноушн на&nbsp;другой редактор контента и&nbsp;много чего ещё. Чтобы ничего
+                не&nbsp;пропустить подписывайтесь на&nbsp;
+                <a href="https://t.me/ekaterinburgdev" target="_blank">
+                    <TelegramIcon />
+                    телеграм-канал
+                </a>
+                .
+            </p>
+            <p>
+                Проект является полностью открытым. Кто угодно может в&nbsp;него законтрибьютить или
+                форкнуть. Заходите на&nbsp;
+                <a href="https://github.com/ekaterinburgdev/guides" target="_blank">
+                    <GithubIcon />
+                    гитхаб
+                </a>
+                .
+            </p>
+            <h3>Команда проекта</h3>
+            <p>
+                Мы&nbsp;&mdash; Код Екатеринбурга. Сообщество независимых энтузиастов, которые хотят
+                сделать Екатеринбург лучше.
+            </p>
+            <p>
+                Мы&nbsp;&mdash; Код Екатеринбурга. Сообщество независимых энтузиастов, которые хотят
+                сделать Екатеринбург лучше. В&nbsp;нашей команде участвуют крутые ребята
+                из&nbsp;IT-компаний Екатеринбурга и&nbsp;других городов. И&nbsp;мы&nbsp;всегда ждём
+                новых профессионалов, чтобы развивать город вместе. Если вы&nbsp;бекендер
+                на&nbsp;C#, фронтендер, дизайнер интерфейсов, менеджер продукта или
+                контент-менеджер, приходите к&nbsp;нам!
+            </p>
+
+            <Team />
+
+            <footer>
+                <center>
+                    <h3>Присоединяйся к нам</h3>
+                    <Button
+                        size="large"
+                        type="secondary"
+                        link="https://tally.so#tally-open=wL9Vd1&tally-width=650&tally-overlay=1&tally-emoji-animation=none"
+                        onClick={handleClose}
+                    >
+                        Стать частью команды или помочь проекту
+                    </Button>
+                </center>
+            </footer>
+        </Modal>
+    )
+}

components/AboutProjectModal/Modal/Modal.jsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useRef } from 'react'
+import classNames from 'classnames/bind'
+
+import Close from './close.svg'
+
+import styles from './Modal.module.css'
+
+const cn = classNames.bind(styles)
+
+export function Modal({ open, maxWidth, onClose: handleClose, children }) {
+    const ref = useRef(null)
+
+    const close = () => {
+        ref.current.close()
+    }
+
+    useEffect(() => {
+        if (!open) {
+            ref.current.close()
+            return
+        }
+
+        ref.current.showModal()
+        // Remove focus after open
+        document.activeElement.blur()
+
+        const handleClickOutside = (e) => {
+            if (ref.current === e.target) {
+                close()
+            }
+        }
+
+        document.addEventListener('click', handleClickOutside)
+
+        return () => {
+            document.removeEventListener('click', handleClickOutside)
+        }
+    }, [open])
+
+    return (
+        <dialog className={cn(styles.Modal)} style={{ maxWidth }} onClose={handleClose} ref={ref}>
+            <div className={cn(styles.ModalInner)}>
+                <button className={cn(styles.ModalClose)} onClick={close} aria-label="Закрыть">
+                    <Close />
+                </button>
+
+                <div className={cn(styles.ModalContent)}>{children}</div>
+            </div>
+        </dialog>
+    )
+}

components/AboutProjectModal/Modal/Modal.module.css

@@ -0,0 +1,145 @@
+.Modal {
+    width: 100%;
+    max-width: none;
+    min-height: 100%;
+    max-height: calc(100vh - 120px);
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--color-text);
+    animation: .2s ease-in-out fadeIn;
+}
+
+.Modal::backdrop {
+    background: rgba(12, 27, 39, .2);
+}
+
+.ModalInner {
+    background: white;
+}
+
+/* Scrollbar FF */
+@supports (scrollbar-width: thin) {
+    .ModalInner {
+        overflow-y: auto;
+        padding-right: 8px;
+        scrollbar-color: #949494 transparent;
+        scrollbar-width: thin;
+    }
+}
+
+/* Scrollbar Safari, Chrome */
+@supports not (scrollbar-width: thin) {
+    .ModalInner {
+        overflow-y: scroll;
+        padding-right: 0;
+    }
+
+    .ModalInner::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .ModalInner::-webkit-scrollbar-thumb {
+        border-radius: 16px;
+    }
+
+    .ModalInner:hover::-webkit-scrollbar-thumb {
+        background: #949494;
+    }
+
+    .ModalInner::-webkit-scrollbar-thumb:active {
+        background: #737373;
+    }
+}
+
+.ModalContent {
+    padding: 24px;
+    font-size: 18px;
+    line-height: 24px;
+}
+
+.ModalContent h2 {
+    margin: 32px 0;
+    font-weight: 500;
+    font-size: 48px;
+    line-height: 1.08;
+}
+
+.ModalContent h3 {
+    margin: 32px 0 16px;
+    font-weight: 500;
+    font-size: 32px;
+    line-height: 1.125;
+}
+
+.ModalContent a svg {
+    vertical-align: -0.2em;
+    margin-right: 0.25em;
+    margin-left: 0.2em;
+}
+
+.ModalClose {
+    position: sticky;
+    top: 0;
+    float: right;
+    padding: 22px;
+    border: 0;
+    border-radius: 50%;
+    background: none;
+    color: rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+    transition: .15s ease;
+}
+
+@media (hover) {
+    .ModalClose:hover {
+        background-color: rgba(255, 255, 255, 0.8);
+        color: rgba(0, 0, 0, 0.75);
+    }
+}
+
+.ModalClose:active {
+    background-color: rgba(255, 255, 255, 0.95);
+    color: rgba(0, 0, 0, 1);
+}
+
+.ModalClose svg {
+    width: 18px;
+    height: 18px;
+}
+
+@media screen and (min-width: 991px) {
+    .Modal {
+        width: 100%;
+        max-width: 642px;
+        min-height: auto;
+        margin: 60px auto;
+    }
+
+    .ModalInner {
+        overflow: auto;
+        max-height: inherit;
+        border-radius: 16px;
+    }
+
+    .ModalTitle {
+        padding: 40px 48px 8px;
+    }
+
+    .ModalContent {
+        padding: 28px 36px 28px 40px;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-24px) translateZ(0);
+    }
+
+    top {
+        opacity: 1;
+        transform: translateZ(0);
+    }
+}

components/AboutProjectModal/Team/Team.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import cn from 'classnames'
+import TeamPerson from './TeamPerson'
+import team from './team.json'
+import styles from './Team.module.css'
+
+export function Team() {
+    return (
+        <ul className={cn(styles.Team)}>
+            {team.map((person) => (
+                <li className={cn(styles.Team__item)} key={person.name}>
+                    <TeamPerson {...person} />
+                </li>
+            ))}
+        </ul>
+    )
+}

components/AboutProjectModal/Team/Team.module.css

@@ -0,0 +1,90 @@
+.Team {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    justify-content: space-between;
+    align-items: start;
+    margin: 48px 0 0;
+    padding: 0;
+    list-style: none;
+    column-gap: 5%;
+}
+
+.Team__item {
+    position: relative;
+    margin: 0;
+    padding-bottom: 40px;
+}
+
+.Team__item:nth-child(3n-1) {
+    transform: translate(0, 50%);
+}
+
+.Team__item:nth-child(3n-1):nth-last-child(-n+3) {
+    /* Add bottom margin to latest */
+    margin-bottom: 100px;
+}
+
+.Team__link {
+    text-decoration: none;
+}
+
+@media screen and (width >=560px) {
+    .Team {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media screen and (width >=768px) {
+    .Team {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    .Team__item {
+        padding-bottom: 30%;
+    }
+
+        .Team__item:nth-child(n) {
+            margin: 0;
+            transform: none;
+        }
+
+        .Team__item:nth-child(2n) {
+            transform: translate(0, 50%);
+        }
+}
+
+@media screen and (width >=991px) {
+    .Team__item {
+        padding-bottom: 30%;
+    }
+}
+
+@media screen and (width >=1200px) {
+    .Team {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        justify-content: space-between;
+        align-items: start;
+    }
+
+    .Team__item {
+        position: relative;
+        margin: 0;
+        padding-bottom: 60%;
+        transform: none;
+    }
+
+        .Team__item:nth-child(n) {
+            transform: none;
+        }
+
+        .Team__item:nth-child(2n) {
+            transform: translate(0, 50%);
+        }
+}
+
+@media screen and (width >=1440px) {
+    .Team__item {
+        padding-bottom: 40%;
+    }
+}