Adding latest

src/scss/_variables.scss

@@ -0,0 +1,103 @@
+$enable-responsive-font-sizes: true;
+
+$white: #fff;
+$gray-100: #e9edf0;
+$gray-200: #adbcc4;
+$gray-300: #adbcc4;
+$gray-400: #8fa6b2;
+$gray-500: #5d7c8c;
+$gray-600: #3d6478;
+$gray-700: #264d61;
+$gray-800: #0c344b;
+$gray-900: #082333;
+
+$text-muted: $gray-400;
+$body-color: $gray-800;
+$light: $white;
+$dark: $gray-900;
+$headings-color: $gray-900;
+// $headings-font-family: 'Open Sans', sans-serif;
+$headings-font-family: "Jost", sans-serif;
+$headings-font-weight: 400;
+
+// $font-family-sans-serif: 'Roboto', sans-serif;
+$font-family-sans-serif: "Jost", sans-serif;
+$font-family-monospace: "Roboto Mono", monospace;
+$font-family-serif: "Roboto Slab", serif;
+
+$link-color: $gray-800;
+$link-decoration: underline;
+
+$font-size-base: 1.125rem;
+
+$headings-margin-bottom: 1.25rem;
+$paragraph-margin-bottom: 1.5rem;
+$spacer: 1.125rem;
+$spacers: (
+  0: 0,
+  1: (
+    $spacer * 0.25,
+  ),
+  2: (
+    $spacer * 0.5,
+  ),
+  3: $spacer,
+  4: (
+    $spacer * 1.5,
+  ),
+  5: (
+    $spacer * 3,
+  ),
+  6: (
+    $spacer * 5,
+  ),
+  7: (
+    $spacer * 6,
+  ),
+  8: (
+    $spacer * 7,
+  ),
+  9: (
+    $spacer * 8,
+  ),
+);
+
+$border-radius: 0.45rem;
+$border-radius-lg: 0.5rem;
+$border-radius-sm: 0.3rem;
+$blockquote-font-size: $font-size-base;
+
+$code-color: $body-color;
+$navbar-brand-font-size: 1rem;
+$navbar-nav-link-padding-x: 1.25rem;
+$navbar-padding-y: 0.4rem;
+
+// Overrides
+
+$body-bg: #f9f9f9;
+
+.navbar {
+  border-bottom: 1px solid rgb(210, 210, 214);
+}
+
+// body {
+//   font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
+//   font-family: 'Jost', sans-serif;
+// }
+
+.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/chunky-poster.scss

@@ -0,0 +1,86 @@
+.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: $font-family-monospace;
+    @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;
+    }
+}
+
+img[data-src] {
+    opacity: 0;
+    @include transition($transition-fade);
+
+    &.loaded {
+        opacity: 1;
+    }
+}
+
+#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;
+}
+
+

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

@@ -0,0 +1,8 @@
+@import url('https://fonts.googleapis.com/css?family=Jost:400,400i,700,700i|Roboto+Mono:400,400i,700,700i|Open+Sans:400,700|Roboto:400,600,700&display=swap');
+
+@import "_variables";
+@import "~bootstrap/scss/bootstrap";
+@import '~ekko-lightbox/dist/ekko-lightbox.css';
+@import "chunky-poster";
+@import "sticky-footer";
+@import "search";