header: est maintenant responsive

src/components/header/index.jsx

@@ -5,14 +5,12 @@ import "./index.scss";
 
 const Header = () => {
 	return (
-		<div className="header">
-			<h1 className="header-title">
+		<div id="header">
+			<h1>
 				<Link to="/">CLI</Link>
 			</h1>
-			<h2 className="header-subtitle">
-				Coopérative strasbourgeoise du numérique
-			</h2>
-			<div className="container">
+			<h2>Coopérative strasbourgeoise du numérique</h2>
+			<div className="header-services">
 				<ul className="menu">
 					<li>
 						<Link to="/vos-besoins" className="menu-btn">

src/components/header/index.scss

@@ -1,55 +1,44 @@
 @import "../../scss/main.scss";
 
-.header {
+#header {
 	display: flex;
 	flex-direction: column;
+	align-items: center;
+	font-family: "Cutive Mono", "mono";
 	text-align: center;
-	margin-top: 70px;
-	margin-bottom: 30px;
-	font-family: "Cutive Mono";
-
-	.header-title {
-		margin: 0;
-		font-size: 3rem;
-		font-weight: normal;
+	h1 {
+		font-size: 5rem;
+		font-weight: 600;
+		margin: 3rem auto 1.5rem auto;
 	}
 
-	.header-subtitle {
-		margin-top: 15px;
-		margin-bottom: 70px;
+	h2 {
 		font-size: 1.7rem;
-		font-weight: normal;
+		font-weight: 600;
+		margin: 0 auto 1.5rem auto;
+	}
+
+	.header-services {
+		ul.menu {
+			list-style: none;
+
+			li {
+				margin: 0.5rem 1.2rem;
+				height: 2rem;
+				line-height: 2rem;
+				font-size: 1.5rem;
+			}
+		}
 	}
 }
-.container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
 
-	.menu {
-		margin: 0;
-		padding: 0;
-		list-style: none;
+@media (min-width: 890px) {
+	ul.menu {
 		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		min-width: 600px;
-		height: 2.5rem;
-
-		.menu-btn {
-			height: 2.5em;
-			padding: 0.5rem;
-			text-decoration: none;
-			position: relative;
-			background: white;
-			border: none;
-			z-index: auto;
-			font-family: "Cutive Mono", "sans-serif";
-			font-size: 1.2rem;
+		flex-direction: row;
 
-			&:hover {
-				cursor: pointer;
-			}
+		li {
+			margin: 0.5rem auto;
 		}
 	}
 }