190 lines
4.5 KiB
Markdown
190 lines
4.5 KiB
Markdown
### 1. **Variáveis CSS (Cores, Sombra, etc.)**
|
|
|
|
As variáveis são essenciais para a consistência do design e permitem que você altere rapidamente o estilo de toda a aplicação ao modificar o valor das variáveis. Algumas variáveis importantes que podem ser reutilizadas são:
|
|
|
|
```css
|
|
:root {
|
|
--azul-principal: #006494;
|
|
--azul-escuro: #003554;
|
|
--azul-claro: #0582ca;
|
|
--azul-brilhante: #00a6fb;
|
|
--amarelo: #ffb700;
|
|
--cinza-claro: #f8f9fa;
|
|
--cinza: #e9ecef;
|
|
--preto: #212529;
|
|
--branco: #ffffff;
|
|
--sombra: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
--borda-radius: 8px;
|
|
--transicao: all 0.3s ease;
|
|
}
|
|
```
|
|
|
|
Essas cores e efeitos podem ser reutilizados para manter o design consistente.
|
|
|
|
### 2. **Tipografia**
|
|
|
|
Fontes e tamanhos de texto podem ser extraídos e usados em outros projetos. Por exemplo:
|
|
|
|
```css
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
}
|
|
```
|
|
|
|
Você também tem diferentes tamanhos de fonte definidos nas regras de texto, como para o título de posts:
|
|
|
|
```css
|
|
.post-title {
|
|
font-size: 2.2rem;
|
|
color: var(--azul-escuro);
|
|
}
|
|
```
|
|
|
|
### 3. **Layout Responsivo**
|
|
|
|
Esse código já tem um design responsivo com várias quebras de mídia. Você pode utilizar os padrões de grid e as regras de `@media` para garantir que seu projeto seja adaptável a diferentes tamanhos de tela. Um exemplo é o layout de grade no `.grid-layout`:
|
|
|
|
```css
|
|
.grid-layout {
|
|
display: grid;
|
|
grid-template-columns: 250px 1fr;
|
|
gap: 30px;
|
|
}
|
|
```
|
|
|
|
E a adaptação responsiva para telas menores:
|
|
|
|
```css
|
|
@media (max-width: 900px) {
|
|
.grid-layout {
|
|
display: block;
|
|
}
|
|
}
|
|
```
|
|
|
|
### 4. **Estilos para Botões e Links**
|
|
|
|
Estilos para botões (`btn-primario`) e links (`.nav-principal a`, `.ver-tudo`) estão bem definidos e podem ser reutilizados:
|
|
|
|
```css
|
|
.btn-primario {
|
|
background: var(--branco);
|
|
color: var(--azul-principal);
|
|
padding: 12px 25px;
|
|
border-radius: var(--borda-radius);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: var(--transicao);
|
|
}
|
|
|
|
.nav-principal a:hover:after {
|
|
width: 100%;
|
|
}
|
|
```
|
|
|
|
Esses estilos garantem que o comportamento dos links e botões seja consistente, com efeitos de transição.
|
|
|
|
### 5. **Efeitos de Sombra e Transição**
|
|
|
|
As sombras e transições são definidos com variáveis e podem ser facilmente reutilizados:
|
|
|
|
```css
|
|
.sombra {
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.sombra-hover {
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
}
|
|
```
|
|
|
|
### 6. **Card Layouts (ex: Atalhos, Notícias)**
|
|
|
|
O estilo de cards, como no caso dos atalhos e das notícias, é bastante modular e pode ser reutilizado em diversos projetos. Por exemplo:
|
|
|
|
```css
|
|
.atalho-card {
|
|
background: var(--branco);
|
|
border-radius: var(--borda-radius);
|
|
padding: 25px 15px;
|
|
text-align: center;
|
|
box-shadow: var(--sombra);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.atalho-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
```
|
|
|
|
### 7. **Estilos de Ícones**
|
|
|
|
Estilos de ícones também são importantes, especialmente para se integrar com o Font Awesome:
|
|
|
|
```css
|
|
.atalho-card i {
|
|
font-size: 2rem;
|
|
color: var(--azul-principal);
|
|
margin-bottom: 15px;
|
|
}
|
|
```
|
|
|
|
### 8. **Componentes de Cabeçalho e Rodapé**
|
|
|
|
Esses componentes têm um estilo bem definido, com a possibilidade de facilmente aplicar em outros projetos:
|
|
|
|
```css
|
|
.header-moderno {
|
|
background: var(--branco);
|
|
box-shadow: var(--sombra);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.footer-moderno {
|
|
background: var(--azul-escuro);
|
|
color: var(--branco);
|
|
padding: 50px 0 20px;
|
|
}
|
|
```
|
|
|
|
### 9. **Animações**
|
|
|
|
As animações, como o efeito `fadeIn`, são reutilizáveis e podem ser aplicadas a outros elementos:
|
|
|
|
```css
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.noticia-card, .stats-card, .atalho-card {
|
|
animation: fadeIn 0.5s ease-out forwards;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### Resumo:
|
|
|
|
Você pode reutilizar e adaptar os seguintes elementos para outros projetos:
|
|
|
|
1. **Cores e Variáveis CSS** (cores principais, bordas, transições)
|
|
2. **Fontes e Tipografia** (fontes, tamanhos de texto)
|
|
3. **Layouts Responsivos** (uso de `@media` e grids)
|
|
4. **Botões e Links** (estilos interativos e transições)
|
|
5. **Sombreamento e Transições** (efeitos de sombra, hover)
|
|
6. **Card Layouts** (para atalhos, notícias, etc.)
|
|
7. **Ícones** (estilo e cores dos ícones)
|
|
8. **Componentes de Cabeçalho e Rodapé** (design de cabeçalhos fixos e rodapés)
|
|
9. **Animações** (efeitos de entrada, transições animadas)
|
|
|
|
|