/* Couleurs Pour éviter de chercher dans le code les couleurs utilisées sont sous forme de variables CSS. Si aucune couleur n'est définie, tout le site sera en noir&blanc. */ /* Europe :root { --fond: white; --primaire: #039; --liens: rgb(18, 116, 207); --deco: #FC0; } */ /* Belgique :root { --fond: black; --primaire: white; --liens: gold; --deco: red; } */ /* compuThings inversé :root { --fond: #222; --primaire: #EEE; --liens: #96D321; --deco: #fe1976; } */ /* compuThings */ :root { --fond: #EEE; --primaire: #222; --liens: #fe1976; --deco: #96D321; } /* Expériences */ /* Pour « toute » la page. */ body { margin: 0; font-family: sans-serif; background-color: var(--fond); color: var(--primaire); } a { text-decoration: none; color: var(--liens); } img { max-width: 90vw; display: block; } .hidden { visibility: hidden; } .red { color: red; } /* pour les images en Markdown. * En markdown : ![alt](path/file.png#class "titre") * Sauf si leur nom est trop similaire, plusieurs classes peuvent se succéder. * ex qui ne fonctionnerait pas : #small et #smaller * ex en markown: ![alt](path/file.png#verysmall#right "titre") */ img[src*="#left"] { float: left; padding-right: 1em; } img[src*="#right"] { float: right; padding-left: 1em; } img[src*="#center"] { margin: auto; } img[src*="#verysmall"] { max-width: 10vw; } img[src*="#small"] { max-width: 30vw; } img[src*="#medium"] { max-width: 60vw; } img[src*="#round"] { border-radius: 50%; } /* Pour la balise header. * Elle est utilisée une seule fois sur la page. * Pour y afficher les deux menus, le principal et le social. */ header { background-color: var(--primaire); color: var(--fond); position: -webkit-sticky; /* Safari */ position: sticky; top: 0; display: flex; justify-content: space-between; } header a { color: var(--fond); padding: .5em; display: inline-block; } header a::first-letter { color: var(--deco); } header a:hover{ background: var(--liens); } header a:hover::first-letter{ color: unset; } header a.current { text-decoration: underline .2em; text-decoration-color: var(--liens); } header a.current::first-letter{ color: unset; } .social { background-color: var(--deco); } .social a:hover { color: var(--fond); } /* Contenu principal */ main { margin-left: 2em; margin-right: 2em; } main a:hover { text-decoration: underline; text-decoration-color: var(--deco); color: unset; } .pagination { display: flex; align-items: center; justify-content: center; position: sticky; top:auto; } .pagination p { margin: .5em; } .pagination a:hover { color: var(--primaire); } .pagination a { padding-left: 2em; padding-right: 3em; font-size: 1.5em; } /* Le tire et des infos */ hgroup h1 { margin-bottom: 0em; line-height: 1.2em; } hgroup p{ margin-top: 0em; color: color-mix(in srgb, var(--primaire), transparent); } hgroup a { color: color-mix(in srgb, var(--liens) 70%, transparent); } /* un article ou une page */ article p { padding-left: 1em; line-height: 1.5em; } article footer { text-align: center; font-size: smaller; } article blockquote { border-left-style: dotted; border-left-color: gray; margin: 1em; } /* tires coquets */ article h1 { font-size: xx-large; } article h2::after { content: " ··"; color: var(--deco); } article h3::after { content: " ···"; color: var(--deco); } article h4::after { content: " ··· ·"; color: var(--deco); } article h5::after { content: " ··· ··"; color: var(--deco); } article h6::after { content: " ··· ···"; color: var(--deco); } /* listes */ li { line-height: 1.8em; } ul li { /* pour écarter les fa-icons du texte */ padding-left: .5em; } ul li::marker { content: "ɷ"; color: var(--deco); } li>ul { padding-left: .7em; } li>ul li::marker { color: color-mix(in srgb, var(--primaire) 60%, transparent); } /* tables */ table { margin-left: auto; margin-right: auto; } th { border-bottom: solid var(--deco) 1px; } tr:nth-child(even) { /*background-color: var(--secondaire);*/ background-color: color-mix(in srgb, var(--primaire) 20%, var(--fond)); } /* coloration du code (highlight) * voir aussi highlight.css */ .highlight { margin-left: 2em; width: auto; height: auto; overflow: auto; } .highlighttable { /* Sinon le code avec numérotation des lignes * se retrouve centré parcequ'il est fait avec une table. */ margin-left: unset; margin-right: unset; } /* notes en bas de page */ .footnote hr { color: var(--fond); } .footnote p { font-size: 1em; line-height: 1em; } /* Pied de page */ footer { text-align: center; font-size: smaller; border-top: .1em dashed color-mix(in srgb, var(--primaire), transparent);; padding: .5em; } footer a { text-decoration: none; } footer a:hover { color: var(--deco); } /* Pour ne pas imprimer le menu. */ @media print { header { display: none !important; } } /* Pour un minimum de responsivenessitude… */ @media screen and (max-width: 800px) { img { min-width: 30vw; } header { position: unset; top: unset; } nav:last-child { width: min-content; } main { margin-left: unset; margin-right: unset; } hgroup, article, article>div.highlight, blockquote, table { margin-left: .5em; margin-right: .5em; } ul { padding-left: 1em; } hgroup { border-bottom: dashed var(--deco) 10px; border-width: 50%; } footer { color: var(--fond); background-color: var(--primaire); border-top: unset; } footer a { color: var(--deco); } .pagination p { margin: 0em; } .pagination a { padding-left: 1.5em; padding-right: 1.5em; font-size: 1em; } }