diff --git a/static/css/layout.css b/static/css/layout.css index 9c8b1e4..aa1ede3 100644 --- a/static/css/layout.css +++ b/static/css/layout.css @@ -1,17 +1,17 @@ /*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; - /* +: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; @@ -29,72 +29,70 @@ --calendrier: darkkhaki; --footer: deeppink; --lightgrey: lightgrey;*/ - } /* PAR DEFAUT */ -html, body, main{ - margin:0; - padding: 0; - font-size: 13px; +html, body, main { + margin: 0; + padding: 0; + font-size: 13px; } -body{ - font-family: monospace; - color: black; - background-color: var(--day-background); +body { + font-family: monospace; + color: black; + background-color: var(--day-background); } -pre{ - padding: 0; - margin: 0; - font-size: 1rem; +pre { + padding: 0; + margin: 0; + font-size: 1rem; } -p{ - font-size: 1rem; +p { + font-size: 1rem; } -a{ - color: darkgreen; +a { + color: darkgreen; } - -nav ul{ - list-style: none; - padding: 0px; - margin: 0px; +nav ul { + list-style: none; + padding: 0px; + margin: 0px; } -h1:after, h2:after{ - content:'\A___________________________________\A"""""""""""""""""""""""""""""""""""'; +h1:after, h2:after { + content: '\A___________________________________\A"""""""""""""""""""""""""""""""""""'; } -h2, h1{ - font-size: 1rem; - font-weight: normal; - margin: 0px; - padding: 0px; - text-align: left; +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; +h2, h1 { + text-transform: uppercase; + white-space: pre; + overflow: hidden; } -img{ - width: 100%; +img { + width: 100%; } -.noscroll{ - overflow: hidden; +.noscroll { + overflow: hidden; } -.highlight{ - color: var(--day-highlight-color); - background-color: var(--day-highlight-bg); +.highlight { + color: var(--day-highlight-color); + background-color: var(--day-highlight-bg); } .underline { @@ -102,7 +100,7 @@ img{ } /*GESTION DE LA GRILLE DU DOCUMENT*/ -div#container{ +div#container { display: grid; grid-template-columns: [main-col-start] repeat(12, calc(100% / 12) [main-col-sep]); grid-template-rows: @@ -117,158 +115,158 @@ div#container{ /* EN-TETE */ header { - grid-area: header-start / main-col-sep 1 / header-end / main-col-sep 12; + 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; + 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) +#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; +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 > pre { + padding-top: 1rem; + color: black; } -.icone{ - position : relative; - display: inline-block; - text-decoration: none; +.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 .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:hover .img_top { + display: inline; } -.icone a{ - text-decoration: none; - color:black; +.icone a { + text-decoration: none; + color: black; } -nav#menu > a{ - display: block; - color: black; - text-decoration: none; +nav#menu > a { + display: block; + color: black; + text-decoration: none; } -nav#menu > a:hover{ - color: darkgreen; - 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.center { + font-size: 1rem; + display: flex; + justify-content: center; } pre.hide { - display: none; + display: none; } -pre.center > a{ - font-size: 1rem; - display: contents; - text-decoration: 1px black solid; +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; - } + 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; - } + :root { + --big_margin: 50px; + --med_margin: 25px; + --small_margin: 5px; + } - h1:before, h1:after{ - content: ''; - } + h1:before, h1:after { + content: ""; + } - h2:before{ - content: '______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""\A* '; - } + h2:before { + content: '______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""\A* '; + } - h2:after{ - 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; - } + 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); - } + 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); + } }