Add footer

assets/sass/components/_search-form.scss

@@ -0,0 +1,36 @@
+.search-form__fieldset {
+  display: inline;
+  border: 0;
+  padding: 0;
+  position: relative;
+  line-height: 0;
+}
+
+.search-form__input {
+  background-color: darken($background-color, 5%);
+  border: 1px solid $border-color;
+  border-radius: 1em;
+  color: $text-color;
+  font-size: 0.9rem;
+  padding: 0.35em 0.75em 0.35em 2em;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: lighten($background-color-dark, 5%);
+    border: 1px solid $border-color-dark;
+    color: $text-color-dark;
+  }
+}
+
+.search-form__icon {
+  left: 0.6rem;
+  position: absolute;
+  top: 0.5rem;
+  height: 0.8rem;
+  width: 0.8rem;
+
+  fill: $text-color;
+
+  @media (prefers-color-scheme: dark) {
+    fill: $text-color-dark;
+  }
+}

assets/sass/components/_site-footer.scss

@@ -0,0 +1,5 @@
+.site-footer {
+  margin: 4rem 0 2rem;
+  padding: 0 $pad-min;
+  text-align: center;
+}

assets/sass/components/_site-header.scss

@@ -1,12 +1,5 @@
 .site-header {
   padding: 0 $pad-min;
-
-  @media (prefers-color-scheme: dark) {
-  }
-}
-
-.site-header__container {
-  @include container;
 }
 
 .site-header__home-link {

assets/sass/main.scss

@@ -34,6 +34,8 @@
 //    This is where majority of our work takes place and our UI components
 //    are often composed of Objects and Components
 @import "components/site-header";
+@import "components/site-footer";
+@import "components/search-form";
 @import "components/home";
 @import "components/posts";
 @import "components/post";

layouts/partials/footer.html

@@ -0,0 +1,15 @@
+<footer class="site-footer">
+  <div class="container">
+    <form action="https://duckduckgo.com/" method="get" class="search-form">
+      <fieldset role="search" class="search-form__fieldset">
+        <input type="hidden" name="sites" value="https://danbarber.me">
+        <input class="search-form__input" type="search" name="q" results="0"
+        placeholder="Search">
+
+        {{ partial "search.svg" . }}
+      </fieldset>
+    </form>
+
+    <p>Copyright © 2019 – Dan Barber</p>
+  </div>
+</footer>

layouts/partials/header.html

@@ -1,5 +1,5 @@
 <header class="site-header" role="banner">
-  <div class="site-header__container">
+  <div class="container">
     <h1 class="logo__wrapper">
       <a class="site-header__home-link logo__link" href="/">
         {{ partial "logo.svg" . }}

layouts/partials/search.svg

@@ -0,0 +1 @@
+<svg class="search-form__icon" enable-background="new 0 0 30.239 30.239" height="30.239" viewBox="0 0 30.239 30.239" width="30.239" xmlns="http://www.w3.org/2000/svg"><path d="m20.194 3.46c-4.613-4.613-12.121-4.613-16.734 0-4.612 4.614-4.612 12.121 0 16.735 4.108 4.107 10.506 4.547 15.116 1.34.097.459.319.897.676 1.254l6.718 6.718c.979.977 2.561.977 3.535 0 .978-.978.978-2.56 0-3.535l-6.718-6.72c-.355-.354-.794-.577-1.253-.674 3.209-4.611 2.769-11.008-1.34-15.118zm-2.121 14.614c-3.444 3.444-9.049 3.444-12.492 0-3.442-3.444-3.442-9.048 0-12.492 3.443-3.443 9.048-3.443 12.492 0 3.444 3.444 3.444 9.048 0 12.492z"/></svg>