Project modals wip.

src/dist/index.html

@@ -18,15 +18,15 @@
         <span aria-hidden="true"></span>
       </a>
     </div>
-    <div id="navbarBasicExample" class="navbar-menu">
+    <div class="navbar-menu">
       <div class="navbar-end">
         <div class="navbar-item">
-          <a href="https://github.com/mmacneil" class="icon is-large">
+          <a href="https://github.com/mmacneil" class="icon is-large has-text-light">
             <i class="fab fa-2x fa-github"></i>
           </a>
         </div>
         <div class="navbar-item">
-          <a href="https://fullstackmark.com" class="icon is-large">
+          <a href="https://fullstackmark.com" class="icon is-large has-text-light">
             <i class="fas fa-2x fa-globe"></i>
           </a>
         </div>
@@ -50,7 +50,7 @@
               Mark Macneil
             </h1>
             <h2 class="subtitle">
-              FullStack .NET Developer, Halifax, NS
+              FullStack .NET guy, Halifax, NS
             </h2>
           </div>
         </div>
@@ -126,7 +126,7 @@
                 <p class="title">Project</p>
                 <p class="subtitle">Client</p>
                 <figure class="image is-4by3">
-                  <img src="img/project-1-cover.png">
+                  <img class="modal-trigger" data-target="project-1-modal" src="img/project-1-cover.png">
                 </figure>
               </article>
             </div>
@@ -178,10 +178,10 @@
 
             <div class="tile is-parent">
               <article class="tile is-child notification">
-                <p class="title">Middle tile</p>
-                <p class="subtitle">With an image</p>
+                <p class="title">Project</p>
+                <p class="subtitle">Client</p>
                 <figure class="image is-4by3">
-                  <img src="https://bulma.io/images/placeholders/640x480.png">
+                  <img src="img/project-6-cover.png">
                 </figure>
               </article>
             </div>
@@ -191,6 +191,23 @@
     </div>
   </section>
 
+  <div id="project-1-modal" class="modal">
+      <div class="modal-background"></div>
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Modal title</p>
+          <button class="delete" aria-label="close"></button>
+        </header>
+        <section class="modal-card-body">
+          <!-- Content ... -->
+        </section>
+        <footer class="modal-card-foot">
+          <button class="button is-success">Save changes</button>
+          <button class="button">Cancel</button>
+        </footer>
+      </div>
+    </div>
+
   <!--   <h1 class="title">
         Bulma
       </h1>
@@ -219,6 +236,8 @@
         <a class="button is-primary">Primary</a>
         <a class="button is-link">Link</a>
       </div> -->
+
+      <script src="js/bundle.js"></script>
 </body>
 
 </html>