diff --git a/src/components/section/Breadcrumb.module.scss b/src/components/section/Breadcrumb.module.scss index aff3c99..a926b0a 100644 --- a/src/components/section/Breadcrumb.module.scss +++ b/src/components/section/Breadcrumb.module.scss @@ -8,8 +8,17 @@ } img { + &:nth-child(1) { + @media (min-width: 2500px) { + width: 31px; + } + } &:nth-child(2) { margin: 0 10px; + + @media (min-width: 2500px) { + width: 15px; + } } } @@ -18,8 +27,11 @@ font-weight: 400; line-height: 14px; text-transform: uppercase; - color: #C4C4C4; + color: #c4c4c4; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } } } - - diff --git a/src/components/section/InstitucionalContent.module.scss b/src/components/section/ContentAbout.module.scss similarity index 69% rename from src/components/section/InstitucionalContent.module.scss rename to src/components/section/ContentAbout.module.scss index e60aada..99fc7b2 100644 --- a/src/components/section/InstitucionalContent.module.scss +++ b/src/components/section/ContentAbout.module.scss @@ -1,10 +1,15 @@ -.institucionalContent{ +.contentAbout { h2 { margin: 12px 0; font-size: 24px; font-weight: 700; line-height: 28px; + @media (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + } + @media (max-width: 1024px) { margin: 30px 0 12px 0; text-align: center; @@ -21,6 +26,11 @@ margin: 20px 0; } + @media (min-width: 2500px) { + font-size: 26px; + line-height: 30px; + } + @media (max-width: 1024px) { font-size: 12px; line-height: 18px; diff --git a/src/components/section/InstitucionalContent.tsx b/src/components/section/ContentAbout.tsx similarity index 88% rename from src/components/section/InstitucionalContent.tsx rename to src/components/section/ContentAbout.tsx index 24c0180..d7990fa 100644 --- a/src/components/section/InstitucionalContent.tsx +++ b/src/components/section/ContentAbout.tsx @@ -2,11 +2,11 @@ import React from "react"; // Estilos -import styleInstitucionalContent from "./InstitucionalContent.module.scss"; +import styleContent from "./ContentAbout.module.scss"; -const InstitucionalContent = () => { +const ContentAbout = () => { return ( -
+

Sobre

@@ -42,4 +42,4 @@ const InstitucionalContent = () => { ); }; -export { InstitucionalContent }; +export { ContentAbout }; diff --git a/src/components/section/NavInstitucional.module.scss b/src/components/section/NavInstitucional.module.scss index 75b7fe8..c712119 100644 --- a/src/components/section/NavInstitucional.module.scss +++ b/src/components/section/NavInstitucional.module.scss @@ -15,6 +15,11 @@ width: 302px; height: 39px; + @media (min-width: 2500px) { + width: 590px; + height: 58px; + } + @media (max-width: 1024px) { width: 100%; } @@ -25,6 +30,11 @@ line-height: 19px; color: #7d7d7d; text-decoration: none; + + @media (min-width: 2500px) { + font-size: 32px; + line-height: 38px; + } } } @@ -34,6 +44,11 @@ a { color: #fff; font-weight: 700; + + @media (min-width: 2500px) { + font-size: 32px; + line-height: 38px; + } } } } diff --git a/src/components/section/SectionAccordion.module.scss b/src/components/section/Section.module.scss similarity index 100% rename from src/components/section/SectionAccordion.module.scss rename to src/components/section/Section.module.scss diff --git a/src/components/section/TitleInstitucional.module.scss b/src/components/section/TitleInstitucional.module.scss index c37403d..4fb546e 100644 --- a/src/components/section/TitleInstitucional.module.scss +++ b/src/components/section/TitleInstitucional.module.scss @@ -1,4 +1,4 @@ -.title { +.titleInstitucional { font-size: 24px; font-weight: 400; line-height: 28px; @@ -6,6 +6,12 @@ text-align: center; margin: 80px 0; + @media (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + letter-spacing: 0.1em; + } + @media (max-width: 1024px) { margin: 80px 0 40px 0; } diff --git a/src/components/section/TitleInstitucional.tsx b/src/components/section/TitleInstitucional.tsx index b4296da..63a1197 100644 --- a/src/components/section/TitleInstitucional.tsx +++ b/src/components/section/TitleInstitucional.tsx @@ -6,7 +6,7 @@ import styleTitleInstitucional from "./TitleInstitucional.module.scss"; const TitleInstitucional = () => { return ( -

Institucional

+

Institucional

); }; diff --git a/src/pages/Section.tsx b/src/pages/Section.tsx index 0b6fcd3..9863f4a 100644 --- a/src/pages/Section.tsx +++ b/src/pages/Section.tsx @@ -5,10 +5,10 @@ import React from "react"; import { Breadcrumb } from "../components/section/Breadcrumb"; import { TitleInstitucional } from "../components/section/TitleInstitucional"; import { NavInstitucional } from "../components/section/NavInstitucional"; -import { InstitucionalContent } from "../components/section/InstitucionalContent"; +import { ContentAbout } from "../components/section/ContentAbout"; // Estilos -import styleSection from "../components/section/SectionAccordion.module.scss"; +import styleSection from "../components/section/Section.module.scss"; const Section = () => { return ( @@ -18,7 +18,7 @@ const Section = () => {
- +
); diff --git a/src/styles/partials/Form.module.scss b/src/styles/partials/Form.module.scss deleted file mode 100644 index 10535e6..0000000 --- a/src/styles/partials/Form.module.scss +++ /dev/null @@ -1,36 +0,0 @@ -.header-form { - position: relative; - - @media (max-width: 1024px) { - display: grid; - grid-column: 1 / -1; - grid-row: 2; - } - - .header-search { - height: 32px; - width: 264px; - border-radius: 5px; - padding: 7px 16px 7px 16px; - outline: 0; - border: 2px solid #f2f2f2; - - @media (max-width: 1024px) { - width: 100%; - } - - &::placeholder { - font-weight: 400; - color: #c4c4c4; - } - } - - .header-search-icon { - position: absolute; - background-color: transparent; - right: 17px; - bottom: 4px; - border: 0; - cursor: pointer; - } -} diff --git a/src/styles/partials/HeaderWrapper.module.scss b/src/styles/partials/HeaderWrapper.module.scss deleted file mode 100644 index 651ac7e..0000000 --- a/src/styles/partials/HeaderWrapper.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -.header { - display: flex; - justify-content: space-between; - height: 76px; - width: 100%; - align-items: center; - border-bottom: 1px solid #c4c4c4; - padding: 0 100px; - background-color: #000000; - - @media (max-width: 1024px) { - display: grid; - grid-template-columns: repeat(3, max-content); - grid-template-rows: repeat(2, 1fr); - gap: 21px; - height: auto; - padding: 25px 16px; - } -} - diff --git a/src/styles/partials/Menu.module.scss b/src/styles/partials/Menu.module.scss deleted file mode 100644 index 1404bd4..0000000 --- a/src/styles/partials/Menu.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.header-menu { - display: none; - - @media (max-width: 1024px) { - display: flex; - } -} \ No newline at end of file diff --git a/src/styles/partials/Nav.module.scss b/src/styles/partials/Nav.module.scss deleted file mode 100644 index 01c4621..0000000 --- a/src/styles/partials/Nav.module.scss +++ /dev/null @@ -1,27 +0,0 @@ -.header-nav { - padding: 14px 100px; - background-color: #000; - text-decoration: none; - - @media (max-width: 1024px) { - display: none; - } - - ul { - display: flex; - list-style: none; - } - - li { - margin-right: 25px; - } - - a { - font-size: 14px; - font-weight: 400; - line-height: 16px; - text-transform: uppercase; - color: #fff; - text-decoration: none; - } -} diff --git a/src/styles/partials/User.module.scss b/src/styles/partials/User.module.scss deleted file mode 100644 index 79905ad..0000000 --- a/src/styles/partials/User.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -.header-user { - display: flex; - align-items: center; - - p { - color: #fff; - margin-right: 55px; - font-size: 14px; - font-weight: 400; - line-height: 16px; - text-transform: uppercase; - cursor: pointer; - - @media (max-width: 1024px) { - display: none; - } - } - - img { - cursor: pointer; - } -} \ No newline at end of file