« Modèle:Lettrine/styles.css » : différence entre les versions
De Nefald
Autres actions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 1 : | Ligne 1 : | ||
/* Conteneur | /* Conteneur principal */ | ||
.lettrine-conteneur { | .lettrine-conteneur { | ||
clear: both; | |||
margin-bottom: | margin-bottom: 1.5em; | ||
} | } | ||
/* | /* Paragraphe avec lettrine */ | ||
.lettrine-conteneur::after { | |||
content: ""; | |||
display: table; | |||
clear: both; | |||
} | |||
/* La lettrine elle-même */ | |||
.lettrine { | .lettrine { | ||
float: left; | float: left; | ||
font-size: | font-size: 3.5em; | ||
line-height: | line-height: 0.85; | ||
margin: 0.05em 0.1em | margin: 0.05em 0.12em -0.1em 0; | ||
padding: 0; | padding: 0; | ||
font-family: 'Fette Unz Fraktur', 'UnifrakturMaguntia', 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. | text-shadow: 2px 2px 4px rgba(0,0,0,0.4); | ||
} | } | ||
/* | /* 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.05em; | font-size: 1.05em; | ||
} | } | ||
/* Style enluminé */ | /* Style enluminé */ | ||
.lettrine-enluminee .lettrine { | .lettrine-enluminee .lettrine { | ||
color: #DAA520; | color: #DAA520; | ||
text-shadow: 0 0 | text-shadow: 0 0 15px #DAA520, 0 0 25px rgba(218,165,32,0.6); | ||
filter: drop-shadow(0 0 8px #DAA520); | |||
} | } | ||
/* Style bordure */ | /* Style bordure */ | ||
.lettrine-bordure .lettrine { | .lettrine-bordure .lettrine { | ||
border: 3px solid #8B4513; | border: 3px solid #8B4513; | ||
padding: 0. | padding: 0.1em 0.15em; | ||
color: #8B4513; | color: #8B4513; | ||
background: rgba(139,69,19,0. | background: rgba(139,69,19,0.08); | ||
border-radius: 0.15em; | |||
margin-right: 0.15em; | |||
} | } | ||
/* Style ombre */ | /* Style ombre portée */ | ||
.lettrine-ombre .lettrine { | .lettrine-ombre .lettrine { | ||
text-shadow: 3px 3px 0 rgba(0,0,0,0. | text-shadow: 3px 3px 0 rgba(0,0,0,0.35), | ||
5px 5px 0 rgba(0,0,0,0.25), | |||
7px 7px 0 rgba(0,0,0,0.15); | |||
} | } | ||
/* Style floral */ | /* Style floral */ | ||
.lettrine-floral .lettrine { | .lettrine-floral .lettrine { | ||
color: #228B22; | color: #228B22; | ||
text-shadow: 0 0 10px rgba(34,139,34,0. | text-shadow: 0 0 10px rgba(34,139,34,0.7), | ||
2px 2px 4px rgba(0,0,0,0.3); | |||
filter: drop-shadow(0 0 6px #90EE90); | |||
} | } | ||
/* Responsive */ | /* Responsive */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.lettrine { | .lettrine { | ||
font-size: | font-size: 3em; | ||
margin-right: 0.1em; | |||
} | |||
.lettrine-texte { | |||
font-size: 1em; | |||
} | |||
} | } | ||
@media (max-width: 480px) { | |||
.lettrine { | |||
font-size: 2.5em; | |||
} | |||
} | } | ||
/* Impression */ | |||
@media print { | @media print { | ||
.lettrine { | .lettrine { | ||
color: #000; | color: #000 !important; | ||
text-shadow: none; | text-shadow: none !important; | ||
} | filter: none !important; | ||
} | |||
} | } | ||