From b84f3e7b3612d839048806ff4a0c28b846cdc974 Mon Sep 17 00:00:00 2001
From: hugogogo <hugogogo@protonmail.com>
Date: Thu, 22 Apr 2021 16:34:55 +0200
Subject: [PATCH] deplacement des media querries en dernier css

---
 styles/images.css   |  2 +-
 styles/media.css    | 96 +++++++++++++++++++++++++++++++++++++++++++++
 styles/skeleton.css | 90 ------------------------------------------
 styles/style.css    |  2 +
 4 files changed, 99 insertions(+), 91 deletions(-)
 create mode 100644 styles/media.css

diff --git a/styles/images.css b/styles/images.css
index b1c8009..7e0b5be 100644
--- a/styles/images.css
+++ b/styles/images.css
@@ -72,10 +72,10 @@
 .image img {
 	height: 400px;
 	width: auto;
-	margin-right: calc(var(--gap-unit) * 2 );
 }
 .image h1, .image h2, .image h3, .image p {
 	min-width: 280px;
+	margin-left: calc(var(--gap-unit) * 2 );
 }
 /*images in full page*/
 .image.full img {
diff --git a/styles/media.css b/styles/media.css
new file mode 100644
index 0000000..b11c2dc
--- /dev/null
+++ b/styles/media.css
@@ -0,0 +1,96 @@
+
+/* RESPONSIVE DESIGN */
+
+@media only screen and (max-width: 1000px) {
+	html {
+		font-size: var(--small-font-size);
+	}
+	.container_main {
+		flex-direction: column;
+	}
+	.container_main > * {
+		margin: 20px;
+	}
+	.aside_left {
+		position: relative;
+	}
+	/*NAVBAR*/
+	nav.navbar {
+		flex-direction: column;
+		height: auto;
+	}
+	.navbar .nav_left a {
+		display: none;
+		display: flex;
+		margin-left: 0px;
+		width: 100%;
+	}
+	.navbar .nav_left a p {
+		margin-left: 20px;
+	}
+	.navbar .nav_right {
+		display: none;
+		display: flex;
+	}
+	.navbar .nav_left a#nav_logo {
+		display: flex;
+		margin-bottom: 40px;
+		width: auto;
+	}
+	.navbar .nav_left {
+		flex-direction: column;
+		height: auto;
+	}
+	.navbar .nav_right {
+		margin: 20px 0px 20px 27px;
+		width: 150px;
+	}
+	/*burger menu*/
+	nav.navbar::before {
+		content: "";
+		position: absolute;
+		right: 20px;
+		top: 10px;
+		width: 26px;
+		height: 14px;
+		border-top: 2px solid lightgrey;
+		border-bottom: 2px solid lightgrey;
+		cursor: pointer;
+	}
+	nav.navbar::after {
+		content: "";
+		position: absolute;
+		right: 20px;
+		top: 18px;
+		width: 26px;
+		height: 2px;
+		border-top: 2px solid lightgrey;
+		pointer-events: none;
+		display: none;
+	}
+	nav.navbar:hover .nav_right {
+		display: none;
+	}
+	nav.navbar:hover .nav_left a {
+		display: none;
+	}
+	nav.navbar:hover .nav_left a#nav_logo {
+		display: flex;
+		margin-bottom: 0px;
+	}
+	/*MAIN*/
+	main {
+		max-width: 90%;
+	}
+	main .image {
+		flex-wrap: wrap;
+	}
+	main .image img {
+		margin-bottom: 20px;
+	}
+	.image h1, .image h2, .image h3, .image p {
+		margin-left: 0px;
+	}
+}
+
+
diff --git a/styles/skeleton.css b/styles/skeleton.css
index ec8add4..dbee62e 100644
--- a/styles/skeleton.css
+++ b/styles/skeleton.css
@@ -79,95 +79,5 @@ footer iframe {
 	top: 0;
 }
 
-/* RESPONSIVE DESIGNi */
-
-@media only screen and (max-width: 1000px) {
-	html {
-		font-size: var(--small-font-size);
-	}
-	.container_main {
-		flex-direction: column;
-	}
-	.container_main > * {
-		margin: 20px;
-	}
-	.aside_left {
-		position: relative;
-	}
-	/*NAVBAR*/
-	nav.navbar {
-		flex-direction: column;
-		height: auto;
-	}
-	.navbar .nav_left a {
-		display: none;
-		display: flex;
-		margin-left: 0px;
-		width: 100%;
-	}
-	.navbar .nav_left a p {
-		margin-left: 20px;
-	}
-	.navbar .nav_right {
-		display: none;
-		display: flex;
-	}
-	.navbar .nav_left a#nav_logo {
-		display: flex;
-		margin-bottom: 40px;
-		width: auto;
-	}
-	.navbar .nav_left {
-		flex-direction: column;
-		height: auto;
-	}
-	.navbar .nav_right {
-		margin: 20px 0px 20px 27px;
-		width: 150px;
-	}
-	/*burger menu*/
-	nav.navbar::before {
-		content: "";
-		position: absolute;
-		right: 20px;
-		top: 10px;
-		width: 26px;
-		height: 14px;
-		border-top: 2px solid lightgrey;
-		border-bottom: 2px solid lightgrey;
-		cursor: pointer;
-	}
-	nav.navbar::after {
-		content: "";
-		position: absolute;
-		right: 20px;
-		top: 18px;
-		width: 26px;
-		height: 2px;
-		border-top: 2px solid lightgrey;
-		pointer-events: none;
-		display: none;
-	}
-	nav.navbar:hover .nav_right {
-		display: none;
-	}
-	nav.navbar:hover .nav_left a {
-		display: none;
-	}
-	nav.navbar:hover .nav_left a#nav_logo {
-		display: flex;
-		margin-bottom: 0px;
-	}
-	/*MAIN*/
-	main {
-		max-width: 90%;
-	}
-	main .image {
-		flex-wrap: wrap;
-	}
-	main .image img {
-		margin-bottom: 20px;
-	}
-}
 
 
diff --git a/styles/style.css b/styles/style.css
index 9bfc73b..6f7da70 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -15,5 +15,7 @@
 @import url(./text.css);
 @import url(./images.css);
 
+@import url(./media.css);
+
 @import url(./load.css);