diff --git a/src/app/layouts/cabecalho/cabecalho.style.css b/src/app/layouts/cabecalho/cabecalho.style.css index 64ff3c8..cebc4bd 100644 --- a/src/app/layouts/cabecalho/cabecalho.style.css +++ b/src/app/layouts/cabecalho/cabecalho.style.css @@ -1,6 +1,6 @@ .cabecalho-conteiner { display: flex; - height: 5vh; + height: var(--altura-barra-principal); justify-content: center; width: 100%; align-items: center; diff --git a/src/app/layouts/pagina/pagina.component.tsx b/src/app/layouts/pagina/pagina.component.tsx index 25fe1bb..1ca0726 100644 --- a/src/app/layouts/pagina/pagina.component.tsx +++ b/src/app/layouts/pagina/pagina.component.tsx @@ -2,7 +2,7 @@ import React, { ReactNode } from 'react'; import { useTema } from '../../providers/theme/tema.hook'; import { CabecalhoComponent } from '../cabecalho/cabecalho.component'; import { RodapeComponent } from '../rodape/rodape.component'; -import { BotaoVoltarComponent, InterruptorComponent, JanelaComponent, TituloComponent } from '../../../shared/ui'; +import { AvisoOrientacaoComponent, BotaoVoltarComponent, InterruptorComponent, JanelaComponent, TituloComponent } from '../../../shared/ui'; import './pagina.style.css'; @@ -19,8 +19,9 @@ const PaginaLayout: React.FC = ({ children, titulo, subtitul return (
+ - +
{ mostrarBotaoVoltar && } diff --git a/src/app/layouts/pagina/pagina.style.css b/src/app/layouts/pagina/pagina.style.css index 995e918..ceb51dc 100644 --- a/src/app/layouts/pagina/pagina.style.css +++ b/src/app/layouts/pagina/pagina.style.css @@ -33,3 +33,17 @@ @media (prefers-reduced-motion: reduce) { .pagina-conteiner { animation: none; } } + +@media (max-width: 700px) { + .pagina-acoes { + min-height: 2rem; + } + + .pagina-conteiner { + gap: 1rem; + padding: 1.1rem 0 0; + } + + .pagina-acoes .botao-voltar span { display: none; } + .pagina-acoes .botao-voltar svg { width: 2rem; height: 2rem; } +} diff --git a/src/app/layouts/rodape/rodape.style.css b/src/app/layouts/rodape/rodape.style.css index 5b8dd3e..8acfa5e 100644 --- a/src/app/layouts/rodape/rodape.style.css +++ b/src/app/layouts/rodape/rodape.style.css @@ -1,7 +1,7 @@ /* Rodape */ .rodape-container { display: flex; - height: 5vh; + height: var(--altura-barra-principal); justify-content: center; width: 100%; align-items: center; diff --git a/src/app/styles/global.css b/src/app/styles/global.css index ec35d50..8e057f9 100644 --- a/src/app/styles/global.css +++ b/src/app/styles/global.css @@ -17,6 +17,7 @@ --espacamento: 8px; --raio-borda: 20px; --transicao: 180ms ease; + --altura-barra-principal: 5vh; } .tema-escuro { @@ -73,3 +74,16 @@ img { #root { min-height: 100vh; } + +@media (max-width: 700px) { + :root { --altura-barra-principal: 5svh; } +} + +.visualmente-oculto { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; +} diff --git a/src/pages/contato/contato.style.css b/src/pages/contato/contato.style.css index 6acf2d6..7609fe1 100644 --- a/src/pages/contato/contato.style.css +++ b/src/pages/contato/contato.style.css @@ -29,6 +29,14 @@ .contato-redes a span { font-size: .28em; vertical-align: middle; } @media (max-width: 700px) { - .contato-conteudo { grid-template-columns: 1fr; } - .contato-redes { justify-items: start; } + .pagina-contato { gap: 1.25rem; } + .contato-conteudo { grid-template-columns: 1fr; gap: 2rem; text-align: center; } + .contato-apresentacao { font-size: .86rem; } + .contato-apresentacao > p { font-size: .86rem; line-height: 1.4; } + .contato-lista { gap: 1.25rem; margin-top: 1.8rem; } + .contato-lista a { justify-content: center; gap: .75rem; } + .contato-lista strong { font-size: 1.65rem; font-weight: 500; } + .contato-lista small { font-size: .9rem; } + .contato-redes { justify-items: center; align-self: center; gap: 1rem; padding-bottom: 0; } + .contato-redes a { font-size: clamp(2.4rem, 12vw, 3.25rem); } } diff --git a/src/pages/habilidades/habilidades.style.css b/src/pages/habilidades/habilidades.style.css index ec90955..1c01f88 100644 --- a/src/pages/habilidades/habilidades.style.css +++ b/src/pages/habilidades/habilidades.style.css @@ -23,6 +23,7 @@ place-items: center; border: 3px solid var(--cor-borda); border-radius: 1.8rem; + background-color: var(--cor-superficie); transition: transform var(--transicao), border-color var(--transicao), background-color var(--transicao); } @@ -58,5 +59,26 @@ } @media (max-width: 560px) { - .habilidades-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .janela-conteiner.pagina-habilidades { + height: auto; + min-height: calc(100svh - var(--altura-barra-principal) - var(--altura-barra-principal)); + } + + .janela-conteiner.pagina-habilidades .janela-conteudo { + min-height: calc(100svh - var(--altura-barra-principal) - var(--altura-barra-principal)); + } + + .pagina-habilidades { gap: 1rem; } + + .habilidades-lista { + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-content: start; + gap: 1.45rem 2rem; + padding-bottom: 1rem; + } + + .habilidade { gap: .35rem; } + .habilidade-cartao { width: min(30vw, 7.5rem); border-width: 3px; border-radius: 1.45rem; } + .habilidade-marca { width: 3.5rem; height: 3.5rem; } + .habilidade h3 { font-size: .82rem; } } diff --git a/src/pages/inicio/inicio.page.tsx b/src/pages/inicio/inicio.page.tsx index 03d21be..04a1336 100644 --- a/src/pages/inicio/inicio.page.tsx +++ b/src/pages/inicio/inicio.page.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Link } from 'react-router-dom'; import { PaginaLayout } from '../../app/layouts'; import { Menu } from '../../shared/ui'; @@ -6,11 +6,28 @@ import './inicio.style.css' const InicioPage: React.FC = () => { + const [menuAberto, definirMenuAberto] = useState(false); + return (
- +
diff --git a/src/pages/inicio/inicio.style.css b/src/pages/inicio/inicio.style.css index 81b7aff..f583b5b 100644 --- a/src/pages/inicio/inicio.style.css +++ b/src/pages/inicio/inicio.style.css @@ -9,6 +9,8 @@ width: 45%; } +.inicio-botao-menu { display: none; } + .inicio-secao-direita { width: 55%; display: flex; @@ -51,17 +53,117 @@ to { transform: rotate(360deg); } } +body.tema-escuro .inicio--imagem-cubo-impossivel path:nth-child(-n + 2) { fill: #f5f5f5; } +body.tema-escuro .inicio--imagem-cubo-impossivel path:nth-child(3), +body.tema-escuro .inicio--imagem-cubo-impossivel path:nth-child(4) { fill: #939393; } +body.tema-escuro .inicio--imagem-cubo-impossivel path:nth-child(n + 5) { fill: #5a5a5a; } + @media (max-width: 700px) { + .pagina-inicio { + position: relative; + justify-content: space-between; + padding-top: 0; + } + + .pagina-inicio > header { + order: 2; + margin: auto 0 3.3rem; + text-align: center; + } + + .pagina-inicio .titulo-principal { font-size: clamp(2rem, 10vw, 2.45rem); } + .inicio-conteudo { - flex-direction: column-reverse; - align-items: flex-start; + position: relative; + order: 1; + flex: 0 1 auto; + min-height: 0; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; } .inicio-secao-direita { align-self: center; + padding-top: 1.25rem; + } + + .inicio-secao-esquerda { + position: absolute; + z-index: 2; + top: -1.85rem; + left: 0; + width: auto; + } + + .inicio-secao-direita { width: 100%; } + + .inicio-botao-menu { + position: relative; + display: grid; + place-items: center; + width: 4.15rem; + height: 2rem; + padding: 0; + } + + .inicio-icone-hamburger, + .inicio-icone-fechar { + position: absolute; + display: grid; + place-items: center; + transition: opacity 180ms ease; + } + + .inicio-icone-hamburger { + gap: .32rem; + } + + .inicio-icone-hamburger i { + display: block; + width: 2.7rem; + height: 3px; + border-radius: 999px; + background: var(--cor-primaria); + } + + .inicio-icone-fechar { + color: var(--cor-primaria); + font-size: 2.65rem; + font-weight: 400; + line-height: .7; + opacity: 0; + } + + .inicio-botao-menu.aberto .inicio-icone-hamburger { opacity: 0; } + .inicio-botao-menu.aberto .inicio-icone-fechar { opacity: 1; } + + .inicio-botao-menu:focus-visible { + outline: 2px solid var(--cor-destaque); + outline-offset: .3rem; + } + + .inicio-menu { + position: absolute; + top: 3rem; + left: -.35rem; + display: none; + width: min(16rem, calc(100vw - 4.5rem)); + padding: 1.15rem; + border: 3px solid var(--cor-borda); + border-radius: 1rem; + background: var(--cor-superficie); + box-shadow: .5rem .5rem 0 color-mix(in srgb, var(--cor-primaria) 18%, transparent); } - .inicio-secao-esquerda, .inicio-secao-direita { width: 100%; } + .inicio-menu.aberto { display: block; } + .inicio-menu .menu-conteiner ul { gap: .85rem; } + .inicio-menu .menu-item-link { gap: .8rem; } + .inicio-menu .menu-item-icone { width: .6rem; height: .6rem; } + .inicio-menu .menu-item-texto { font-size: 1.3rem; } - .inicio--imagem-cubo-impossivel { width: 220px; height: auto; } + .inicio--imagem-cubo-impossivel { width: min(63vw, 15.5rem); height: auto; } + .inicio-link-cubo { transform: translateY(4rem); } + .inicio-dica-cubo { display: none; } } diff --git a/src/pages/jogo-da-vida/jogo-da-vida.tsx b/src/pages/jogo-da-vida/jogo-da-vida.tsx index 6d13625..f62276c 100644 --- a/src/pages/jogo-da-vida/jogo-da-vida.tsx +++ b/src/pages/jogo-da-vida/jogo-da-vida.tsx @@ -1,6 +1,7 @@ import React, { FC, PointerEvent, useCallback, useEffect, useRef, useState } from 'react'; import { Link } from 'react-router-dom'; import { RodapeComponent } from '../../app/layouts/rodape/rodape.component'; +import { AvisoOrientacaoComponent } from '../../shared/ui'; import { alternarCelula, contarCelulasVivas, @@ -115,6 +116,7 @@ const JogoDaVida: FC = () => { return (
+

Jogo da Vida · Conway

diff --git a/src/pages/portifolio/portifolio.style.css b/src/pages/portifolio/portifolio.style.css index d558cfc..84a60a3 100644 --- a/src/pages/portifolio/portifolio.style.css +++ b/src/pages/portifolio/portifolio.style.css @@ -1 +1,5 @@ .pagina-portifolio { min-height: 0; } + +@media (max-width: 700px) { + .pagina-portifolio { gap: 1.25rem; } +} diff --git a/src/pages/sobre/sobre.style.css b/src/pages/sobre/sobre.style.css index 16d4986..df873bf 100644 --- a/src/pages/sobre/sobre.style.css +++ b/src/pages/sobre/sobre.style.css @@ -51,7 +51,10 @@ } @media (max-width: 700px) { - .sobre-conteudo { - grid-template-columns: 1fr; - } + .pagina-sobre { gap: .85rem; } + .sobre-conteudo { grid-template-columns: 1fr; gap: 1.35rem; } + .sobre-foto { order: -1; } + .sobre-foto img { width: min(100%, 14.75rem); border-radius: 0; } + .sobre-apresentacao { gap: .65rem; font-size: clamp(.75rem, 3.25vw, .87rem); line-height: 1.28; text-align: center; } + .sobre-curriculo { align-self: center; min-width: min(100%, 16.5rem); margin-top: .55rem; padding: .8rem 1rem; border: 2px solid var(--cor-borda); border-radius: 1rem; color: var(--cor-primaria); background: transparent; } } diff --git a/src/shared/ui/aviso-orientacao/aviso-orientacao.component.tsx b/src/shared/ui/aviso-orientacao/aviso-orientacao.component.tsx new file mode 100644 index 0000000..57892f2 --- /dev/null +++ b/src/shared/ui/aviso-orientacao/aviso-orientacao.component.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import './aviso-orientacao.style.css'; + + +interface IAvisoOrientacao { + direcao: 'vertical' | 'horizontal'; +} + + +const AvisoOrientacaoComponent: React.FC = ({ direcao }) => { + const orientacaoVertical = direcao === 'vertical'; + + return ( + + ); +}; + + +export { AvisoOrientacaoComponent }; diff --git a/src/shared/ui/aviso-orientacao/aviso-orientacao.style.css b/src/shared/ui/aviso-orientacao/aviso-orientacao.style.css new file mode 100644 index 0000000..64e73da --- /dev/null +++ b/src/shared/ui/aviso-orientacao/aviso-orientacao.style.css @@ -0,0 +1,95 @@ +.aviso-orientacao { + position: fixed; + z-index: 100; + inset: 0; + display: none; + place-content: center; + justify-items: center; + gap: 1.25rem; + padding: 2rem; + color: var(--cor-primaria); + text-align: center; + background: var(--cor-background); +} + +.aviso-orientacao-ilustracao { + position: relative; + display: grid; + width: 7rem; + height: 7rem; + place-items: center; +} + +.aviso-orientacao-celular { + position: relative; + display: block; + width: 3.35rem; + height: 5.25rem; + padding: .3rem; + border: 3px solid var(--cor-borda); + border-radius: .7rem; + background: var(--cor-superficie); + transform: translateY(1.4rem); +} + +.aviso-orientacao-tela { + display: block; + width: 100%; + height: calc(100% - .72rem); + border: 2px solid color-mix(in srgb, var(--cor-primaria) 30%, transparent); + border-radius: .28rem; +} + +.aviso-orientacao-botao-principal { + position: absolute; + bottom: .17rem; + left: 50%; + width: .32rem; + height: .32rem; + border-radius: 50%; + background: var(--cor-primaria); + transform: translateX(-50%); +} + +.aviso-orientacao-seta { + position: absolute; + top: .1rem; + left: 50%; + width: 1.9rem; + height: 1.9rem; + fill: none; + stroke: var(--cor-secundaria); + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 3.5; + transform: translateX(-50%); +} + +.aviso-orientacao--horizontal .aviso-orientacao-celular { + width: 5.25rem; + height: 3.35rem; +} + +.aviso-orientacao--horizontal .aviso-orientacao-tela { + width: calc(100% - .72rem); + height: 100%; +} + +.aviso-orientacao--horizontal .aviso-orientacao-botao-principal { + top: 50%; + right: .17rem; + bottom: auto; + left: auto; + transform: translateY(-50%); +} + +.aviso-orientacao h1 { font-size: clamp(1.65rem, 6vw, 2.3rem); letter-spacing: -.06em; } +.aviso-orientacao p { max-width: 19rem; color: var(--cor-secundaria); font-size: .9rem; line-height: 1.45; } + +@media (max-width: 900px) and (max-height: 600px) and (orientation: landscape) { + .aviso-orientacao--vertical { display: grid; } +} + +@media (max-width: 700px) and (orientation: portrait) { + .aviso-orientacao--horizontal { display: grid; } +} diff --git a/src/shared/ui/carrossel/carrossel.style.css b/src/shared/ui/carrossel/carrossel.style.css index 7da64c7..9d7216b 100644 --- a/src/shared/ui/carrossel/carrossel.style.css +++ b/src/shared/ui/carrossel/carrossel.style.css @@ -32,6 +32,7 @@ padding: clamp(2rem, 3.5vw, 3.4rem); border: 4px solid var(--cor-borda); border-radius: 1.35rem; + background-color: var(--cor-superficie); } .carrossel-cabecalho, .carrossel-controles { @@ -122,3 +123,22 @@ @media (max-width: 900px) { .carrossel-navegacao { display: none; } } + +@media (max-width: 700px) { + .carrossel { justify-content: flex-start; gap: 1.25rem; margin-top: .25rem; } + .carrossel-painel { overflow: hidden; } + .carrossel-item { + min-height: 0; + height: clamp(27rem, 55svh, 31rem); + gap: 1.5rem; + padding: 1.4rem; + border-width: 3px; + border-radius: 1.8rem; + } + .carrossel-cabecalho h3 { font-size: clamp(2rem, 11vw, 2.55rem); line-height: 1.05; } + .carrossel-tags { margin: .8rem 0; } + .carrossel-item p { font-size: .9rem; line-height: 1.35; } + .carrossel-visitar { align-self: stretch; padding: .75rem 1rem; border: 2px solid var(--cor-borda); border-radius: 1rem; text-align: center; color: var(--cor-primaria); background: transparent; } + .carrossel-paginacao { gap: 1rem; } + .carrossel-paginacao button { width: .75rem; height: .75rem; } +} diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts index 386cad7..29f78dd 100644 --- a/src/shared/ui/index.ts +++ b/src/shared/ui/index.ts @@ -1,4 +1,5 @@ export { BotaoVoltarComponent } from './botao-voltar/botao-voltar.component'; +export { AvisoOrientacaoComponent } from './aviso-orientacao/aviso-orientacao.component'; export { CarrosselComponent as Carrossel } from './carrossel/carrossel.component'; export { InterruptorComponent } from './interruptor/interruptor.component'; export { JanelaComponent } from './janela/janela.component'; diff --git a/src/shared/ui/interruptor/interruptor.style.css b/src/shared/ui/interruptor/interruptor.style.css index 9497efb..a52cb74 100644 --- a/src/shared/ui/interruptor/interruptor.style.css +++ b/src/shared/ui/interruptor/interruptor.style.css @@ -42,3 +42,9 @@ outline: 2px solid var(--cor-destaque); outline-offset: 4px; } + +@media (max-width: 700px) { + .interruptor { width: 4.15rem; height: 2rem; } + .interruptor-chave:before { bottom: .25rem; left: .25rem; width: 1.5rem; height: 1.5rem; } + .interruptor-checkbox:checked + .interruptor-chave:before { transform: translateX(2.15rem); } +} diff --git a/src/shared/ui/janela/janela.component.tsx b/src/shared/ui/janela/janela.component.tsx index 78f7bfb..9c5b515 100644 --- a/src/shared/ui/janela/janela.component.tsx +++ b/src/shared/ui/janela/janela.component.tsx @@ -4,12 +4,13 @@ import React, { ReactNode } from 'react'; interface IJanelaComponent { children: ReactNode; + className?: string; } -const JanelaComponent: React.FC = ({ children }) => { +const JanelaComponent: React.FC = ({ children, className = '' }) => { return ( -
+
{ children }
diff --git a/src/shared/ui/janela/janela.style.css b/src/shared/ui/janela/janela.style.css index 6b28bd5..26c8080 100644 --- a/src/shared/ui/janela/janela.style.css +++ b/src/shared/ui/janela/janela.style.css @@ -1,6 +1,6 @@ .janela-conteiner { display: flex; - height: 90vh; + height: calc(100vh - var(--altura-barra-principal) - var(--altura-barra-principal)); padding: 0 5vh; width: 100%; } @@ -13,9 +13,19 @@ padding: 50px; border: 4px solid var(--cor-borda); border-radius: clamp(2rem, 3.2vw, 3.4rem); - background-color: var(--cor-superficie); + background-color: var(--cor-background); } @media (max-width: 700px) { - .janela-conteudo { padding: 1.5rem; border-width: 3px; } + .janela-conteiner { + height: calc(100svh - var(--altura-barra-principal) - var(--altura-barra-principal)); + padding: 1.6svh 1rem; + } + + .janela-conteudo { + min-height: 0; + padding: 1.25rem 1.4rem; + border-width: 3px; + border-radius: 1.25rem; + } } diff --git a/src/shared/ui/titulo/titulo.style.css b/src/shared/ui/titulo/titulo.style.css index d282a8f..bce3946 100644 --- a/src/shared/ui/titulo/titulo.style.css +++ b/src/shared/ui/titulo/titulo.style.css @@ -26,6 +26,14 @@ } @media (max-width: 700px) { - .titulo-principal { font-size: clamp(3rem, 15vw, 4.5rem); } - .titulo-secundario { font-size: clamp(1.35rem, 6vw, 2rem); } + .titulo-principal { + font-size: clamp(2rem, 9.5vw, 2.5rem); + letter-spacing: -.07em; + } + + .titulo-secundario { + margin-top: .3rem; + font-size: clamp(.95rem, 4.4vw, 1.15rem); + letter-spacing: -.045em; + } }