Add fontawesome over npm

src/css/sidebar.css

@@ -0,0 +1,208 @@
+/*!
+ * Start Bootstrap - Simple Sidebar (https://startbootstrap.com/template-overviews/simple-sidebar)
+ * Copyright 2013-2017 Start Bootstrap
+ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE)
+ */
+
+#wrapper, #sidebar-wrapper, #menu-toggle-icon {
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+}
+
+#wrapper.toggled {
+    padding-left: 0;
+}
+
+#sidebar-wrapper {
+    z-index: 1000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3em;
+    overflow-y: auto;
+    background: #000;
+    padding: 10px;
+    padding-left: 0;
+
+    border-width: thin;
+    border-color: white;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+    height: 100%;
+}
+
+#wrapper.toggled #menu-toggle-icon {
+    -moz-transform: scale(1, -1);
+    -webkit-transform: scale(1, -1);
+    -o-transform: scale(1, -1);
+    -ms-transform: scale(1, -1);
+    transform: scale(1, -1);
+}
+
+#menu-toggle, #menu-toggle-icon {
+    display: block-inline;
+}
+
+#menu-toggle
+{
+    z-index: 1500;
+    position: absolute;
+    width: 100%;
+    top: 0;
+    height: 2em;
+    padding: 0.5em;
+    text-align: center;
+    color: #fff;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+     transition: all 0.5s ease;
+}
+
+.content-wrapper {
+    margin-top: 3em;
+    position: relative;
+}
+
+/* Sidebar Styles */
+
+.sidebar-nav {
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    overflow-x: hidden;
+    position: absolute;
+    width: 100%;
+    top: 0;
+    margin: 0;
+    padding: 0;
+    padding-bottom: 3em;
+    list-style: none;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+     transition: all 0.5s ease;
+}
+
+#wrapper.toggled #sidebar-wrapper .sidebar-nav {
+    opacity: 1;
+    visibility: visible;
+    overflow-x: visible;
+    width: 100%;
+}
+
+.sidebar-nav li {
+    text-indent: 20px;
+    line-height: 40px;
+}
+
+.sidebar-nav li.sidebar-brand {
+    text-align: center;
+    text-indent: 0;
+    padding: 0 20px 0 20px;
+    margin: 0.5em 0 0.5em 0;
+}
+
+.sidebar-nav li.sidebar-brand a img {
+    filter: invert(100%);
+}
+
+.sidebar-nav li.sidebar-brand a img,
+.sidebar-nav li.sidebar-brand {
+    height: 5em;
+}
+
+.sidebar-nav li a {
+    display: block;
+    text-decoration: none;
+    color: #bbb;
+}
+
+.sidebar-nav li a:hover {
+    text-decoration: none;
+    color: #fff;
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.sidebar-nav li a:active, .sidebar-nav li a:focus {
+    text-decoration: none;
+}
+
+.sidebar-nav>.sidebar-brand {
+    height: 65px;
+    font-size: 18px;
+    line-height: 60px;
+}
+
+.sidebar-nav>.sidebar-brand a {
+    color: #eee;
+}
+
+.sidebar-nav>.sidebar-brand a:hover {
+    color: #fff;
+    background: none;
+}
+
+.sidebar-nav>.sidebar-toggle {
+    width: 100%;
+    text-indent: 0;
+    z-index: -1000;
+}
+
+.sidebar-nav>.sidebar-spacer {
+    height: 3em;
+}
+
+@media (min-width: 576px) {
+    .sidebar-nav {
+        width: 0;
+    }
+
+    #sidebar-wrapper {
+        left: 250px;
+        width: 3em;
+        height: 100%;
+        margin-left: -250px;
+
+        border-right-style: solid;
+    }
+
+    #wrapper {
+        padding-top: 0em;
+        padding-left: 3em;
+    }
+
+    .content-wrapper {
+        margin-top: 0;
+        position: relative;
+    }
+
+    #wrapper.toggled #menu-toggle-icon {
+        -moz-transform: scale(-1, 1);
+        -webkit-transform: scale(-1, 1);
+        -o-transform: scale(-1, 1);
+        -ms-transform: scale(-1, 1);
+        transform: scale(-1, 1);
+    }
+
+    #wrapper.toggled #sidebar-wrapper {
+        width: 250px;
+    }
+
+    #wrapper.toggled {
+        padding-left: 250px;
+    }
+
+    #wrapper.toggled #sidebar-wrapper .sidebar-nav {
+        width: 100%;
+    }
+
+    #menu-toggle {
+        width: auto;
+        text-align: right;
+    }
+}

src/js/app.js

@@ -0,0 +1,12 @@
+require('./bootstrap');
+
+import PhotoSwipe from 'photoswipe/dist/photoswipe'
+import PhotoSwipeDefaultUI from 'photoswipe/dist/photoswipe-ui-default'
+
+window.PhotoSwipe = PhotoSwipe;
+window.PhotoSwipeDefaultUI = PhotoSwipeDefaultUI;
+
+$("#menu-toggle").click(function(e) {
+    e.preventDefault();
+    $("#wrapper").toggleClass("toggled");
+});

src/js/bootstrap.js

@@ -0,0 +1,14 @@
+window._ = require('lodash');
+
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.Popper = require('popper.js').default;
+    window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap');
+} catch (e) {}

src/sass/app.scss

@@ -0,0 +1,12 @@
+// Bootstrap
+@import '~bootstrap/scss/bootstrap';
+
+// FontAwesome
+@import '~@fortawesome/fontawesome-pro/css/all.css';
+
+// PhotoSwipe
+@import '~photoswipe/dist/photoswipe.css';
+@import '~photoswipe/dist/default-skin/default-skin.css';
+
+@import './theme';
+@import '../css/sidebar.css';

src/sass/theme.scss

@@ -0,0 +1,113 @@
+body, #wrapper
+{
+    min-height: 100vh;
+}
+
+.flex-fill
+{
+    flex: 1 1 auto;
+}
+
+.card-image img
+{
+    width: 100%;
+}
+
+.card-columns img,video
+{
+    width: 100%;
+}
+
+.card-columns
+{
+    column-gap: 1em;
+    column-count: 2;
+}
+
+.card-columns.card
+{
+    margin-bottom: 1em;
+}
+
+@media (min-width: 768px)
+{
+    .card-columns
+    {
+        column-count: 3;
+    }
+}
+
+@media (min-width: 992px)
+{
+    .card-columns
+    {
+        column-count: 4;
+    }
+}
+
+@media (min-width: 1200px)
+{
+    .card-columns
+    {
+        column-count: 6;
+    }
+}
+
+.navbar-brand
+{
+    font-size: 1em;
+}
+.navbar-brand img
+{
+    height: 3em;
+}
+
+header div.row-fixed-h,
+header img
+{
+    height: 5rem;
+    overflow: hidden;
+}
+
+.bg-ro
+{
+    background-color: #2b3bb4 !important;
+}
+
+footer.bg-ro a
+{
+    color: #fff;
+    text-decoration: underline;
+}
+
+.btn-facebook
+{
+    color: #fff;
+    background-color: #3b5998;
+    border-color: #3b5998;
+}
+
+#home-carousel
+{
+    display: flex;
+    align-items: center;
+    height: 400px;
+}
+
+#home-carousel img
+{
+    max-width: 100%;
+    max-height: 400px;
+}
+
+table tbody tr:nth-of-type(2n+1)
+{
+    background:
+    #d0d6d3;
+}
+
+table td,
+table th
+{
+    padding: 0.6rem 0.4rem;
+}