Webpack bundling

package.json

+{
+  "name": "pitube",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "directories": {
+    "lib": "lib"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab.pirati.cz:to/pitube.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.13.0",
+    "autoprefixer": "^9.8.0",
+    "css-loader": "^3.5.3",
+    "file-loader": "^6.0.0",
+    "postcss-loader": "^3.0.0",
+    "style-loader": "^1.2.1",
+    "url-loader": "^4.1.0",
+    "sass-loader": "^8.0.2",
+    "node-sass": "^4.14.1",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11"
+  },
+  "dependencies": {
+    "bootstrap": "^4.5.0",
+    "jquery": "^3.5.1",
+    "video.js": "^7.8.2"
+  }
+}

src/index.js

+"use strict";
+
+import $ from 'jquery';
+import jQuery from 'jquery';
+window.$ = jQuery;
+
+import 'bootstrap/js/dist/modal';
+
+//import '@fortawesome/fontawesome-free/js/light'
+//import '@fortawesome/fontawesome-free/js/regular'
+//import '@fortawesome/fontawesome-free/js/solid'
+//import '@fortawesome/fontawesome-free/js/brands'
+
+import './index.scss';

src/index.scss

+// Konfigurace
+@import "scss/variables";
+
+// Google fonts
+@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Roboto:wght@300;400;500&display=swap");
+
+
+// Vue a bootstrap
+@import '~bootstrap/scss/bootstrap';
+
+// Piratske tema
+@import "scss/pirati/mixins";
+@import "scss/pirati/common";
+@import "scss/pirati/buttons";
+@import "scss/pirati/typography";
+@import "scss/pirati/header";
+@import "scss/pirati/footer";
+@import "scss/pirati/pagination";
+
+// video.js
+@import "~video.js/dist/video-js.css";
+
+// Lokalni styly
+@import "scss/pitube";

src/scss/pirati/mixins.scss

+/*MIXINS*/
+@mixin transition($transition...) {
+    -moz-transition: $transition;
+    -o-transition: $transition;
+    -webkit-transition: $transition;
+    transition: $transition;
+}
+
+@mixin transition-property($property...) {
+    -moz-transition-property: $property;
+    -o-transition-property: $property;
+    -webkit-transition-property: $property;
+    transition-property: $property;
+}
+
+@mixin transition-duration($duration...) {
+    -moz-transition-property: $duration;
+    -o-transition-property: $duration;
+    -webkit-transition-property: $duration;
+    transition-property: $duration;
+}
+
+@mixin transition-timing-function($timing...) {
+    -moz-transition-timing-function: $timing;
+    -o-transition-timing-function: $timing;
+    -webkit-transition-timing-function: $timing;
+    transition-timing-function: $timing;
+}
+
+@mixin transition-delay($delay...) {
+    -moz-transition-delay: $delay;
+    -o-transition-delay: $delay;
+    -webkit-transition-delay: $delay;
+    transition-delay: $delay;
+}
+
+@mixin background-size($size) {
+    -webkit-background-size: $size;
+    -moz-background-size: $size;
+    -o-background-size: $size;
+    background-size: $size;
+}
+
+@mixin gradient($direction, $startcolor, $endcolor) {
+    background-image: linear-gradient(to $direction, $startcolor 0%, $endcolor 100%);
+    background-image: -o-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
+    background-image: -moz-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
+    background-image: -webkit-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
+    background-image: -ms-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
+}
+
+// Render fontawesome icons
+@mixin render-icon {
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    font-family: "Font Awesome 5 Pro";
+}
\ No newline at end of file

src/scss/pirati/pagination.scss

+.paging {
+    .paging-wrapper {
+        .page-btn {
+            font-family: 'Roboto Condensed', sans-serif;
+            font-weight: 700;
+            background-color: #F3F3F3;
+            color: #1d1d1d;
+            width: 42px;
+            height: 42px;
+            display: inline-block;
+            vertical-align: top;
+            line-height: 42px;
+            text-decoration: none;
+            margin-left: 1px;
+            margin-right: 1px;
+
+            @include transition(background-color 0.2s, color 0.2s);
+
+            &.active {
+                background-color: #1d1d1d;
+                color: #F3F3F3;
+            }
+
+            &:hover {
+                background-color: #1d1d1d;
+                color: #F3F3F3;
+            }
+        }
+
+        .prev-next-page {
+            background-color: #F3F3F3;
+            color: #1d1d1d;
+            display: inline-block;
+            vertical-align: top;
+
+            @include transition(background-color 0.2s, color 0.2s);
+
+            &:hover {
+                background-color: #1d1d1d;
+                color: #F3F3F3;
+
+                .arrow {
+                    &.next {
+                        &:before {
+                            left: 60%;
+                            border-right: 2px solid #F3F3F3;
+                            border-bottom: 2px solid #F3F3F3;
+                        }
+                    }
+
+                    &.prev {
+                        &:before {
+                            left: 40%;
+                            border-top: 2px solid #F3F3F3;
+                            border-left: 2px solid #F3F3F3;
+                        }
+                    }
+                }
+            }
+
+            p {
+                font-family: 'Roboto Condensed', sans-serif;
+                font-weight: 700;
+                padding: 9px 16px;
+                display: inline-block;
+                vertical-align: middle;
+                margin: 0px;
+            }
+
+            .arrow {
+                display: inline-block;
+                vertical-align: middle;
+                position: relative;
+                width: 42px;
+                height: 42px;
+
+                &.next {
+                    border-left: 1px solid rgba(171, 171, 171, 0.1);
+
+                    &:before {
+                        content: "";
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translate(-50%, -50%) rotate(-45deg);
+                        width: 7px;
+                        height: 7px;
+                        position: absolute;
+                        border-right: 2px solid #1d1d1d;
+                        border-bottom: 2px solid #1d1d1d;
+
+                        @include transition(left 0.2s, border-color 0.2s);
+                    }
+                }
+
+                &.prev {
+                    border-right: 1px solid rgba(171, 171, 171, 0.1);
+
+                    &:before {
+                        content: "";
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translate(-50%, -50%) rotate(-45deg);
+                        width: 7px;
+                        height: 7px;
+                        position: absolute;
+                        border-top: 2px solid #1d1d1d;
+                        border-left: 2px solid #1d1d1d;
+
+                        @include transition(left 0.2s, border-color 0.2s);
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

public/css/pitube.css → src/scss/pitube.scss

@@ -3,6 +3,12 @@ tr.Live td {
     background-color: #f0fff0;
 }
 
-h1 a {
+a {
+    color: #000;
+}
+
+h1 a, h1 a:hover {
     color: #fff;
+    text-decoration: none;
 }
+