Merge branch 'master' into new_banner

index.html

@@ -13,6 +13,7 @@
 		<link href="./styles/text.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/mouses.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/banners.css" type="text/css" rel="stylesheet">
+		<link href="./styles/elements/banners_svg.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/title.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/nav.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/sections.css" type="text/css" rel="stylesheet">
@@ -36,12 +37,16 @@
 	<main id="top">
 
 
+		<!--
+			NAV
 		<nav>
 			<a href="#top">accueil</a>
 			<a href="#projects">projets</a>
 			<a href="#cv">cv</a>
 			<a href="#infos">contact</a>
 		</nav>
+		-->
+<div class="banner_svg"></div>
 
 
 		<!--

styles/elements/banners_svg.css

@@ -0,0 +1,21 @@
+.banner_svg {
+	width: 100%;
+	height: 150px;
+	height: min(26vw, 150px);
+
+	background-image: url(../img/banner.svg);
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-repeat: repeat;
+	background-position-x: 0%;
+
+	animation-name: slide_svg;
+	animation-iteration-count: infinite;
+	animation-duration: 30s;
+	animation-timing-function: linear;
+	animation-direction: normal;
+}
+@keyframes slide_ssvg {
+	from {background-position-x: 0%;}
+	to   {background-position-x: 100%;}
+}

styles/style.css

@@ -1,9 +1,5 @@
 
 :root {
-	--base_font_size: 62.5%;
-}
-html {
-	font-size: var(--base_font_size);
 }
 body, main {
 	overflow-x: clip;

styles/text.css

@@ -6,17 +6,31 @@
 	font-weight: normal;
 	font-style: normal;
 }
-body, pre {
+html {
+	font-size: 62.5%;
+}
+body * {
 	font-family: "notomono", monospace;
-	font-size: 1.5rem;
+	font-size: 1.8rem;
 	font-weight: normal;
 	font-style: normal;
 }
+.pre, pre {
+	display: flex;
+	white-space: pre;
+	line-height: 0.8;
+	font-size: min(2.1vw, 1.0rem);
+}
+.pre_small {
+	font-size: min(1.5vw, 0.7rem);
+}
+
 /*
+	for screen larger than 500px
 */
 @media screen and (min-width: 500px) {
-	html {
+	body {
-		font-size: calc(var(--base_font_size) * 1.2);
+		font-size: 1.5rem;
 	}
 }
 ul {
@@ -57,13 +71,3 @@ h4 { margin: 20px 0px; font-size: 1.5rem; }
 h5 { margin: 10px 0px; font-size: 1.25rem; }
 h6 { margin: 10px 0px; font-size: 1.0rem; }
 
-.pre, pre {
-	display: flex;
-	white-space: pre;
-	line-height: 0.8;
-	font-size: min(2.1vw, 1.0rem);
-}
-.pre_small {
-	font-size: min(1.5vw, 0.7rem);
-}
-