/*PARAMETRES GENERAUX*/ :root { --big_margin: 100px; --med_margin: 50px; --small_margin: 10px; --day-background: #fdfff9; --day-highlight-color: white; --day-highlight-bg: darkgreen; --night-highlight-color: #ebebed; --night-highlight-bg: #565a4d; --night-background: #242526; /*#3c3c39;*/ --txt-night: #ebebed; /*#c7c4d4;*/ color-scheme: light dark; /* --menu: pink; --jardin: darkseagreen; --infras: gold; --rennes: orange; --orsay: chartreuse; --txt_infras: bisque; --outils: coral; --liste_outils: aliceblue; --txt_outils: aquamarine; --valeurs: grey; --ronce: cornflowerblue; --liste_valeurs: brown; --connaissance: chocolate; --txt_connaissance: crimson; --calendrier: darkkhaki; --footer: deeppink; --lightgrey: lightgrey;*/ } /* PAR DEFAUT */ h1 > .decoration:last-of-type:before, h2 > .decoration:last-of-type:before{ content: '\A____________________________________\A""""""""""""""""""""""""""""""""""""'; } html, body, main { margin: 0; padding: 0; font-size: 13px; } body { font-family: monospace; color: black; background-color: var(--day-background); } pre { padding: 0; margin: 0; font-size: 1rem; } p { font-size: 1rem; } a { color: darkgreen; } nav ul { list-style: none; padding: 0px; margin: 0px; } h2, h1 { font-size: 1rem; font-weight: normal; margin: 0px; padding: 0px; text-align: left; } h2, h1 { text-transform: uppercase; white-space: pre; overflow: hidden; } img { width: 100%; } .noscroll { overflow: hidden; } .highlight { color: var(--day-highlight-color); background-color: var(--day-highlight-bg); } .underline { text-decoration-line: underline; } /*GESTION DE LA GRILLE DU DOCUMENT*/ div#container { display: grid; grid-template-columns: [main-col-start] repeat(12, calc(100% / 12) [main-col-sep]); grid-template-rows: [main-row-debut] var(--med_margin) [header-start] auto [header-end] var(--big_margin) [core-start] auto [main-row-fin] var(--big_margin) [footer-start] auto [footer-end] ; } /* EN-TETE */ header { grid-area: header-start / main-col-sep 1 / header-end / main-col-sep 12; z-index: 1; /* Pour le mettre au dessus de l'illustration jardin et que l'on puisse sélectionner son contenu */ } /* PIED DE PAGE */ footer { background-color: var(--footer); grid-area: footer-start / main-col-start / footer-end / main-col-sep 12; } #liens { text-align: center; margin-bottom: var(--med_margin); } /* MENU */ nav#menu { background-color: var(--day-background); display: flex; justify-content: flex-end; flex-direction: column; position: fixed; bottom: 1rem; right: 1rem; } .icone > pre { padding-top: 1rem; color: black; } .icone { position: relative; display: inline-block; text-decoration: none; } .icone .img_top { display: none; position: absolute; top: 0; left: 0; z-index: 99; background-color: var(--day-background); color: darkgreen; } .icone:hover .img_top { display: inline; } .icone a { text-decoration: none; color: black; } nav#menu > a { display: block; color: black; text-decoration: none; } nav#menu > a:hover { color: darkgreen; text-decoration: none; } /* ILLUSTRATIONS ASCII (Y COMPRIS FOOTER) */ pre.center { font-size: 1rem; display: flex; justify-content: center; } pre.hide { display: none; } pre.center > a { font-size: 1rem; display: contents; text-decoration: 1px black solid; } /* RESPONSIVE */ /* Tablettes */ @media (max-width: 1500px) and (min-width: 801px) { h2, h1 { font-size: 1rem; font-weight: normal; margin: 0px; padding: 0px; text-transform: uppercase; white-space: pre; overflow: hidden; } } /* Smartphones */ @media (max-width: 800px) { :root { --big_margin: 50px; --med_margin: 25px; --small_margin: 5px; } h1 > .decoration:last-of-type:before { content: ""; } h2 > .decoration:first-of-type:before{ content: '______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""\A* '; } h2 > .decoration:last-of-type:before{ content: ' *\A______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""'; } h2, h1 { font-size: 1rem; text-align: center; } h2, h1 { text-transform: uppercase; white-space: pre; overflow: hidden; } } /* THEME SOMBRE */ @media (prefers-color-scheme: dark) { div#container, nav#menu, body { background-color: var(--night-background); } p, pre, ul, li, a, a:hover, h1, h2, footer { color: var(--txt-night); } .highlight { color: var(--night-highlight-color); background-color: var(--night-highlight-bg); } .icone > pre { color: var(--txt-night); } .icone .img_top { background-color: var(--night-background); color: var(--txt-night); } .icone a { color: var(--txt-night); } div#ronce, #coop, #autonomie, #solidarite, #liberte, nav#menu, div#rennes, div#orsay { border-color: var(--txt-night); } section#liste_outils > a > div > p:nth-child(n){ color: var(--txt-night); } }