premier commit

static/css/highlight.css

@@ -0,0 +1,78 @@
+/* Fichier généré avec pygmentize
+ *
+ * pygmentize -S default -f html -a .highlight > highlight.css
+*/
+pre { line-height: 125%; }
+td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+.highlight .hll { background-color: #ffffcc }
+.highlight { background: #f8f8f8; }
+.highlight .c { color: #3D7B7B; font-style: italic } /* Comment */
+.highlight .err { border: 1px solid #FF0000 } /* Error */
+.highlight .k { color: #008000; font-weight: bold } /* Keyword */
+.highlight .o { color: #666666 } /* Operator */
+.highlight .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
+.highlight .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #9C6500 } /* Comment.Preproc */
+.highlight .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
+.highlight .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #E40000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #008400 } /* Generic.Inserted */
+.highlight .go { color: #717171 } /* Generic.Output */
+.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #0044DD } /* Generic.Traceback */
+.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #008000 } /* Keyword.Pseudo */
+.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #B00040 } /* Keyword.Type */
+.highlight .m { color: #666666 } /* Literal.Number */
+.highlight .s { color: #BA2121 } /* Literal.String */
+.highlight .na { color: #687822 } /* Name.Attribute */
+.highlight .nb { color: #008000 } /* Name.Builtin */
+.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
+.highlight .no { color: #880000 } /* Name.Constant */
+.highlight .nd { color: #AA22FF } /* Name.Decorator */
+.highlight .ni { color: #717171; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #0000FF } /* Name.Function */
+.highlight .nl { color: #767600 } /* Name.Label */
+.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #19177C } /* Name.Variable */
+.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mb { color: #666666 } /* Literal.Number.Bin */
+.highlight .mf { color: #666666 } /* Literal.Number.Float */
+.highlight .mh { color: #666666 } /* Literal.Number.Hex */
+.highlight .mi { color: #666666 } /* Literal.Number.Integer */
+.highlight .mo { color: #666666 } /* Literal.Number.Oct */
+.highlight .sa { color: #BA2121 } /* Literal.String.Affix */
+.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
+.highlight .sc { color: #BA2121 } /* Literal.String.Char */
+.highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */
+.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
+.highlight .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
+.highlight .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
+.highlight .sx { color: #008000 } /* Literal.String.Other */
+.highlight .sr { color: #A45A77 } /* Literal.String.Regex */
+.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
+.highlight .ss { color: #19177C } /* Literal.String.Symbol */
+.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #0000FF } /* Name.Function.Magic */
+.highlight .vc { color: #19177C } /* Name.Variable.Class */
+.highlight .vg { color: #19177C } /* Name.Variable.Global */
+.highlight .vi { color: #19177C } /* Name.Variable.Instance */
+.highlight .vm { color: #19177C } /* Name.Variable.Magic */
+.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */

static/css/latest.css

@@ -0,0 +1,414 @@
+/* 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;
+    }
+}