From 3972ff48285c90643738b8c7cf890bc5f5c9cd1f Mon Sep 17 00:00:00 2001
From: gbrochar <gaetanbrochard@protonmail.com>
Date: Fri, 4 Dec 2020 13:03:32 +0100
Subject: [PATCH] add responsiveness

---
 public/css/style.css                 | 2 +-
 src/client/Banner.tsx                | 2 +-
 src/client/Footer.tsx                | 4 ++--
 src/client/ImagesWithDescription.tsx | 3 ++-
 src/client/Navbar.tsx                | 3 ++-
 src/client/Quote.tsx                 | 6 +++---
 6 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 8f1b864..c4f1456 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -23,7 +23,7 @@ body {
 }
 
 #banner {
-	max-width: 40%;
+	max-width: 80%;
 }
 
 #navbar {
diff --git a/src/client/Banner.tsx b/src/client/Banner.tsx
index 46a0aff..c30f19f 100644
--- a/src/client/Banner.tsx
+++ b/src/client/Banner.tsx
@@ -49,7 +49,7 @@ export default function Banner(
 					className='container-fluid p-0'
 					style={colorLayer}>
 					<div
-						className='jumbotron container text-white px-0'
+						className='jumbotron container text-white my-4 px-0'
 						id='banner'
 						style={jumbotronStyle}>
 						<h1 className='display-4 font-weight-bold'>{title}</h1>
diff --git a/src/client/Footer.tsx b/src/client/Footer.tsx
index 1d965a5..9872905 100644
--- a/src/client/Footer.tsx
+++ b/src/client/Footer.tsx
@@ -22,11 +22,11 @@ export default function Footer(
 	{elements}: FooterProps) {
 	return (
 		<React.Fragment>
-			<div className='container w-50 py-5 d-flex justify-content-between'>
+			<div className='container
+				py-5 d-flex flex-wrap justify-content-between'>
 				{elements.map((elem, index) =>
 					<div
 						key={index}
-						id='imagewithdescription'
 						className='align-top'>
 						<h3 className='font-weight-bold'>
 							{elem.title}
diff --git a/src/client/ImagesWithDescription.tsx b/src/client/ImagesWithDescription.tsx
index 90cf0db..35bcbb8 100644
--- a/src/client/ImagesWithDescription.tsx
+++ b/src/client/ImagesWithDescription.tsx
@@ -17,7 +17,8 @@ export default function ImagesWithDescription(
 	{images}: imagesWithDescriptionProps) {
 	return (
 		<React.Fragment>
-			<div className='container w-50 py-5 d-flex justify-content-between'>
+			<div className='container
+				py-5 d-flex flex-wrap justify-content-between'>
 				{images.map((elem, index) =>
 					<div
 						key={index}
diff --git a/src/client/Navbar.tsx b/src/client/Navbar.tsx
index e210d88..4a5a622 100644
--- a/src/client/Navbar.tsx
+++ b/src/client/Navbar.tsx
@@ -17,7 +17,8 @@ interface NavbarProps {
 export default function Navbar({setStatus, main, sub}: NavbarProps) {
 	return (
 		<React.Fragment>
-			<div className='navbar navbar-expand-lg navbar-light'>
+			<div className='navbar fixed-top
+				navbar-expand-lg navbar-light bg-light'>
 				<div
 					className='container'
 					id='navbar'>
diff --git a/src/client/Quote.tsx b/src/client/Quote.tsx
index 2dcdb60..a0a68a2 100644
--- a/src/client/Quote.tsx
+++ b/src/client/Quote.tsx
@@ -22,12 +22,12 @@ export default function Quote(
 				style={containerStyle}>
 				<div
 					className='container
-						w-75 d-flex justify-content-center align-items-center'>
-					<blockquote className="blockquote mx-5">
+						justify-content-center align-items-center'>
+					<blockquote className="blockquote">
 						<p className="mb-0">{quote}</p>
 						<footer className="blockquote-footer">{author}</footer>
 					</blockquote>
-					<div className='lead w-25 mx-5'>{description}</div>
+					<div className='lead'>{description}</div>
 				</div>
 			</div>
 		</React.Fragment>