Adding latest

data/panaetius-theme/assets.json

@@ -1,5 +1,5 @@
 {
   "main": {
-    "js": "main.8b88c726d8b3b7adfd69.min.js"
+    "js": "main.787e24f578908f557852.min.js"
   }
 }

package.json

@@ -9,7 +9,15 @@
     "@babel/core": "^7.9.6",
     "@babel/preset-env": "^7.9.6",
     "assets-webpack-plugin": "^3.9.12",
-    "babel-loader": "^8.1.0"
+    "babel-loader": "^8.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^3.5.3",
+    "mini-css-extract-plugin": "^0.9.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.2.1",
+    "webpack-merge": "^4.2.2"
   },
   "devDependencies": {
     "webpack": "^4.43.0",

postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    plugins: {
+        "postcss-preset-env": {
+            browsers: "last 2 versions"
+        },
+        autoprefixer: {}
+    }
+};

src/js/App.js

@@ -0,0 +1,120 @@
+'use strict';
+
+import $ from 'jquery';
+import { library, dom } from '@fortawesome/fontawesome-svg-core';
+import {
+    faBookOpen,
+    faChevronLeft,
+    faChevronRight,
+    faCircle,
+    faClock,
+    faEnvelope,
+    faRss,
+    faTag,
+    faSearch,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+    faFacebook,
+    faFacebookF,
+    faGithub,
+    faGitlab,
+    faInstagram,
+    faKeybase,
+    faLinkedin,
+    faLinkedinIn,
+    faMastodon,
+    faMedium,
+    faPinterest,
+    faReddit,
+    faRedditAlien,
+    faStackOverflow,
+    faTwitter,
+    faWeibo,
+} from '@fortawesome/free-brands-svg-icons';
+
+library.add(
+    faBookOpen,
+    faChevronLeft,
+    faChevronRight,
+    faCircle,
+    faClock,
+    faEnvelope,
+    faFacebook,
+    faFacebookF,
+    faGithub,
+    faGitlab,
+    faInstagram,
+    faKeybase,
+    faLinkedin,
+    faLinkedinIn,
+    faMastodon,
+    faMedium,
+    faPinterest,
+    faReddit,
+    faRedditAlien,
+    faRss,
+    faStackOverflow,
+    faTag,
+    faTwitter,
+    faWeibo,
+    faSearch,
+);
+
+export default {
+    loadFontAwesome: () => {
+        dom.watch();
+    },
+    bootstrapify: () => {
+        $('.content blockquote').addClass('blockquote');
+        $('.content table').addClass('table');
+        $('.content table').wrap('<div class="table-responsive" />');
+        $('.content table thead').addClass('thead-dark');
+        $('.content pre').wrap('<figure class="highlight" />');
+        $('.content figure > img').addClass('img-fluid');
+    },
+    lazyload: async () => {
+        const { default: LazyLoad } = await import(/* webpackChunkName: "lazyload" */ 'vanilla-lazyload');
+        new LazyLoad({
+            thresholds: "40px 10%",
+            load_delay: 100,
+        });
+    },
+    navbarFade: () => {
+        let $position = $(window).scrollTop();
+
+        $(window).scroll(() => {
+            const $scroll = $(window).scrollTop();
+            const $navbarHeight = $('#navbar-main-menu.fixed-top').outerHeight();
+
+            $scroll > $position ? $('#navbar-main-menu.fixed-top').css('top', -$navbarHeight) :
+                $('#navbar-main-menu.fixed-top').css('top', 0);
+
+            if ($scroll <= 0) {
+              $('#navbar-main-menu.fixed-top').css('top', 0);
+            }
+
+            $position = $scroll;
+        });
+    },
+    lightbox: async () => {
+        const { default: ekkoLightbox } = await import(/* webpackChunkName: "ekkoLightbox" */ 'ekko-lightbox');
+        $('[data-toggle="lightbox"]').click(function(e) {
+            e.preventDefault();
+            $(this).ekkoLightbox();
+        });
+    },
+    syntaxHighlight: () => {
+        if (!window.Prism) {
+          return;
+        }
+
+        Prism.highlightAll();
+
+        $('pre:has(> code[class*=language-])').removeAttr('style');
+
+        const element = $('pre:has(> code:not([class*=language-]))');
+
+        element.addClass('language-none');
+        $('> code', element).addClass('language-none');
+    }
+};

src/main.js

@@ -0,0 +1 @@
+import './scss/styles.scss';

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";

webpack.prod.js

@@ -1,6 +1,7 @@
 const webpack = require("webpack");
 const common = require("./webpack.common");
 const merge = require("webpack-merge");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = merge(common, {
   mode: "production",
@@ -10,4 +11,26 @@ module.exports = merge(common, {
     chunkFilename: "[id].[name].[contenthash].min.js",
     publicPath: "dist/",
   },
+  module: {
+    rules: [
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          "style-loader",
+          MiniCssExtractPlugin.loader,
+          "css-loader",
+          "postcss-loader",
+          "sass-loader",
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "[name].[contenthash].min.css",
+      chunkFilename: "[name].[contenthash].min.css",
+      sourceMap: true,
+    }),
+    new webpack.HashedModuleIdsPlugin(),
+  ],
 });