diff options
Diffstat (limited to 'assets/css/layout.css')
| -rw-r--r-- | assets/css/layout.css | 263 |
1 files changed, 263 insertions, 0 deletions
diff --git a/assets/css/layout.css b/assets/css/layout.css new file mode 100644 index 0000000..6b754b3 --- /dev/null +++ b/assets/css/layout.css @@ -0,0 +1,263 @@ +/*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 */ +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; +} + +h1:after, h2:after{ + content:'\A___________________________________\A"""""""""""""""""""""""""""""""""""'; +} + +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; +} + +/*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; +} + +/* 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:before, h1:after{ + content: ''; + } + + h2:before{ + content: '______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""\A* '; + } + + h2:after{ + 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); + } +} + |