« Modèle:Lettrine/styles.css » : différence entre les versions

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 1 : / Ligne 1 : @@
-/* ====================================
+/* =====================================================
-    LETTRINE - Style manuscrit médiéval
+    STYLES LETTRINE - Modèle:Lettrine/styles.css
-    ==================================== */
+    Utilise les polices déclarées dans MediaWiki:Common.css
+   ===================================================== */
-/* Lettrine avec Fette Unz Fraktur */
+/* Style de base de la 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;
      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);
-     /* Police gothique médiévale */
+     /* Couleur par défaut (sera surchargée par style inline) */
-     font-family: 'Fette Unz Fraktur', 'Cinzel Decorative', Georgia, serif;
+     color: #8B4513;
-    font-weight: normal;
-    /* Effets visuels */
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-    padding: 0.05em 0.1em;
 }
-/* Texte qui suit la lettrine (en petites capitales) */
+/* Texte suivant la lettrine (petites capitales) */
 .lettrine-texte {
      font-variant: small-caps;
      font-weight: 600;
      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:
+px 3px 0 rgba(0, 0, 0, 0.1),
+px 4px 6px rgba(0, 0, 0, 0.3);
 }
-/* Ajustement pour paragraphes */
+/* Lettrine avec contour */
-.lettrine + .lettrine-texte {
+.lettrine-contour {
-     margin-left: 0;
+     text-shadow:
+        -1px -1px 0 rgba(0, 0, 0, 0.3),
+px -1px 0 rgba(0, 0, 0, 0.3),
+        -1px 1px 0 rgba(0, 0, 0, 0.3),
+px 1px 0 rgba(0, 0, 0, 0.3),
+px 2px 4px rgba(0, 0, 0, 0.5);
 }
-/* Adaptation responsive */
+/* 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 {
          font-size: 3em;
          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;
      }
 }
-/* Style alternatif : bordure décorative optionnelle */
+/* =====================================================
-.lettrine.decoree {
+   COMPATIBILITÉ IMPRESSION
-    border: 2px solid currentColor;
+   ===================================================== */
-    border-radius: 0.1em;
-     padding: 0.1em 0.2em;
+@media print {
+    .lettrine {
+        text-shadow: none;
+        color: #000 !important;
+     }
 }
-/* Variante avec fond coloré */
+/* =====================================================
-.lettrine.fond {
+   CLEARFIX pour éviter les chevauchements
-     background: linear-gradient(135deg,
+   ===================================================== */
-        rgba(255,255,255,0.3) 0%,
-        rgba(255,255,255,0) 100%);
+.lettrine-texte::after {
-     border-radius: 0.15em;
+     content: "";
-     padding: 0.1em 0.25em;
+     display: table;
+     clear: both;
 }