From: Louis Jeckel <louis.jeckel@outlook.cm>
Date: Wed, 30 Sep 2020 14:58:33 +0000 (+0200)
Subject: new design
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=0e5e07ea49c84bb0d33ea3b85d6449aba34f5b24;p=psq.git

new design
---

diff --git a/app/Http/Controllers/Auth/LoginController.php b/app/Http/Controllers/Auth/LoginController.php
index 4852e93..c1e608c 100644
--- a/app/Http/Controllers/Auth/LoginController.php
+++ b/app/Http/Controllers/Auth/LoginController.php
@@ -47,4 +47,10 @@ class LoginController extends Controller
     {
         $this->middleware('guest')->except('logout');
     }
+
+    public function showLoginForm()
+    {
+        \View::share('hideFooter', true);
+        return view('auth.login');
+    }
 }
diff --git a/app/Http/Controllers/FileController.php b/app/Http/Controllers/FileController.php
index 276b09f..c5cdc60 100644
--- a/app/Http/Controllers/FileController.php
+++ b/app/Http/Controllers/FileController.php
@@ -23,7 +23,8 @@ class FileController extends Controller
         if(\Auth::check() && \Auth::user()->hasValidSubscription()) {
             return view('layouts.vue', [
                 'extends' => 'layouts.app',
-                'component' => 'file-instant-search'
+                'component' => 'file-instant-search',
+                'class' => 'psq-archives'
             ]);
         } else {
             return abort(403, 'Vous devez avoir un abonnement actif pour accéder aux archives.');
diff --git a/app/PdfFile.php b/app/PdfFile.php
index 616ce34..d03f764 100644
--- a/app/PdfFile.php
+++ b/app/PdfFile.php
@@ -441,6 +441,7 @@ class PdfFile extends TwillModel implements Sortable
 
         Storage::disk('public')->makeDirectory('covers');
         $pdf = new PdfToImage\Pdf($this->absolutePdfPath);
+
         $pdf->setResolution(100)
             ->setColorspace(\Imagick::COLORSPACE_SRGB)
             ->saveImage($tmp);
diff --git a/public/admin/js/admin.js b/public/admin/js/admin.js
index 10dd47f..b0576e6 100644
--- a/public/admin/js/admin.js
+++ b/public/admin/js/admin.js
@@ -2460,6 +2460,7 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
   mixins: [_mixins_SearchMixin__WEBPACK_IMPORTED_MODULE_0__["default"]],
@@ -50938,6 +50939,8 @@ var render = function() {
   return _c(
     "div",
     [
+      _c("h1", [_vm._v("Les archives de P.S.Q.")]),
+      _vm._v(" "),
       _c(
         "ais-instant-search",
         {
diff --git a/public/css/app.css b/public/css/app.css
index 2b5b6f9..17c2f99 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -7425,7 +7425,7 @@ button.bg-dark:focus {
   }
 
   .d-lg-block,
-  nav p {
+  nav > ul p {
     display: block !important;
   }
 
@@ -9586,8 +9586,7 @@ button.bg-dark:focus {
   }
 
   .pr-md-3,
-  .px-md-3,
-  nav > div {
+  .px-md-3 {
     padding-right: 1rem !important;
   }
 
@@ -9597,8 +9596,7 @@ button.bg-dark:focus {
   }
 
   .pl-md-3,
-  .px-md-3,
-  nav > div {
+  .px-md-3 {
     padding-left: 1rem !important;
   }
 
@@ -11136,98 +11134,111 @@ mark.mark {
   font-weight: 500;
 }
 
+.logo-blue {
+  color: #044e9c;
+}
+
+.highlight-logo-blue {
+  color: white;
+  background-color: #044e9c;
+}
+
+.border-logo-blue {
+  border: 1px solid #044e9c;
+}
+
 .blue {
-  color: #074e9c;
+  color: #278cd7;
 }
 
 .highlight-blue,
 .btn-back,
 .btn-big {
   color: white;
-  background-color: #074e9c;
+  background-color: #278cd7;
 }
 
 .border-blue {
-  border: 1px solid #074e9c;
+  border: 1px solid #278cd7;
 }
 
 .purple {
-  color: #AD5ED3;
+  color: #9a36c8;
 }
 
 .highlight-purple {
   color: white;
-  background-color: #AD5ED3;
+  background-color: #9a36c8;
 }
 
 .border-purple {
-  border: 1px solid #AD5ED3;
+  border: 1px solid #9a36c8;
 }
 
 .red {
-  color: #d04d4a;
+  color: #cb3239;
 }
 
 .highlight-red,
 h1 {
   color: white;
-  background-color: #d04d4a;
+  background-color: #cb3239;
 }
 
 .border-red {
-  border: 1px solid #d04d4a;
+  border: 1px solid #cb3239;
 }
 
 .cyan {
-  color: #288ed7;
+  color: #14c7eb;
 }
 
 .highlight-cyan {
   color: white;
-  background-color: #288ed7;
+  background-color: #14c7eb;
 }
 
 .border-cyan {
-  border: 1px solid #288ed7;
+  border: 1px solid #14c7eb;
 }
 
 .magenta {
-  color: #ce317c;
+  color: #cc33a0;
 }
 
 .highlight-magenta {
   color: white;
-  background-color: #ce317c;
+  background-color: #cc33a0;
 }
 
 .border-magenta {
-  border: 1px solid #ce317c;
+  border: 1px solid #cc33a0;
 }
 
 .orange {
-  color: #e79817;
+  color: #e79b17;
 }
 
 .highlight-orange {
   color: white;
-  background-color: #e79817;
+  background-color: #e79b17;
 }
 
 .border-orange {
-  border: 1px solid #e79817;
+  border: 1px solid #e79b17;
 }
 
 .grey {
-  color: #546983;
+  color: #546883;
 }
 
 .highlight-grey {
   color: white;
-  background-color: #546983;
+  background-color: #546883;
 }
 
 .border-grey {
-  border: 1px solid #546983;
+  border: 1px solid #546883;
 }
 
 .denim {
@@ -11244,16 +11255,29 @@ h1 {
 }
 
 .green {
-  color: #41BD53;
+  color: #739b6c;
 }
 
 .highlight-green {
   color: white;
-  background-color: #41BD53;
+  background-color: #739b6c;
 }
 
 .border-green {
-  border: 1px solid #41BD53;
+  border: 1px solid #739b6c;
+}
+
+.gold {
+  color: #bbb541;
+}
+
+.highlight-gold {
+  color: white;
+  background-color: #bbb541;
+}
+
+.border-gold {
+  border: 1px solid #bbb541;
 }
 
 .mag-blue {
@@ -11271,11 +11295,11 @@ h1 {
 
 .psq-actu h1 {
   color: white;
-  background-color: #d04d4a;
+  background-color: #cb3239;
 }
 
 .psq-actu .pill-box > div {
-  border: 1px solid #d04d4a;
+  border: 1px solid #cb3239;
 }
 
 .psq-actu .box,
@@ -11284,13 +11308,28 @@ div.pill-box .psq-actu div {
   border-radius: 5px;
 }
 
+.psq-labos h1 {
+  color: white;
+  background-color: #9a36c8;
+}
+
+.psq-labos .pill-box > div {
+  border: 1px solid #9a36c8;
+}
+
+.psq-labos .box,
+.psq-labos div.pill-box div,
+div.pill-box .psq-labos div {
+  border-radius: 5px;
+}
+
 .psq-com-campaign h1 {
   color: white;
-  background-color: #AD5ED3;
+  background-color: #278cd7;
 }
 
 .psq-com-campaign .pill-box > div {
-  border: 1px solid #AD5ED3;
+  border: 1px solid #278cd7;
 }
 
 .psq-com-campaign .box,
@@ -11301,11 +11340,11 @@ div.pill-box .psq-com-campaign div {
 
 .psq-plus h1 {
   color: white;
-  background-color: #41BD53;
+  background-color: #e79b17;
 }
 
 .psq-plus .pill-box > div {
-  border: 1px solid #41BD53;
+  border: 1px solid #e79b17;
 }
 
 .psq-plus .box,
@@ -11314,58 +11353,58 @@ div.pill-box .psq-plus div {
   border-radius: 5px;
 }
 
-.psq-mag h1 {
+.psq-podcasts h1 {
   color: white;
-  background-color: #ce317c;
+  background-color: #bbb541;
 }
 
-.psq-mag .pill-box > div {
-  border: 1px solid #ce317c;
+.psq-podcasts .pill-box > div {
+  border: 1px solid #bbb541;
 }
 
-.psq-mag .box,
-.psq-mag div.pill-box div,
-div.pill-box .psq-mag div {
+.psq-podcasts .box,
+.psq-podcasts div.pill-box div,
+div.pill-box .psq-podcasts div {
   border-radius: 5px;
 }
 
-.psq-podcasts h1 {
+.psq-archives h1 {
   color: white;
-  background-color: #288ed7;
+  background-color: #14c7eb;
 }
 
-.psq-podcasts .pill-box > div {
-  border: 1px solid #288ed7;
+.psq-archives .pill-box > div {
+  border: 1px solid #14c7eb;
 }
 
-.psq-podcasts .box,
-.psq-podcasts div.pill-box div,
-div.pill-box .psq-podcasts div {
+.psq-archives .box,
+.psq-archives div.pill-box div,
+div.pill-box .psq-archives div {
   border-radius: 5px;
 }
 
-.psq-labos h1 {
+.psq-mag h1 {
   color: white;
-  background-color: #546983;
+  background-color: #cc33a0;
 }
 
-.psq-labos .pill-box > div {
-  border: 1px solid #546983;
+.psq-mag .pill-box > div {
+  border: 1px solid #cc33a0;
 }
 
-.psq-labos .box,
-.psq-labos div.pill-box div,
-div.pill-box .psq-labos div {
+.psq-mag .box,
+.psq-mag div.pill-box div,
+div.pill-box .psq-mag div {
   border-radius: 5px;
 }
 
 .psq-not-registered h1 {
   color: white;
-  background-color: #e79817;
+  background-color: #739b6c;
 }
 
 .psq-not-registered .pill-box > div {
-  border: 1px solid #e79817;
+  border: 1px solid #739b6c;
 }
 
 .psq-not-registered .box,
@@ -11389,25 +11428,35 @@ div.pill-box .psq-login-logout div {
   border-radius: 5px;
 }
 
-nav {
+nav > ul {
   margin-bottom: 0.5rem;
   display: flex;
   justify-content: space-around;
+  align-items: flex-end;
+  padding-left: 0;
+  flex-wrap: wrap;
 }
 
-nav > div {
+nav > ul > li {
+  list-style-type: none;
   flex: 1 1 0;
   text-align: center;
-  padding: 5px;
-  width: 0;
 }
 
-nav img {
+@media (max-width: 576px) {
+  nav > ul > li {
+    flex: 25% 1 0;
+    padding: 0 10px;
+  }
+}
+
+nav > ul img {
   max-width: 100px;
   margin-bottom: 1rem;
+  width: 100%;
 }
 
-nav p {
+nav > ul p {
   display: none;
   font-size: small;
   font-weight: 500;
@@ -11416,22 +11465,42 @@ nav p {
   word-break: break-word;
 }
 
-nav .pill-bigger {
-  flex-grow: 1.25;
+@supports not (-ms-high-contrast: none) {
+  nav > ul .pill-bigger {
+    flex-grow: 1.25;
+  }
 }
 
-nav .pill-bigger img {
+nav > ul .pill-bigger img {
   max-width: 125px;
 }
 
-nav .pill-smaller {
+nav > ul .pill-smaller {
   flex-grow: 1;
 }
 
-nav .pill-smaller img {
+nav > ul .pill-smaller img {
   max-width: 50px;
 }
 
+footer {
+  padding-top: 25px;
+  height: 80px;
+  background-color: #ecf5ff;
+}
+
+footer p.img-link {
+  text-align: right;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+footer p.img-link img {
+  width: 50px;
+  display: inline-block;
+  margin-right: 1rem;
+}
+
 h1 {
   text-transform: uppercase;
   margin: auto auto 1rem;
@@ -11445,7 +11514,7 @@ h2 {
   font-weight: 500;
   font-size: large;
   text-transform: uppercase;
-  color: #074e9c;
+  color: #044e9c;
 }
 
 h2.bold {
@@ -11455,7 +11524,7 @@ h2.bold {
 
 h3 {
   font-size: medium;
-  color: #074e9c;
+  color: #044e9c;
 }
 
 h4 {
@@ -11505,7 +11574,7 @@ div.cover .cover-title img {
 
 div.cover .cover-title p {
   text-transform: uppercase;
-  color: #074e9c;
+  color: #044e9c;
   background-color: #cddceb;
   text-align: center;
   font-weight: 900;
@@ -11538,7 +11607,7 @@ div.pill-box div {
 div.pill-box div h2 {
   padding: 2px 10px 1px 50px;
   margin: 0 -6px 10px;
-  background-color: #074e9c;
+  background-color: #044e9c;
   color: white;
   text-align: center;
   width: -webkit-fit-content;
@@ -11558,7 +11627,7 @@ ul.leaders {
   padding: 0;
   overflow-x: hidden;
   list-style: none;
-  color: #074e9c;
+  color: #044e9c;
 }
 
 ul.leaders li:after {
@@ -11603,7 +11672,7 @@ div.youtube-block iframe {
 .poll .form-group > label {
   font-size: larger;
   font-weight: 500;
-  color: #074e9c;
+  color: #044e9c;
 }
 
 article .ck-content h2,
@@ -11699,7 +11768,11 @@ article article .chapo,
 }
 
 body {
-  margin-bottom: 4rem;
+  margin-bottom: 0 !important;
+}
+
+main {
+  min-height: calc(100vh - 360px);
 }
 
 @media print {
@@ -11724,7 +11797,7 @@ div.pill-box div {
 }
 
 a {
-  color: #074e9c !important;
+  color: #044e9c !important;
 }
 
 .click-here,
diff --git a/public/images/cover-bg.png b/public/images/cover-bg.png
deleted file mode 100644
index ece1e07..0000000
Binary files a/public/images/cover-bg.png and /dev/null differ
diff --git a/public/img/nav-v2/1-actu.png b/public/img/nav-v2/1-actu.png
new file mode 100644
index 0000000..2f55821
Binary files /dev/null and b/public/img/nav-v2/1-actu.png differ
diff --git a/public/img/nav-v2/10-logout.png b/public/img/nav-v2/10-logout.png
new file mode 100644
index 0000000..00f2a14
Binary files /dev/null and b/public/img/nav-v2/10-logout.png differ
diff --git a/public/img/nav-v2/2-labos.png b/public/img/nav-v2/2-labos.png
new file mode 100644
index 0000000..b070fcb
Binary files /dev/null and b/public/img/nav-v2/2-labos.png differ
diff --git a/public/img/nav-v2/3-com.png b/public/img/nav-v2/3-com.png
new file mode 100644
index 0000000..2d9fcff
Binary files /dev/null and b/public/img/nav-v2/3-com.png differ
diff --git a/public/img/nav-v2/4-en-plus.png b/public/img/nav-v2/4-en-plus.png
new file mode 100644
index 0000000..4a27b3d
Binary files /dev/null and b/public/img/nav-v2/4-en-plus.png differ
diff --git a/public/img/nav-v2/5-onair.png b/public/img/nav-v2/5-onair.png
new file mode 100644
index 0000000..5a8bfb7
Binary files /dev/null and b/public/img/nav-v2/5-onair.png differ
diff --git a/public/img/nav-v2/6-ex.png b/public/img/nav-v2/6-ex.png
new file mode 100644
index 0000000..2457866
Binary files /dev/null and b/public/img/nav-v2/6-ex.png differ
diff --git a/public/img/nav-v2/7-mag.png b/public/img/nav-v2/7-mag.png
new file mode 100644
index 0000000..c6a3686
Binary files /dev/null and b/public/img/nav-v2/7-mag.png differ
diff --git a/public/img/nav-v2/8-nous-lire.png b/public/img/nav-v2/8-nous-lire.png
new file mode 100644
index 0000000..2cd08f5
Binary files /dev/null and b/public/img/nav-v2/8-nous-lire.png differ
diff --git a/public/img/nav-v2/9-login.png b/public/img/nav-v2/9-login.png
new file mode 100644
index 0000000..e415e07
Binary files /dev/null and b/public/img/nav-v2/9-login.png differ
diff --git a/public/js/app.js b/public/js/app.js
index d52c62d..bcdc55f 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -7655,6 +7655,7 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
   mixins: [_mixins_SearchMixin__WEBPACK_IMPORTED_MODULE_0__["default"]],
@@ -80474,6 +80475,8 @@ var render = function() {
   return _c(
     "div",
     [
+      _c("h1", [_vm._v("Les archives de P.S.Q.")]),
+      _vm._v(" "),
       _c(
         "ais-instant-search",
         {
diff --git a/resources/js/components/FileSearch/FileInstantSearch.vue b/resources/js/components/FileSearch/FileInstantSearch.vue
index 0bbf69a..31a23c4 100644
--- a/resources/js/components/FileSearch/FileInstantSearch.vue
+++ b/resources/js/components/FileSearch/FileInstantSearch.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        <h1>Les archives de P.S.Q.</h1>
 
         <ais-instant-search
             :search-client="searchClient"
diff --git a/resources/sass/_colors.scss b/resources/sass/_colors.scss
index 3fcdeb9..1241c2d 100644
--- a/resources/sass/_colors.scss
+++ b/resources/sass/_colors.scss
@@ -1,20 +1,23 @@
 
 // PSQ COLORS
-$psq_red: #d04d4a;
-$psq_blue: #074e9c;
+$psq_red: #cb3239;
+$psq_purple: #9a36c8;
+$psq_blue: #278cd7;
+//$psq_blue: #044e9c;
+$psq_logo_blue: #044e9c;
+$psq_orange: #e79b17;
+$psq_gold: #bbb541;
+$psq_cyan: #14c7eb;
+$psq_magenta: #cc33a0;
+$psq_green: #739b6c;
+$psq_grey: #546883;
 $psq_light_blue: #cddceb;
-$psq_purple: #AD5ED3;
-$psq_cyan: #288ed7;
-$psq_magenta: #ce317c;
-$psq_orange: #e79817;
-$psq_grey: #546983;
 $psq_denim: #0c2c50;
-$psq_green: #41BD53;
 $psq_mag_blue: #2a6ba3;
 
 
 // BOOTSTRAP VARS
-$blue: $psq_blue;
+$blue: $psq_logo_blue;
 $red: $psq_red;
 
 $enable-shadows: true;
@@ -23,6 +26,7 @@ $enable-shadows: true;
 //CLASS HELPERS
 
 $psq_colors: (
+    "logo-blue" : $psq_logo_blue,
     "blue" : $psq_blue,
     "purple" : $psq_purple,
     "red" : $psq_red,
@@ -32,17 +36,19 @@ $psq_colors: (
     "grey" : $psq_grey,
     "denim" : $psq_denim,
     "green" : $psq_green,
+    "gold" : $psq_gold,
     "mag-blue" : $psq_mag_blue,
 );
 
 $psq_pages: (
     "psq-actu" : $psq_red,
-    "psq-com-campaign" : $psq_purple,
-    "psq-plus" : $psq_green,
+    "psq-labos" : $psq_purple,
+    "psq-com-campaign" : $psq_blue,
+    "psq-plus" : $psq_orange,
+    "psq-podcasts" : $psq_gold,
+    "psq-archives" : $psq_cyan,
     "psq-mag" : $psq_magenta,
-    "psq-podcasts" : $psq_cyan,
-    "psq-labos" : $psq_grey,
-    "psq-not-registered" : $psq_orange,
+    "psq-not-registered" : $psq_green,
     "psq-login-logout" : $psq_denim,
 );
 
@@ -58,6 +64,7 @@ $psq_pages: (
     .border-#{$name} {
         border: 1px solid $color;
     }
+
 }
 
 
@@ -68,6 +75,8 @@ $psq_pages: (
             background-color: $color;
         }
         .pill-box > div {
+            //background-color: rgba($color, 0.08) !important;
+
             border: 1px solid $color;
         }
 
diff --git a/resources/sass/_covers.scss b/resources/sass/_covers.scss
index 35443b3..b3c52b9 100644
--- a/resources/sass/_covers.scss
+++ b/resources/sass/_covers.scss
@@ -46,7 +46,7 @@ div.cover {
 
         p {
             text-transform: uppercase;
-            color: $psq_blue;
+            color: $psq_logo_blue;
             background-color: $psq_light_blue;
             text-align: center;
             font-weight: 900;
diff --git a/resources/sass/_footer.scss b/resources/sass/_footer.scss
new file mode 100644
index 0000000..05cf946
--- /dev/null
+++ b/resources/sass/_footer.scss
@@ -0,0 +1,17 @@
+
+footer {
+    padding-top: 25px;
+    height: 80px;
+    background-color: #ecf5ff;
+
+    p.img-link {
+        text-align: right;
+        font-weight: bold;
+        text-transform: uppercase;
+        img {
+            width: 50px;
+            display: inline-block;
+            margin-right: 1rem;
+        }
+    }
+}
diff --git a/resources/sass/_headers.scss b/resources/sass/_headers.scss
index 2aaae0f..29c79f2 100644
--- a/resources/sass/_headers.scss
+++ b/resources/sass/_headers.scss
@@ -14,7 +14,7 @@ h2 {
     font-weight: 500;
     font-size: large;
     text-transform: uppercase;
-    color: $psq_blue;
+    color: $psq_logo_blue;
 }
 
 h2.bold {
@@ -24,7 +24,7 @@ h2.bold {
 
 h3 {
     font-size: medium;
-    color: $psq_blue;
+    color: $psq_logo_blue;
 }
 
 h4 {
diff --git a/resources/sass/_nav.scss b/resources/sass/_nav.scss
index 063cd6a..5cb054e 100644
--- a/resources/sass/_nav.scss
+++ b/resources/sass/_nav.scss
@@ -1,21 +1,33 @@
 $pill-max-width: 100px;
 
-nav {
+nav > ul {
     margin-bottom: .5rem;
     display: flex;
     justify-content: space-around;
+    align-items: flex-end;
+    padding-left: 0;
+    flex-wrap: wrap;
+    > li {
+        //@extend .px-md-3;
+        list-style-type: none;
 
-    > div {
-        @extend .px-md-3;
         flex: 1 1 0;
         text-align: center;
-        padding: 5px;
-        width: 0;
+        //padding: 5px;
+        //width: 0;
+
+        @media (max-width: 576px) {
+            flex: 25% 1 0;
+            padding: 0 10px;
+
+        }
+
     }
 
     img {
         max-width: $pill-max-width;
         margin-bottom: 1rem;
+        width: 100%;
     }
 
     p {
@@ -29,8 +41,9 @@ nav {
     }
 
     .pill-bigger {
-        flex-grow: 1.25;
-
+        @supports not (-ms-high-contrast: none) {
+            flex-grow: 1.25;
+        }
         img {
             max-width: $pill-max-width * 1.25;
         }
diff --git a/resources/sass/_pill_boxes.scss b/resources/sass/_pill_boxes.scss
index 7130d3e..d6e5faf 100644
--- a/resources/sass/_pill_boxes.scss
+++ b/resources/sass/_pill_boxes.scss
@@ -23,7 +23,7 @@ div.pill-box {
         h2 {
             padding: 2px 10px 1px 50px;
             margin: 0 -6px 10px;
-            background-color: $psq_blue;
+            background-color: $psq_logo_blue;
             color: white;
             text-align: center;
             width: fit-content;
diff --git a/resources/sass/_polls.scss b/resources/sass/_polls.scss
index 0173214..b12c082 100644
--- a/resources/sass/_polls.scss
+++ b/resources/sass/_polls.scss
@@ -6,7 +6,7 @@
         > label {
             font-size: larger;
             font-weight: 500;
-            color: $psq_blue;
+            color: $psq_logo_blue;
         }
 
         margin-bottom: 2rem;
diff --git a/resources/sass/_title_dots.scss b/resources/sass/_title_dots.scss
index 17938be..d847e1f 100644
--- a/resources/sass/_title_dots.scss
+++ b/resources/sass/_title_dots.scss
@@ -3,7 +3,7 @@ ul.leaders {
     padding: 0;
     overflow-x: hidden;
     list-style: none;
-    color: $psq_blue;
+    color: $psq_logo_blue;
 
     li:after {
         float: left;
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 331f476..e8817b6 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -6,6 +6,7 @@
 @import "fonts";
 @import "colors";
 @import "nav";
+@import "footer";
 @import "headers";
 @import "covers";
 @import "pill_boxes";
@@ -15,7 +16,11 @@
 @import "articles";
 
 body {
-    margin-bottom: 4rem;
+    margin-bottom: 0 !important;
+}
+
+main {
+        min-height: calc(100vh - 360px);
 }
 
 @media print {
@@ -44,7 +49,7 @@ body {
 }
 
 a {
-    color: $psq_blue !important;
+    color: $psq_logo_blue !important;
     //text-transform: uppercase;
 
 }
diff --git a/resources/views/components/nav.blade.php b/resources/views/components/nav.blade.php
deleted file mode 100644
index 9a22cc0..0000000
--- a/resources/views/components/nav.blade.php
+++ /dev/null
@@ -1,85 +0,0 @@
-<nav class="container">
-    <div>
-        <a href="/">
-            <img src="{{asset('img/nav/1-lactu.svg')}}" alt="Pill Icon">
-            <p>à la une de notre quotidien</p>
-        </a>
-    </div>
-    <div>
-        <a href="{{action('AdCampaignController@index')}}">
-            <img src="{{asset('img/nav/2-lacom.svg')}}" alt="Pill Icon">
-            <p>Campagnes<br>& Com santé</p>
-        </a>
-    </div>
-
-    <div>
-        <a href="{{route('humeur-agenda.index')}}">
-            <img src="{{asset('img/nav/3-enplus.svg')}}" alt="Pill Icon">
-            <p>Agenda<br> & Humeur</p>
-        </a>
-    </div>
-
-    <div>
-        <a href="{{route('mag.index')}}">
-            <img src="{{asset('img/nav/4-lemag.svg')}}" alt="Pill Icon">
-            <p>Le Magazine</p>
-        </a>
-    </div>
-
-    <div>
-        <a href="{{action('PodcastController@index')}}">
-            <img src="{{asset('img/nav/5-onair.svg')}}" alt="Pill Icon">
-            <p>Podcast de la com santé</p>
-        </a>
-    </div>
-
-    <div>
-        <a href="{{action('ActuLabosController@index')}}">
-            <img src="{{asset('img/nav/6-leslabos.svg')}}" alt="Pill Icon">
-            <p>L'actu des laboratoires</p>
-        </a>
-    </div>
-
-
-
-    @guest
-        <div>
-            <a class="" href="{{ action('Auth\NotRegisteredYet@index') }}">
-                <img src="{{asset('img/nav/7-pasabonne.svg')}}" alt="Pill Icon">
-                <p>
-                    COMMENT VOUS ABONNER
-                </p>
-            </a>
-        </div>
-
-        <div>
-            <a class="" href="{{ route('login') }}">
-                <img src="{{asset('img/nav/8-login.svg')}}" alt="Pill Icon">
-                <p>
-                    {{ __('Login') }}
-                </p>
-            </a>
-        </div>
-
-
-    @else
-        <div>
-            <a class="" href="{{ route('logout') }}"
-               onclick="event.preventDefault();
-                                         document.getElementById('logout-form').submit();">
-                <img src="{{asset('img/nav/8-logout.svg')}}" alt="Pill Icon">
-                <p>
-                    {{ __('Logout') }}
-                </p>
-            </a>
-
-            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
-                @csrf
-            </form>
-        </div>
-
-    @endguest
-
-
-
-</nav>
diff --git a/resources/views/errors/403.blade.php b/resources/views/errors/403.blade.php
index 6cc9250..634f70d 100644
--- a/resources/views/errors/403.blade.php
+++ b/resources/views/errors/403.blade.php
@@ -8,7 +8,7 @@
 
     @guest
         <p class="denim">Si vous possédez un compte, <a href="{{route('login', ['redirect_to' => request()->getUri()])}}">cliquez ici pour vous connecter</a></p>
-        <p class="orange">Sinon, <a href="{{route('not-registered')}}">cliquez ici pour découvrir nos formules d'abonnement !</a></p>
+        <p class="green">Sinon, <a href="{{route('not-registered')}}">cliquez ici pour découvrir nos formules d'abonnement !</a></p>
     @endguest
     @auth
         @if(\Auth::user()->onTrial() || \Auth::user()->isOnDiscoverUser())
diff --git a/resources/views/file/show.blade.php b/resources/views/file/show.blade.php
index 6e2ba41..6d2f4b1 100644
--- a/resources/views/file/show.blade.php
+++ b/resources/views/file/show.blade.php
@@ -7,7 +7,7 @@
 
     @endcan
 
-    <div class="container psq-mag">
+    <div class="container psq-actu">
 
 
         <h1>{{$file->isLast() ? "L'édition du jour" : $file->title}}</h1>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index fbed49b..39b4481 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -66,17 +66,18 @@
                 <img src="{{ asset('img/logo_top.svg') }}" class="header-logo" alt="">
             </a>
 
-           @include('components.nav')
-
-
-
-
+           @include('partials.nav')
 
         @endif
 
         <main class="py-2">
             @yield('content')
         </main>
+
+        @if(!isset($hideFooter))
+            @include('partials.footer')
+        @endif
+
     </div>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php
new file mode 100644
index 0000000..374731f
--- /dev/null
+++ b/resources/views/partials/footer.blade.php
@@ -0,0 +1,32 @@
+<footer class="container-fluid">
+    <div class="row">
+        <div class="col-sm-6"></div>
+        <div class="col-sm-6">
+            <div>
+
+                @guest
+                    <a href="{{route('login')}}">
+                        <p class="img-link">
+                            <img src="{{asset('img/nav-v2/9-login.png')}}" alt="Pill Icon">  Se connecter
+                        </p>
+                    </a>
+                @else
+
+                    <a href="{{ route('logout') }}"
+                       onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
+                        <p class="img-link">
+                        <img src="{{asset('img/nav-v2/10-logout.png')}}" alt="Pill Icon">
+                            {{ __('Logout') }}
+                        </p>
+                    </a>
+
+                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+                        @csrf
+                    </form>
+                @endguest
+
+            </div>
+        </div>
+    </div>
+
+</footer>
diff --git a/resources/views/partials/nav.blade.php b/resources/views/partials/nav.blade.php
new file mode 100644
index 0000000..7fb8a9a
--- /dev/null
+++ b/resources/views/partials/nav.blade.php
@@ -0,0 +1,96 @@
+<nav class="container">
+<ul>
+    <li>
+        <a href="/">
+            <img src="{{asset('img/nav-v2/1-actu.png')}}" alt="Pill Icon">
+            <p>à la une de<br>P.S.Q.</p>
+        </a>
+    </li>
+    <li>
+        <a href="{{action('ActuLabosController@index')}}">
+            <img src="{{asset('img/nav-v2/2-labos.png')}}" alt="Pill Icon">
+            <p>L'actu des<br>labos</p>
+        </a>
+    </li>
+    <li>
+        <a href="{{action('AdCampaignController@index')}}">
+            <img src="{{asset('img/nav-v2/3-com.png')}}" alt="Pill Icon">
+            <p>Le marketing<br>& &laquo;la com&raquo;</p>
+        </a>
+    </li>
+
+    <li>
+        <a href="{{route('humeur-agenda.index')}}">
+            <img src="{{asset('img/nav-v2/4-en-plus.png')}}" alt="Pill Icon">
+            <p>Humeur<br> & Agenda</p>
+        </a>
+    </li>
+
+    <li>
+        <a href="{{action('PodcastController@index')}}">
+            <img src="{{asset('img/nav-v2/5-onair.png')}}" alt="Pill Icon">
+            <p>Podcast de la<br>com santé</p>
+        </a>
+    </li>
+
+    <li>
+        <a href="{{route('archives')}}">
+            <img src="{{asset('img/nav-v2/6-ex.png')}}" alt="Pill Icon">
+            <p>les archives<br>de p.s.q</p>
+        </a>
+    </li>
+
+
+    <li>
+        <a href="{{route('mag.index')}}">
+            <img src="{{asset('img/nav-v2/7-mag.png')}}" alt="Pill Icon">
+            <p>Notre<br>trimestriel</p>
+        </a>
+    </li>
+
+
+    <li class="pill-bigger">
+        <a class="" href="{{ action('Auth\NotRegisteredYet@index') }}">
+            <img src="{{asset('img/nav-v2/8-nous-lire.png')}}" alt="Pill Icon">
+            <p>
+                COMMENT VOUS ABONNER
+            </p>
+        </a>
+    </li>
+</ul>
+
+
+
+{{--    @guest--}}
+
+{{--        <li>--}}
+{{--            <a class="" href="{{ route('login') }}">--}}
+{{--                <img src="{{asset('img/nav/8-login.png')}}" alt="Pill Icon">--}}
+{{--                <p>--}}
+{{--                    {{ __('Login') }}--}}
+{{--                </p>--}}
+{{--            </a>--}}
+{{--        </li>--}}
+
+
+{{--    @else--}}
+{{--        <li>--}}
+{{--            <a class="" href="{{ route('logout') }}"--}}
+{{--               onclick="event.preventDefault();--}}
+{{--                                         document.getElementById('logout-form').submit();">--}}
+{{--                <img src="{{asset('img/nav/8-logout.svg')}}" alt="Pill Icon">--}}
+{{--                <p>--}}
+{{--                    {{ __('Logout') }}--}}
+{{--                </p>--}}
+{{--            </a>--}}
+
+{{--            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">--}}
+{{--                @csrf--}}
+{{--            </form>--}}
+{{--        </li>--}}
+
+{{--    @endguest--}}
+
+
+
+</nav>
diff --git a/resources/views/podcasts/temp.blade.php b/resources/views/podcasts/temp.blade.php
index 73c42e2..1396ef7 100644
--- a/resources/views/podcasts/temp.blade.php
+++ b/resources/views/podcasts/temp.blade.php
@@ -2,7 +2,7 @@
 
 @section('content')
 
-    <div class="container">
+    <div class="container psq-podcasts">
         <h1>Revenez plus tard ! </h1>
 
         <p class="lead">Le Podcast de la communication santé sera bientôt disponible !</p>