diff --git a/package.json b/package.json index 5a4cd81..121c5b1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "libregaming-design-system", - "version": "0.1.2", + "version": "0.1.3", "description": "Giving tools to build LibreGaming services more easily", "main": "index.js", "dependencies": { diff --git a/public/scripts.js b/public/scripts.js index 844ee9f..4a0d10b 100644 --- a/public/scripts.js +++ b/public/scripts.js @@ -1,65 +1,687 @@ -/* - * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). - * This devtool is neither made for production nor for readable output files. - * It uses "eval()" calls to create a separate source file in the browser devtools. - * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) - * or disable the default devtool with "devtool: false". - * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). - */ /******/ (() => { // webpackBootstrap /******/ var __webpack_modules__ = ({ -/***/ "./node_modules/responsive-nav/client/dist/responsive-nav.js": -/*!*******************************************************************!*\ - !*** ./node_modules/responsive-nav/client/dist/responsive-nav.js ***! - \*******************************************************************/ +/***/ 594: /***/ ((module) => { -eval("/*! responsive-nav.js 1.0.39\n * https://github.com/viljamis/responsive-nav.js\n * http://responsive-nav.com\n *\n * Copyright (c) 2015 @viljamis\n * Available under the MIT license\n */\n\n/* global Event */\n(function (document, window, index) {\n // Index is used to keep multiple navs on the same page namespaced\n \"use strict\";\n\n var responsiveNav = function (el, options) {\n var computed = !!window.getComputedStyle;\n /**\n * getComputedStyle polyfill for old browsers\n */\n\n if (!computed) {\n window.getComputedStyle = function (el) {\n this.el = el;\n\n this.getPropertyValue = function (prop) {\n var re = /(\\-([a-z]){1})/g;\n\n if (prop === \"float\") {\n prop = \"styleFloat\";\n }\n\n if (re.test(prop)) {\n prop = prop.replace(re, function () {\n return arguments[2].toUpperCase();\n });\n }\n\n return el.currentStyle[prop] ? el.currentStyle[prop] : null;\n };\n\n return this;\n };\n }\n /* exported addEvent, removeEvent, getChildren, setAttributes, addClass, removeClass, forEach */\n\n /**\n * Add Event\n * fn arg can be an object or a function, thanks to handleEvent\n * read more at: http://www.thecssninja.com/javascript/handleevent\n *\n * @param {element} element\n * @param {event} event\n * @param {Function} fn\n * @param {boolean} bubbling\n */\n\n\n var addEvent = function (el, evt, fn, bubble) {\n if (\"addEventListener\" in el) {\n // BBOS6 doesn't support handleEvent, catch and polyfill\n try {\n el.addEventListener(evt, fn, bubble);\n } catch (e) {\n if (typeof fn === \"object\" && fn.handleEvent) {\n el.addEventListener(evt, function (e) {\n // Bind fn as this and set first arg as event object\n fn.handleEvent.call(fn, e);\n }, bubble);\n } else {\n throw e;\n }\n }\n } else if (\"attachEvent\" in el) {\n // check if the callback is an object and contains handleEvent\n if (typeof fn === \"object\" && fn.handleEvent) {\n el.attachEvent(\"on\" + evt, function () {\n // Bind fn as this\n fn.handleEvent.call(fn);\n });\n } else {\n el.attachEvent(\"on\" + evt, fn);\n }\n }\n },\n\n /**\n * Remove Event\n *\n * @param {element} element\n * @param {event} event\n * @param {Function} fn\n * @param {boolean} bubbling\n */\n removeEvent = function (el, evt, fn, bubble) {\n if (\"removeEventListener\" in el) {\n try {\n el.removeEventListener(evt, fn, bubble);\n } catch (e) {\n if (typeof fn === \"object\" && fn.handleEvent) {\n el.removeEventListener(evt, function (e) {\n fn.handleEvent.call(fn, e);\n }, bubble);\n } else {\n throw e;\n }\n }\n } else if (\"detachEvent\" in el) {\n if (typeof fn === \"object\" && fn.handleEvent) {\n el.detachEvent(\"on\" + evt, function () {\n fn.handleEvent.call(fn);\n });\n } else {\n el.detachEvent(\"on\" + evt, fn);\n }\n }\n },\n\n /**\n * Get the children of any element\n *\n * @param {element}\n * @return {array} Returns matching elements in an array\n */\n getChildren = function (e) {\n if (e.children.length < 1) {\n throw new Error(\"The Nav container has no containing elements\");\n } // Store all children in array\n\n\n var children = []; // Loop through children and store in array if child != TextNode\n\n for (var i = 0; i < e.children.length; i++) {\n if (e.children[i].nodeType === 1) {\n children.push(e.children[i]);\n }\n }\n\n return children;\n },\n\n /**\n * Sets multiple attributes at once\n *\n * @param {element} element\n * @param {attrs} attrs\n */\n setAttributes = function (el, attrs) {\n for (var key in attrs) {\n el.setAttribute(key, attrs[key]);\n }\n },\n\n /**\n * Adds a class to any element\n *\n * @param {element} element\n * @param {string} class\n */\n addClass = function (el, cls) {\n if (el.className.indexOf(cls) !== 0) {\n el.className += \" \" + cls;\n el.className = el.className.replace(/(^\\s*)|(\\s*$)/g, \"\");\n }\n },\n\n /**\n * Remove a class from any element\n *\n * @param {element} element\n * @param {string} class\n */\n removeClass = function (el, cls) {\n var reg = new RegExp(\"(\\\\s|^)\" + cls + \"(\\\\s|$)\");\n el.className = el.className.replace(reg, \" \").replace(/(^\\s*)|(\\s*$)/g, \"\");\n },\n\n /**\n * forEach method that passes back the stuff we need\n *\n * @param {array} array\n * @param {Function} callback\n * @param {scope} scope\n */\n forEach = function (array, callback, scope) {\n for (var i = 0; i < array.length; i++) {\n callback.call(scope, i, array[i]);\n }\n };\n\n var nav,\n opts,\n navToggle,\n styleElement = document.createElement(\"style\"),\n htmlEl = document.documentElement,\n hasAnimFinished,\n isMobile,\n navOpen;\n\n var ResponsiveNav = function (el, options) {\n var i;\n /**\n * Default options\n * @type {Object}\n */\n\n this.options = {\n animate: true,\n // Boolean: Use CSS3 transitions, true or false\n transition: 284,\n // Integer: Speed of the transition, in milliseconds\n label: \"Menu\",\n // String: Label for the navigation toggle\n insert: \"before\",\n // String: Insert the toggle before or after the navigation\n customToggle: \"\",\n // Selector: Specify the ID of a custom toggle\n closeOnNavClick: false,\n // Boolean: Close the navigation when one of the links are clicked\n openPos: \"relative\",\n // String: Position of the opened nav, relative or static\n navClass: \"nav-collapse\",\n // String: Default CSS class. If changed, you need to edit the CSS too!\n navActiveClass: \"js-nav-active\",\n // String: Class that is added to element when nav is active\n jsClass: \"js\",\n // String: 'JS enabled' class which is added to element\n init: function () {},\n // Function: Init callback\n open: function () {},\n // Function: Open callback\n close: function () {} // Function: Close callback\n\n }; // User defined options\n\n for (i in options) {\n this.options[i] = options[i];\n } // Adds \"js\" class for \n\n\n addClass(htmlEl, this.options.jsClass); // Wrapper\n\n this.wrapperEl = el.replace(\"#\", \"\"); // Try selecting ID first\n\n if (document.getElementById(this.wrapperEl)) {\n this.wrapper = document.getElementById(this.wrapperEl); // If element with an ID doesn't exist, use querySelector\n } else if (document.querySelector(this.wrapperEl)) {\n this.wrapper = document.querySelector(this.wrapperEl); // If element doesn't exists, stop here.\n } else {\n throw new Error(\"The nav element you are trying to select doesn't exist\");\n } // Inner wrapper\n\n\n this.wrapper.inner = getChildren(this.wrapper); // For minification\n\n opts = this.options;\n nav = this.wrapper; // Init\n\n this._init(this);\n };\n\n ResponsiveNav.prototype = {\n /**\n * Unattaches events and removes any classes that were added\n */\n destroy: function () {\n this._removeStyles();\n\n removeClass(nav, \"closed\");\n removeClass(nav, \"opened\");\n removeClass(nav, opts.navClass);\n removeClass(nav, opts.navClass + \"-\" + this.index);\n removeClass(htmlEl, opts.navActiveClass);\n nav.removeAttribute(\"style\");\n nav.removeAttribute(\"aria-hidden\");\n removeEvent(window, \"resize\", this, false);\n removeEvent(window, \"focus\", this, false);\n removeEvent(document.body, \"touchmove\", this, false);\n removeEvent(navToggle, \"touchstart\", this, false);\n removeEvent(navToggle, \"touchend\", this, false);\n removeEvent(navToggle, \"mouseup\", this, false);\n removeEvent(navToggle, \"keyup\", this, false);\n removeEvent(navToggle, \"click\", this, false);\n\n if (!opts.customToggle) {\n navToggle.parentNode.removeChild(navToggle);\n } else {\n navToggle.removeAttribute(\"aria-hidden\");\n }\n },\n\n /**\n * Toggles the navigation open/close\n */\n toggle: function () {\n if (hasAnimFinished === true) {\n if (!navOpen) {\n this.open();\n } else {\n this.close();\n }\n }\n },\n\n /**\n * Opens the navigation\n */\n open: function () {\n if (!navOpen) {\n removeClass(nav, \"closed\");\n addClass(nav, \"opened\");\n addClass(htmlEl, opts.navActiveClass);\n addClass(navToggle, \"active\");\n nav.style.position = opts.openPos;\n setAttributes(nav, {\n \"aria-hidden\": \"false\"\n });\n navOpen = true;\n opts.open();\n }\n },\n\n /**\n * Closes the navigation\n */\n close: function () {\n if (navOpen) {\n addClass(nav, \"closed\");\n removeClass(nav, \"opened\");\n removeClass(htmlEl, opts.navActiveClass);\n removeClass(navToggle, \"active\");\n setAttributes(nav, {\n \"aria-hidden\": \"true\"\n }); // If animations are enabled, wait until they finish\n\n if (opts.animate) {\n hasAnimFinished = false;\n setTimeout(function () {\n nav.style.position = \"absolute\";\n hasAnimFinished = true;\n }, opts.transition + 10); // Animations aren't enabled, we can do these immediately\n } else {\n nav.style.position = \"absolute\";\n }\n\n navOpen = false;\n opts.close();\n }\n },\n\n /**\n * Resize is called on window resize and orientation change.\n * It initializes the CSS styles and height calculations.\n */\n resize: function () {\n // Resize watches navigation toggle's display state\n if (window.getComputedStyle(navToggle, null).getPropertyValue(\"display\") !== \"none\") {\n isMobile = true;\n setAttributes(navToggle, {\n \"aria-hidden\": \"false\"\n }); // If the navigation is hidden\n\n if (nav.className.match(/(^|\\s)closed(\\s|$)/)) {\n setAttributes(nav, {\n \"aria-hidden\": \"true\"\n });\n nav.style.position = \"absolute\";\n }\n\n this._createStyles();\n\n this._calcHeight();\n } else {\n isMobile = false;\n setAttributes(navToggle, {\n \"aria-hidden\": \"true\"\n });\n setAttributes(nav, {\n \"aria-hidden\": \"false\"\n });\n nav.style.position = opts.openPos;\n\n this._removeStyles();\n }\n },\n\n /**\n * Takes care of all even handling\n *\n * @param {event} event\n * @return {type} returns the type of event that should be used\n */\n handleEvent: function (e) {\n var evt = e || window.event;\n\n switch (evt.type) {\n case \"touchstart\":\n this._onTouchStart(evt);\n\n break;\n\n case \"touchmove\":\n this._onTouchMove(evt);\n\n break;\n\n case \"touchend\":\n case \"mouseup\":\n this._onTouchEnd(evt);\n\n break;\n\n case \"click\":\n this._preventDefault(evt);\n\n break;\n\n case \"keyup\":\n this._onKeyUp(evt);\n\n break;\n\n case \"focus\":\n case \"resize\":\n this.resize(evt);\n break;\n }\n },\n\n /**\n * Initializes the widget\n */\n _init: function () {\n this.index = index++;\n addClass(nav, opts.navClass);\n addClass(nav, opts.navClass + \"-\" + this.index);\n addClass(nav, \"closed\");\n hasAnimFinished = true;\n navOpen = false;\n\n this._closeOnNavClick();\n\n this._createToggle();\n\n this._transitions();\n\n this.resize();\n /**\n * On IE8 the resize event triggers too early for some reason\n * so it's called here again on init to make sure all the\n * calculated styles are correct.\n */\n\n var self = this;\n setTimeout(function () {\n self.resize();\n }, 20);\n addEvent(window, \"resize\", this, false);\n addEvent(window, \"focus\", this, false);\n addEvent(document.body, \"touchmove\", this, false);\n addEvent(navToggle, \"touchstart\", this, false);\n addEvent(navToggle, \"touchend\", this, false);\n addEvent(navToggle, \"mouseup\", this, false);\n addEvent(navToggle, \"keyup\", this, false);\n addEvent(navToggle, \"click\", this, false);\n /**\n * Init callback here\n */\n\n opts.init();\n },\n\n /**\n * Creates Styles to the \n */\n _createStyles: function () {\n if (!styleElement.parentNode) {\n styleElement.type = \"text/css\";\n document.getElementsByTagName(\"head\")[0].appendChild(styleElement);\n }\n },\n\n /**\n * Removes styles from the \n */\n _removeStyles: function () {\n if (styleElement.parentNode) {\n styleElement.parentNode.removeChild(styleElement);\n }\n },\n\n /**\n * Creates Navigation Toggle\n */\n _createToggle: function () {\n // If there's no toggle, let's create one\n if (!opts.customToggle) {\n var toggle = document.createElement(\"a\");\n toggle.innerHTML = opts.label;\n setAttributes(toggle, {\n \"href\": \"#\",\n \"class\": \"nav-toggle\"\n }); // Determine where to insert the toggle\n\n if (opts.insert === \"after\") {\n nav.parentNode.insertBefore(toggle, nav.nextSibling);\n } else {\n nav.parentNode.insertBefore(toggle, nav);\n }\n\n navToggle = toggle; // There is a toggle already, let's use that one\n } else {\n var toggleEl = opts.customToggle.replace(\"#\", \"\");\n\n if (document.getElementById(toggleEl)) {\n navToggle = document.getElementById(toggleEl);\n } else if (document.querySelector(toggleEl)) {\n navToggle = document.querySelector(toggleEl);\n } else {\n throw new Error(\"The custom nav toggle you are trying to select doesn't exist\");\n }\n }\n },\n\n /**\n * Closes the navigation when a link inside is clicked.\n */\n _closeOnNavClick: function () {\n if (opts.closeOnNavClick) {\n var links = nav.getElementsByTagName(\"a\"),\n self = this;\n forEach(links, function (i, el) {\n addEvent(links[i], \"click\", function () {\n if (isMobile) {\n self.toggle();\n }\n }, false);\n });\n }\n },\n\n /**\n * Prevents the default functionality.\n *\n * @param {event} event\n */\n _preventDefault: function (e) {\n if (e.preventDefault) {\n if (e.stopImmediatePropagation) {\n e.stopImmediatePropagation();\n }\n\n e.preventDefault();\n e.stopPropagation();\n return false; // This is strictly for old IE\n } else {\n e.returnValue = false;\n }\n },\n\n /**\n * On touch start we get the location of the touch.\n *\n * @param {event} event\n */\n _onTouchStart: function (e) {\n if (!Event.prototype.stopImmediatePropagation) {\n this._preventDefault(e);\n }\n\n this.startX = e.touches[0].clientX;\n this.startY = e.touches[0].clientY;\n this.touchHasMoved = false;\n /**\n * Remove mouseup event completely here to avoid\n * double triggering the event.\n */\n\n removeEvent(navToggle, \"mouseup\", this, false);\n },\n\n /**\n * Check if the user is scrolling instead of tapping.\n *\n * @param {event} event\n */\n _onTouchMove: function (e) {\n if (Math.abs(e.touches[0].clientX - this.startX) > 10 || Math.abs(e.touches[0].clientY - this.startY) > 10) {\n this.touchHasMoved = true;\n }\n },\n\n /**\n * On touch end toggle the navigation.\n *\n * @param {event} event\n */\n _onTouchEnd: function (e) {\n this._preventDefault(e);\n\n if (!isMobile) {\n return;\n } // If the user isn't scrolling\n\n\n if (!this.touchHasMoved) {\n // If the event type is touch\n if (e.type === \"touchend\") {\n this.toggle();\n return; // Event type was click, not touch\n } else {\n var evt = e || window.event; // If it isn't a right click, do toggling\n\n if (!(evt.which === 3 || evt.button === 2)) {\n this.toggle();\n }\n }\n }\n },\n\n /**\n * For keyboard accessibility, toggle the navigation on Enter\n * keypress too.\n *\n * @param {event} event\n */\n _onKeyUp: function (e) {\n var evt = e || window.event;\n\n if (evt.keyCode === 13) {\n this.toggle();\n }\n },\n\n /**\n * Adds the needed CSS transitions if animations are enabled\n */\n _transitions: function () {\n if (opts.animate) {\n var objStyle = nav.style,\n transition = \"max-height \" + opts.transition + \"ms\";\n objStyle.WebkitTransition = objStyle.MozTransition = objStyle.OTransition = objStyle.transition = transition;\n }\n },\n\n /**\n * Calculates the height of the navigation and then creates\n * styles which are later added to the page \n */\n _calcHeight: function () {\n var savedHeight = 0;\n\n for (var i = 0; i < nav.inner.length; i++) {\n savedHeight += nav.inner[i].offsetHeight;\n }\n\n var innerStyles = \".\" + opts.jsClass + \" .\" + opts.navClass + \"-\" + this.index + \".opened{max-height:\" + savedHeight + \"px !important} .\" + opts.jsClass + \" .\" + opts.navClass + \"-\" + this.index + \".opened.dropdown-active {max-height:9999px !important}\";\n\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = innerStyles;\n } else {\n styleElement.innerHTML = innerStyles;\n }\n\n innerStyles = \"\";\n }\n };\n /**\n * Return new Responsive Nav\n */\n\n return new ResponsiveNav(el, options);\n };\n\n if ( true && module.exports) {\n module.exports = responsiveNav;\n } else {\n window.responsiveNav = responsiveNav;\n }\n})(document, window, 0);\n\n//# sourceURL=webpack://libregaming-design-system/./node_modules/responsive-nav/client/dist/responsive-nav.js?"); +/*! responsive-nav.js 1.0.39 + * https://github.com/viljamis/responsive-nav.js + * http://responsive-nav.com + * + * Copyright (c) 2015 @viljamis + * Available under the MIT license + */ -/***/ }), +/* global Event */ +(function (document, window, index) { + // Index is used to keep multiple navs on the same page namespaced + "use strict"; -/***/ "./src/js/app.js": -/*!***********************!*\ - !*** ./src/js/app.js ***! - \***********************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + var responsiveNav = function (el, options) { + var computed = !!window.getComputedStyle; + /** + * getComputedStyle polyfill for old browsers + */ -"use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _greeting_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./greeting.js */ \"./src/js/greeting.js\");\n/* harmony import */ var responsive_nav__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! responsive-nav */ \"./node_modules/responsive-nav/client/dist/responsive-nav.js\");\n/* harmony import */ var responsive_nav__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(responsive_nav__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _assets_lg_logo_png__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../assets/lg-logo.png */ \"./src/assets/lg-logo.png\");\n/* harmony import */ var _assets_member_panel_example_png__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../assets/member-panel-example.png */ \"./src/assets/member-panel-example.png\");\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n\n\n\n\n\nvar App = /*#__PURE__*/function () {\n function App() {\n _classCallCheck(this, App);\n\n this.init();\n }\n\n _createClass(App, [{\n key: \"init\",\n value: function init() {\n var greeting = new _greeting_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]();\n greeting.printToConsole(_greeting_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"].SOURCECODE);\n var nav = responsive_nav__WEBPACK_IMPORTED_MODULE_1___default()(\".nav-collapse\", {\n customToggle: \".toggle\",\n jsClass: \"js\"\n });\n }\n }]);\n\n return App;\n}();\n\nnew App();\n\n//# sourceURL=webpack://libregaming-design-system/./src/js/app.js?"); + if (!computed) { + window.getComputedStyle = function (el) { + this.el = el; -/***/ }), + this.getPropertyValue = function (prop) { + var re = /(\-([a-z]){1})/g; -/***/ "./src/js/greeting.js": -/*!****************************!*\ - !*** ./src/js/greeting.js ***! - \****************************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + if (prop === "float") { + prop = "styleFloat"; + } -"use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Greeting)\n/* harmony export */ });\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar Greeting = /*#__PURE__*/function () {\n function Greeting() {\n _classCallCheck(this, Greeting);\n }\n\n _createClass(Greeting, [{\n key: \"printToConsole\",\n value: function printToConsole(message) {\n console.log(message);\n }\n }]);\n\n return Greeting;\n}();\n\n_defineProperty(Greeting, \"SOURCECODE\", \"Hello. The source code lives via git. Find the repository here:\");\n\n\n\n//# sourceURL=webpack://libregaming-design-system/./src/js/greeting.js?"); + if (re.test(prop)) { + prop = prop.replace(re, function () { + return arguments[2].toUpperCase(); + }); + } -/***/ }), + return el.currentStyle[prop] ? el.currentStyle[prop] : null; + }; -/***/ "./src/assets/lg-logo.png": -/*!********************************!*\ - !*** ./src/assets/lg-logo.png ***! - \********************************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + return this; + }; + } + /* exported addEvent, removeEvent, getChildren, setAttributes, addClass, removeClass, forEach */ -"use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__webpack_require__.p + \"assets/lg-logo.png\");\n\n//# sourceURL=webpack://libregaming-design-system/./src/assets/lg-logo.png?"); + /** + * Add Event + * fn arg can be an object or a function, thanks to handleEvent + * read more at: http://www.thecssninja.com/javascript/handleevent + * + * @param {element} element + * @param {event} event + * @param {Function} fn + * @param {boolean} bubbling + */ -/***/ }), -/***/ "./src/assets/member-panel-example.png": -/*!*********************************************!*\ - !*** ./src/assets/member-panel-example.png ***! - \*********************************************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + var addEvent = function (el, evt, fn, bubble) { + if ("addEventListener" in el) { + // BBOS6 doesn't support handleEvent, catch and polyfill + try { + el.addEventListener(evt, fn, bubble); + } catch (e) { + if (typeof fn === "object" && fn.handleEvent) { + el.addEventListener(evt, function (e) { + // Bind fn as this and set first arg as event object + fn.handleEvent.call(fn, e); + }, bubble); + } else { + throw e; + } + } + } else if ("attachEvent" in el) { + // check if the callback is an object and contains handleEvent + if (typeof fn === "object" && fn.handleEvent) { + el.attachEvent("on" + evt, function () { + // Bind fn as this + fn.handleEvent.call(fn); + }); + } else { + el.attachEvent("on" + evt, fn); + } + } + }, -"use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__webpack_require__.p + \"assets/member-panel-example.png\");\n\n//# sourceURL=webpack://libregaming-design-system/./src/assets/member-panel-example.png?"); + /** + * Remove Event + * + * @param {element} element + * @param {event} event + * @param {Function} fn + * @param {boolean} bubbling + */ + removeEvent = function (el, evt, fn, bubble) { + if ("removeEventListener" in el) { + try { + el.removeEventListener(evt, fn, bubble); + } catch (e) { + if (typeof fn === "object" && fn.handleEvent) { + el.removeEventListener(evt, function (e) { + fn.handleEvent.call(fn, e); + }, bubble); + } else { + throw e; + } + } + } else if ("detachEvent" in el) { + if (typeof fn === "object" && fn.handleEvent) { + el.detachEvent("on" + evt, function () { + fn.handleEvent.call(fn); + }); + } else { + el.detachEvent("on" + evt, fn); + } + } + }, + + /** + * Get the children of any element + * + * @param {element} + * @return {array} Returns matching elements in an array + */ + getChildren = function (e) { + if (e.children.length < 1) { + throw new Error("The Nav container has no containing elements"); + } // Store all children in array + + + var children = []; // Loop through children and store in array if child != TextNode + + for (var i = 0; i < e.children.length; i++) { + if (e.children[i].nodeType === 1) { + children.push(e.children[i]); + } + } + + return children; + }, + + /** + * Sets multiple attributes at once + * + * @param {element} element + * @param {attrs} attrs + */ + setAttributes = function (el, attrs) { + for (var key in attrs) { + el.setAttribute(key, attrs[key]); + } + }, + + /** + * Adds a class to any element + * + * @param {element} element + * @param {string} class + */ + addClass = function (el, cls) { + if (el.className.indexOf(cls) !== 0) { + el.className += " " + cls; + el.className = el.className.replace(/(^\s*)|(\s*$)/g, ""); + } + }, + + /** + * Remove a class from any element + * + * @param {element} element + * @param {string} class + */ + removeClass = function (el, cls) { + var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)"); + el.className = el.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g, ""); + }, + + /** + * forEach method that passes back the stuff we need + * + * @param {array} array + * @param {Function} callback + * @param {scope} scope + */ + forEach = function (array, callback, scope) { + for (var i = 0; i < array.length; i++) { + callback.call(scope, i, array[i]); + } + }; + + var nav, + opts, + navToggle, + styleElement = document.createElement("style"), + htmlEl = document.documentElement, + hasAnimFinished, + isMobile, + navOpen; + + var ResponsiveNav = function (el, options) { + var i; + /** + * Default options + * @type {Object} + */ + + this.options = { + animate: true, + // Boolean: Use CSS3 transitions, true or false + transition: 284, + // Integer: Speed of the transition, in milliseconds + label: "Menu", + // String: Label for the navigation toggle + insert: "before", + // String: Insert the toggle before or after the navigation + customToggle: "", + // Selector: Specify the ID of a custom toggle + closeOnNavClick: false, + // Boolean: Close the navigation when one of the links are clicked + openPos: "relative", + // String: Position of the opened nav, relative or static + navClass: "nav-collapse", + // String: Default CSS class. If changed, you need to edit the CSS too! + navActiveClass: "js-nav-active", + // String: Class that is added to element when nav is active + jsClass: "js", + // String: 'JS enabled' class which is added to element + init: function () {}, + // Function: Init callback + open: function () {}, + // Function: Open callback + close: function () {} // Function: Close callback + + }; // User defined options + + for (i in options) { + this.options[i] = options[i]; + } // Adds "js" class for + + + addClass(htmlEl, this.options.jsClass); // Wrapper + + this.wrapperEl = el.replace("#", ""); // Try selecting ID first + + if (document.getElementById(this.wrapperEl)) { + this.wrapper = document.getElementById(this.wrapperEl); // If element with an ID doesn't exist, use querySelector + } else if (document.querySelector(this.wrapperEl)) { + this.wrapper = document.querySelector(this.wrapperEl); // If element doesn't exists, stop here. + } else { + throw new Error("The nav element you are trying to select doesn't exist"); + } // Inner wrapper + + + this.wrapper.inner = getChildren(this.wrapper); // For minification + + opts = this.options; + nav = this.wrapper; // Init + + this._init(this); + }; + + ResponsiveNav.prototype = { + /** + * Unattaches events and removes any classes that were added + */ + destroy: function () { + this._removeStyles(); + + removeClass(nav, "closed"); + removeClass(nav, "opened"); + removeClass(nav, opts.navClass); + removeClass(nav, opts.navClass + "-" + this.index); + removeClass(htmlEl, opts.navActiveClass); + nav.removeAttribute("style"); + nav.removeAttribute("aria-hidden"); + removeEvent(window, "resize", this, false); + removeEvent(window, "focus", this, false); + removeEvent(document.body, "touchmove", this, false); + removeEvent(navToggle, "touchstart", this, false); + removeEvent(navToggle, "touchend", this, false); + removeEvent(navToggle, "mouseup", this, false); + removeEvent(navToggle, "keyup", this, false); + removeEvent(navToggle, "click", this, false); + + if (!opts.customToggle) { + navToggle.parentNode.removeChild(navToggle); + } else { + navToggle.removeAttribute("aria-hidden"); + } + }, + + /** + * Toggles the navigation open/close + */ + toggle: function () { + if (hasAnimFinished === true) { + if (!navOpen) { + this.open(); + } else { + this.close(); + } + } + }, + + /** + * Opens the navigation + */ + open: function () { + if (!navOpen) { + removeClass(nav, "closed"); + addClass(nav, "opened"); + addClass(htmlEl, opts.navActiveClass); + addClass(navToggle, "active"); + nav.style.position = opts.openPos; + setAttributes(nav, { + "aria-hidden": "false" + }); + navOpen = true; + opts.open(); + } + }, + + /** + * Closes the navigation + */ + close: function () { + if (navOpen) { + addClass(nav, "closed"); + removeClass(nav, "opened"); + removeClass(htmlEl, opts.navActiveClass); + removeClass(navToggle, "active"); + setAttributes(nav, { + "aria-hidden": "true" + }); // If animations are enabled, wait until they finish + + if (opts.animate) { + hasAnimFinished = false; + setTimeout(function () { + nav.style.position = "absolute"; + hasAnimFinished = true; + }, opts.transition + 10); // Animations aren't enabled, we can do these immediately + } else { + nav.style.position = "absolute"; + } + + navOpen = false; + opts.close(); + } + }, + + /** + * Resize is called on window resize and orientation change. + * It initializes the CSS styles and height calculations. + */ + resize: function () { + // Resize watches navigation toggle's display state + if (window.getComputedStyle(navToggle, null).getPropertyValue("display") !== "none") { + isMobile = true; + setAttributes(navToggle, { + "aria-hidden": "false" + }); // If the navigation is hidden + + if (nav.className.match(/(^|\s)closed(\s|$)/)) { + setAttributes(nav, { + "aria-hidden": "true" + }); + nav.style.position = "absolute"; + } + + this._createStyles(); + + this._calcHeight(); + } else { + isMobile = false; + setAttributes(navToggle, { + "aria-hidden": "true" + }); + setAttributes(nav, { + "aria-hidden": "false" + }); + nav.style.position = opts.openPos; + + this._removeStyles(); + } + }, + + /** + * Takes care of all even handling + * + * @param {event} event + * @return {type} returns the type of event that should be used + */ + handleEvent: function (e) { + var evt = e || window.event; + + switch (evt.type) { + case "touchstart": + this._onTouchStart(evt); + + break; + + case "touchmove": + this._onTouchMove(evt); + + break; + + case "touchend": + case "mouseup": + this._onTouchEnd(evt); + + break; + + case "click": + this._preventDefault(evt); + + break; + + case "keyup": + this._onKeyUp(evt); + + break; + + case "focus": + case "resize": + this.resize(evt); + break; + } + }, + + /** + * Initializes the widget + */ + _init: function () { + this.index = index++; + addClass(nav, opts.navClass); + addClass(nav, opts.navClass + "-" + this.index); + addClass(nav, "closed"); + hasAnimFinished = true; + navOpen = false; + + this._closeOnNavClick(); + + this._createToggle(); + + this._transitions(); + + this.resize(); + /** + * On IE8 the resize event triggers too early for some reason + * so it's called here again on init to make sure all the + * calculated styles are correct. + */ + + var self = this; + setTimeout(function () { + self.resize(); + }, 20); + addEvent(window, "resize", this, false); + addEvent(window, "focus", this, false); + addEvent(document.body, "touchmove", this, false); + addEvent(navToggle, "touchstart", this, false); + addEvent(navToggle, "touchend", this, false); + addEvent(navToggle, "mouseup", this, false); + addEvent(navToggle, "keyup", this, false); + addEvent(navToggle, "click", this, false); + /** + * Init callback here + */ + + opts.init(); + }, + + /** + * Creates Styles to the + */ + _createStyles: function () { + if (!styleElement.parentNode) { + styleElement.type = "text/css"; + document.getElementsByTagName("head")[0].appendChild(styleElement); + } + }, + + /** + * Removes styles from the + */ + _removeStyles: function () { + if (styleElement.parentNode) { + styleElement.parentNode.removeChild(styleElement); + } + }, + + /** + * Creates Navigation Toggle + */ + _createToggle: function () { + // If there's no toggle, let's create one + if (!opts.customToggle) { + var toggle = document.createElement("a"); + toggle.innerHTML = opts.label; + setAttributes(toggle, { + "href": "#", + "class": "nav-toggle" + }); // Determine where to insert the toggle + + if (opts.insert === "after") { + nav.parentNode.insertBefore(toggle, nav.nextSibling); + } else { + nav.parentNode.insertBefore(toggle, nav); + } + + navToggle = toggle; // There is a toggle already, let's use that one + } else { + var toggleEl = opts.customToggle.replace("#", ""); + + if (document.getElementById(toggleEl)) { + navToggle = document.getElementById(toggleEl); + } else if (document.querySelector(toggleEl)) { + navToggle = document.querySelector(toggleEl); + } else { + throw new Error("The custom nav toggle you are trying to select doesn't exist"); + } + } + }, + + /** + * Closes the navigation when a link inside is clicked. + */ + _closeOnNavClick: function () { + if (opts.closeOnNavClick) { + var links = nav.getElementsByTagName("a"), + self = this; + forEach(links, function (i, el) { + addEvent(links[i], "click", function () { + if (isMobile) { + self.toggle(); + } + }, false); + }); + } + }, + + /** + * Prevents the default functionality. + * + * @param {event} event + */ + _preventDefault: function (e) { + if (e.preventDefault) { + if (e.stopImmediatePropagation) { + e.stopImmediatePropagation(); + } + + e.preventDefault(); + e.stopPropagation(); + return false; // This is strictly for old IE + } else { + e.returnValue = false; + } + }, + + /** + * On touch start we get the location of the touch. + * + * @param {event} event + */ + _onTouchStart: function (e) { + if (!Event.prototype.stopImmediatePropagation) { + this._preventDefault(e); + } + + this.startX = e.touches[0].clientX; + this.startY = e.touches[0].clientY; + this.touchHasMoved = false; + /** + * Remove mouseup event completely here to avoid + * double triggering the event. + */ + + removeEvent(navToggle, "mouseup", this, false); + }, + + /** + * Check if the user is scrolling instead of tapping. + * + * @param {event} event + */ + _onTouchMove: function (e) { + if (Math.abs(e.touches[0].clientX - this.startX) > 10 || Math.abs(e.touches[0].clientY - this.startY) > 10) { + this.touchHasMoved = true; + } + }, + + /** + * On touch end toggle the navigation. + * + * @param {event} event + */ + _onTouchEnd: function (e) { + this._preventDefault(e); + + if (!isMobile) { + return; + } // If the user isn't scrolling + + + if (!this.touchHasMoved) { + // If the event type is touch + if (e.type === "touchend") { + this.toggle(); + return; // Event type was click, not touch + } else { + var evt = e || window.event; // If it isn't a right click, do toggling + + if (!(evt.which === 3 || evt.button === 2)) { + this.toggle(); + } + } + } + }, + + /** + * For keyboard accessibility, toggle the navigation on Enter + * keypress too. + * + * @param {event} event + */ + _onKeyUp: function (e) { + var evt = e || window.event; + + if (evt.keyCode === 13) { + this.toggle(); + } + }, + + /** + * Adds the needed CSS transitions if animations are enabled + */ + _transitions: function () { + if (opts.animate) { + var objStyle = nav.style, + transition = "max-height " + opts.transition + "ms"; + objStyle.WebkitTransition = objStyle.MozTransition = objStyle.OTransition = objStyle.transition = transition; + } + }, + + /** + * Calculates the height of the navigation and then creates + * styles which are later added to the page + */ + _calcHeight: function () { + var savedHeight = 0; + + for (var i = 0; i < nav.inner.length; i++) { + savedHeight += nav.inner[i].offsetHeight; + } + + var innerStyles = "." + opts.jsClass + " ." + opts.navClass + "-" + this.index + ".opened{max-height:" + savedHeight + "px !important} ." + opts.jsClass + " ." + opts.navClass + "-" + this.index + ".opened.dropdown-active {max-height:9999px !important}"; + + if (styleElement.styleSheet) { + styleElement.styleSheet.cssText = innerStyles; + } else { + styleElement.innerHTML = innerStyles; + } + + innerStyles = ""; + } + }; + /** + * Return new Responsive Nav + */ + + return new ResponsiveNav(el, options); + }; + + if ( true && module.exports) { + module.exports = responsiveNav; + } else { + window.responsiveNav = responsiveNav; + } +})(document, window, 0); /***/ }) @@ -131,17 +753,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) /******/ })(); /******/ -/******/ /* webpack/runtime/make namespace object */ -/******/ (() => { -/******/ // define __esModule on exports -/******/ __webpack_require__.r = (exports) => { -/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { -/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); -/******/ } -/******/ Object.defineProperty(exports, '__esModule', { value: true }); -/******/ }; -/******/ })(); -/******/ /******/ /* webpack/runtime/publicPath */ /******/ (() => { /******/ var scriptUrl; @@ -163,11 +774,51 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /******/ })(); /******/ /************************************************************************/ -/******/ -/******/ // startup -/******/ // Load entry module and return exports -/******/ // This entry module can't be inlined because the eval devtool is used. -/******/ var __webpack_exports__ = __webpack_require__("./src/js/app.js"); -/******/ +var __webpack_exports__ = {}; +// This entry need to be wrapped in an IIFE because it need to be in strict mode. +(() => { +"use strict"; + +;// CONCATENATED MODULE: ./src/js/greeting.js +class Greeting { + static SOURCECODE = "Hello. The source code lives via git. Find the repository here:"; + + printToConsole(message) { + console.log(message); + } + +} +// EXTERNAL MODULE: ./node_modules/responsive-nav/client/dist/responsive-nav.js +var responsive_nav = __webpack_require__(594); +var responsive_nav_default = /*#__PURE__*/__webpack_require__.n(responsive_nav); +;// CONCATENATED MODULE: ./src/assets/lg-logo.png +/* harmony default export */ const lg_logo = (__webpack_require__.p + "assets/lg-logo.png"); +;// CONCATENATED MODULE: ./src/assets/member-panel-example.png +/* harmony default export */ const member_panel_example = (__webpack_require__.p + "assets/member-panel-example.png"); +;// CONCATENATED MODULE: ./src/js/app.js + + + + + +class App { + constructor() { + this.init(); + } + + init() { + let greeting = new Greeting(); + greeting.printToConsole(Greeting.SOURCECODE); + let nav = responsive_nav_default()(".nav-collapse", { + customToggle: ".toggle", + jsClass: "js" + }); + } + +} + +new App(); +})(); + /******/ })() ; \ No newline at end of file diff --git a/public/style.css b/public/style.css index e01dcd7..30d716f 100644 --- a/public/style.css +++ b/public/style.css @@ -54,6 +54,11 @@ /*!*******************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/styles.scss ***! \*******************************************************************************************************************************************/ +.img-fluid { + max-width: 100%; + height: auto; +} + h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-top: 0; diff --git a/public/style.min.css b/public/style.min.css index c4a161e..099298a 100644 --- a/public/style.min.css +++ b/public/style.min.css @@ -48,4 +48,4 @@ } } -h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin-top:0;margin-bottom:1.25rem;font-family:Arial,sans-serif;font-weight:700;color:#212529}h1,.h1{font-size:calc(1.4375rem + 2.25vw)}@media(min-width: 1200px){h1,.h1{font-size:3.125rem}}h2,.h2{font-size:calc(1.375rem + 1.5vw)}@media(min-width: 1200px){h2,.h2{font-size:2.5rem}}h3,.h3{font-size:calc(1.34375rem + 1.125vw)}@media(min-width: 1200px){h3,.h3{font-size:2.1875rem}}h4,.h4{font-size:calc(1.3125rem + 0.75vw)}@media(min-width: 1200px){h4,.h4{font-size:1.875rem}}h5,.h5{font-size:calc(1.28125rem + 0.375vw)}@media(min-width: 1200px){h5,.h5{font-size:1.5625rem}}h6,.h6{font-size:1.25rem}.lead{color:#212529;font-size:calc(1.28125rem + 0.375vw);font-weight:400;margin-top:0}@media(min-width: 1200px){.lead{font-size:1.5625rem}}*{box-sizing:border-box}html,body{margin:0;padding:0}html body{background-color:#fff}body{font-size:1.25rem;font-family:Arial,sans-serif;line-height:1.4;color:#212529}p{margin-top:0;margin-bottom:1rem}a{text-decoration:none;color:#ff8f23;text-decoration:underline}a:hover{color:#ff6a23}a:visited{color:#ff8f23}a:active{color:#ffb423}.text-lightblue{color:#b6e2ee}.container{max-width:1200px;margin-left:auto;margin-right:auto}@media(max-width: 78.75em){.container{margin-left:15px;margin-right:15px}}.full-width-container{max-width:100%;margin-left:15px;margin-right:15px}.header{width:100%;height:56px;box-shadow:0 2px 4px rgba(0,0,0,.4);background:transparent;color:#212529;display:flex;flex-direction:row;align-items:center;padding:0 16px}.header .brand{margin-left:auto;padding-left:1em;padding-right:1em;text-decoration:none}.header .brand>h1{color:#4fbad5 !important;display:inline-flex;align-items:center;font-size:calc(1.2875rem + 0.45vw);margin:0}@media(min-width: 1200px){.header .brand>h1{font-size:1.625rem}}.header .brand .brand-img{margin-right:.5rem}.header .brand .second{color:#ff8f23 !important}.header .lang-select{display:inline-flex;vertical-align:middle;margin-left:auto}.header__menu-toggle{background:none;border:none;width:24px;height:24px;padding:0;margin:0 24px 0 0;color:#fff}.side-nav__content{padding-top:32px;flex:1;list-style:none;padding:0;margin:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.side-nav__content li{min-height:48px;line-height:48px}.side-nav__content li a:hover{background:#343a40}.nav-collapse a{color:#000;text-decoration:none;width:100%;background:#fff;border-bottom:1px solid #212529;padding:.7em 1em;float:left}.hero{border-radius:5px;background:linear-gradient(to right, #159957, #155799);min-height:300px;width:100%;color:#fff;justify-content:center;flex-direction:column;flex-grow:1;padding:1.25rem;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.hero>h1{margin:0}.hero .message{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;letter-spacing:5px}.posts ul li{list-style:none;margin-bottom:calc(1.525rem + 3.3vw)}@media(min-width: 1200px){.posts ul li{margin-bottom:4rem}}.posts ul li a{display:-webkit-flex;display:flex;text-decoration:none}.posts ul{border-top:1px solid #495057;padding-left:0;padding-right:0;padding-top:calc(1.625rem + 4.5vw)}@media(min-width: 1200px){.posts ul{padding-top:5rem}}.posts .left{line-height:1em;display:-webkit-flex;display:flex;flex-direction:column}.posts .date{color:#4fbad5;margin-bottom:0.3125rem;margin-right:1em;text-transform:uppercase;font-size:calc(1.275rem + 0.3vw)}@media(min-width: 1200px){.posts .date{font-size:1.5rem}}.posts .year{color:#fff}.posts .title{font-size:calc(1.325rem + 0.9vw)}@media(min-width: 1200px){.posts .title{font-size:2rem}}.posts .right{line-height:1.15em}.lg-title span{background-color:#f8f9fa;padding-top:0.2rem;padding-bottom:0.2rem;padding-left:1rem;padding-right:1rem;border-radius:22px;color:#343a40 !important;border:3px #6c757d solid;display:inline-flex}.lg-title .icon{margin:0;padding-top:0 !important;padding-bottom:0 !important}.lg-title .icon:before{position:relative;top:0;left:0;bottom:0;content:"";margin-top:-3px;margin-bottom:-3px;width:64px;margin-right:calc(1.2625rem + 0.15vw);margin-left:-30px;border-radius:100%}@media(min-width: 1200px){.lg-title .icon:before{margin-right:1.375rem}}#description{width:100%;display:-webkit-flex;display:flex;flex-direction:row;padding:2em;column-gap:20px;border-width:.5em 0 0;border-style:solid;align-items:center;justify-content:center;border-image:linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff) 3;background-color:#29008a !important;background:linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0))}#description .tile{border-left:7px solid #adb5bd;width:20em;padding-left:1.4em;padding-right:1.4em;padding-bottom:2em;background-color:rgba(0,0,0,.9)}#description .tile .content{margin:0 auto;max-width:280px}#description .tile .content p{margin:0 auto}#footer{display:-webkit-flex;display:flex;justify-content:end;margin-top:3em;padding:2em 1em}#footer ul li{list-style:none;display:inline-block;margin-right:.3em} +.img-fluid{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin-top:0;margin-bottom:1.25rem;font-family:Arial,sans-serif;font-weight:700;color:#212529}h1,.h1{font-size:calc(1.4375rem + 2.25vw)}@media(min-width: 1200px){h1,.h1{font-size:3.125rem}}h2,.h2{font-size:calc(1.375rem + 1.5vw)}@media(min-width: 1200px){h2,.h2{font-size:2.5rem}}h3,.h3{font-size:calc(1.34375rem + 1.125vw)}@media(min-width: 1200px){h3,.h3{font-size:2.1875rem}}h4,.h4{font-size:calc(1.3125rem + 0.75vw)}@media(min-width: 1200px){h4,.h4{font-size:1.875rem}}h5,.h5{font-size:calc(1.28125rem + 0.375vw)}@media(min-width: 1200px){h5,.h5{font-size:1.5625rem}}h6,.h6{font-size:1.25rem}.lead{color:#212529;font-size:calc(1.28125rem + 0.375vw);font-weight:400;margin-top:0}@media(min-width: 1200px){.lead{font-size:1.5625rem}}*{box-sizing:border-box}html,body{margin:0;padding:0}html body{background-color:#fff}body{font-size:1.25rem;font-family:Arial,sans-serif;line-height:1.4;color:#212529}p{margin-top:0;margin-bottom:1rem}a{text-decoration:none;color:#ff8f23;text-decoration:underline}a:hover{color:#ff6a23}a:visited{color:#ff8f23}a:active{color:#ffb423}.text-lightblue{color:#b6e2ee}.container{max-width:1200px;margin-left:auto;margin-right:auto}@media(max-width: 78.75em){.container{margin-left:15px;margin-right:15px}}.full-width-container{max-width:100%;margin-left:15px;margin-right:15px}.header{width:100%;height:56px;box-shadow:0 2px 4px rgba(0,0,0,.4);background:transparent;color:#212529;display:flex;flex-direction:row;align-items:center;padding:0 16px}.header .brand{margin-left:auto;padding-left:1em;padding-right:1em;text-decoration:none}.header .brand>h1{color:#4fbad5 !important;display:inline-flex;align-items:center;font-size:calc(1.2875rem + 0.45vw);margin:0}@media(min-width: 1200px){.header .brand>h1{font-size:1.625rem}}.header .brand .brand-img{margin-right:.5rem}.header .brand .second{color:#ff8f23 !important}.header .lang-select{display:inline-flex;vertical-align:middle;margin-left:auto}.header__menu-toggle{background:none;border:none;width:24px;height:24px;padding:0;margin:0 24px 0 0;color:#fff}.side-nav__content{padding-top:32px;flex:1;list-style:none;padding:0;margin:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.side-nav__content li{min-height:48px;line-height:48px}.side-nav__content li a:hover{background:#343a40}.nav-collapse a{color:#000;text-decoration:none;width:100%;background:#fff;border-bottom:1px solid #212529;padding:.7em 1em;float:left}.hero{border-radius:5px;background:linear-gradient(to right, #159957, #155799);min-height:300px;width:100%;color:#fff;justify-content:center;flex-direction:column;flex-grow:1;padding:1.25rem;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.hero>h1{margin:0}.hero .message{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;letter-spacing:5px}.posts ul li{list-style:none;margin-bottom:calc(1.525rem + 3.3vw)}@media(min-width: 1200px){.posts ul li{margin-bottom:4rem}}.posts ul li a{display:-webkit-flex;display:flex;text-decoration:none}.posts ul{border-top:1px solid #495057;padding-left:0;padding-right:0;padding-top:calc(1.625rem + 4.5vw)}@media(min-width: 1200px){.posts ul{padding-top:5rem}}.posts .left{line-height:1em;display:-webkit-flex;display:flex;flex-direction:column}.posts .date{color:#4fbad5;margin-bottom:0.3125rem;margin-right:1em;text-transform:uppercase;font-size:calc(1.275rem + 0.3vw)}@media(min-width: 1200px){.posts .date{font-size:1.5rem}}.posts .year{color:#fff}.posts .title{font-size:calc(1.325rem + 0.9vw)}@media(min-width: 1200px){.posts .title{font-size:2rem}}.posts .right{line-height:1.15em}.lg-title span{background-color:#f8f9fa;padding-top:0.2rem;padding-bottom:0.2rem;padding-left:1rem;padding-right:1rem;border-radius:22px;color:#343a40 !important;border:3px #6c757d solid;display:inline-flex}.lg-title .icon{margin:0;padding-top:0 !important;padding-bottom:0 !important}.lg-title .icon:before{position:relative;top:0;left:0;bottom:0;content:"";margin-top:-3px;margin-bottom:-3px;width:64px;margin-right:calc(1.2625rem + 0.15vw);margin-left:-30px;border-radius:100%}@media(min-width: 1200px){.lg-title .icon:before{margin-right:1.375rem}}#description{width:100%;display:-webkit-flex;display:flex;flex-direction:row;padding:2em;column-gap:20px;border-width:.5em 0 0;border-style:solid;align-items:center;justify-content:center;border-image:linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff) 3;background-color:#29008a !important;background:linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0))}#description .tile{border-left:7px solid #adb5bd;width:20em;padding-left:1.4em;padding-right:1.4em;padding-bottom:2em;background-color:rgba(0,0,0,.9)}#description .tile .content{margin:0 auto;max-width:280px}#description .tile .content p{margin:0 auto}#footer{display:-webkit-flex;display:flex;justify-content:end;margin-top:3em;padding:2em 1em}#footer ul li{list-style:none;display:inline-block;margin-right:.3em}