site/static/css/layout.css

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