|
|
| (5 versions intermédiaires par le même utilisateur non affichées) |
| Ligne 1 : |
Ligne 1 : |
| /* =====================================================
| | /* Conteneur principal */ |
| STYLES LETTRINE - Modèle:Lettrine/styles.css
| |
| Police par défaut : Fette Unz Fraktur (définie dans MediaWiki:Common.css)
| |
| ===================================================== */
| |
| | |
| /* Conteneur de la lettrine */ | |
| .lettrine-conteneur { | | .lettrine-conteneur { |
| display: block; | | display: inline; |
| margin-bottom: 0.5em;
| |
| line-height: 1.4;
| |
| } | | } |
|
| |
|
| /* Lettrine principale - BASE */ | | /* La lettrine elle-même */ |
| .lettrine { | | .lettrine { |
| font-size: 4.5em; | | float: left; |
| line-height: 0.7; | | font-size: 3.5em; |
| float: left;
| | line-height: 1; |
| margin: 0.05em 0.15em 0 0; | | margin: 0 0.1em 0 0; |
| padding: 0.05em 0.1em; | | padding: 0; |
| font-family: 'Fette Unz Fraktur', 'UnifrakturMaguntia', 'Old English Text MT', serif; | | font-family: 'Fette Unz Fraktur', 'UnifrakturMaguntia', 'Old English Text MT', serif; |
| font-weight: normal; | | font-weight: normal; |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); | | text-shadow: 2px 2px 4px rgba(0,0,0,0.4); |
| } | | } |
|
| |
|
| /* 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.08em; | | letter-spacing: 0.08em; |
| font-size: 1.1em; | | font-size: 1.05em; |
| text-transform: lowercase;
| |
| margin-left: 0.1em;
| |
| }
| |
| | |
| /* =====================================================
| |
| VARIANTES DE STYLE
| |
| ===================================================== */
| |
| | |
| /* Style enluminé (doré brillant) */
| |
| .lettrine-enluminee .lettrine {
| |
| background: linear-gradient(135deg,
| |
| rgba(218, 165, 32, 0.2) 0%,
| |
| rgba(255, 215, 0, 0.3) 50%,
| |
| rgba(218, 165, 32, 0.2) 100%);
| |
| border-radius: 8px;
| |
| padding: 0.1em 0.2em;
| |
| box-shadow: 0 4px 8px rgba(218, 165, 32, 0.4),
| |
| inset 0 2px 4px rgba(255, 255, 255, 0.3);
| |
| } | | } |
|
| |
|
| /* Style avec bordure décorative */ | | /* Responsive */ |
| .lettrine-bordure .lettrine {
| | @media (max-width: 768px) { |
| border: 3px double currentColor;
| | .lettrine { |
| border-radius: 6px;
| | font-size: 3em; |
| padding: 0.08em 0.15em;
| | } |
| box-shadow: 0 2px 6px rgba(0,0,0,0.2);
| |
| } | | } |
|
| |
|
| /* Style avec ombre portée forte */
| | @media (max-width: 480px) { |
| .lettrine-ombre .lettrine {
| | .lettrine { |
| text-shadow:
| | font-size: 2.5em; |
| 3px 3px 0 rgba(0,0,0,0.3),
| | } |
| 5px 5px 8px rgba(0,0,0,0.5);
| |
| } | | } |
|
| |
|
| /* Style floral (ornement végétal) */ | | /* Impression */ |
| .lettrine-floral .lettrine {
| |
| position: relative;
| |
| padding: 0.15em 0.25em;
| |
| }
| |
| | |
| .lettrine-floral .lettrine::before {
| |
| content: '❦';
| |
| position: absolute;
| |
| top: -0.3em;
| |
| right: -0.2em;
| |
| font-size: 0.4em;
| |
| color: inherit;
| |
| opacity: 0.6;
| |
| }
| |
| | |
| /* =====================================================
| |
| RESPONSIVE
| |
| ===================================================== */
| |
| | |
| @media screen and (max-width: 768px) {
| |
| .lettrine {
| |
| font-size: 3.5em;
| |
| margin: 0.05em 0.12em 0 0;
| |
| }
| |
| | |
| .lettrine-texte {
| |
| font-size: 1em;
| |
| }
| |
| }
| |
| | |
| @media screen and (max-width: 480px) {
| |
| .lettrine {
| |
| font-size: 3em;
| |
| line-height: 0.75;
| |
| }
| |
| }
| |
| | |
| /* =====================================================
| |
| IMPRESSION
| |
| ===================================================== */
| |
| | |
| @media print { | | @media print { |
| .lettrine { | | .lettrine { |
| font-size: 3.5em;
| | color: #000; |
| text-shadow: none;
| | text-shadow: none; |
| color: #000 !important; | | } |
| }
| |
| | |
| .lettrine-enluminee .lettrine {
| |
| background: none;
| |
| box-shadow: none;
| |
| border: 1px solid #000;
| |
| } | |
| } | | } |
