From 253292977bf78620852c1dc6df802bf740ae624d Mon Sep 17 00:00:00 2001 From: spongycake Date: Sun, 27 Feb 2022 01:35:17 +0000 Subject: [PATCH] build v0.1.4 --- public/index.html | 210 +++++++++++- public/scripts.js | 775 ++++--------------------------------------- public/style.css | 25 +- public/style.min.css | 2 +- src/index.html | 10 +- 5 files changed, 298 insertions(+), 724 deletions(-) diff --git a/public/index.html b/public/index.html index 6676caa..36e4314 100644 --- a/public/index.html +++ b/public/index.html @@ -1 +1,209 @@ -

LibreGaming

EN

The Quick Brown Fox

The quick brown fox jumps over the lazy dog

GAMING

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading
h6. heading

NEWS

Most of them will probably be about front-end performance work, or possibly broader coding things. The odd one will be tagged #personal or #opinion, so if you have the RSS feed you can filter those out if you don't want them!

Desciption

Currently, our main channels of communication are instant messaging rooms hosted on the Matrix network. They are also accessible via Jabber/XMPP and IRC protocols, so that contributors can use their favorite client to join us.

Members

\ No newline at end of file + + + + + + + + +
+ + + + + + +

+ + LibreGaming +

+ +
EN
+
+ +
+
+
+

The Quick Brown Fox

+

The quick brown fox jumps over the lazy dog

+
+
+
+
+
+

The quick brown fox jumps over the lazy dog

+
+
Jeb
+
+

GAMING

+

h1. heading

+

h2. heading

+

h3. heading

+

h4. heading

+
h5. heading
+
h6. heading
+ +

NEWS

+
+

Most of them will probably be about front-end performance work, or possibly broader coding things. The odd one will be tagged #personal or #opinion, so if you have the RSS feed you can filter those out if you don't want them!

+
+
+ +
+
+
+

Desciption

+

Currently, our main channels of communication are instant messaging rooms hosted on the Matrix network. They are also accessible via Jabber/XMPP and IRC protocols, so that contributors can use their favorite client to join us.

+
+
+
+
+

Members

+ +
+
+
+ +
+ + + + diff --git a/public/scripts.js b/public/scripts.js index 4a0d10b..da17dfc 100644 --- a/public/scripts.js +++ b/public/scripts.js @@ -1,687 +1,65 @@ +/* + * 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__ = ({ -/***/ 594: +/***/ "./node_modules/responsive-nav/client/dist/responsive-nav.js": +/*!*******************************************************************!*\ + !*** ./node_modules/responsive-nav/client/dist/responsive-nav.js ***! + \*******************************************************************/ /***/ ((module) => { -/*! 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 - */ +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?"); -/* global Event */ -(function (document, window, index) { - // Index is used to keep multiple navs on the same page namespaced - "use strict"; +/***/ }), - var responsiveNav = function (el, options) { - var computed = !!window.getComputedStyle; - /** - * getComputedStyle polyfill for old browsers - */ +/***/ "./src/js/app.js": +/*!***********************!*\ + !*** ./src/js/app.js ***! + \***********************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - if (!computed) { - window.getComputedStyle = function (el) { - this.el = el; +"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\");\n\n\n\n\n\nclass App {\n constructor() {\n this.init();\n }\n\n init() {\n let greeting = new _greeting_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]();\n greeting.printToConsole(_greeting_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"].SOURCECODE);\n let nav = responsive_nav__WEBPACK_IMPORTED_MODULE_1___default()(\".nav-collapse\", {\n customToggle: \".toggle\",\n jsClass: \"js\"\n });\n }\n\n}\n\nnew App();\n\n//# sourceURL=webpack://libregaming-design-system/./src/js/app.js?"); - this.getPropertyValue = function (prop) { - var re = /(\-([a-z]){1})/g; +/***/ }), - if (prop === "float") { - prop = "styleFloat"; - } +/***/ "./src/js/greeting.js": +/*!****************************!*\ + !*** ./src/js/greeting.js ***! + \****************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - if (re.test(prop)) { - prop = prop.replace(re, function () { - return arguments[2].toUpperCase(); - }); - } +"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 */ });\nclass Greeting {\n static SOURCECODE = \"Hello. The source code lives via git. Find the repository here:\";\n\n printToConsole(message) {\n console.log(message);\n }\n\n}\n\n//# sourceURL=webpack://libregaming-design-system/./src/js/greeting.js?"); - return el.currentStyle[prop] ? el.currentStyle[prop] : null; - }; +/***/ }), - return this; - }; - } - /* exported addEvent, removeEvent, getChildren, setAttributes, addClass, removeClass, forEach */ +/***/ "./src/assets/lg-logo.png": +/*!********************************!*\ + !*** ./src/assets/lg-logo.png ***! + \********************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - /** - * 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 - */ +"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?"); +/***/ }), - 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); - } - } - }, +/***/ "./src/assets/member-panel-example.png": +/*!*********************************************!*\ + !*** ./src/assets/member-panel-example.png ***! + \*********************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - /** - * 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); +"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?"); /***/ }) @@ -753,6 +131,17 @@ /******/ __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; @@ -774,51 +163,11 @@ /******/ })(); /******/ /************************************************************************/ -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(); -})(); - +/******/ +/******/ // 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"); +/******/ /******/ })() ; \ No newline at end of file diff --git a/public/style.css b/public/style.css index 30d716f..091e8cb 100644 --- a/public/style.css +++ b/public/style.css @@ -117,6 +117,17 @@ h6, .h6 { font-size: 1.25rem; } +.body-font { + font-size: calc(1.2625rem + 0.15vw); + max-width: 45rem; + line-height: 1.5; +} +@media (min-width: 1200px) { + .body-font { + font-size: 1.375rem; + } +} + .lead { color: #212529; font-size: calc(1.28125rem + 0.375vw); @@ -155,18 +166,18 @@ p { } a { - text-decoration: none; - color: #ff8f23; + color: #04768F; + font-weight: 700; text-decoration: underline; } a:hover { - color: #ff6a23; + color: #059fc1; } a:visited { - color: #ff8f23; + color: #04768F; } a:active { - color: #ffb423; + color: #04768F; } .text-lightblue { @@ -180,8 +191,8 @@ a:active { } @media (max-width: 78.75em) { .container { - margin-left: 15px; - margin-right: 15px; + padding-left: 0.9375rem; + padding-right: 0.9375rem; } } diff --git a/public/style.min.css b/public/style.min.css index 099298a..39c05c7 100644 --- a/public/style.min.css +++ b/public/style.min.css @@ -48,4 +48,4 @@ } } -.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} +.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}.body-font{font-size:calc(1.2625rem + 0.15vw);max-width:45rem;line-height:1.5}@media(min-width: 1200px){.body-font{font-size:1.375rem}}.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{color:#04768f;font-weight:700;text-decoration:underline}a:hover{color:#059fc1}a:visited{color:#04768f}a:active{color:#04768f}.text-lightblue{color:#b6e2ee}.container{max-width:1200px;margin-left:auto;margin-right:auto}@media(max-width: 78.75em){.container{padding-left:0.9375rem;padding-right:0.9375rem}}.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} diff --git a/src/index.html b/src/index.html index 9453eca..9e83193 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - +
@@ -40,6 +40,12 @@
+
+
+

The quick brown fox jumps over the lazy dog

+
+
Jeb
+

GAMING

h1. heading

h2. heading

@@ -50,7 +56,7 @@

NEWS

-

Most of them will probably be about front-end performance work, or possibly broader coding things. The odd one will be tagged #personal or #opinion, so if you have the RSS feed you can filter those out if you don't want them!

+

Most of them will probably be about front-end performance work, or possibly broader coding things. The odd one will be tagged #personal or #opinion, so if you have the RSS feed you can filter those out if you don't want them!