From 6b5eeb294241905f2ef76525303415b4e7900ad2 Mon Sep 17 00:00:00 2001 From: M1kola Date: Fri, 17 Feb 2023 15:19:49 +0300 Subject: [PATCH] fixes --- src/App.js | 6 + src/components/Calendar/calendar.scss | 15 +- .../Calendar/calendarComponent.scss | 280 ++++++++++-------- src/components/Calendar/calendarHelper.js | 16 + .../ProfileCalendar/ProfileCalendar.js | 14 +- .../ProfileCalendarComponent.js | 17 +- .../ProfileCalendar/profileCalendar.scss | 4 + src/components/ProfileHeader/ProfileHeader.js | 10 +- .../ProfileHeader/profileHeader.scss | 4 + src/components/ReportForm/ReportForm.js | 18 +- src/components/ReportForm/reportForm.scss | 60 +++- src/helper.js | 4 +- src/pages/Payouts/Payouts.js | 11 + src/pages/Profile/Profile.js | 2 +- src/pages/Settings/Settings.js | 11 + src/pages/Summary/Summary.js | 2 +- src/pages/Summary/summary.scss | 28 ++ src/pages/Tracker/Tracker.js | 11 + src/pages/ViewReport/ViewReport.js | 18 +- src/pages/ViewReport/viewReport.scss | 143 +++++++++ 20 files changed, 492 insertions(+), 182 deletions(-) create mode 100644 src/pages/Payouts/Payouts.js create mode 100644 src/pages/Settings/Settings.js create mode 100644 src/pages/Tracker/Tracker.js diff --git a/src/App.js b/src/App.js index d00ea2fe..88965023 100644 --- a/src/App.js +++ b/src/App.js @@ -19,6 +19,9 @@ import {ResultPage} from './pages/quiz/ResultPage' import {Profile} from './pages/Profile/Profile.js' import {Summary} from './pages/Summary/Summary' import {ViewReport} from './pages/ViewReport/ViewReport' +import {Tracker} from './pages/Tracker/Tracker' +import {Payouts} from './pages/Payouts/Payouts' +import {Settings} from './pages/Settings/Settings' import './fonts/stylesheet.css' import 'bootstrap/dist/css/bootstrap.min.css' @@ -58,6 +61,9 @@ const App = () => { }/> }/> }/> + }/> + }/> + }/> }/> diff --git a/src/components/Calendar/calendar.scss b/src/components/Calendar/calendar.scss index 1b52c24d..23bb98ef 100644 --- a/src/components/Calendar/calendar.scss +++ b/src/components/Calendar/calendar.scss @@ -95,6 +95,18 @@ box-shadow: 6px 5px 20px rgb(87 98 80 / 21%); transform: scale(1.02); } + + @media (max-width: 800px) { + width: auto; + height: auto; + padding: 15px; + white-space: nowrap; + } + + @media (max-width: 590px) { + padding: 8px; + font-size: 12px; + } } &__hours { @@ -104,7 +116,8 @@ letter-spacing: normal; line-height: 30px; text-align: left; - margin-left: 68px; + margin: 50px 0 0; + text-transform: capitalize; span { font-weight: 100; diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss index ddb7184c..176fa833 100644 --- a/src/components/Calendar/calendarComponent.scss +++ b/src/components/Calendar/calendarComponent.scss @@ -6,7 +6,7 @@ padding-left: 68px; padding-right: 54px; padding-top: 48px; - padding-bottom: 94px; + padding-bottom: 40px; font-family: 'LabGrotesque', sans-serif; &__header { @@ -20,6 +20,10 @@ letter-spacing: normal; line-height: 30px; text-align: left; + + @media (max-width: 500px) { + font-size: 1.7em; + } } &-box { @@ -42,6 +46,10 @@ text-align: left; margin-left: 10px; cursor: pointer; + + @media (max-width: 500px) { + font-size: 1.2em; + } } } } @@ -79,8 +87,9 @@ button { margin: 0 auto; - width: 125px; - height: 42px; + //width: 125px; + //height: 42px; + padding: 0 5px; box-shadow: 0 0 59px rgba(44, 44, 44, 0.05); border-radius: 5px; border: 1px solid #c4c4c4; @@ -94,35 +103,67 @@ text-align: center; a { + display: flex; + align-items: center; + justify-content: center; + width: 115px; + height: 42px; text-decoration: none; color: #000000; + + img { + width: 16px; + height: 16px; + margin: 0 10px 0 0; + } + + @media (max-width: 1200px) { + width: 90px; + height: 40px; + } + + @media (max-width: 968px) { + width: 62px; + height: 40px; + font-size: 10px; + + img { + margin-right: 2px; + } + } + + @media (max-width: 610px) { + img { + display: none; + } + width: auto; + height: auto; + } + } + + @media (max-width: 610px) { + width: 55px; + height: 45px; + } + + @media (max-width: 480px) { + width: 45px; + height: 35px; } } } } - -@media (max-width: 1200px) { - .calendar-component { - &__form { - button { - width: 100px; - height: 40px; - } - } - } -} - @media (max-width: 968px) { .calendar-component { margin-bottom: 40px; - padding: 28px 0 48px 0; + padding: 28px 10px 48px 10px; &__header { - h3 { - position: absolute; - top: -10%; - left: 25%; - } + //h3 { + // position: absolute; + // top: -10%; + // left: 25%; + //} &-box { margin-left: 20px; @@ -132,114 +173,103 @@ &__rectangle { margin: 24px 0; } - - &__form { - button { - width: 72px; - height: 40px; - - img { - display: none; - } - } - } } } -@media (max-width: 768px) { - .calendar-component__form > button { - width: 70px; - height: 40px; +//@media (max-width: 768px) { +// .calendar-component__form > button { +// width: 70px; +// height: 40px; +// +// img { +// display: none; +// } +// } +//} - img { - display: none; - } - } -} - -@media (max-width: 540.98px) { - .calendar-component__form > button { - width: 68px; - height: 40px; - } -} - -@media (max-width: 520.98px) { - .calendar-component__form > button { - width: 66px; - height: 40px; - } -} - -@media (max-width: 500.98px) { - .calendar-component__form > button { - width: 64px; - height: 40px; - } -} - -@media (max-width: 480.98px) { - .calendar-component__form > button { - width: 60px; - height: 40px; - } -} - -@media (max-width: 460.98px) { - .calendar-component__form > button { - width: 56px; - height: 40px; - } -} - -@media (max-width: 440.98px) { - .calendar-component__form > button { - width: 52px; - height: 40px; - } -} - -@media (max-width: 428.98px) { - .calendar-component__form > button { - width: 50px; - height: 40px; - } -} - -@media (max-width: 414.98px) { - .calendar-component__form > button { - width: 49px; - height: 40px; - } -} - -@media (max-width: 395.98px) { - .calendar-component__form > button { - width: 46px; - height: 40px; - } -} - -@media (max-width: 350.98px) { - .calendar-component__form > button { - width: 44px; - height: 40px; - } -} - -@media (max-width: 349.98px) { - .calendar-component__form > button { - width: 42px; - height: 40px; - } -} - -@media (max-width: 346.98px) { - .calendar-component__form > button { - width: 40px; - height: 40px; - } -} +//@media (max-width: 540.98px) { +// .calendar-component__form > button { +// width: 68px; +// height: 40px; +// } +//} +// +//@media (max-width: 520.98px) { +// .calendar-component__form > button { +// width: 66px; +// height: 40px; +// } +//} +// +//@media (max-width: 500.98px) { +// .calendar-component__form > button { +// width: 64px; +// height: 40px; +// } +//} +// +//@media (max-width: 480.98px) { +// .calendar-component__form > button { +// width: 60px; +// height: 40px; +// } +//} +// +//@media (max-width: 460.98px) { +// .calendar-component__form > button { +// width: 56px; +// height: 40px; +// } +//} +// +//@media (max-width: 440.98px) { +// .calendar-component__form > button { +// width: 52px; +// height: 40px; +// } +//} +// +//@media (max-width: 428.98px) { +// .calendar-component__form > button { +// width: 50px; +// height: 40px; +// } +//} +// +//@media (max-width: 414.98px) { +// .calendar-component__form > button { +// width: 49px; +// height: 40px; +// } +//} +// +//@media (max-width: 395.98px) { +// .calendar-component__form > button { +// width: 46px; +// height: 40px; +// } +//} +// +//@media (max-width: 350.98px) { +// .calendar-component__form > button { +// width: 44px; +// height: 40px; +// } +//} +// +//@media (max-width: 349.98px) { +// .calendar-component__form > button { +// width: 42px; +// height: 40px; +// } +//} +// +//@media (max-width: 346.98px) { +// .calendar-component__form > button { +// width: 40px; +// height: 40px; +// } +//} .calendar__icon { margin-right: 10px; diff --git a/src/components/Calendar/calendarHelper.js b/src/components/Calendar/calendarHelper.js index f0b6f81a..62cad531 100644 --- a/src/components/Calendar/calendarHelper.js +++ b/src/components/Calendar/calendarHelper.js @@ -30,6 +30,18 @@ export function getReports(value) { return getReports; } +export function getCreatedDate(day) { + if (day) { + return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}` + } else { + const date = new Date(); + const dd = String(date.getDate()).padStart(2, '0'); + const mm = String(date.getMonth() + 1).padStart(2, '0'); + const yyyy = date.getFullYear(); + return `${yyyy}-${mm}-${dd}` + } +} + export function currentMonth() { const currentMonth = moment().format('MMMM'); @@ -40,6 +52,10 @@ export function currentMonthAndDay(day) { return day.format('D MMMM'); } +export function getCorrectDate(day) { + return `${new Date(day).getDate()}-${new Date(day).getMonth() + 1}-${new Date(day).getFullYear()}` +}; + export function currentMonthAndDayReportPage() { return moment().format('D MMMM'); } diff --git a/src/components/ProfileCalendar/ProfileCalendar.js b/src/components/ProfileCalendar/ProfileCalendar.js index 1c7d6968..6fd2dcbe 100644 --- a/src/components/ProfileCalendar/ProfileCalendar.js +++ b/src/components/ProfileCalendar/ProfileCalendar.js @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react' import {useDispatch, useSelector} from 'react-redux' -import {currentMonth, getReports} from '../Calendar/calendarHelper' +import {getReports} from '../Calendar/calendarHelper' import { Link } from 'react-router-dom' import moment from "moment"; @@ -24,7 +24,6 @@ export const ProfileCalendar = () => { const dispatch = useDispatch(); const profileInfo = useSelector(getProfileInfo) const requestDates = useSelector(getRequestDates) - const [month, setMonth] = useState(''); const [value, setValue] = useState(moment()) const [reports, setReports] = useState([]); const [totalHours, setTotalHours] = useState(0); @@ -59,10 +58,6 @@ export const ProfileCalendar = () => { }) }, [requestDates]); - useEffect(() => { - setMonth(currentMonth) - }, [month]); - return (
@@ -71,7 +66,7 @@ export const ProfileCalendar = () => {
avatar -

{profileInfo.fio} {profileInfo.specification}

+

{profileInfo.fio}, {profileInfo.specification} разработчик

+
+ {value.format('YYYY')} +
{ @@ -124,6 +128,9 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep )}
+

+ {month} : {totalHours} часов +

) }) diff --git a/src/components/ProfileCalendar/profileCalendar.scss b/src/components/ProfileCalendar/profileCalendar.scss index d9101e99..59fe1f93 100644 --- a/src/components/ProfileCalendar/profileCalendar.scss +++ b/src/components/ProfileCalendar/profileCalendar.scss @@ -15,6 +15,10 @@ .summary__info { padding-right: 25px; + + @media (max-width: 500px) { + padding-right: 5px; + } } .loader { diff --git a/src/components/ProfileHeader/ProfileHeader.js b/src/components/ProfileHeader/ProfileHeader.js index f2aa854d..adc6055c 100644 --- a/src/components/ProfileHeader/ProfileHeader.js +++ b/src/components/ProfileHeader/ProfileHeader.js @@ -55,14 +55,16 @@ export const ProfileHeader = () => {

{profileInfo?.fio}

- avatar + + avatar +
diff --git a/src/components/ProfileHeader/profileHeader.scss b/src/components/ProfileHeader/profileHeader.scss index ad0cc339..66a08994 100644 --- a/src/components/ProfileHeader/profileHeader.scss +++ b/src/components/ProfileHeader/profileHeader.scss @@ -71,6 +71,10 @@ font-size: 12px; } } + + @media (max-width: 450px) { + column-gap: 8px; + } } &__personalInfo { diff --git a/src/components/ReportForm/ReportForm.js b/src/components/ReportForm/ReportForm.js index 11da8999..7a579863 100644 --- a/src/components/ReportForm/ReportForm.js +++ b/src/components/ReportForm/ReportForm.js @@ -2,6 +2,7 @@ import React, {useState, useEffect} from 'react' import {useSelector} from 'react-redux' import {Link, useNavigate} from 'react-router-dom' import DatePicker, { registerLocale } from "react-datepicker" +import {getCorrectDate, getCreatedDate} from '../Calendar/calendarHelper' import ru from "date-fns/locale/ru" registerLocale("ru", ru); @@ -27,18 +28,6 @@ const ReportForm = () => { const navigate= useNavigate(); const reportDate = useSelector(getReportDate); - const getCreatedDate = (day) => { - if (day) { - return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}` - } else { - const date = new Date(); - const dd = String(date.getDate()).padStart(2, '0'); - const mm = String(date.getMonth() + 1).padStart(2, '0'); - const yyyy = date.getFullYear(); - return `${yyyy}-${mm}-${dd}` - } - }; - useEffect(() => { initListeners() }, []) @@ -130,7 +119,7 @@ const ReportForm = () => { src={calendarIcon} alt='' /> - {getCreatedDate(startDate)} + {getCorrectDate(startDate)} { : input }))}/> + {index > 0 &&
deleteInput(index)} src={remove} alt=''/>
+ } ) })} @@ -196,7 +187,6 @@ const ReportForm = () => { Добавить еще -
diff --git a/src/components/ReportForm/reportForm.scss b/src/components/ReportForm/reportForm.scss index f18707cd..635d4acf 100644 --- a/src/components/ReportForm/reportForm.scss +++ b/src/components/ReportForm/reportForm.scss @@ -18,6 +18,10 @@ border-radius: 12px; margin: 25px 0 80px; padding: 50px 40px; + + @media (max-width: 555px) { + padding: 25px 20px; + } } .report__head { @@ -53,6 +57,10 @@ letter-spacing: normal; line-height: 48.74px; text-align: left; + + @media (max-width: 555px) { + font-size: 2.5em; + } } h3 { @@ -65,6 +73,11 @@ text-align: left; margin-top: 52px; margin-bottom: 35px; + + @media (max-width: 555px) { + margin-top: 25px; + margin-bottom: 15px; + } } } @@ -84,6 +97,7 @@ letter-spacing: normal; line-height: normal; text-align: left; + cursor: pointer; img { margin-left: 20px; @@ -102,7 +116,7 @@ font-style: normal; letter-spacing: normal; line-height: 48.74px; - width: 40px; + width: 12px; } &-list { @@ -144,16 +158,25 @@ line-height: normal; text-align: left; margin-bottom: 26px; + white-space: nowrap; } } &-title { - &--description { - margin-left: 20px; - } + //&--description { + // margin-left: 20px; + //} &--hours { margin-left: 330px; + + @media (max-width: 810px) { + margin-left: 125px; + } + + @media (max-width: 610px) { + margin-left: 25px; + } } } @@ -161,6 +184,10 @@ margin-left: 20px; display: flex; align-items: center; + + img { + cursor: pointer; + } } &-form { @@ -186,6 +213,14 @@ font-size: 1.8em; padding-left: 20px; padding-right: 20px; + + @media (max-width: 810px) { + width: 250px; + } + + @media (max-width: 610px) { + width: 150px; + } } } @@ -200,6 +235,18 @@ outline: none; font-size: 1.8em; text-align: center; + + @media (max-width: 500px) { + width: 100px; + } + + @media (max-width: 440px) { + width: 75px; + } + + @media (max-width: 410px) { + width: 50px; + } } } } @@ -235,6 +282,11 @@ padding-left: 20px; padding-right: 20px; outline: none; + + @media (max-width: 610px) { + max-width: 460px; + width: 100%; + } } } diff --git a/src/helper.js b/src/helper.js index ff536c12..078e987e 100644 --- a/src/helper.js +++ b/src/helper.js @@ -3,7 +3,7 @@ export function createMarkup(text) { } export function transformHtml(text) { - let startHtml = {__html: text.split('

').join('

').split('
')}; + let startHtml = {__html: text.split('

||

||

||

').join('

').split('
')}; startHtml = startHtml.__html.filter((el) => el !== null && el !== "" || el === 0 ); @@ -37,4 +37,4 @@ export const getToken = () => { export const urlHasParams = (url) => url.indexOf('?') > 0 ? `${url}&${window.location.search.substr(1)}` : `${url}${window.location.search}`; -export const urlForLocal = (url) => process.env.NODE_ENV === 'development' ? `https://itguild.info${url}` : url; \ No newline at end of file +export const urlForLocal = (url) => process.env.NODE_ENV === 'development' ? `https://itguild.info${url}` : url; diff --git a/src/pages/Payouts/Payouts.js b/src/pages/Payouts/Payouts.js new file mode 100644 index 00000000..0ab6b14f --- /dev/null +++ b/src/pages/Payouts/Payouts.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; + +export const Payouts = () => { + return ( +
+ +
+ ) +}; diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index d55c35e4..fbba3aa7 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -31,7 +31,7 @@ export const Profile = () => {
avatar -

{profileInfo.fio} {profileInfo.specification}

+

{profileInfo.fio}, {profileInfo.specification} разработчик

diff --git a/src/pages/Settings/Settings.js b/src/pages/Settings/Settings.js new file mode 100644 index 00000000..32f53ae3 --- /dev/null +++ b/src/pages/Settings/Settings.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; + +export const Settings = () => { + return ( +
+ +
+ ) +}; diff --git a/src/pages/Summary/Summary.js b/src/pages/Summary/Summary.js index 4e4e4f43..108c7c33 100644 --- a/src/pages/Summary/Summary.js +++ b/src/pages/Summary/Summary.js @@ -34,7 +34,7 @@ export const Summary = () => {
avatar -

{profileInfo.fio} {profileInfo.specification}

+

{profileInfo.fio}, {profileInfo.specification} разработчик

{!openGit && diff --git a/src/pages/Summary/summary.scss b/src/pages/Summary/summary.scss index ff044020..555010a2 100644 --- a/src/pages/Summary/summary.scss +++ b/src/pages/Summary/summary.scss @@ -62,6 +62,10 @@ padding: 0 20px; min-height: 80px; } + + @media (max-width: 500px) { + padding: 0 5px; + } } &__person { @@ -72,6 +76,10 @@ @media (max-width: 690px) { column-gap: 20px; } + + @media (max-width: 550px) { + column-gap: 10px; + } } &__avatar { @@ -92,6 +100,14 @@ font-size: 16px; line-height: 32px; position: relative; + white-space: nowrap; + + @media (max-width: 915px) { + max-width: 220px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } @media (max-width: 690px) { font-size: 14px; @@ -99,6 +115,18 @@ line-height: 15px; } + @media (max-width: 640px) { + max-width: 180px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin: 0; + } + + @media (max-width: 450px) { + max-width: 120px; + } + &:after { content: ''; position: absolute; diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js new file mode 100644 index 00000000..a25b4a3d --- /dev/null +++ b/src/pages/Tracker/Tracker.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; + +export const Tracker = () => { + return ( +
+ +
+ ) +}; diff --git a/src/pages/ViewReport/ViewReport.js b/src/pages/ViewReport/ViewReport.js index 25d026f9..169558fb 100644 --- a/src/pages/ViewReport/ViewReport.js +++ b/src/pages/ViewReport/ViewReport.js @@ -10,22 +10,12 @@ import {Footer} from "../../components/Footer/Footer"; import arrow from "../../images/right-arrow.png"; import arrowSwitchDate from "../../images/arrowViewReport.png"; +import {apiRequest} from "../../api/request"; +import {getCorrectDate, getCreatedDate} from '../../components/Calendar/calendarHelper' import './viewReport.scss' -import {apiRequest} from "../../api/request"; export const ViewReport = () => { - const getCreatedDate = (day) => { - if (day) { - return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}` - } else { - const date = new Date(); - const dd = String(date.getDate()).padStart(2, '0'); - const mm = String(date.getMonth() + 1).padStart(2, '0'); - const yyyy = date.getFullYear(); - return `${yyyy}-${mm}-${dd}` - } - }; const reportDate = useSelector(getReportDate); const [taskText, setTaskText] = useState([]); @@ -91,7 +81,7 @@ export const ViewReport = () => { arrow

Вернуться

-

{getCreatedDate(reportDay)}

+

{getCorrectDate(reportDay)}

Вами потрачено на работу : {totalHours} часов

{/*
*/} {/* */} @@ -103,7 +93,7 @@ export const ViewReport = () => {
previousDay()}> arrow
-

{getCreatedDate(reportDay)}

+

{getCorrectDate(reportDay)}

nextDay()}> arrow
diff --git a/src/pages/ViewReport/viewReport.scss b/src/pages/ViewReport/viewReport.scss index f4ec5da6..e1f0625f 100644 --- a/src/pages/ViewReport/viewReport.scss +++ b/src/pages/ViewReport/viewReport.scss @@ -27,6 +27,10 @@ span { color: #52B709; } + + @media (max-width: 500px) { + font-size: 18px; + } } &__back { @@ -60,11 +64,20 @@ height: 72px; justify-content: space-between; + @media (max-width: 500px) { + column-gap: 0; + justify-content: space-between; + } + &__date { font-weight: 500; font-size: 22px; line-height: 32px; color: #000000; + + @media (max-width: 500px) { + font-size: 16px; + } } &__hours { @@ -73,6 +86,10 @@ line-height: 32px; color: #000000; + @media (max-width: 500px) { + font-size: 11px; + } + span { color: #52B709; font-weight: 700; @@ -120,6 +137,11 @@ column-gap: 140px; align-items: center; + @media (max-width: 500px) { + column-gap: 0; + justify-content: space-between; + } + p { font-weight: 400; font-size: 18px; @@ -164,6 +186,10 @@ margin: 0 -28px; overflow: hidden; position: relative; + + @media (max-width: 1205px) { + margin: 0; + } } &__done { @@ -171,6 +197,58 @@ border-collapse: separate; border-spacing: 28px 0; + + @media (max-width: 1205px) { + display: grid; + border-collapse: collapse; + thead { + display: grid; + + tr { + display: grid; + grid-template-columns: 74% calc(26% - 28px); + column-gap: 28px; + } + } + + tbody { + display: grid; + + tr { + display: grid; + grid-template-columns: 74% calc(26% - 28px); + column-gap: 28px; + } + } + } + + @media (max-width: 900px) { + thead { + tr { + th { + padding: 15px; + } + } + } + + tbody { + tr { + td { + padding: 15px; + display: flex; + justify-content: space-between; + } + } + } + } + + @media (max-width: 650px) { + tr { + grid-template-columns: 74% calc(26% - 10px) !important; + column-gap: 10px !important; + } + } + th { padding: 32px 40px; background: white; @@ -179,6 +257,11 @@ font-size: 22px; line-height: 32px; color: #000000; + + @media (max-width: 650px) { + font-size: 16px; + line-height: 20px; + } } td { @@ -190,6 +273,16 @@ font-size: 12px; line-height: 24px; color: #000000; + + @media (max-width: 750px) { + font-size: 10px; + line-height: 18px; + } + + @media (max-width: 465px) { + text-align: center; + line-height: 14px; + } } } @@ -203,6 +296,15 @@ font-size: 17px; line-height: 32px; color: #000000; + + @media (max-width: 750px) { + font-size: 14px; + line-height: 20px; + } + + @media (max-width: 575px) { + text-align: center; + } } } @@ -228,6 +330,19 @@ align-items: center; min-width: 155px; + @media (max-width: 900px) { + column-gap: 0; + justify-content: space-between; + min-width: auto; + width: 100%; + } + + @media (max-width: 575px) { + flex-direction: column; + justify-content: center; + row-gap: 10px; + } + span { width: 48px; height: 48px; @@ -240,6 +355,12 @@ font-size: 22px; line-height: 32px; color: #000000; + + @media (max-width: 900px) { + width: 25px; + height: 25px; + font-size: 18px; + } } p { @@ -266,16 +387,30 @@ margin: 25px 0; padding: 25px 35px; + @media (max-width: 650px) { + padding: 15px 20px; + } + h3 { font-weight: 500; font-size: 22px; line-height: 32px; + + @media (max-width: 650px) { + font-size: 16px; + line-height: 20px; + } } p { font-weight: 400; font-size: 12px; line-height: 24px; + + @media (max-width: 650px) { + font-size: 10px; + line-height: 18px; + } } } @@ -295,6 +430,10 @@ line-height: 32px; color: #000000; + @media (max-width: 500px) { + font-size: 18px; + } + span { color: #8BCC60; font-weight: 500; @@ -304,5 +443,9 @@ footer { margin-top: 70px; + + @media (max-width: 575px) { + margin-top: 0; + } } }