[mod] update example build

example/build/index.html

@@ -5,6 +5,8 @@
   <link type="text/css" rel="stylesheet" href="static/css/fonts.css"  media="screen,projection"/>
   <link type="text/css" rel="stylesheet" href="static/css/style.css"  media="screen,projection"/>
   
+  
+
   <!--Let browser know website is optimized for mobile-->
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Example gallery</title>
@@ -15,9 +17,24 @@
   <div class="gallery-header">
       <img id="logo" src="static/img/logo.svg" />
       <h1>Example gallery</h1>
+      <h4>The subtitle</h4><hr>
+            <nav>
+        <div class="nav-wrapper">
+          <ul>
             
-      <hr>
+            
+            <li><a href=about.html class=first-item-menu>Menu 1</a></li>
+            
+            
+            
+            <li><a href=contact.html class=item-menu>Menu 2</a></li>
+            
+            </ul>
         </div>
+      </nav>
+      </div>
+
+
   
 <div class="galleries-grid">
   
@@ -42,6 +59,7 @@
 
 <p style="visibility: hidden">.</p>
 
+
   <footer>
       <p>Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
   </footer>

example/build/static/css/style-page.css

@@ -193,3 +193,7 @@ footer a {
     font-family: 'montserrat', sans-serif;
     color: #111;
 }
+
+.gallery-header {
+    margin-bottom: 0;
+}

example/build/static/css/style.css

@@ -5,6 +5,10 @@ body {
     margin: 0;
 }
 
+a {
+    text-decoration: none;
+}
+
 .galleries-grid {
     width: 100%;
     height: 100%;
@@ -95,6 +99,10 @@ body {
     margin-bottom: 6.5em;
 }
 
+.static-header {
+    margin-bottom: 0px;
+}
+
 #logo {
     width: 10%;
 }
@@ -167,3 +175,61 @@ footer a {
     font-family: 'montserrat', sans-serif;
     color: #111;
 }
+
+nav {
+  background-color: #FBFBFB;
+  width: 100%;
+  height: 56px;
+  line-height: 56px;
+}
+
+nav .nav-wrapper {
+  position: relative;
+  height: 100%;
+  margin: 0px auto;
+  max-width: 1280px;
+}
+
+nav ul {
+  margin: 0;
+}
+
+nav ul li {
+  padding: 0;
+  list-style-type: none;
+  display:inline-block;
+}
+
+nav a.first-item-menu {
+  margin-left: -42px;
+}
+
+nav ul li.active {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+nav ul a {
+  transition: background-color .3s;
+  font-size: 1rem;
+  display: block;
+  padding: 0 15px;
+  cursor: pointer;
+  text-transform: uppercase;
+  margin: 0px;
+  letter-spacing: 1px;
+  font-weight: 700;
+  color: #424242;
+  font-style: normal !important;
+}
+
+.center, .center-align {
+  text-align: center;
+}
+
+nav ul li > a.item-menu::before {
+    content: "/";
+    margin-right: 22px;
+    font-size: 18px;
+    line-height: 1;
+    color: #ebebeb;
+}