Add Navbar and Default Layout

udaygirish · Feb 9, 2019 · ec04a1c · ec04a1c
1 parent e614954
commit ec04a1c
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 2 deletions.
diff --git a/_config.yml b/_config.yml
@@ -2,7 +2,8 @@
 title: portfolYOU
 description: >
   Lorem ipsum dolor sit amet, his eu liber nobis senserit,
-  ne option debitis adipiscing duo, has in eirmod ancillae. 
+  ne option debitis adipiscing duo, has in eirmod ancillae.
+baseurl: "/portfolYOU"
 
 # Author Info
 author:

diff --git a/_includes/head.html b/_includes/head.html
@@ -16,4 +16,7 @@
     <!-- Animate CSS CDN -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" type="text/css"/>
 
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ '/assets/css/custom.css' | relative_url }}" type="text/css">
+
 </head>
diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -0,0 +1,17 @@
+<nav class="navbar navbar-expand-lg navbar-light">
+
+    <a class="navbar-brand" href="{{ site.baseurl }}"><h3>{{ site.title }}</h3></a>
+
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+        <div class="navbar-nav ml-auto">
+            <a class="nav-item nav-link{% if page.url contains 'projects' %} active{% endif %}" href="{{ '/projects' | relative_url }}">Projects</a>
+            <a class="nav-item nav-link{% if page.url contains 'articles' %} active{% endif %}" href="{{ '/articles' | relative_url }}">Articles</a>
+            <a class="nav-item nav-link{% if page.url contains 'about' %} active{% endif %}" href="{{ '/about' | relative_url }}">About</a>
+        </div>
+    </div>
+
+</nav>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+
+{% include head.html %}
+
+<body class="container my-5">
+    {% include navbar.html %}
+    {{ content }}
+    {% include scripts.html %}
+</body>
+
+</html>
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -0,0 +1,5 @@
+.active{
+    border-bottom: 3px solid #007bff;
+    margin-top: -3px;
+    font-weight: bold;
+}
diff --git a/assets/css/custom.scss b/assets/css/custom.scss
@@ -0,0 +1,6 @@
+---
+---
+@charset "utf-8";
+
+// Import partials from `sass_dir` (defaults to `_sass`)
+@import "base";
diff --git a/index.html b/index.html
@@ -1 +1,8 @@
-portfolYOU
+---
+layout: default
+---
+
+<div class="row justify-content-center p-5 m-5">
+    <h1>{{ site.title }}</h1>
+    <p class="text-muted">{{ site.description }}</p>
+</div>
diff --git a/pages/about.html b/pages/about.html
@@ -0,0 +1,8 @@
+---
+layout: default
+permalink: /about/
+---
+
+<div class="row justify-content-center p-5 m-5">
+    <h1>About</h1>
+</div>
diff --git a/pages/articles.html b/pages/articles.html
@@ -0,0 +1,8 @@
+---
+layout: default
+permalink: /articles/
+---
+
+<div class="row justify-content-center p-5 m-5">
+    <h1>Articles</h1>
+</div>
diff --git a/pages/projects.html b/pages/projects.html
@@ -0,0 +1,8 @@
+---
+layout: default
+permalink: /projects/
+---
+
+<div class="row justify-content-center p-5 m-5">
+    <h1>Projects</h1>
+</div>