|
|
| (9 versions intermédiaires par le même utilisateur non affichées) |
| Ligne 1 : |
Ligne 1 : |
| /* ===================================================== | | /* Conteneur principal */ |
| STYLES LETTRINE - Modèle:Lettrine/styles.css
| | .lettrine-conteneur { |
| Utilise les polices déclarées dans MediaWiki:Common.css
| | display: inline; |
| ===================================================== */
| | } |
|
| |
|
| /* Style de base de la lettrine */ | | /* La lettrine elle-même */ |
| .lettrine { | | .lettrine { |
| /* Typographie - Police par défaut : Cinzel Decorative */
| |
| font-family: 'Cinzel Decorative', Georgia, serif;
| |
| font-weight: 700;
| |
|
| |
| /* Dimensions */
| |
| font-size: 4em;
| |
| line-height: 0.8;
| |
|
| |
| /* Positionnement flottant */
| |
| float: left; | | float: left; |
| margin: 0.1em 0.15em 0 0; | | font-size: 3.5em; |
| padding: 0.05em 0.1em; | | line-height: 1; |
| | | margin: 0 0.1em 0 0; |
| /* Effets visuels */ | | padding: 0; |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); | | font-family: 'Fette Unz Fraktur', 'UnifrakturMaguntia', 'Old English Text MT', serif; |
|
| | font-weight: normal; |
| /* Couleur par défaut (sera surchargée par style inline) */
| | text-shadow: 2px 2px 4px rgba(0,0,0,0.4); |
| color: #8B4513;
| |
|
| |
| } | | } |
|
| |
|
| /* Texte suivant la lettrine (petites capitales) */ | | /* Petites capitales suivant la lettrine */ |
| .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.08em; |
| font-size: 1.1em; | | font-size: 1.05em; |
| }
| |
| | |
| /* =====================================================
| |
| 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);
| |
| }
| |
| | |
| /* Lettrine enluminée (fond décoratif) */
| |
| .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 */ |
| RESPONSIVE - Adaptation mobile
| | @media (max-width: 768px) { |
| ===================================================== */
| |
| | |
| @media screen and (max-width: 768px) { | |
| .lettrine { | | .lettrine { |
| font-size: 3em; | | font-size: 3em; |
| margin: 0.05em 0.1em 0 0;
| |
| }
| |
|
| |
| .lettrine-texte {
| |
| font-size: 1em;
| |
| } | | } |
| } | | } |
|
| |
|
| @media screen and (max-width: 480px) { | | @media (max-width: 480px) { |
| .lettrine { | | .lettrine { |
| font-size: 2.5em; | | font-size: 2.5em; |
| margin: 0.05em 0.08em 0 0;
| |
| } | | } |
| } | | } |
|
| |
|
| /* ===================================================== | | /* Impression */ |
| COMPATIBILITÉ IMPRESSION
| |
| ===================================================== */
| |
| | |
| @media print { | | @media print { |
| .lettrine { | | .lettrine { |
| | color: #000; |
| text-shadow: none; | | text-shadow: none; |
| color: #000 !important;
| |
| } | | } |
| }
| |
|
| |
| /* =====================================================
| |
| CLEARFIX pour éviter les chevauchements
| |
| ===================================================== */
| |
|
| |
| .lettrine-texte::after {
| |
| content: "";
| |
| display: table;
| |
| clear: both;
| |
| } | | } |
