button new book

themes/sophie-lewis/assets/scss/font.scss

@@ -1,7 +1,7 @@
 @mixin define-font-family($name, $weight, $style, $filename) {
     font-family: $name;
 
-    src: 
+    src:
         url("../font/woff2/#{$filename}") format("woff2"),
         url("../font/ttf/#{$filename}") format("ttf");
     font-weight: $weight;
@@ -12,6 +12,7 @@
 
 $sans_font: IBMPlexSans;
 $serif_font: IBMPlexSerif;
+$mono_font: IBMPlexMono;
 
 @font-face {
     @include define-font-family($sans_font, normal, italic, 'IBMPlexSans-Italic.woff2')
@@ -40,4 +41,9 @@ $serif_font: IBMPlexSerif;
 @font-face {
     @include define-font-family($serif_font, lighter, italic, 'IBMPlexSerif-LightItalic.woff2')
 }
-
+@font-face {
+    @include define-font-family($mono_font, normal, null, 'IBMPlexMono-Regular.woff2')
+}
+@font-face {
+    @include define-font-family($mono_font, 700, null, 'IBMPlexMono-Medium.woff2')
+}

themes/sophie-lewis/assets/scss/main.scss

@@ -80,6 +80,13 @@ hr {
     padding-top: 8em;
 }
 
+.button-book {
+  background-color: #eb2b2b;
+  color: white;
+  float: right;
+  font-family: $mono_font;
+}
+
 #content {
     font-size: 1.1rem;
     strong,i,b,em {

themes/sophie-lewis/layouts/partials/header.html

@@ -1,5 +1,6 @@
 <div class="hero header octopus-mobile">
   <div class="hero-body">
+    <a class="button button-book">NEW BOOK&nbsp;<b>Abolish The Family</b></a><br />
     <a href="/">
       <p class="title is-size-0-1">
         {{ site.Params.header.name }}