Site personnel courcellematthi.eu
This commit is contained in:
lrdlg
@@ -0,0 +1,225 @@
|
||||
/* ==========================================================================
|
||||
print.css — Feuille de style d'impression
|
||||
--------------------------------------------------------------------------
|
||||
Chargée via media="print" : elle n'est pas téléchargée en priorité pour
|
||||
l'affichage écran et ne pénalise donc pas le rendu initial.
|
||||
|
||||
Enjeu réel : un CV est imprimé et exporté en PDF. Une page web imprimée
|
||||
sans feuille dédiée sort avec la navigation, des fonds gris qui vident
|
||||
les cartouches, des liens dont on ne voit pas la cible, et des blocs
|
||||
coupés au milieu.
|
||||
|
||||
Ce fichier n'utilise pas @layer : chargé en media="print", il doit
|
||||
surcharger toutes les couches sans discussion.
|
||||
========================================================================== */
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
FORMAT DE PAGE
|
||||
-------------------------------------------------------------------------- */
|
||||
@page {
|
||||
size: A4 portrait;
|
||||
margin: 15mm 14mm;
|
||||
}
|
||||
|
||||
/* Première page : marge haute réduite, le nom fait office d'en-tête */
|
||||
@page :first {
|
||||
margin-block-start: 12mm;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
MASQUAGE DES ÉLÉMENTS D'INTERFACE
|
||||
Rien de ce qui sert à naviguer n'a de sens sur papier.
|
||||
-------------------------------------------------------------------------- */
|
||||
.site-header,
|
||||
.skip-link,
|
||||
.nav-toggle,
|
||||
.site-nav,
|
||||
.to-top,
|
||||
.actions,
|
||||
.screen-only {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Éléments réservés à l'impression */
|
||||
.print-only { display: block !important; }
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
REMISE À PLAT DES COULEURS
|
||||
Noir sur blanc : lisible sur toute imprimante, y compris monochrome.
|
||||
-------------------------------------------------------------------------- */
|
||||
body {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
font-size: 10.5pt;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-inline-size: none;
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
GESTION DES SAUTS DE PAGE
|
||||
Arbitrage important : on autorise une entrée de parcours (.entry) à se
|
||||
couper entre deux pages, mais jamais une fiche individuelle (.course,
|
||||
.project, .card).
|
||||
|
||||
Pourquoi ? Une entrée « Enseignement » contient quatre fiches de cours et
|
||||
dépasse la demi-page. Si on interdit sa coupure, elle bascule en entier
|
||||
sur la page suivante et laisse un vide de plusieurs centimètres. Coupée
|
||||
entre deux fiches, elle reste parfaitement lisible et le document gagne
|
||||
une à deux pages.
|
||||
-------------------------------------------------------------------------- */
|
||||
.course,
|
||||
.project,
|
||||
.card,
|
||||
.education,
|
||||
.contact-block {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
/* Les titres ne restent jamais seuls en bas de page, séparés de leur contenu */
|
||||
.section-title,
|
||||
.entry__role,
|
||||
.entry__org,
|
||||
.project__title,
|
||||
.card__title,
|
||||
.education__degree {
|
||||
break-after: avoid;
|
||||
}
|
||||
|
||||
/* Une entrée ne démarre pas en toute fin de page pour n'y poser que sa date */
|
||||
.entry__date {
|
||||
break-after: avoid;
|
||||
}
|
||||
|
||||
/* Limite les lignes isolées en haut ou en bas de page (veuves et orphelines) */
|
||||
p, li {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
MISE EN PAGE
|
||||
-------------------------------------------------------------------------- */
|
||||
.masthead {
|
||||
padding-block: 0 10pt;
|
||||
border-block-end: 1pt solid #000;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-block: 10pt;
|
||||
border-block-start: 0.5pt solid #ccc;
|
||||
}
|
||||
|
||||
.intro { padding-block: 10pt; }
|
||||
|
||||
.intro__text--highlight {
|
||||
border-inline-start: 2pt solid #666;
|
||||
padding-inline-start: 8pt;
|
||||
}
|
||||
|
||||
/* Grilles : deux colonnes fixes, plus compact que l'auto-fit écran */
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8pt;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
CARTES ET FICHES
|
||||
Fonds supprimés, ombres supprimées, bordures fines.
|
||||
-------------------------------------------------------------------------- */
|
||||
.course,
|
||||
.project,
|
||||
.card,
|
||||
.contact-block {
|
||||
background: transparent;
|
||||
border: 0.5pt solid #bbb;
|
||||
box-shadow: none;
|
||||
padding: 6pt 8pt;
|
||||
margin-block-end: 5pt;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.entry {
|
||||
border-inline-start: 0.5pt solid #999;
|
||||
padding-block-end: 10pt;
|
||||
}
|
||||
|
||||
.entry::before {
|
||||
background: #fff;
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.education { border-inline-start: 0.5pt solid #999; }
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
ACCENTS EN NIVEAUX DE GRIS
|
||||
Le vert #05BC8A imprimé en monochrome donne un gris très clair,
|
||||
quasi invisible. On force le noir sur tous les éléments porteurs
|
||||
d'information.
|
||||
-------------------------------------------------------------------------- */
|
||||
.eyebrow,
|
||||
.eyebrow::before,
|
||||
.entry__date,
|
||||
.section-title::before,
|
||||
.course__name::before,
|
||||
.marker-list li::before {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: transparent;
|
||||
border: 0.5pt solid #999;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.project__stack li {
|
||||
background: transparent;
|
||||
border: 0.5pt solid #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* Icônes SVG inline */
|
||||
.card__icon,
|
||||
.contact-list__icon {
|
||||
stroke: #000;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
LIENS
|
||||
Sur papier, un lien dont on ne voit pas la cible est inutile.
|
||||
On affiche l'URL entre parenthèses — sauf pour mailto et les ancres
|
||||
internes, où l'adresse est déjà visible ou sans objet.
|
||||
-------------------------------------------------------------------------- */
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.contact-list a[href^="http"]::after,
|
||||
.site-footer a[href^="http"]::after {
|
||||
content: " (" attr(href) ")";
|
||||
font-size: 8pt;
|
||||
color: #555;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
a[href^="#"]::after,
|
||||
a[href^="mailto:"]::after,
|
||||
a[href^="tel:"]::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
PIED DE PAGE
|
||||
-------------------------------------------------------------------------- */
|
||||
.site-footer {
|
||||
border-block-start: 0.5pt solid #ccc;
|
||||
padding-block: 6pt 0;
|
||||
}
|
||||
|
||||
.site-footer__inner { font-size: 8pt; }
|
||||
.site-footer__links { display: none; }
|
||||
Reference in New Issue
Block a user