découapge du CSS

1 files changed, 263 insertions, 0 deletions

diff --git a/static/css/layout.css b/static/css/layout.css
new file mode 100644
index 0000000..6b754b3
--- /dev/null
+++ b/static/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);
+	}
+}
+