bidouille/static/css/latest.css

/* 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;
    }
}