bascule en pug, install bootstrap et refonte home

.gitignore

@@ -26,3 +26,5 @@ build/Release
 # Dependency directory
 # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
 node_modules
+
+.idea/*

app.js

@@ -12,7 +12,7 @@ var app = express();
 
 // view engine setup
 app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'jade');
+app.set('view engine', 'pug');
 
 app.use(favicon());
 app.use(logger('dev'));

package.json

@@ -6,12 +6,14 @@
     "start": "nodejs ./bin/www"
   },
   "dependencies": {
-    "express": "~4.0.0",
-    "static-favicon": "~1.0.0",
-    "morgan": "~1.0.0",
-    "cookie-parser": "~1.0.1",
     "body-parser": "~1.0.0",
+    "cookie-parser": "~1.0.1",
     "debug": "~0.7.4",
-    "jade": "~1.3.0"
+    "express": "~4.0.0",
+    "morgan": "~1.0.0",
+    "npm": "^5.10.0",
+    "pug": "^2.0.3",
+    "pug-bootstrap": "0.0.15",
+    "static-favicon": "~1.0.0"
   }
-}
+}

public/stylesheets/cover.css

@@ -0,0 +1,163 @@
+/*
+ * Globals
+ */
+
+/* Links */
+a,
+a:focus,
+a:hover {
+    color: #fff;
+}
+
+/* Custom default button */
+.btn-default,
+.btn-default:hover,
+.btn-default:focus {
+    color: #333;
+    text-shadow: none; /* Prevent inheritence from `body` */
+    background-color: #fff;
+    border: 1px solid #fff;
+}
+
+
+/*
+ * Base structure
+ */
+
+html,
+body {
+    height: 100%;
+    background-color: #333;
+}
+body {
+    color: #fff;
+    text-align: center;
+    text-shadow: 0 1px 3px rgba(0,0,0,.5);
+}
+
+/* Extra markup and styles for table-esque vertical and horizontal centering */
+.site-wrapper {
+    display: table;
+    width: 100%;
+    height: 100%; /* For at least Firefox */
+    min-height: 100%;
+    -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
+    box-shadow: inset 0 0 100px rgba(0,0,0,.5);
+}
+.site-wrapper-inner {
+    display: table-cell;
+    vertical-align: top;
+}
+.cover-container {
+    margin-right: auto;
+    margin-left: auto;
+}
+
+/* Padding for spacing */
+.inner {
+    padding: 30px;
+}
+
+
+/*
+ * Header
+ */
+.masthead-brand {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.masthead-nav > li {
+    display: inline-block;
+}
+.masthead-nav > li + li {
+    margin-left: 20px;
+}
+.masthead-nav > li > a {
+    padding-right: 0;
+    padding-left: 0;
+    font-size: 16px;
+    font-weight: bold;
+    color: #fff; /* IE8 proofing */
+    color: rgba(255,255,255,.75);
+    border-bottom: 2px solid transparent;
+}
+.masthead-nav > li > a:hover,
+.masthead-nav > li > a:focus {
+    background-color: transparent;
+    border-bottom-color: #a9a9a9;
+    border-bottom-color: rgba(255,255,255,.25);
+}
+.masthead-nav > .active > a,
+.masthead-nav > .active > a:hover,
+.masthead-nav > .active > a:focus {
+    color: #fff;
+    border-bottom-color: #fff;
+}
+
+@media (min-width: 768px) {
+    .masthead-brand {
+        float: left;
+    }
+    .masthead-nav {
+        float: right;
+    }
+}
+
+
+/*
+ * Cover
+ */
+
+.cover {
+    padding: 0 20px;
+}
+.cover .btn-lg {
+    padding: 10px 20px;
+    font-weight: bold;
+}
+
+
+/*
+ * Footer
+ */
+
+.mastfoot {
+    color: #999; /* IE8 proofing */
+    color: rgba(255,255,255,.5);
+}
+
+
+/*
+ * Affix and center
+ */
+
+@media (min-width: 768px) {
+    /* Pull out the header and footer */
+    .masthead {
+        position: fixed;
+        top: 0;
+    }
+    .mastfoot {
+        position: fixed;
+        bottom: 0;
+    }
+    /* Start the vertical centering */
+    .site-wrapper-inner {
+        vertical-align: middle;
+    }
+    /* Handle the widths */
+    .masthead,
+    .mastfoot,
+    .cover-container {
+        width: 100%; /* Must be percentage or pixels for horizontal alignment */
+    }
+}
+
+@media (min-width: 992px) {
+    .masthead,
+    .mastfoot,
+    .cover-container {
+        width: 700px;
+    }
+}

public/stylesheets/style.css

@@ -1,121 +1,13 @@
-
-/****************************************
-*********** Élements généraux ***********
-****************************************/
-
 body {
-  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+    background: #333333 url(/img/fond2.png) repeat 0% 0%;
-  overflow-x: hidden;
 }
 
-a {
+/* Section home */
-  color: #00B7FF;
-}
 
-.wrap {
+.bowtie {
-  width: 90%;
+    width: 50vw;
-  max-width: 900px;
+    height: 300px;
-  margin: auto;
+    margin: auto;
-}
+    background: transparent url(/img/bowtie.png) no-repeat scroll center center;
-
+    background-size: contain;
-header .wrap,
+}
-footer .wrap {
-  max-width: 1200px;
-}
-
-
-/****************************************
-***************** Header ****************
-****************************************/
-
-header {
-  position: relative;
-}
-
-header::before {
-  content: "";
-  display: block;
-  position: absolute;
-  top: -7em;
-  left: -1em;
-  width: 2560px;
-  height: 20em;
-  min-width: 120vw;
-  background-color: #006D80;
-  border-bottom: #78A419 solid 1em;
-  transform: rotate(5deg);
-  z-index: -1;
-}
-
-/********** Logo ************/
-
-.site-name {
-  position: absolute;
-  top: 15px;
-  font-size: 3em;
-  font-family: "Delius Unicase", Verdana, sans-serif;
-  font-weight: bold;
-  letter-spacing: 0px;
-  text-transform: uppercase;
-  color: white;
-}
-
-/********** Navigation ************/
-
-header .nav {
-  width : 100%;
-  padding-top: 1em;
-}
-
-header .nav li {
-  z-index: 1;
-}
-
-header .nav a {
-  font-size: 1.1em;
-  color: white;
-  transition: all 0.2s;
-}
-
-header .nav a:hover {
-  color: #78A419;
-}
-
-
-/****************************************
-***************** Footer ****************
-****************************************/
-footer {
-  position: relative;
-  overflow: hidden;
-  width: 100vw;
-  padding-top: 9em;
-  color: white;
-}
-
-footer::before {
-  content: "";
-  display: block;
-  position: absolute;
-  bottom: -7em;
-  left: -1em;
-  width: 2560px;
-  height: 10em;
-  min-width: 120vw;
-  background-color: #006D80;
-  border-top: #78A419 solid 1em;
-  transform: rotate(5deg);
-  z-index: -1;
-}
-
-footer .wrap {
-}
-
-/****************************************
-***************** Content ***************
-****************************************/
-
-.content {
-  min-height: calc(100vh - 24.7em);
-  margin-top: 10em;
-}

views/index.jade

@@ -1,6 +0,0 @@
-extends layout
-
-block content
-  h1= title
-  p Vous avez ma page #{title} ?
-  p Elle est belle, hein ?

views/index.pug

@@ -0,0 +1,9 @@
+extends layout
+
+block content
+  .inner.cover
+    h1.cover-heading #{title}
+    |
+    div.bowtie
+    |
+    p.lead L'éthique, c'est chic

views/layout.jade

@@ -1,29 +0,0 @@
-doctype html
-html
-  head
-    title= title
-    meta(charset="utf-8")
-    meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
-    link(href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous")
-    link(href="https://fonts.googleapis.com/css?family=Delius+Unicase:700" rel="stylesheet")
-    script(src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous")
-    link(rel='stylesheet', href='/stylesheets/style.css')
-  body
-    header
-      .wrap
-        p.site-name Monnéthic
-        ul.nav.justify-content-end
-          li.nav-item
-            a.nav-link(href="/") Accueil
-          li.nav-item
-            a.nav-link(href="/about") À propos
-          li.nav-item
-            a.nav-link(href="/login") Connexion
-    
-    .content.wrap
-      block content
-    
-    footer 
-      .wrap
-        p © Monnéthic 2018
-  

views/layout.pug

@@ -0,0 +1,25 @@
+extends ../node_modules/pug-bootstrap/_bootstrap
+append styles
+    //	!-- Custom styles for this template --
+    link(href="/stylesheets/cover.css", rel="stylesheet")
+    //	!-- Styles Monnéthic --
+    link(href="/stylesheets/style.css", rel="stylesheet")
+
+block body
+    .site-wrapper
+        .site-wrapper-inner
+            .cover-container
+                .masthead.clearfix
+                    .inner
+                        h3.masthead-brand Monnéthic
+                        nav
+                            ul.nav.masthead-nav
+                                li.active
+                                    a(href="#home") Accueil
+                                li
+                                    a(href="#contact") Contact
+                block content
+
+                .mastfoot
+                    .inner
+                        p Cover template for <a href="http://getbootstrap.com">Bootstrap </a>, by <a href="https://twitter.com/mdo">@mdo</a>.