« Modèle:Accueil/shared/styles.css » : différence entre les versions
De Nefald
Autres actions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 2 : | Ligne 2 : | ||
TABLE DES MATIÈRES | TABLE DES MATIÈRES | ||
==================================== | ==================================== | ||
1. HEADER & HERO | 1. VARIABLES CSS | ||
2. HEADER & HERO | |||
3. BARRE DE RECHERCHE | |||
4. EVENT (Bannière événement) | |||
5. NAVIGATION CARDS | |||
6. LAYOUT PRINCIPAL | |||
7. FEATURED ARTICLES | |||
8. UPDATES | |||
9. STATS | |||
10. SOCIAL BUTTONS | |||
11. LINKS BOX | |||
12. UTILITIES | |||
13. ANIMATIONS | |||
14. MEDIA QUERIES | |||
==================================== */ | ==================================== */ | ||
/* ==================================== | /* ==================================== | ||
1. HEADER & HERO | 1. VARIABLES CSS | ||
==================================== */ | |||
:root { | |||
--color-primary: #87bfdb; | |||
--color-secondary: #eea529; | |||
--color-surface-0: #202122; | |||
--color-surface-1: #27292a; | |||
--color-surface-2: #2e3031; | |||
--color-base: #eaecf0; | |||
--color-subtle: #a2a9b1; | |||
--border-color-base: #3f4142; | |||
--space-xs: 0.25rem; | |||
--space-sm: 0.5rem; | |||
--space-md: 1rem; | |||
--space-lg: 1.5rem; | |||
--space-xl: 2rem; | |||
--space-2xl: 3rem; | |||
--radius-sm: 4px; | |||
--radius-md: 8px; | |||
--radius-lg: 12px; | |||
--radius-xl: 16px; | |||
} | |||
/* ==================================== | |||
2. HEADER & HERO | |||
==================================== */ | ==================================== */ | ||
| Ligne 53 : | Ligne 79 : | ||
text-align: center; | text-align: center; | ||
max-width: 800px; | max-width: 800px; | ||
animation: fadeIn 0.8s ease-out; | |||
} | } | ||
| Ligne 74 : | Ligne 101 : | ||
color: var(--color-subtle); | color: var(--color-subtle); | ||
line-height: 1.6; | line-height: 1.6; | ||
} | } | ||
/* ==================================== | /* ==================================== | ||
3. BARRE DE RECHERCHE | |||
==================================== */ | ==================================== */ | ||
| Ligne 117 : | Ligne 123 : | ||
} | } | ||
.home-search:hover { | .home-search:hover { | ||
border-color: var(--color-primary); | border-color: var(--color-primary); | ||
box-shadow: 0 4px 20px rgba(135, 191, 219, 0.15); | box-shadow: 0 4px 20px rgba(135, 191, 219, 0.15); | ||
} | } | ||
| Ligne 136 : | Ligne 134 : | ||
color: var(--color-subtle); | color: var(--color-subtle); | ||
transition: color 0.2s; | transition: color 0.2s; | ||
} | } | ||
| Ligne 164 : | Ligne 158 : | ||
color: var(--color-subtle); | color: var(--color-subtle); | ||
} | } | ||
/* ==================================== | /* ==================================== | ||
4. EVENT (Bannière événement) | |||
==================================== */ | ==================================== */ | ||
.home-event { | .home-event { | ||
display: grid; | display: grid; | ||
grid-template-columns: 1fr | grid-template-columns: 300px 1fr; | ||
gap: 1.5rem; | gap: 1.5rem; | ||
padding: 1.5rem; | padding: 1.5rem; | ||
background: | background: var(--color-surface-0); | ||
border: 2px solid var(--border-color-base); | border: 2px solid var(--border-color-base); | ||
border-radius: | border-radius: var(--radius-xl); | ||
margin-bottom: 2rem; | margin-bottom: 2rem; | ||
overflow: hidden; | |||
} | |||
.home-event__image { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
border-radius: var(--radius-lg); | |||
} | } | ||
| Ligne 185 : | Ligne 185 : | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
justify-content: center; | |||
} | } | ||
.home- | .home-event__badge { | ||
display: flex; | display: inline-flex; | ||
align-items: center; | align-items: center; | ||
gap | gap: 0.5rem; | ||
padding: 0.5rem 1rem; | |||
background: rgba(238, 165, 41, 0.15); | |||
border: 1px solid var(--color-secondary); | |||
border-radius: 50px; | |||
font-size: 0.875rem; | |||
padding: 0. | |||
background: rgba(238, 165, 41, 0. | |||
border: 1px solid | |||
border-radius: | |||
font-size: 0. | |||
font-weight: 600; | font-weight: 600; | ||
color: | color: var(--color-secondary); | ||
margin-bottom: 1rem; | |||
} | } | ||
.home-event__title { | .home-event__title { | ||
font-size: 1. | font-size: 1.75rem; | ||
font-weight: 700; | font-weight: 700; | ||
color: var(--color-base); | color: var(--color-base); | ||
margin-bottom: 0.75rem; | |||
} | } | ||
.home- | .home-event__description { | ||
font-size: 1rem; | |||
color: var(--color-subtle); | color: var(--color-subtle); | ||
line-height: 1.6; | |||
margin-bottom: 1rem; | |||
} | } | ||
.home- | .home-event__date { | ||
font-size: 0.875rem; | |||
color: var(--color-primary); | |||
font-weight: 600; | |||
} | } | ||
/* ==================================== | /* ==================================== | ||
5. NAVIGATION CARDS | |||
==================================== */ | ==================================== */ | ||
| Ligne 262 : | Ligne 237 : | ||
.home-nav-card { | .home-nav-card { | ||
position: relative; | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
| Ligne 269 : | Ligne 245 : | ||
background: var(--color-surface-0); | background: var(--color-surface-0); | ||
border: 2px solid var(--border-color-base); | border: 2px solid var(--border-color-base); | ||
border-radius: | border-radius: var(--radius-lg); | ||
text-decoration: none; | text-decoration: none; | ||
color: var(--color-base); | color: var(--color-base); | ||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | ||
min-height: | overflow: hidden; | ||
min-height: 140px; | |||
} | |||
.home-nav-card::before { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
background-size: cover; | |||
background-position: center; | |||
opacity: 0.15; | |||
transition: opacity 0.3s, transform 0.3s; | |||
} | } | ||
.home-nav-card:hover { | |||
transform: translateY(-4px); | transform: translateY(-4px); | ||
border-color: var(--color-primary); | border-color: var(--color-primary); | ||
box-shadow: 0 8px 24px rgba(135, 191, 219, 0.2); | box-shadow: 0 8px 24px rgba(135, 191, 219, 0.2); | ||
} | |||
.home-nav-card:hover::before { | |||
opacity: 0.25; | |||
transform: scale(1.05); | |||
} | } | ||
.home-nav-card__icon { | .home-nav-card__icon { | ||
font-size: | font-size: 2rem; | ||
margin-bottom: 0.75rem; | margin-bottom: 0.75rem; | ||
position: relative; | |||
z-index: 1; | |||
} | } | ||
.home-nav-card__title { | .home-nav-card__title { | ||
font-size: | font-size: 1rem; | ||
font-weight: 600; | font-weight: 600; | ||
text-align: center; | |||
position: relative; | |||
z-index: 1; | |||
} | } | ||
/* ==================================== | /* ==================================== | ||
6. LAYOUT PRINCIPAL | |||
==================================== */ | ==================================== */ | ||
.home-container { | .home-container { | ||
display: grid; | display: grid; | ||
grid-template-columns: 1fr | grid-template-columns: 1fr 400px; | ||
gap: 2rem; | gap: 2rem; | ||
margin-bottom: 2rem; | margin-bottom: 2rem; | ||
| Ligne 325 : | Ligne 317 : | ||
/* ==================================== | /* ==================================== | ||
7. FEATURED ARTICLES | |||
==================================== */ | ==================================== */ | ||
| Ligne 332 : | Ligne 324 : | ||
background: var(--color-surface-0); | background: var(--color-surface-0); | ||
border: 2px solid var(--border-color-base); | border: 2px solid var(--border-color-base); | ||
border-radius: | border-radius: var(--radius-xl); | ||
} | } | ||
| Ligne 338 : | Ligne 330 : | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: space-between; | |||
margin-bottom: 1.5rem; | margin-bottom: 1.5rem; | ||
} | } | ||
.home- | .home-featured__title { | ||
font-size: 1.5rem; | font-size: 1.5rem; | ||
font-weight: 700; | |||
color: var(--color-base); | |||
} | } | ||
.home- | .home-featured__link { | ||
font-size: | font-size: 0.875rem; | ||
color: var(--color-primary); | |||
color: var(--color- | text-decoration: none; | ||
font-weight: 600; | |||
} | |||
.home-featured__link:hover { | |||
text-decoration: underline; | |||
} | } | ||
| Ligne 359 : | Ligne 356 : | ||
} | } | ||
.home-featured- | .home-featured-item { | ||
display: grid; | display: grid; | ||
grid-template-columns: 120px 1fr; | grid-template-columns: 120px 1fr; | ||
| Ligne 365 : | Ligne 362 : | ||
padding: 1rem; | padding: 1rem; | ||
background: var(--color-surface-1); | background: var(--color-surface-1); | ||
border: | border-radius: var(--radius-lg); | ||
text-decoration: none; | text-decoration: none; | ||
transition: all 0. | color: var(--color-base); | ||
transition: all 0.3s; | |||
} | } | ||
.home-featured-item:hover { | |||
background: var(--color-surface-2); | |||
transform: translateX(4px); | transform: translateX(4px); | ||
} | } | ||
.home-featured- | .home-featured-item__image { | ||
width: 120px; | width: 120px; | ||
height: 80px; | height: 80px; | ||
object-fit: cover; | object-fit: cover; | ||
border-radius: var(--radius-md); | |||
} | } | ||
.home-featured- | .home-featured-item__content { | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
justify-content: center; | |||
} | } | ||
.home-featured- | .home-featured-item__title { | ||
font-size: | font-size: 1.125rem; | ||
font-weight: 600; | font-weight: 600; | ||
margin-bottom: 0.5rem; | |||
color: var(--color-base); | color: var(--color-base); | ||
} | } | ||
.home-featured- | .home-featured-item__excerpt { | ||
font-size: 0.875rem; | font-size: 0.875rem; | ||
color: var(--color-subtle); | color: var(--color-subtle); | ||
line-height: 1. | line-height: 1.5; | ||
overflow: hidden; | |||
} | } | ||
/* ==================================== | /* ==================================== | ||
8. UPDATES | |||
==================================== */ | ==================================== */ | ||
| Ligne 418 : | Ligne 408 : | ||
background: var(--color-surface-0); | background: var(--color-surface-0); | ||
border: 2px solid var(--border-color-base); | border: 2px solid var(--border-color-base); | ||
border-radius: | border-radius: var(--radius-xl); | ||
} | } | ||
| Ligne 424 : | Ligne 414 : | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
gap: 0. | gap: 0.5rem; | ||
margin-bottom: 1.5rem; | margin-bottom: 1.5rem; | ||
} | } | ||
| Ligne 449 : | Ligne 437 : | ||
display: flex; | display: flex; | ||
gap: 1rem; | gap: 1rem; | ||
padding: | padding: 1rem; | ||
background: var(--color-surface-1); | background: var(--color-surface-1); | ||
border: | border-radius: var(--radius-lg); | ||
border- | border-left: 3px solid var(--color-primary); | ||
} | } | ||
| Ligne 469 : | Ligne 450 : | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
background: rgba(135, 191, 219, 0. | background: rgba(135, 191, 219, 0.15); | ||
border-radius: | border-radius: 50%; | ||
font-size: 1.25rem; | font-size: 1.25rem; | ||
} | } | ||
| Ligne 476 : | Ligne 457 : | ||
.home-update-item__content { | .home-update-item__content { | ||
flex: 1; | flex: 1; | ||
} | } | ||
.home-update-item__title { | .home-update-item__title { | ||
font-size: | font-size: 1rem; | ||
font-weight: 600; | font-weight: 600; | ||
color: var(--color-base); | color: var(--color-base); | ||
margin-bottom: 0.25rem; | |||
} | |||
.home-update-item__text { | |||
font-size: 0.875rem; | |||
color: var(--color-subtle); | |||
line-height: 1.5; | |||
} | } | ||
.home-update-item__meta { | .home-update-item__meta { | ||
display: flex; | |||
align-items: center; | |||
gap: 1rem; | |||
margin-top: 0.5rem; | |||
font-size: 0.75rem; | font-size: 0.75rem; | ||
color: var(--color-subtle); | color: var(--color-subtle); | ||
| Ligne 493 : | Ligne 482 : | ||
/* ==================================== | /* ==================================== | ||
9. STATS | |||
==================================== */ | ==================================== */ | ||
| Ligne 500 : | Ligne 489 : | ||
background: var(--color-surface-0); | background: var(--color-surface-0); | ||
border: 2px solid var(--border-color-base); | border: 2px solid var(--border-color-base); | ||
border-radius: | border-radius: var(--radius-xl); | ||
} | } | ||
| Ligne 520 : | Ligne 496 : | ||
font-weight: 700; | font-weight: 700; | ||
color: var(--color-base); | color: var(--color-base); | ||
margin-bottom: 1.5rem; | |||
} | } | ||
| Ligne 528 : | Ligne 505 : | ||
} | } | ||
.home-stat { | .home-stat-item { | ||
padding: 1rem; | padding: 1rem; | ||
background: var(--color-surface-1); | background: var(--color-surface-1); | ||
border: | border-radius: var(--radius-lg); | ||
text-align: center; | text-align: center; | ||
} | } | ||
.home- | .home-stats__number { | ||
font-size: 2.5rem; | font-size: 2.5rem; | ||
font-weight: | font-weight: 700; | ||
color: var(--color-primary); | color: var(--color-primary); | ||
margin-bottom: 0.25rem; | |||
margin-bottom: 0. | |||
} | } | ||
.home- | .home-stats__label { | ||
font-size: 0.875rem; | font-size: 0.875rem; | ||
color: var(--color-subtle); | color: var(--color-subtle); | ||
| Ligne 554 : | Ligne 527 : | ||
/* ==================================== | /* ==================================== | ||
10. SOCIAL BUTTONS | |||
==================================== */ | ==================================== */ | ||
| Ligne 561 : | Ligne 534 : | ||
background: var(--color-surface-0); | background: var(--color-surface-0); | ||
border: 2px solid var(--border-color-base); | border: 2px solid var(--border-color-base); | ||
border-radius: | border-radius: var(--radius-xl); | ||
} | } | ||
| Ligne 581 : | Ligne 541 : | ||
font-weight: 700; | font-weight: 700; | ||
color: var(--color-base); | color: var(--color-base); | ||
margin-bottom: 1rem; | |||
} | } | ||
.home-social__grid { | .home-social__grid { | ||
display: grid; | display: grid; | ||
gap: 0.75rem; | gap: 0.75rem; | ||
} | } | ||
| Ligne 592 : | Ligne 552 : | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
gap: 0.75rem; | |||
gap: 0. | padding: 0.875rem 1rem; | ||
padding: 0. | |||
background: var(--color-surface-1); | background: var(--color-surface-1); | ||
border: 2px solid var(--border-color-base); | border: 2px solid var(--border-color-base); | ||
border-radius: | border-radius: var(--radius-lg); | ||
text-decoration: none; | text-decoration: none; | ||
color: var(--color-base); | |||
font-weight: 600; | font-weight: 600; | ||
transition: all 0.3s; | |||
transition: all 0. | |||
} | } | ||
.home-social-btn | .home-social-btn:hover { | ||
transform: translateX(4px); | |||
border-color: | border-color: currentColor; | ||
} | } | ||
.home-social-btn__icon { | |||
font-size: 1.5rem; | |||
} | } | ||
.home-social-btn-- | .home-social-btn--discord { | ||
color: # | color: #5865f2; | ||
} | } | ||
.home-social-btn-- | .home-social-btn--patreon { | ||
color: # | color: #ff424d; | ||
} | } | ||
.home-social-btn--kofi { | |||
color: #ff5e5b; | |||
} | } | ||
.home-social-btn-- | .home-social-btn--reddit { | ||
color: # | color: #ff4500; | ||
} | } | ||
/* ==================================== | /* ==================================== | ||
11. LINKS BOX | |||
==================================== */ | ==================================== */ | ||
| Ligne 660 : | Ligne 596 : | ||
background: var(--color-surface-0); | background: var(--color-surface-0); | ||
border: 2px solid var(--border-color-base); | border: 2px solid var(--border-color-base); | ||
border-radius: | border-radius: var(--radius-xl); | ||
} | } | ||
| Ligne 680 : | Ligne 603 : | ||
font-weight: 700; | font-weight: 700; | ||
color: var(--color-base); | color: var(--color-base); | ||
margin-bottom: 1rem; | |||
} | } | ||
| Ligne 688 : | Ligne 612 : | ||
} | } | ||
.home- | .home-links__item { | ||
display: flex; | |||
align-items: center; | |||
gap: 0.5rem; | |||
padding: 0.75rem; | padding: 0.75rem; | ||
background: var(--color-surface-1); | background: var(--color-surface-1); | ||
border: | border-radius: var(--radius-md); | ||
text-decoration: none; | text-decoration: none; | ||
color: var(--color-base); | color: var(--color-base); | ||
transition: all 0.2s; | transition: all 0.2s; | ||
} | } | ||
.home-links__item:hover { | |||
background: var(--color-surface-2); | background: var(--color-surface-2); | ||
border-color: var(--color-primary); | border-color: var(--color-primary); | ||
| Ligne 706 : | Ligne 630 : | ||
/* ==================================== | /* ==================================== | ||
12. UTILITIES | |||
==================================== */ | ==================================== */ | ||
.home-grid { | .home-grid { | ||
display: grid; | display: grid; | ||
grid: | grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | ||
gap: 0.5rem; | |||
} | } | ||
| Ligne 725 : | Ligne 648 : | ||
/* ==================================== | /* ==================================== | ||
13. ANIMATIONS | |||
==================================== */ | ==================================== */ | ||
| Ligne 739 : | Ligne 662 : | ||
} | } | ||
.home- | /* ==================================== | ||
14. MEDIA QUERIES | |||
==================================== */ | |||
@media (min-width: 768px) { | |||
.home-header__title { | |||
font-size: 3rem; | |||
} | |||
.home-header__subtitle { | |||
font-size: 1.125rem; | |||
} | |||
} | } | ||
@media (min-width: 1200px) { | |||
.home-header__title { | |||
font-size: 3.5rem; | |||
} | |||
.home-header__subtitle { | |||
font-size: 1.25rem; | |||
} | |||
} | |||
@media (max-width: 1024px) { | @media (max-width: 1024px) { | ||
| Ligne 754 : | Ligne 693 : | ||
.home-sidebar { | .home-sidebar { | ||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||
} | } | ||