« 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; | |||
} | } | ||
Version du 12 novembre 2025 à 13:30
/* =====================================================
STYLES LETTRINE - Modèle:Lettrine/styles.css
Utilise les polices déclarées dans MediaWiki:Common.css
===================================================== */
/* 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);
/* Couleur par défaut (sera surchargée par style inline) */
color: #8B4513;
}
/* 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:
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 - 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;
}
}
/* =====================================================
COMPATIBILITÉ IMPRESSION
===================================================== */
@media print {
.lettrine {
text-shadow: none;
color: #000 !important;
}
}
/* =====================================================
CLEARFIX pour éviter les chevauchements
===================================================== */
.lettrine-texte::after {
content: "";
display: table;
clear: both;
}