Adding css

src/scss/_variables.scss

@@ -17,12 +17,12 @@ $light: $white;
 $dark: $gray-900;
 $headings-color: $gray-900;
 // $headings-font-family: 'Open Sans', sans-serif;
-$headings-font-family: "Jost", sans-serif;
+$headings-font-family: "RNSSanz", sans-serif;
 $headings-font-weight: 400;
 
 // $font-family-sans-serif: 'Roboto', sans-serif;
-$font-family-sans-serif: "Jost", sans-serif;
+$font-family-sans-serif: "RNSSanz", sans-serif;
-$font-family-monospace: "Roboto Mono", monospace;
+$font-family-monospace: "BergenMono", monospace;
 $font-family-serif: "Roboto Slab", serif;
 
 $link-color: $gray-800;
@@ -76,23 +76,3 @@ $navbar-padding-y: 0.4rem;
 
 $body-bg: #f9f9f9;
 
-.navbar {
-  border-bottom: 1px solid rgb(210, 210, 214);
-}
-
-.rotate-a-20 {
-  transform: rotate(-20deg);
-  -webkit-transform: rotate(-20deg);
-  -moz-transform: rotate(-20deg);
-  -o-transform: rotate(-20deg);
-  -ms-transform: rotate(-20deg);
-}
-
-img.front-background{
-  opacity: 5% !important;
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  position: fixed;
-}

src/scss/panaetius-theme.scss

@@ -0,0 +1,101 @@
+.homepage-image {
+    @include media-breakpoint-up(lg) {
+        position: absolute;
+        width: 400px;
+        right: 100px;
+        top: 50px;
+    }
+}
+
+.author .name a,
+.author .social a {
+    color: $gray-900;
+    text-decoration: none;
+}
+
+blockquote {
+    color: $gray-400;
+    border-left: 6px solid $gray-400;
+    padding-left: $spacer;
+}
+
+code {
+    background-color: $gray-100;
+    border-radius: $border-radius-sm;
+    padding: .125rem .2rem;
+}
+
+code[class*=language-], pre[class*=language-] {
+    font-family: "BergenMono" !important;
+    color: red;
+    @include font-size($code-font-size);
+}
+
+figure.highlight pre:not([class*=language-]) {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    background-color: $gray-100;
+}
+
+pre code {
+    padding: 0;
+    background-color: transparent;
+}
+
+.latest h2 a,
+.navbar a,
+.card>a,
+a.badge {
+    text-decoration: none;
+}
+
+figure.highlight {
+    margin-left: -($grid-gutter-width / 2);
+    margin-right: -($grid-gutter-width / 2);
+
+    @include media-breakpoint-up(md) {
+        margin-left: 0;
+        margin-right: 0;
+    }
+}
+
+#navbar-main-menu {
+    transition: top 0.2s ease;
+
+    .nav-item .nav-link {
+        font-size: $navbar-brand-font-size;
+    }
+}
+
+ul.share.nav {
+    .nav-link {
+        padding: $nav-link-padding-y 0.2rem;
+        text-align: center;
+    }
+}
+
+footer a:not(.icons) {
+    color: $gray-200;
+}
+
+.navbar {
+    border-bottom: 1px solid rgb(210, 210, 214);
+}
+
+.rotate-a-20 {
+    transform: rotate(-20deg);
+    -webkit-transform: rotate(-20deg);
+    -moz-transform: rotate(-20deg);
+    -o-transform: rotate(-20deg);
+    -ms-transform: rotate(-20deg);
+}
+
+img.front-background {
+    opacity: 5% !important;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: fixed;
+}

src/scss/search.scss

@@ -0,0 +1,43 @@
+.searchbar {
+    margin-bottom: auto;
+    margin-top: auto;
+    height: 60px;
+    background-color: #353b48;
+    border-radius: 30px;
+    padding: 10px;
+}
+
+.search_input {
+    color: white;
+    border: 0;
+    outline: 0;
+    background: none;
+    width: 0;
+    caret-color: transparent;
+    line-height: 40px;
+    transition: width 0.4s linear;
+}
+
+.searchbar:hover>.search_input {
+    padding: 0 10px;
+    width: 450px;
+    caret-color: red;
+    transition: width 0.4s linear;
+}
+
+.searchbar:hover>.search_icon {
+    background: white;
+    color: #e74c3c;
+}
+
+.search_icon {
+    height: 40px;
+    width: 40px;
+    float: right;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    color: white;
+    text-decoration: none;
+}

src/scss/sticky-footer.scss

@@ -0,0 +1,16 @@
+html, body {
+    height: 100%;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+header, footer {
+    flex-shrink: 0;
+}
+
+main {
+    flex: 1 0 auto;
+}

src/scss/styles.scss

@@ -1 +1,6 @@
+@import "_variables";
 @import "~bootstrap/scss/bootstrap";
+@import "panaetius-theme";
+@import "sticky-footer";
+@import "search";
+@import "fonts";