mise à niveau de tout le site
This commit is contained in:
lrdlg
@@ -0,0 +1,491 @@
|
||||
/* ==================================================================
|
||||
Thème commun de la plateforme « Mes cours » — M. Courcelle
|
||||
------------------------------------------------------------------
|
||||
Une seule feuille pour toute la plateforme : la page d'aiguillage,
|
||||
les index de classe et les pages de module partagent ces jetons,
|
||||
cette typographie et ces composants. Les feuilles spécialisées
|
||||
(exercices-commune.css, jeux-differenciee.css, atelier-texte.css)
|
||||
ne redéfinissent jamais une couleur en dur : elles consomment les
|
||||
variables déclarées ici.
|
||||
|
||||
Pour ajouter une classe :
|
||||
1. un couple --xxx-fond / --xxx-trait / --xxx-encre dans :root ;
|
||||
2. une règle .classe-xxx plus bas ;
|
||||
3. les règles de la tuile (.classe--xxx) dans index.html.
|
||||
================================================================== */
|
||||
|
||||
:root {
|
||||
/* --- encres et papiers ------------------------------------------ */
|
||||
--encre: #16302B; /* texte principal, vert très sombre */
|
||||
--encre-douce: #3E5751; /* texte secondaire, AA sur tous les fonds */
|
||||
--papier: #FBFCFB; /* fond de page */
|
||||
--blanc: #FFFFFF; /* fond des cartes et des champs */
|
||||
--trait: #D5DEDA; /* bordures neutres */
|
||||
--trait-fort: #B3C2BC;
|
||||
|
||||
/* --- couleurs par classe ---------------------------------------- */
|
||||
/* -fond : aplat pâle ; -trait : filet vif, jamais du texte ;
|
||||
-encre : variante sombre du filet, contraste AA pour du texte. */
|
||||
--tc-fond: #FBE1E7; --tc-trait: #D6336C; --tc-encre: #B82A59;
|
||||
--diff-fond: #DDF5EC; --diff-trait: #05BC8A; --diff-encre: #036F51;
|
||||
--comm-fond: #FDF0CF; --comm-trait: #E0A100; --comm-encre: #7F5B00;
|
||||
--ts-fond: #DFEAFB; --ts-trait: #2F6FDB; --ts-encre: #215FC2;
|
||||
--ae-fond: #F1E3F7; --ae-trait: #9B4DCA; --ae-encre: #8840B4;
|
||||
|
||||
/* --- couleurs de verdict ---------------------------------------- */
|
||||
--juste: #1E7A4C;
|
||||
--juste-fond: #E3F3EA;
|
||||
--erreur: #B0322A;
|
||||
--erreur-fond: #F9E5E3;
|
||||
--cible: #F5C542; /* surlignage, marqueur */
|
||||
--cible-fond: #FDF6E1;
|
||||
|
||||
/* --- accent courant --------------------------------------------- */
|
||||
/* Neutre par défaut ; chaque page de classe le remplace en posant
|
||||
une classe .classe-xxx sur <body>. Tout le reste de la plateforme
|
||||
ne connaît que --accent, --accent-fond et --accent-encre. */
|
||||
--accent: var(--encre);
|
||||
--accent-fond: #EDF2F0;
|
||||
--accent-encre: var(--encre);
|
||||
|
||||
/* --- typographie ------------------------------------------------- */
|
||||
--police-titre: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
|
||||
--police-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
--police-doc: Cambria, Georgia, "Times New Roman", serif; /* specimens de traitement de texte */
|
||||
|
||||
/* --- mesures ------------------------------------------------------ */
|
||||
--lecture: 64ch; /* largeur de confort d'un paragraphe */
|
||||
--page: 58rem; /* largeur de la colonne de contenu */
|
||||
--gouttiere: 1.5rem; /* marge latérale, identique partout */
|
||||
--base: 17px;
|
||||
}
|
||||
|
||||
/* Identité de classe : posée sur <body>. */
|
||||
.classe-tc { --accent: var(--tc-trait); --accent-fond: var(--tc-fond); --accent-encre: var(--tc-encre); }
|
||||
.classe-diff { --accent: var(--diff-trait); --accent-fond: var(--diff-fond); --accent-encre: var(--diff-encre); }
|
||||
.classe-comm { --accent: var(--comm-trait); --accent-fond: var(--comm-fond); --accent-encre: var(--comm-encre); }
|
||||
.classe-ts { --accent: var(--ts-trait); --accent-fond: var(--ts-fond); --accent-encre: var(--ts-encre); }
|
||||
.classe-ae { --accent: var(--ae-trait); --accent-fond: var(--ae-fond); --accent-encre: var(--ae-encre); }
|
||||
|
||||
/* ==================================================================
|
||||
Base
|
||||
================================================================== */
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
html {
|
||||
font-size: var(--base);
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--papier);
|
||||
color: var(--encre);
|
||||
font-family: var(--police-texte);
|
||||
font-size: 1rem;
|
||||
line-height: 1.55;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* Mode projection : agrandit toute la page d'un coup pour le TBI.
|
||||
Le jeton doit être posé sur <html> et non sur <body> : c'est <html>
|
||||
qui porte font-size, et donc la valeur du rem pour toute la page. */
|
||||
html.projection { --base: 25px; }
|
||||
|
||||
p, ul, ol { max-width: var(--lecture); }
|
||||
p { margin: 0 0 .9rem; }
|
||||
li { margin-bottom: .35rem; }
|
||||
|
||||
a { color: var(--accent-encre); }
|
||||
a:hover { text-decoration-thickness: 2px; }
|
||||
|
||||
strong { font-weight: 600; }
|
||||
|
||||
code, kbd {
|
||||
font-family: ui-monospace, "JetBrains Mono", Consolas, "Courier New", monospace;
|
||||
font-size: .92em;
|
||||
background: var(--accent-fond);
|
||||
padding: .05rem .3rem;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 3px solid var(--accent-encre);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
*, *::before, *::after { animation: none !important; transition: none !important; }
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
En-tête de page
|
||||
Fil d'Ariane, titre, sous-titre, et le filet de couleur de la
|
||||
classe — le même motif que les tuiles de la page d'accueil.
|
||||
================================================================== */
|
||||
|
||||
.entete {
|
||||
background: var(--blanc);
|
||||
border-bottom: .5rem solid var(--accent);
|
||||
}
|
||||
|
||||
.entete__interieur {
|
||||
max-width: calc(var(--page) + 2 * var(--gouttiere));
|
||||
margin: 0 auto;
|
||||
padding: 1rem var(--gouttiere) 1.1rem;
|
||||
}
|
||||
|
||||
.ariane {
|
||||
font-size: .85rem;
|
||||
color: var(--encre-douce);
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.ariane a { color: var(--encre-douce); }
|
||||
.ariane a:hover { color: var(--accent-encre); }
|
||||
.ariane span[aria-hidden] { padding: 0 .35rem; color: var(--trait-fort); }
|
||||
.ariane strong { color: var(--encre); font-weight: 600; }
|
||||
|
||||
.entete h1 {
|
||||
margin: 0;
|
||||
font-family: var(--police-titre);
|
||||
font-size: clamp(1.35rem, 3.2vw, 1.9rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.entete__meta {
|
||||
margin: .35rem 0 0;
|
||||
max-width: none;
|
||||
color: var(--encre-douce);
|
||||
font-size: .95rem;
|
||||
}
|
||||
|
||||
/* Outils à droite du titre (bouton « Agrandir », par exemple) */
|
||||
.entete__barre {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .6rem 1.2rem;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
Corps de page
|
||||
================================================================== */
|
||||
|
||||
.contenu {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: calc(var(--page) + 2 * var(--gouttiere));
|
||||
margin: 0 auto;
|
||||
padding: 2rem var(--gouttiere) 4rem;
|
||||
}
|
||||
|
||||
.chapeau {
|
||||
font-size: 1.08rem;
|
||||
color: var(--encre-douce);
|
||||
max-width: var(--lecture);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--police-titre);
|
||||
font-size: clamp(1.15rem, 2.6vw, 1.45rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.25;
|
||||
margin: 2.8rem 0 .8rem;
|
||||
padding-top: .8rem;
|
||||
border-top: 2px solid var(--accent);
|
||||
max-width: var(--lecture);
|
||||
}
|
||||
|
||||
.contenu > h2:first-child,
|
||||
section > h2:first-child,
|
||||
.inner > h2:first-child {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--police-titre);
|
||||
font-size: 1.02rem;
|
||||
font-weight: 700;
|
||||
margin: 1.8rem 0 .5rem;
|
||||
color: var(--accent-encre);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: .95rem;
|
||||
font-weight: 600;
|
||||
margin: 1.2rem 0 .4rem;
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
Encadrés
|
||||
.encadre rappel neutre
|
||||
.encadre--theorie ce qu'il faut savoir avant de jouer
|
||||
.encadre--cle la règle à retenir
|
||||
.encadre--attention piège fréquent
|
||||
================================================================== */
|
||||
|
||||
.encadre {
|
||||
background: var(--accent-fond);
|
||||
border-left: .4rem solid var(--accent);
|
||||
border-radius: 0 .4rem .4rem 0;
|
||||
padding: .9rem 1.1rem;
|
||||
margin: 1.4rem 0;
|
||||
max-width: var(--lecture);
|
||||
}
|
||||
.encadre > :first-child { margin-top: 0; }
|
||||
.encadre > :last-child { margin-bottom: 0; }
|
||||
.encadre h3 { margin-top: 0; color: var(--encre); }
|
||||
|
||||
.encadre--theorie { background: var(--accent-fond); }
|
||||
.encadre--cle { background: var(--cible-fond); border-left-color: var(--cible); }
|
||||
.encadre--attention { background: var(--erreur-fond); border-left-color: var(--erreur); }
|
||||
|
||||
/* ==================================================================
|
||||
Boutons
|
||||
================================================================== */
|
||||
|
||||
.action {
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
font-size: .95rem;
|
||||
background: var(--encre);
|
||||
color: var(--papier);
|
||||
border: 2px solid var(--encre);
|
||||
border-radius: .4rem;
|
||||
padding: .5rem 1.05rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.action:hover { background: var(--accent-encre); border-color: var(--accent-encre); }
|
||||
|
||||
.action--secondaire {
|
||||
background: var(--blanc);
|
||||
color: var(--encre);
|
||||
}
|
||||
.action--secondaire:hover { background: var(--encre); color: var(--papier); border-color: var(--encre); }
|
||||
|
||||
.action[disabled] { opacity: .5; cursor: default; }
|
||||
.action[disabled]:hover { background: var(--encre); border-color: var(--encre); }
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
flex-wrap: wrap;
|
||||
margin: .9rem 0;
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
Sommaire d'un module (bandeau de blocs / de séances)
|
||||
================================================================== */
|
||||
|
||||
.sommaire {
|
||||
background: var(--accent-fond);
|
||||
border-bottom: 1px solid var(--trait);
|
||||
}
|
||||
|
||||
.sommaire__interieur {
|
||||
max-width: calc(var(--page) + 2 * var(--gouttiere));
|
||||
margin: 0 auto;
|
||||
padding: .7rem var(--gouttiere);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .4rem;
|
||||
}
|
||||
|
||||
.sommaire a,
|
||||
.sommaire button {
|
||||
font: inherit;
|
||||
font-size: .9rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
color: var(--encre);
|
||||
background: var(--blanc);
|
||||
border: 1px solid var(--trait-fort);
|
||||
border-radius: .35rem;
|
||||
padding: .35rem .8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sommaire a:hover,
|
||||
.sommaire button:hover { border-color: var(--encre); }
|
||||
|
||||
.sommaire a[aria-current="page"],
|
||||
.sommaire button[aria-current="true"] {
|
||||
background: var(--encre);
|
||||
border-color: var(--encre);
|
||||
color: var(--papier);
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
Index de classe : la liste des modules
|
||||
Un <li class="module"> par module. Voir le gabarit en commentaire
|
||||
dans chaque index de classe.
|
||||
================================================================== */
|
||||
|
||||
.modules {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1.2rem 0 0;
|
||||
max-width: none;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.module { margin: 0; }
|
||||
|
||||
.module__lien {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: .3rem;
|
||||
background: var(--blanc);
|
||||
border: 1px solid var(--trait);
|
||||
border-top: .4rem solid var(--accent);
|
||||
border-radius: .5rem;
|
||||
padding: 1.1rem 1.2rem 1.2rem;
|
||||
color: var(--encre);
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.module__lien:hover { border-color: var(--accent); border-top-color: var(--accent); }
|
||||
.module__lien:hover .module__titre { text-decoration: underline; text-decoration-thickness: 2px; }
|
||||
}
|
||||
|
||||
.module__num {
|
||||
font-family: var(--police-titre);
|
||||
font-size: .78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-encre);
|
||||
}
|
||||
|
||||
.module__titre {
|
||||
font-family: var(--police-titre);
|
||||
font-size: 1.12rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.module__resume {
|
||||
color: var(--encre-douce);
|
||||
font-size: .95rem;
|
||||
margin-top: .2rem;
|
||||
}
|
||||
|
||||
.module__meta {
|
||||
margin-top: auto;
|
||||
padding-top: .8rem;
|
||||
color: var(--encre-douce);
|
||||
font-size: .85rem;
|
||||
}
|
||||
|
||||
/* Module annoncé mais pas encore en ligne : même carte, sans lien. */
|
||||
.module--bientot .module__lien {
|
||||
border-top-color: var(--trait-fort);
|
||||
background: var(--papier);
|
||||
color: var(--encre-douce);
|
||||
cursor: default;
|
||||
}
|
||||
.module--bientot .module__num { color: var(--encre-douce); }
|
||||
|
||||
/* Classe sans aucun module publié */
|
||||
.vide {
|
||||
background: var(--blanc);
|
||||
border: 2px dashed var(--trait-fort);
|
||||
border-radius: .5rem;
|
||||
padding: 2rem 1.5rem;
|
||||
text-align: center;
|
||||
color: var(--encre-douce);
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
Tableaux, figures, captures
|
||||
================================================================== */
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
max-width: var(--lecture);
|
||||
margin: 1.2rem 0;
|
||||
font-size: .95rem;
|
||||
}
|
||||
th, td {
|
||||
border-bottom: 1px solid var(--trait);
|
||||
padding: .45rem .6rem;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
th {
|
||||
background: var(--accent-fond);
|
||||
border-bottom: 2px solid var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1.4rem 0;
|
||||
max-width: var(--lecture);
|
||||
}
|
||||
figure img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .3rem;
|
||||
}
|
||||
figcaption {
|
||||
font-size: .86rem;
|
||||
color: var(--encre-douce);
|
||||
margin-top: .4rem;
|
||||
}
|
||||
|
||||
/* Capture pas encore déposée : la page reste lisible et dit quoi ajouter. */
|
||||
.manque {
|
||||
border: 2px dashed var(--trait-fort);
|
||||
background: var(--papier);
|
||||
border-radius: .3rem;
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
color: var(--encre-douce);
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
Pied de page
|
||||
================================================================== */
|
||||
|
||||
.pied {
|
||||
border-top: 1px solid var(--trait);
|
||||
background: var(--blanc);
|
||||
color: var(--encre-douce);
|
||||
font-size: .88rem;
|
||||
}
|
||||
.pied__interieur {
|
||||
max-width: calc(var(--page) + 2 * var(--gouttiere));
|
||||
margin: 0 auto;
|
||||
padding: 1.2rem var(--gouttiere) 2rem;
|
||||
}
|
||||
.pied a { color: var(--encre-douce); }
|
||||
|
||||
/* ==================================================================
|
||||
Impression
|
||||
================================================================== */
|
||||
|
||||
@media print {
|
||||
body { background: #fff; }
|
||||
.sommaire, .action, .actions, .entete__barre button { display: none; }
|
||||
.entete { border-bottom-width: 2px; }
|
||||
.contenu { max-width: none; padding: 0; }
|
||||
}
|
||||
Reference in New Issue
Block a user