« Modèle:Lettrine/styles.css » : différence entre les versions
De Nefald
Autres actions
m Fette Unz Fraktur |
mAucun résumé des modifications |
||
| Ligne 1 : | Ligne 1 : | ||
/* ==================================== | /* ===================================================== | ||
LETTRINE - | STYLES LETTRINE - Modèle:Lettrine/styles.css | ||
==================================== */ | Utilise les polices déclarées dans MediaWiki:Common.css | ||
===================================================== */ | |||
/* | /* Style de base de la lettrine */ | ||
.lettrine { | .lettrine { | ||
/* Typographie - Police par défaut : Cinzel Decorative */ | |||
font-family: 'Cinzel Decorative', Georgia, serif; | |||
font-weight: 700; | |||
/* Dimensions */ | |||
font-size: 4em; | font-size: 4em; | ||
line-height: 0.8; | line-height: 0.8; | ||
/* Positionnement flottant */ | |||
float: left; | float: left; | ||
margin: 0.1em 0.15em 0 0; | margin: 0.1em 0.15em 0 0; | ||
padding: 0.05em 0.1em; | |||
/* Effets visuels */ | |||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); | |||
/* | /* Couleur par défaut (sera surchargée par style inline) */ | ||
color: #8B4513; | |||
} | } | ||
/* Texte | /* Texte suivant la lettrine (petites capitales) */ | ||
.lettrine-texte { | .lettrine-texte { | ||
font-variant: small-caps; | font-variant: small-caps; | ||
font-weight: 600; | font-weight: 600; | ||
letter-spacing: 0.05em; | letter-spacing: 0.05em; | ||
font-size: 1.1em; | |||
} | |||
/* ===================================================== | |||
VARIANTES DE STYLE | |||
===================================================== */ | |||
/* Style gothique médiéval (Fraktur) */ | |||
.lettrine-fraktur { | |||
font-family: 'Fette Unz Fraktur', 'UnifrakturMaguntia', serif; | |||
font-weight: normal; | |||
} | |||
/* Style gothique classique */ | |||
.lettrine-classic { | |||
font-family: 'Fette Unz Fraktur Classic', 'Fette Unz Fraktur', serif; | |||
font-weight: normal; | |||
} | |||
/* Style décoratif moderne */ | |||
.lettrine-decorative { | |||
font-family: 'Cinzel Decorative', serif; | |||
font-weight: 700; | |||
} | |||
/* Style extra-gras */ | |||
.lettrine-black { | |||
font-family: 'Cinzel Decorative', serif; | |||
font-weight: 900; | |||
} | |||
/* Style simple sans empattement */ | |||
.lettrine-simple { | |||
font-family: Georgia, 'Times New Roman', serif; | |||
font-weight: bold; | |||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); | |||
} | |||
/* ===================================================== | |||
EFFETS DÉCORATIFS AVANCÉS | |||
===================================================== */ | |||
/* Lettrine avec ombre portée accentuée */ | |||
.lettrine-ombre { | |||
text-shadow: | |||
3px 3px 0 rgba(0, 0, 0, 0.1), | |||
4px 4px 6px rgba(0, 0, 0, 0.3); | |||
} | } | ||
/* | /* Lettrine avec contour */ | ||
.lettrine-contour { | |||
text-shadow: | |||
-1px -1px 0 rgba(0, 0, 0, 0.3), | |||
1px -1px 0 rgba(0, 0, 0, 0.3), | |||
-1px 1px 0 rgba(0, 0, 0, 0.3), | |||
1px 1px 0 rgba(0, 0, 0, 0.3), | |||
2px 2px 4px rgba(0, 0, 0, 0.5); | |||
} | } | ||
/* Adaptation | /* Lettrine enluminée (fond décoratif) */ | ||
@media (max-width: 768px) { | .lettrine-enluminee { | ||
background: linear-gradient(135deg, | |||
rgba(218, 165, 32, 0.2) 0%, | |||
rgba(184, 134, 11, 0.1) 100%); | |||
border-radius: 4px; | |||
padding: 0.1em 0.15em; | |||
} | |||
/* ===================================================== | |||
RESPONSIVE - Adaptation mobile | |||
===================================================== */ | |||
@media screen and (max-width: 768px) { | |||
.lettrine { | .lettrine { | ||
font-size: 3em; | font-size: 3em; | ||
margin: 0.05em 0.1em 0 0; | margin: 0.05em 0.1em 0 0; | ||
} | |||
.lettrine-texte { | |||
font-size: 1em; | |||
} | |||
} | |||
@media screen and (max-width: 480px) { | |||
.lettrine { | |||
font-size: 2.5em; | |||
margin: 0.05em 0.08em 0 0; | |||
} | } | ||
} | } | ||
/* | /* ===================================================== | ||
.lettrine | COMPATIBILITÉ IMPRESSION | ||
===================================================== */ | |||
@media print { | |||
.lettrine { | |||
text-shadow: none; | |||
color: #000 !important; | |||
} | |||
} | } | ||
/* | /* ===================================================== | ||
.lettrine | CLEARFIX pour éviter les chevauchements | ||
===================================================== */ | |||
.lettrine-texte::after { | |||
content: ""; | |||
display: table; | |||
clear: both; | |||
} | } | ||