Merge pull request #53 from betagouv/landing-page-ui

Amélioration de l'UI de la landing page
betagouv · Jan 15, 2021 · 7f03534 · 7f03534
2 parents 255dd7f + 5a04e94
commit 7f03534
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 100 deletions.
diff --git a/front-end/public/Diagnostic approvisionnement (ma-cantine-alpha) v0.1.ods b/front-end/public/Diagnostic approvisionnement (ma-cantine-alpha) v0.1.ods
diff --git a/front-end/src/App.vue b/front-end/src/App.vue
@@ -1,7 +1,9 @@
 <template>
   <TheNavbar/>
 
-  <router-view/>
+  <div id="router-view">
+    <router-view/>
+  </div>
 
   <TheFooter/>
 </template>
@@ -40,4 +42,13 @@ export default {
   text-align: center;
   color: #2c3e50;
 }
+
+#router-view {
+  margin-top: 100px;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
 </style>
diff --git a/front-end/src/assets/divider-section.png b/front-end/src/assets/divider-section.png
diff --git a/front-end/src/assets/plate.png b/front-end/src/assets/plate.png
diff --git a/front-end/src/components/TheNavbar.vue b/front-end/src/components/TheNavbar.vue
@@ -1,13 +1,13 @@
 <template>
   <div id="navbar">
-    <router-link :to="{ name: 'LandingPage' }" id="landing">
+    <router-link :to="{ name: 'LandingPage' }" id="goto-landing">
       <img src="@/assets/Marianne.png" id="Marianne">
-      <div id="logo">
-        <div id="ma-cantine-beta-gouv"><span id="ma-cantine">ma-cantine</span>.beta.gouv.fr</div>
-        <div id="egalim">Pour une alimentatation saine, de qualité et plus durable dans nos assiettes grâce à EGAlim</div>
+      <div id="brand">
+        <div id="logo"><span id="ma-cantine">ma-cantine</span>.beta.gouv.fr</div>
+        <div id="slogan">Pour une alimentation saine, de qualité et plus durable dans nos assiettes grâce à EGAlim</div>
       </div>
     </router-link>
-    <router-link :to="{ name: 'KeyMeasuresPage' }" :active="isActive" class="navbar-item">Mesures phares</router-link>
+    <router-link :to="{ name: 'KeyMeasuresPage' }" class="navbar-item">Mesures phares</router-link>
     <a class="navbar-item" href="https://beta.gouv.fr/startups/egalim.html" target="_blank">
       À propos <i class="fas fa-external-link-alt"></i>
     </a>
@@ -27,30 +27,36 @@ a {
 }
 
 #navbar {
+  top: 0;
+  z-index: 1000;
+  position: fixed;
+  width: 96%;
+  padding: 10px 2%;
   display: flex;
   justify-content: space-between;
-  padding: 10px 50px;
+  border-bottom: 1px solid #E1E1E1;
+  background-color: white;
 }
 
-#landing {
+#goto-landing {
   display: flex;
 }
 
 #Marianne {
   height: 75px;
 }
 
-#logo {
+#brand {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  margin-left: 30px;
+  margin-left: 50px;
   text-align: left;
-  width: 300px;
+  max-width: 300px;
   text-decoration: none;
 }
 
-#ma-cantine-beta-gouv {
+#logo {
   font-style: italic;
   font-weight: 200;
   font-size: 25px;
@@ -60,10 +66,10 @@ a {
 
 #ma-cantine {
   font-weight: bold;
-  color: #F7B48E;
+  color: #EB5B25;
 }
 
-#egalim {
+#slogan {
   font-size: 11px;
   font-weight: 600;
   line-height: 15px;
@@ -75,14 +81,11 @@ a {
   border-radius: 25px;
   padding: 15px;
   font-size: 17px;
+  font-weight: bold;
   line-height: 20px;
   color: rgba(64, 64, 64, 0.85);
 }
 
-.navbar-item.router-link-active {
-  font-weight: 800;
-}
-
 .navbar-item:hover {
   color: white;
   background-color: #F7B48E;