Work on lots of CSS magic

_includes/flag.html

@@ -1,8 +1,6 @@
-<div class="{{include.color}} flag">
-    <div class="flagText">
-        <a href="{{include.url}}">{{include.name}}</a>
-    </div>
-        <svg width=115 height=50>
+<li class="flag"> <a href="{{include.url}}" class="{{include.color}} flagButton">
+        <span class="flagText">{{include.name}}</span>
+        <!-- <svg viewBox="0 0 115 50" preserveAspectRatio="none">
             <polygon points="0,50 100,50, 115,25, 100,0, 0,0"/>
-        </svg>
-</div>
+        </svg> -->
+</a> </li>

_includes/head.html

@@ -3,7 +3,6 @@
     <title> {% if page.title %} {{ page.title }} | {% endif %} Andrew Cassidy</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <link rel="stylesheet" href="/css/style.css" />    
-
-    <link href="https://fonts.googleapis.com/css?family=Barlow+Condensed:600|Barlow:400,700|PT+Serif&amp;subset=latin-ext"" rel="stylesheet">
+    <link rel="stylesheet" href="/css/fnoots.css"/>
+    <link rel="stylesheet" href="/css/style.css"/>    
 </head>

_includes/header.html

@@ -1,9 +1,9 @@
 <header>
-    <h1 id = "title"> Andrew Cassidy </h1>
-    <div id="sidebar">
-        {% include flag.html color="blue" name="home" url="/" %}
-        {% include flag.html color="blue" name="home" url="/" %}
-        {% include flag.html color="blue" name="home" url="/" %}
-        {% include flag.html color="blue" name="home" url="/" %}
+    <div id = "title"> 
+        <a href="/"><b>Andrew Cassidy</b></a>
+        <span class="slash">/</span>
+        <a href="/Projects">Projects</a>
+        <span class="slash">/</span>
+        FooBar
     </div>
 </header>

_includes/sidebar.html

@@ -0,0 +1,6 @@
+<ul id="sidebar">
+    {% include flag.html color="blue" name="Home" url="/" %}
+    {% include flag.html color="green" name="Blog" url="/Blog" %}
+    {% include flag.html color="orange" name="Projects" url="/Projects" %}
+    {% include flag.html color="magenta" name="About" url="/About" %}
+</ul>