diff --git a/demo-386.js b/demo-386.js index 7a6037b..07914a3 100644 --- a/demo-386.js +++ b/demo-386.js @@ -1,7 +1,10 @@ import * as riot from 'riot'; import TinyOnePage from './src/TinyOnePage.riot'; +import TinyOnePageHeightAnimate from './src/TinyOnePageHeightAnimate.js'; riot.register('tiny-one-page', TinyOnePage); // adding component with animate object -riot.mount('tiny-one-page'); +riot.mount('tiny-one-page', { + 'animate': new TinyOnePageHeightAnimate() +}); diff --git a/demo-386.scss b/demo-386.scss index f9d94f5..0caec9c 100644 --- a/demo-386.scss +++ b/demo-386.scss @@ -1,9 +1,11 @@ +@import 'src/fonts/stylesheet.css'; + /** * variables * */ -$text-color: #000; +$text-color: #fff; $link-color: #fefe5b; $link-background-color: #008106; $background-color: #000084; @@ -23,12 +25,7 @@ body { font-size: 1.2rem; } -*:first-letter { - color: $link-color; -} - a { - color: $text-color; text-decoration: none; } @@ -40,33 +37,53 @@ a { */ .navbar { - position: fixed; - top: 0; - left: 0; - width: 100%; - text-align: center; + padding: 10px; background-color: $background-contrast-color; + @media (min-width: 768px) { + padding: 0; + } + ul { list-style: none; + + padding: 10px; margin: 0; - padding: 0.6em 0.8em; + border: 1px solid #000; + + @media (min-width: 768px) { + margin: 0 0 0 10px; + padding: 0; + border: none; + } li { - display: inline-block; + display: block; + line-height: 20px; - a { + @media (min-width: 768px) { display: inline-block; - padding: 0.1em; + } + + a { + display: block; + padding: 4px 10px; + color: #fff; + + @media (min-width: 768px) { + display: inline-block; + } &:hover { - background-color: $link-background-color; + color: #fff; + background-color: #000; } } &.current { a { - background-color: $link-background-color; + color: #fff; + background-color: #000; } } } @@ -79,7 +96,7 @@ a { * */ main { - max-width: 960px; + max-width: 600px; margin: 2em auto 0; } @@ -110,12 +127,13 @@ footer { */ .section { - padding: 4em; - margin: 1em 0; - line-height: 1.8; - background-color: $background-contrast-color; -} + padding: 50px 0.8em; + line-height: 1.5; + @media (min-width: 768px) { + padding: 50px 0; + } +} /** * icons @@ -129,6 +147,18 @@ footer { color: $link-color; } +.icon-tiny-one-page-open { + &:after { + content: '\2630'; + } +} + +.icon-tiny-one-page-close { + &:after { + content: '\2A2F'; + } +} + /** * tiny-tiny-hamburger @@ -137,32 +167,50 @@ footer { */ .tiny-one-page { - &__inner { - padding: 4px 8px 5px; - } // modal with animation &__modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + + z-index: 99; + height: auto; max-height: 0; overflow: hidden; transition: max-height 0.2s; + + @media (min-width: 768px) { + max-height: none !important; + } } &__button { + position: fixed; + top: 0; + right: 0; + + font-size: 1.8rem; + appearance: none; border: none; background: transparent; - padding: 0.3em 0.5em; + padding: 0.7em 0.8em; + + z-index: 100; + + &:hover, &:focus { + outline: none; + } &:hover { cursor: pointer; - outline: none; - background-color: $background-contrast-color; } - &:focus { - outline: none; + @media (min-width: 768px) { + display: none; } } } diff --git a/dist/css/demo-386.css b/dist/css/demo-386.css index a6ae9bc..e21d6dc 100644 --- a/dist/css/demo-386.css +++ b/dist/css/demo-386.css @@ -1,155 +1 @@ -/** - * variables - * - */ - -/** - * default elements - * - */ - -body { - color: #000; - background-color: #000084; - font-family: "PxPlus IBM VGA8", sans-serif; - font-style: normal; - font-size: 1.2rem; -} - -*:first-letter { - color: #fefe5b; -} - -a { - color: #000; - text-decoration: none; -} - -/** - * navigation - * - * - */ - -.navbar { - position: fixed; - top: 0; - left: 0; - width: 100%; - text-align: center; - background-color: #bbbbbb; -} - -.navbar ul { - list-style: none; - margin: 0; - padding: 0.6em 0.8em; -} - -.navbar ul li { - display: inline-block; -} - -.navbar ul li a { - display: inline-block; - padding: 0.1em; -} - -.navbar ul li a:hover { - background-color: #008106; -} - -.navbar ul li.current a { - background-color: #008106; -} - -/** - * - * - */ - -main { - max-width: 960px; - margin: 2em auto 0; -} - -/** - * footer - * - * - */ - -footer { - text-align: center; - font-size: 3rem; - width: 100%; - background: #000; - padding: 0.8em 0; -} - -footer i { - color: #fff !important; -} - -/** - * section - * - * - */ - -.section { - padding: 4em; - margin: 1em 0; - line-height: 1.8; - background-color: #bbbbbb; -} - -/** - * icons - * - * - */ - -[class^=icon-tiny], -[class*=" icon-tiny"] { - font-family: "PxPlus IBM VGA8", sans-serif !important; - font-style: normal; - color: #fefe5b; -} - -/** - * tiny-tiny-hamburger - * - * - */ - -.tiny-one-page__inner { - padding: 4px 8px 5px; -} - -.tiny-one-page__modal { - height: auto; - max-height: 0; - overflow: hidden; - transition: max-height 0.2s; -} - -.tiny-one-page__button { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: none; - background: transparent; - padding: 0.3em 0.5em; -} - -.tiny-one-page__button:hover { - cursor: pointer; - outline: none; - background-color: #bbbbbb; -} - -.tiny-one-page__button:focus { - outline: none; -} - +@font-face{font-family:PxPlus IBM VGA8;src:url(/fonts/PxPlus_IBM_VGA8.eot?6487324f1ac4377e882c9af6ce96da0f);src:url(/fonts/PxPlus_IBM_VGA8.eot?6487324f1ac4377e882c9af6ce96da0f?#iefix) format("embedded-opentype"),url(/fonts/PxPlus_IBM_VGA8.woff2?28087632ed5e0851a1ec27def2b1e73f) format("woff2"),url(/fonts/PxPlus_IBM_VGA8.woff?5f9b12f2cef3f405002438fafa0e41a6) format("woff"),url(/fonts/PxPlus_IBM_VGA8.ttf?8fa23fdc4e2cff030f42999bc1ede4b2) format("truetype"),url(/fonts/PxPlus_IBM_VGA8.svg?3000c157212c66cf53ad18f0d7b7a12f#PxPlus_IBM_VGA8) format("svg");font-weight:400;font-style:normal}body{color:#fff;background-color:#000084;font-family:PxPlus IBM VGA8,sans-serif;font-style:normal;font-size:1.2rem}a{text-decoration:none}.navbar{padding:10px;background-color:#bbb}@media (min-width:768px){.navbar{padding:0}}.navbar ul{list-style:none;padding:10px;margin:0;border:1px solid #000}@media (min-width:768px){.navbar ul{margin:0 0 0 10px;padding:0;border:none}}.navbar ul li{display:block;line-height:20px}@media (min-width:768px){.navbar ul li{display:inline-block}}.navbar ul li a{display:block;padding:4px 10px;color:#fff}@media (min-width:768px){.navbar ul li a{display:inline-block}}.navbar ul li.current a,.navbar ul li a:hover{color:#fff;background-color:#000}main{max-width:600px;margin:2em auto 0}footer{text-align:center;font-size:3rem;width:100%;background:#000;padding:.8em 0}footer i{color:#fff!important}.section{padding:50px .8em;line-height:1.5}@media (min-width:768px){.section{padding:50px 0}}[class*=" icon-tiny"],[class^=icon-tiny]{font-family:PxPlus IBM VGA8,sans-serif!important;font-style:normal;color:#fefe5b}.icon-tiny-one-page-open:after{content:"\2630"}.icon-tiny-one-page-close:after{content:"\2A2F"}.tiny-one-page__modal{position:fixed;top:0;left:0;width:100%;z-index:99;height:auto;max-height:0;overflow:hidden;transition:max-height .2s}@media (min-width:768px){.tiny-one-page__modal{max-height:none!important}}.tiny-one-page__button{position:fixed;top:0;right:0;font-size:1.8rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:.7em .8em;z-index:100}.tiny-one-page__button:focus,.tiny-one-page__button:hover{outline:none}.tiny-one-page__button:hover{cursor:pointer}@media (min-width:768px){.tiny-one-page__button{display:none}} \ No newline at end of file diff --git a/dist/css/demo.css b/dist/css/demo.css deleted file mode 100644 index 94d5e9e..0000000 --- a/dist/css/demo.css +++ /dev/null @@ -1,30 +0,0 @@ -.navbar { - position: fixed; - width: 100%; - text-align: center; - background-color: white; -} - -.navbar li { - display: inline-block; - margin: 0 0.3em; -} - -.navbar li a { - display: block; - transition: all 0.1s ease-in-out; -} - -.navbar li a:hover { - transform: scale(1.3); -} - -.navbar li.current a { - transform: scale(1.3); -} - -.section { - padding: 6em; - line-height: 1.8; -} - diff --git a/dist/fonts/PxPlus_IBM_VGA8.eot b/dist/fonts/PxPlus_IBM_VGA8.eot new file mode 100644 index 0000000..d30a1f0 Binary files /dev/null and b/dist/fonts/PxPlus_IBM_VGA8.eot differ diff --git a/dist/fonts/PxPlus_IBM_VGA8.svg b/dist/fonts/PxPlus_IBM_VGA8.svg new file mode 100644 index 0000000..38282d4 --- /dev/null +++ b/dist/fonts/PxPlus_IBM_VGA8.svg @@ -0,0 +1,1625 @@ + + + + +Created by FontForge 20170731 at Fri Dec 11 13:13:27 2015 + By Aleksey,,, +Outline (vector) version (c) 2015 VileR + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dist/fonts/PxPlus_IBM_VGA8.ttf b/dist/fonts/PxPlus_IBM_VGA8.ttf new file mode 100644 index 0000000..e5d3652 Binary files /dev/null and b/dist/fonts/PxPlus_IBM_VGA8.ttf differ diff --git a/dist/fonts/PxPlus_IBM_VGA8.woff b/dist/fonts/PxPlus_IBM_VGA8.woff new file mode 100644 index 0000000..1bf623e Binary files /dev/null and b/dist/fonts/PxPlus_IBM_VGA8.woff differ diff --git a/dist/fonts/PxPlus_IBM_VGA8.woff2 b/dist/fonts/PxPlus_IBM_VGA8.woff2 new file mode 100644 index 0000000..70cb86c Binary files /dev/null and b/dist/fonts/PxPlus_IBM_VGA8.woff2 differ diff --git a/dist/fonts/stylesheet.css b/dist/fonts/stylesheet.css new file mode 100644 index 0000000..6478095 --- /dev/null +++ b/dist/fonts/stylesheet.css @@ -0,0 +1,11 @@ +@font-face { + font-family: 'PxPlus IBM VGA8'; + src: url('PxPlus_IBM_VGA8.eot'); + src: url('PxPlus_IBM_VGA8.eot?#iefix') format('embedded-opentype'), + url('PxPlus_IBM_VGA8.woff2') format('woff2'), + url('PxPlus_IBM_VGA8.woff') format('woff'), + url('PxPlus_IBM_VGA8.ttf') format('truetype'), + url('PxPlus_IBM_VGA8.svg#PxPlus_IBM_VGA8') format('svg'); + font-weight: normal; + font-style: normal; +} diff --git a/dist/index.html b/dist/index.html index 8fc2d5c..f35200a 100644 --- a/dist/index.html +++ b/dist/index.html @@ -14,9 +14,7 @@ diff --git a/dist/js/demo-386.js b/dist/js/demo-386.js index a8d7fef..3b868bf 100644 --- a/dist/js/demo-386.js +++ b/dist/js/demo-386.js @@ -1,2706 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); -/******/ } -/******/ }; -/******/ -/******/ // define __esModule on exports -/******/ __webpack_require__.r = function(exports) { -/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { -/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); -/******/ } -/******/ Object.defineProperty(exports, '__esModule', { value: true }); -/******/ }; -/******/ -/******/ // create a fake namespace object -/******/ // mode & 1: value is a module id, require it -/******/ // mode & 2: merge all properties of value into the ns -/******/ // mode & 4: return value when already ns object -/******/ // mode & 8|1: behave like require -/******/ __webpack_require__.t = function(value, mode) { -/******/ if(mode & 1) value = __webpack_require__(value); -/******/ if(mode & 8) return value; -/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; -/******/ var ns = Object.create(null); -/******/ __webpack_require__.r(ns); -/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); -/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); -/******/ return ns; -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = "/"; -/******/ -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ({ - -/***/ "./demo-386.js": -/*!*********************!*\ - !*** ./demo-386.js ***! - \*********************/ -/*! no exports provided */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! riot */ "./node_modules/riot/riot.esm.js"); -/* harmony import */ var _src_TinyOnePage_riot__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./src/TinyOnePage.riot */ "./src/TinyOnePage.riot"); - - -riot__WEBPACK_IMPORTED_MODULE_0__["register"]('tiny-one-page', _src_TinyOnePage_riot__WEBPACK_IMPORTED_MODULE_1__["default"]); // adding component with animate object - -riot__WEBPACK_IMPORTED_MODULE_0__["mount"]('tiny-one-page'); - -/***/ }), - -/***/ "./demo-386.scss": -/*!***********************!*\ - !*** ./demo-386.scss ***! - \***********************/ -/*! no static exports found */ -/***/ (function(module, exports) { - -// removed by extract-text-webpack-plugin - -/***/ }), - -/***/ "./node_modules/riot/riot.esm.js": -/*!***************************************!*\ - !*** ./node_modules/riot/riot.esm.js ***! - \***************************************/ -/*! exports provided: __, component, install, mount, register, uninstall, unmount, unregister, version */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__", function() { return __; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "component", function() { return component; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "install", function() { return install; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mount", function() { return mount; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "register", function() { return register; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "uninstall", function() { return uninstall; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "unmount", function() { return unmount; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "unregister", function() { return unregister; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "version", function() { return version; }); -/* Riot v4.5.0, @license MIT */ -const COMPONENTS_IMPLEMENTATION_MAP = new Map(), - DOM_COMPONENT_INSTANCE_PROPERTY = Symbol('riot-component'), - PLUGINS_SET = new Set(), - IS_DIRECTIVE = 'is', - VALUE_ATTRIBUTE = 'value', - ATTRIBUTES_KEY_SYMBOL = Symbol('attributes'), - TEMPLATE_KEY_SYMBOL = Symbol('template'); - -var globals = /*#__PURE__*/Object.freeze({ - COMPONENTS_IMPLEMENTATION_MAP: COMPONENTS_IMPLEMENTATION_MAP, - DOM_COMPONENT_INSTANCE_PROPERTY: DOM_COMPONENT_INSTANCE_PROPERTY, - PLUGINS_SET: PLUGINS_SET, - IS_DIRECTIVE: IS_DIRECTIVE, - VALUE_ATTRIBUTE: VALUE_ATTRIBUTE, - ATTRIBUTES_KEY_SYMBOL: ATTRIBUTES_KEY_SYMBOL, - TEMPLATE_KEY_SYMBOL: TEMPLATE_KEY_SYMBOL -}); - -/** - * Remove the child nodes from any DOM node - * @param {HTMLElement} node - target node - * @returns {undefined} - */ -function cleanNode(node) { - clearChildren(node.childNodes); -} -/** - * Clear multiple children in a node - * @param {HTMLElement[]} children - direct children nodes - * @returns {undefined} - */ - - -function clearChildren(children) { - Array.from(children).forEach(n => n.parentNode && n.parentNode.removeChild(n)); -} - -const EACH = 0; -const IF = 1; -const SIMPLE = 2; -const TAG = 3; -const SLOT = 4; -var bindingTypes = { - EACH, - IF, - SIMPLE, - TAG, - SLOT -}; -/** - * Create the template meta object in case of