├── .editorconfig ├── .github └── ISSUE_TEMPLATE.md ├── .gitignore ├── .prettierrc ├── MIT-LICENSE.txt ├── README.md ├── gh-page.sh ├── lerna.json ├── package.json ├── packages ├── nodeppt-js │ ├── .npmignore │ ├── assets │ │ ├── images │ │ │ ├── android.png │ │ │ ├── avatar.jpg │ │ │ ├── bt-appstore.png │ │ │ ├── bt-playstore.png │ │ │ ├── davinci.png │ │ │ ├── favicons │ │ │ │ ├── favicon-120.png │ │ │ │ ├── favicon-152.png │ │ │ │ ├── favicon-180.png │ │ │ │ ├── favicon-192.png │ │ │ │ ├── favicon-32.png │ │ │ │ ├── favicon-76.png │ │ │ │ └── favicon.png │ │ │ ├── iphone-hand.png │ │ │ ├── iphone.png │ │ │ ├── logos │ │ │ │ ├── airbnb.svg │ │ │ │ ├── apple.svg │ │ │ │ ├── facebook.svg │ │ │ │ ├── google.svg │ │ │ │ ├── instagram.svg │ │ │ │ ├── logo.svg │ │ │ │ ├── microsoft.svg │ │ │ │ ├── netflix.svg │ │ │ │ ├── nyt.svg │ │ │ │ └── thetimes.svg │ │ │ ├── setup.png │ │ │ ├── share-webslides.jpg │ │ │ └── swipe.svg │ │ └── less │ │ │ ├── _base.less │ │ │ ├── _color.less │ │ │ ├── _typography.less │ │ │ ├── _vars.less │ │ │ ├── full.less │ │ │ ├── index.less │ │ │ ├── modules │ │ │ ├── _animation.less │ │ │ ├── _avatars.less │ │ │ ├── _badges.less │ │ │ ├── _browser.less │ │ │ ├── _build.less │ │ │ ├── _button.less │ │ │ ├── _cards.less │ │ │ ├── _flexblock-activity.less │ │ │ ├── _flexblock-clients.less │ │ │ ├── _flexblock-features.less │ │ │ ├── _flexblock-gallery.less │ │ │ ├── _flexblock-metrics.less │ │ │ ├── _flexblock-plans.less │ │ │ ├── _flexblock-reasons.less │ │ │ ├── _flexblock-specs.less │ │ │ ├── _flexblock-steps.less │ │ │ ├── _flexblock.less │ │ │ ├── _form.less │ │ │ ├── _grid.less │ │ │ ├── _header-footer.less │ │ │ ├── _logo.less │ │ │ ├── _longform.less │ │ │ ├── _media.less │ │ │ ├── _navigation.less │ │ │ ├── _print.less │ │ │ ├── _promos.less │ │ │ ├── _quotes.less │ │ │ ├── _slides-bg.less │ │ │ ├── _slides-navigation.less │ │ │ ├── _slides.less │ │ │ ├── _speaker-note.less │ │ │ ├── _tables.less │ │ │ ├── _toc.less │ │ │ ├── _with-note.less │ │ │ ├── _work.less │ │ │ └── _zoom.less │ │ │ └── utils │ │ │ ├── _animations.less │ │ │ ├── _bugs.less │ │ │ ├── _clear.less │ │ │ └── _reset.less │ ├── index.js │ ├── package.json │ └── plugins │ │ ├── echarts.js │ │ ├── keyboard.js │ │ ├── mermaid.js │ │ ├── speaker-mode.js │ │ └── speaker-note.js ├── nodeppt-parser │ ├── .npmignore │ ├── __tests__ │ │ ├── classes.md │ │ ├── demo.md │ │ └── public │ │ │ └── demo.js │ ├── defaults.js │ ├── index.js │ ├── lib │ │ ├── get-markdown-parser.js │ │ ├── get-parser.js │ │ ├── markdown │ │ │ ├── attrs │ │ │ │ ├── index.js │ │ │ │ ├── patterns.js │ │ │ │ └── utils.js │ │ │ ├── cite.js │ │ │ ├── container.js │ │ │ ├── containers │ │ │ │ ├── blink.js │ │ │ │ ├── card.js │ │ │ │ ├── column.js │ │ │ │ ├── cta.js │ │ │ │ ├── div.js │ │ │ │ ├── features.js │ │ │ │ ├── flexblock.js │ │ │ │ ├── flexbox.js │ │ │ │ ├── gallery.js │ │ │ │ ├── shadow.js │ │ │ │ ├── specs.js │ │ │ │ └── steps.js │ │ │ ├── echarts.js │ │ │ ├── fa.js │ │ │ ├── img.js │ │ │ ├── jsx.js │ │ │ ├── link.js │ │ │ ├── mermaid.js │ │ │ ├── plus-list.js │ │ │ ├── prism.js │ │ │ ├── regexp │ │ │ │ ├── index.js │ │ │ │ └── utils.js │ │ │ └── span.js │ │ ├── tags │ │ │ ├── attrs.js │ │ │ ├── header-footer.js │ │ │ ├── note.js │ │ │ ├── slide.js │ │ │ └── utils.js │ │ ├── utils.js │ │ └── yaml-parser.js │ ├── package.json │ └── template │ │ └── index.ejs ├── nodeppt-serve │ ├── .npmignore │ ├── PluginAPI.js │ ├── Service.js │ ├── commands │ │ ├── build.js │ │ └── serve.js │ ├── config │ │ ├── app.js │ │ ├── base.js │ │ ├── css.js │ │ ├── dev.js │ │ └── prod.js │ ├── index.js │ ├── lib │ │ ├── globalConfigPlugin.js │ │ └── utils.js │ ├── options.js │ ├── package.json │ └── template │ │ ├── main.js │ │ └── reload.js ├── nodeppt-shared-utils │ ├── .npmignore │ ├── index.js │ ├── lib │ │ ├── download-repo.js │ │ ├── eval.js │ │ ├── find-existing.js │ │ ├── get-debug.js │ │ ├── get-latest-version.js │ │ ├── git-user.js │ │ ├── logger.js │ │ ├── new-version-log.js │ │ ├── path.js │ │ ├── plugin.js │ │ ├── prepare-urls.js │ │ ├── spinner.js │ │ └── webpack-error.js │ └── package.json └── nodeppt │ ├── .npmignore │ ├── README.md │ ├── __tests__ │ └── demo.md │ ├── bin │ └── nodeppt │ ├── commands │ └── new.js │ ├── lib │ ├── ask.js │ └── generate.js │ └── package.json └── site ├── animation.md ├── background.md ├── classes.md ├── component.md ├── echarts.md ├── index.md ├── layout.md ├── media.md ├── mermaid.md └── public └── background.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [{.travis.yml,ci.yml}] 12 | indent_style = space 13 | indent_size = 2 14 | 15 | [*.md] 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | 13 | 14 | | Executable | Version | 15 | | ---: | :--- | 16 | | `node --version` | VERSION | 17 | | `npm --version` | VERSION | 18 | | `nodeppt -v` | VERSION | 19 | 20 | 21 | | OS | Version | 22 | | --- | --- | 23 | | NAME | VERSION | 24 | 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | yarn.lock 2 | /node_modules 3 | /.sass-cache 4 | /src/index.html 5 | /test 6 | /3th 7 | /.idea 8 | /.vscode 9 | .DS_Store 10 | /npm-debug.log 11 | dist 12 | publish 13 | output 14 | 15 | yarn-lock.json 16 | package-lock.json 17 | 18 | .DS_Store 19 | ### Node ### 20 | # Logs 21 | logs 22 | *.log 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # Runtime data 28 | pids 29 | *.pid 30 | *.seed 31 | *.pid.lock 32 | 33 | # Directory for instrumented libs generated by jscoverage/JSCover 34 | lib-cov 35 | 36 | # Coverage directory used by tools like istanbul 37 | coverage 38 | 39 | # nyc test coverage 40 | .nyc_output 41 | 42 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 43 | .grunt 44 | 45 | # Bower dependency directory (https://bower.io/) 46 | bower_components 47 | 48 | # node-waf configuration 49 | .lock-wscript 50 | 51 | # Compiled binary addons (http://nodejs.org/api/addons.html) 52 | build/Release 53 | 54 | # Dependency directories 55 | node_modules/ 56 | jspm_packages/ 57 | 58 | # Typescript v1 declaration files 59 | typings/ 60 | 61 | # Optional npm cache directory 62 | .npm 63 | 64 | # Optional eslint cache 65 | .eslintcache 66 | 67 | # Optional REPL history 68 | .node_repl_history 69 | 70 | # Output of 'npm pack' 71 | *.tgz 72 | 73 | # Yarn Integrity file 74 | .yarn-integrity 75 | 76 | # dotenv environment variables file 77 | .env 78 | 79 | 80 | ### WebStorm ### 81 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm 82 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 83 | 84 | # User-specific stuff: 85 | .idea/**/workspace.xml 86 | .idea/**/tasks.xml 87 | .idea/dictionaries 88 | 89 | # Sensitive or high-churn files: 90 | .idea/**/dataSources/ 91 | .idea/**/dataSources.ids 92 | .idea/**/dataSources.xml 93 | .idea/**/dataSources.local.xml 94 | .idea/**/sqlDataSources.xml 95 | .idea/**/dynamic.xml 96 | .idea/**/uiDesigner.xml 97 | 98 | # Gradle: 99 | .idea/**/gradle.xml 100 | .idea/**/libraries 101 | 102 | # CMake 103 | cmake-build-debug/ 104 | 105 | # Mongo Explorer plugin: 106 | .idea/**/mongoSettings.xml 107 | 108 | ## File-based project format: 109 | *.iws 110 | 111 | ## Plugin-specific files: 112 | 113 | # IntelliJ 114 | /out/ 115 | 116 | # mpeltonen/sbt-idea plugin 117 | .idea_modules/ 118 | 119 | # JIRA plugin 120 | atlassian-ide-plugin.xml 121 | 122 | # Cursive Clojure plugin 123 | .idea/replstate.xml 124 | 125 | # Crashlytics plugin (for Android Studio and IntelliJ) 126 | com_crashlytics_export_strings.xml 127 | crashlytics.properties 128 | crashlytics-build.properties 129 | fabric.properties 130 | 131 | ### WebStorm Patch ### 132 | # Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721 133 | 134 | # *.iml 135 | # modules.xml 136 | # .idea/misc.xml 137 | # *.ipr 138 | 139 | # Sonarlint plugin 140 | .idea/sonarlint 141 | 142 | # End of https://www.gitignore.io/api/node,webstorm 143 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "printWidth": 120, 4 | "tabWidth": 4, 5 | "bracketSpacing": false, 6 | "overrides": [ 7 | { 8 | "files": ".prettierrc", 9 | "options": {"parser": "json"} 10 | } 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /MIT-LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright 2013 Theowang http://js8.in 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /gh-page.sh: -------------------------------------------------------------------------------- 1 | #! /bin/sh 2 | set -e 3 | rm -rf publish 4 | cd site 5 | 6 | node ../packages/nodeppt/bin/nodeppt build index.md 7 | node ../packages/nodeppt/bin/nodeppt build animation.md 8 | node ../packages/nodeppt/bin/nodeppt build component.md 9 | node ../packages/nodeppt/bin/nodeppt build layout.md 10 | node ../packages/nodeppt/bin/nodeppt build media.md 11 | node ../packages/nodeppt/bin/nodeppt build background.md 12 | node ../packages/nodeppt/bin/nodeppt build classes.md 13 | 14 | cd dist 15 | 16 | echo 'nodeppt.js.org' > CNAME 17 | git init 18 | git add -A 19 | date_str=`date "+DATE: %m/%d/%Y%nTIME: %H:%M:%S"` 20 | git commit -m "build with nodeppt on $date_str" 21 | #exit 22 | echo 'push remote github' 23 | git push -u git@github.com:ksky521/nodeppt.git master:gh-pages --force 24 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "packages/*" 4 | ], 5 | "npmClient": "yarn", 6 | "command": { 7 | "bootstrap": { 8 | "npmClientArgs": [ 9 | "--no-lockfile" 10 | ] 11 | } 12 | }, 13 | "version": "2.2.2" 14 | } 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nodeppt", 3 | "private": true, 4 | "workspaces": [ 5 | "packages/*" 6 | ], 7 | "devDependencies": { 8 | "lerna": "^3.20.2" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/nodeppt-js/.npmignore: -------------------------------------------------------------------------------- 1 | __tests__ 2 | __mocks__ 3 | package-lock.json 4 | yarn.lock 5 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/android.png -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/avatar.jpg -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/bt-appstore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/bt-appstore.png -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/bt-playstore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/bt-playstore.png -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/davinci.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/davinci.png -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/favicons/favicon-120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/favicons/favicon-120.png -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/favicons/favicon-152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/favicons/favicon-152.png -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/favicons/favicon-180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/favicons/favicon-180.png -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/favicons/favicon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/favicons/favicon-192.png -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/favicons/favicon-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/favicons/favicon-32.png -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/favicons/favicon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/favicons/favicon-76.png -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/favicons/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/favicons/favicon.png -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/iphone-hand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/iphone-hand.png -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/iphone.png -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/logos/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 46 | 47 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/logos/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 31 | 32 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/logos/netflix.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 42 | 43 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/setup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/setup.png -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/share-webslides.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksky521/nodeppt/44f4babb6586d3d0f2dad830e9956a1e39507d47/packages/nodeppt-js/assets/images/share-webslides.jpg -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/images/swipe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 45 | 46 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/less/_base.less: -------------------------------------------------------------------------------- 1 | // sass-lint:disable no-vendor-prefixes 2 | 3 | /*========================================= 4 | 1. Base --> Baseline: 8px = .8rem 5 | =========================================== */ 6 | 7 | /* -- Disable elastic scrolling/bounce: 8 | webslides.js will add .ws-ready automatically. Don't worry :) -- */ 9 | 10 | .ws-ready { 11 | &, 12 | body { 13 | height: 100%; 14 | overflow: hidden; 15 | width: 100%; 16 | } 17 | 18 | &.ws-ready-zoom { 19 | overflow: visible; 20 | 21 | body { 22 | overflow: auto; 23 | } 24 | } 25 | } 26 | 27 | #webslides { 28 | -ms-overflow-style: none; 29 | -webkit-overflow-scrolling: touch; // sass-lint:disable-line no-misspelled-properties 30 | height: 100vh; 31 | overflow-x: hidden; 32 | overflow-y: scroll; 33 | 34 | &::-webkit-scrollbar { 35 | display: none; 36 | } 37 | } 38 | 39 | li li { 40 | margin-left: 1.6rem; 41 | } 42 | 43 | a, 44 | a:active, 45 | a:focus, 46 | a:visited, 47 | input:focus, 48 | textarea:focus, 49 | button { 50 | text-decoration: none; 51 | transition: all 0.3s ease-out; 52 | } 53 | 54 | p a:active { 55 | position: relative; 56 | top: 2px; 57 | } 58 | 59 | nav a[rel='external'] em, 60 | .hidden { 61 | clip: rect(1px, 1px, 1px, 1px); 62 | height: 1px; 63 | overflow: hidden; 64 | position: absolute; 65 | width: 1px; 66 | } 67 | 68 | .shadow { 69 | position: relative; 70 | 71 | &:before, 72 | &:after { 73 | bottom: 1.6rem; 74 | content: ''; 75 | max-width: 300px; 76 | position: absolute; 77 | top: 80%; 78 | width: 50%; 79 | z-index: -1; 80 | } 81 | 82 | &:after { 83 | right: 2.4rem; 84 | transform: rotate(3deg); 85 | } 86 | 87 | &:before { 88 | left: 2.4rem; 89 | transform: rotate(-3deg); 90 | } 91 | } 92 | 93 | /*=== 1.1 WRAP/CONTAINER === */ 94 | .wrap, 95 | header nav, 96 | footer nav { 97 | margin-left: auto; 98 | margin-right: auto; 99 | max-width: 100%; 100 | position: relative; 101 | width: 100%; 102 | z-index: 2; 103 | 104 | @media (min-width: 1024px) { 105 | width: 90%; 106 | } 107 | } 108 | 109 | .frame, 110 | .shadow { 111 | padding: 2.4rem; 112 | } 113 | 114 | .radius { 115 | border-radius: 0.4rem; 116 | } 117 | 118 | .alignright { 119 | float: right; 120 | } 121 | 122 | .alignleft { 123 | float: left; 124 | } 125 | 126 | .aligncenter { 127 | margin-left: auto; 128 | margin-right: auto; 129 | text-align: center; 130 | } 131 | 132 | img.aligncenter, 133 | figure.aligncenter { 134 | display: block; 135 | margin-bottom: 0.8rem; 136 | margin-top: 0.8rem; 137 | } 138 | 139 | img.alignleft, 140 | figure.alignleft, 141 | img.alignright, 142 | figure.alignright, 143 | img.aligncenter, 144 | figure.aligncenter { 145 | margin-bottom: 3.2rem; 146 | margin-top: 3.2rem; 147 | } 148 | 149 | img.alignright, 150 | svg.alignright, 151 | figure.alignright { 152 | margin: 0.8rem 0 0.8rem 2.4rem; 153 | } 154 | 155 | img.alignleft, 156 | svg.alignleft, 157 | figure.alignleft { 158 | margin: 0.8rem 2.4rem 0.8rem 0; 159 | } 160 | 161 | @sizes: 80, 70, 60, 50, 40, 30, 20; 162 | 163 | /*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */ 164 | @media (min-width: 1024px) { 165 | each(@sizes, { 166 | .size-@{value} { 167 | width: @value * 1%; 168 | } 169 | }); 170 | } 171 | 172 | pre, 173 | code { 174 | font-family: 'Cousine', monospace; 175 | } 176 | 177 | pre { 178 | font-size: 1.6rem; 179 | line-height: 2.4rem; 180 | overflow: auto; 181 | padding: 2.4rem; 182 | text-align: left; 183 | white-space: pre-wrap; 184 | width: 100%; 185 | word-wrap: break-word; 186 | 187 | & + p { 188 | margin-top: 3.2rem; 189 | } 190 | 191 | code { 192 | padding: 0; 193 | } 194 | } 195 | 196 | code { 197 | padding: 0.4rem; 198 | } 199 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/less/_vars.less: -------------------------------------------------------------------------------- 1 | // sass-lint:disable no-color-literals 2 | 3 | // ========= 4 | // Colors. Names from http://chir.ag/projects/name-that-color/ 5 | // ========= 6 | @black: #000; 7 | @white: #fff; 8 | @mine-shaft: #333; 9 | @royal-blue: #44d; 10 | @havelock-blue: #67d; 11 | @catskill-white: #f7f9fb; 12 | @cod-gray: #111; 13 | @big-stone: #123; 14 | @rhino: #346; 15 | @athens-gray: #f8f8f9; 16 | @mischka: #d5d9e2; 17 | @pine-green: #077; 18 | @purple-heart: #62b; 19 | @cardinal: #c23; 20 | @mirage: #1a2028; 21 | @pickled-bluewood: #293845; 22 | @facebook: #3b5998; 23 | @spindle: #bce; 24 | @dodger-blue: #3af; 25 | @pattens-blue: #def; 26 | @stratos: #001450; 27 | @gray-brown: #f9f8f2; 28 | 29 | 30 | @body-color: @mine-shaft; 31 | @body-bg: @catskill-white; 32 | @focus-box-shadow: 0 0 2px rgba(150, 187, 238, 1); 33 | @link-color: @royal-blue; 34 | @link-color-secondary: @cardinal; 35 | @link-hover: @dodger-blue; 36 | @hr-bg: radial-gradient(ellipse at center, rgba(0, 20, 80, 0.2) 0, rgba(255, 255, 255, 0) 75%); 37 | @current-zoomed-slide-shadow: 0 0 7px rgba(0, 187, 255, 0.5); 38 | @index-overlay: rgba(0, 10, 40, 0.8); 39 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/less/full.less: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------------------------------------- 2 | 0. CSS Reset & Normalize 3 | 1. Base 4 | 1.1 Wrap/Container 5 | 1.2 Animations 6 | 1.3 Responsive Media (videos, iframe, screenshots...) 7 | 1.4 Basic Grid (2,3,4 columns) 8 | 2. Typography & Lists 9 | 2.1 Headings with background 10 | 2.2 Classes: .text- 11 | 2.3 San Francisco Font (Apple) 12 | 3. Header & Footer 13 | 3.1 Logo 14 | 4. Navigation 15 | 4.1 Navbars 16 | 5. SLIDES (vertically and horizontally centered) 17 | 5.1 Mini container & Alignment 18 | 5.2 Counter / Navigation Slides 19 | 5.3 Background Images/Video 20 | 6. Magic blocks = .flexblock (Flexible blocks with auto-fill and equal height). 21 | 6.1 .flexblock.features 22 | 6.2 .flexblock.clients 23 | 6.3 .flexblock.steps 24 | 6.4 .flexblock.metrics 25 | 6.5 .flexblock.specs 26 | 6.6 .flexblock.reasons 27 | 6.7 .flexblock.gallery 28 | 6.8 .flexblock.plans 29 | 6.9. flexblock.activity 30 | 7. Promos/Offers (pricing, tagline, CTA...) 31 | 8. Work / Resume / CV 32 | 9. Table of contents 33 | 10. Cards 34 | 11. Quotes 35 | 12. Avatars 36 | 13. Tables 37 | 14. Forms 38 | 15. Longform Elements 39 | 16. Safari Bug (flex-wrap) 40 | 17. Slidex index (aka zoom) 41 | 18. Print 42 | 19. Colors 43 | ----------------------------------------------------------------------------------- */ 44 | 45 | @import (optional) '_vars.less'; 46 | @import (optional) 'utils/_reset.less'; 47 | @import (optional) 'utils/_clear.less'; 48 | @import (optional) '_base.less'; 49 | @import (optional) 'utils/_animations.less'; 50 | @import (optional) 'modules/_media.less'; 51 | @import (optional) 'modules/_browser.less'; 52 | @import (optional) 'modules/_grid.less'; 53 | @import (optional) '_typography.less'; 54 | @import (optional) 'modules/_header-footer.less'; 55 | // @import (optional) "modules/logo.less"; 56 | // @import (optional) 'modules/_logo.less'; 57 | @import (optional) 'modules/_navigation.less'; 58 | @import (optional) 'modules/_slides.less'; 59 | @import (optional) 'modules/_slides-bg.less'; 60 | @import (optional) 'modules/_slides-navigation.less'; 61 | @import (optional) 'modules/_flexblock.less'; 62 | @import (optional) 'modules/_flexblock-features.less'; 63 | @import (optional) 'modules/_flexblock-clients.less'; 64 | @import (optional) 'modules/_flexblock-steps.less'; 65 | @import (optional) 'modules/_flexblock-metrics.less'; 66 | @import (optional) 'modules/_flexblock-specs.less'; 67 | @import (optional) 'modules/_flexblock-reasons.less'; 68 | @import (optional) 'modules/_flexblock-gallery.less'; 69 | @import (optional) 'modules/_flexblock-plans.less'; 70 | @import (optional) 'modules/_flexblock-activity.less'; 71 | @import (optional) 'modules/_promos.less'; 72 | @import (optional) 'modules/_work.less'; 73 | @import (optional) 'modules/_toc.less'; 74 | @import (optional) 'modules/_cards.less'; 75 | @import (optional) 'modules/_quotes.less'; 76 | @import (optional) 'modules/_avatars.less'; 77 | @import (optional) 'modules/_tables.less'; 78 | @import (optional) 'modules/_form.less'; 79 | @import (optional) 'modules/_button.less'; 80 | @import (optional) "modules/_badges.less"; 81 | @import (optional) 'modules/_longform.less'; 82 | @import (optional) 'utils/_bugs.less'; 83 | @import (optional) 'modules/_zoom.less'; 84 | @import (optional) 'modules/_print.less'; 85 | // speaker mode 86 | @import (optional) 'modules/_with-note.less'; 87 | @import (optional) '_color.less'; 88 | 89 | // speaker-note 90 | @import (optional) 'modules/_speaker-note.less'; 91 | @import (optional) 'modules/_animation.less'; 92 | 93 | // build item 94 | @import (optional) 'modules/_build.less'; 95 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/less/index.less: -------------------------------------------------------------------------------- 1 | #webslides { 2 | opacity: 0; 3 | } 4 | 5 | .ws-ready #webslides { 6 | opacity: 1; 7 | } 8 | 9 | i.fa { 10 | display: inline-block; 11 | vertical-align: middle; 12 | width: 1em; 13 | height: 1em; 14 | } 15 | 16 | [class*='fa-'].large { 17 | font-size: 8rem; 18 | } 19 | 20 | .embed .echarts, 21 | .embed .lang-mermaid { 22 | min-height: 20vw; 23 | > div { 24 | margin: 0 auto; 25 | } 26 | } 27 | .embed .lang-mermaid { 28 | visibility: hidden; 29 | text-align: center; 30 | } 31 | .animated.delay-300 { 32 | animation-delay: 0.3s; 33 | } 34 | 35 | .animated.delay-400 { 36 | animation-delay: 0.4s; 37 | } 38 | 39 | .animated.delay-500 { 40 | animation-delay: 0.5s; 41 | } 42 | 43 | .animated.delay-600 { 44 | animation-delay: 0.6s; 45 | } 46 | 47 | .animated.delay-700 { 48 | animation-delay: 0.7s; 49 | } 50 | 51 | .animated.delay-800 { 52 | animation-delay: 0.8s; 53 | } 54 | 55 | .animated.delay-900 { 56 | animation-delay: 0.9s; 57 | } 58 | 59 | .animated.delay-1100 { 60 | animation-delay: 1.1s; 61 | } 62 | 63 | .animated.delay-1200 { 64 | animation-delay: 1.2s; 65 | } 66 | 67 | .animated.delay-1300 { 68 | animation-delay: 1.3s; 69 | } 70 | 71 | .animated.delay-1400 { 72 | animation-delay: 1.4s; 73 | } 74 | 75 | .animated.delay-1500 { 76 | animation-delay: 1.5s; 77 | } 78 | 79 | .animated.delay-1600 { 80 | animation-delay: 1.6s; 81 | } 82 | 83 | .animated.delay-1700 { 84 | animation-delay: 1.7s; 85 | } 86 | 87 | .animated.delay-1800 { 88 | animation-delay: 1.8s; 89 | } 90 | 91 | .animated.delay-2400 { 92 | animation-delay: 2.4s; 93 | } 94 | 95 | .animated.delay-2500 { 96 | animation-delay: 2.5s; 97 | } 98 | .animated.delay-2800 { 99 | animation-delay: 2.8s; 100 | } 101 | .animated.delay-3200 { 102 | animation-delay: 3.2s; 103 | } 104 | .animated.delay-3600 { 105 | animation-delay: 3.6s; 106 | } 107 | .animated.delay-4s { 108 | animation-delay: 4s; 109 | } 110 | section ul { 111 | display: inline-block; 112 | text-align: left; 113 | list-style: disc; 114 | &.no-list-style { 115 | list-style: none; 116 | } 117 | & > li { 118 | margin-bottom: 0.5em; 119 | ul { 120 | margin-top: 0.5em; 121 | display: block; 122 | } 123 | ul > li { 124 | list-style-type: circle; 125 | } 126 | } 127 | } 128 | 129 | .flexblock li { 130 | a.bg-trans-light, 131 | a.bg-red, 132 | a.bg-green, 133 | a.bg-blue, 134 | a.bg-purple, 135 | a.bg-trans-dark, 136 | a.bg-primary, 137 | a.bg-secondary, 138 | a.bg-black, 139 | a.bg-black-blue { 140 | color: white; 141 | } 142 | } 143 | 144 | .badge-ios { 145 | background-image: url('../images/bt-appstore.png'); 146 | } 147 | 148 | .badge-android { 149 | background-image: url('../images/bt-playstore.png'); 150 | } 151 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/less/modules/_animation.less: -------------------------------------------------------------------------------- 1 | // 翻页效果 2 | 3 | .slide.pagedown[data-transition='slide'].past { 4 | animation: slideOutScaleLeft 1s forwards cubic-bezier(1, 0, 0, 1); 5 | } 6 | 7 | .slide.pagedown[data-transition='slide'].current { 8 | opacity: 1; 9 | animation: slideInFromRight 1s forwards cubic-bezier(1, 0, 0, 1); 10 | } 11 | 12 | .slide.pageup[data-transition='slide'].current { 13 | opacity: 1; 14 | animation: slideInFromLeft 1s forwards cubic-bezier(1, 0, 0, 1); 15 | } 16 | 17 | .slide.pageup[data-transition='slide'].next { 18 | opacity: 1; 19 | animation: slideOutScaleRight 1s forwards cubic-bezier(1, 0, 0, 1); 20 | } 21 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/less/modules/_avatars.less: -------------------------------------------------------------------------------- 1 | /*========================================= 2 | 12. Avatars - uifaces.com 3 | =========================================== */ 4 | 5 | cite img, 6 | img[class*='avatar-'] { 7 | display: inline-block; 8 | margin-right: 6px; 9 | vertical-align: middle; 10 | } 11 | 12 | img[class*='avatar-'] { 13 | border-radius: 50%; 14 | } 15 | 16 | @avatar-sizes: 40, 48, 56, 64, 72, 80; 17 | each(@avatar-sizes, { 18 | img.avatar-@{value} { 19 | @width: @{value}px; 20 | height: @width; 21 | width: @width; 22 | } 23 | }); 24 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/less/modules/_badges.less: -------------------------------------------------------------------------------- 1 | /*=== App Store Badges === */ 2 | /* Change width and height: 216x64px, 162x48px, 135x40... */ 3 | 4 | [class*='badge-'] { 5 | background-repeat: no-repeat; 6 | background-size: cover; 7 | border-radius: 0.6rem; 8 | display: inline-block; 9 | height: 40px; 10 | line-height: 4rem; 11 | text-indent: -4000px; 12 | width: 135px; 13 | 14 | &:hover { 15 | opacity: 0.7; 16 | } 17 | 18 | @media (min-width: 1024px) { 19 | height: 48px; 20 | line-height: 4.8rem; 21 | width: 162px; 22 | } 23 | 24 | @media (min-width: 500px) { 25 | & + & { 26 | margin-left: 1.8rem; 27 | } 28 | } 29 | 30 | @media (max-width: 499px) { 31 | & + & { 32 | margin-top: 0.8rem; 33 | } 34 | } 35 | } 36 | 37 | 38 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/less/modules/_browser.less: -------------------------------------------------------------------------------- 1 | /*=== HTML Browser (Screenshots) ================ */ 2 | /*
img
*/ 3 | 4 | .browser { 5 | border-radius: 0.3rem; 6 | margin: 0 auto 3.2rem; 7 | max-width: 1024px; 8 | overflow: hidden; 9 | 10 | li & { 11 | margin-bottom: 0; 12 | } 13 | 14 | h1 + &, 15 | h2 + &, 16 | p + & { 17 | margin-top: 4.8rem; 18 | } 19 | 20 | figcaption { 21 | padding: 2.4rem; 22 | } 23 | 24 | &:before { 25 | content: '● ● ●'; 26 | font-size: 0.8rem; 27 | left: 0; 28 | line-height: 0; 29 | padding: 1.6rem; 30 | position: absolute; 31 | text-align: left; 32 | top: 0; 33 | width: 100%; 34 | 35 | @media (min-width: 768px) { 36 | font-size: 1.6rem; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/less/modules/_build.less: -------------------------------------------------------------------------------- 1 | /* Builds */ 2 | 3 | .build.fadeIn { 4 | > * { 5 | transition: opacity 0.5s ease-in-out 0.2s; 6 | } 7 | .tobuild { 8 | opacity: 0; 9 | } 10 | } 11 | 12 | .zoomIn > * { 13 | animation: none; 14 | } 15 | 16 | .zoomIn { 17 | > * { 18 | opacity: 1; 19 | } 20 | .tobuild { 21 | opacity: 0; 22 | } 23 | .animated { 24 | opacity: 1; 25 | animation-duration: 0.75s; 26 | animation-fill-mode: both; 27 | } 28 | } 29 | 30 | .zoomIn { 31 | .animated { 32 | animation-name: zoomIn; 33 | } 34 | } 35 | 36 | .moveIn { 37 | > * { 38 | transition: all 0.5s ease-in-out 0.2s; 39 | } 40 | .tobuild { 41 | opacity: 0; 42 | transform: translate3d(60px, 0, 0); 43 | } 44 | } 45 | 46 | .rollIn { 47 | > * { 48 | transition: all 0.4s ease; 49 | } 50 | .animated { 51 | opacity: 1; 52 | visibility: visible; 53 | transform: rotateX(0); 54 | } 55 | .tobuild { 56 | opacity: 0; 57 | visibility: hidden; 58 | transform: rotateX(90deg); 59 | } 60 | } 61 | 62 | section .build, 63 | section .tobuild { 64 | animation: none; 65 | } 66 | 67 | section .tobuild { 68 | opacity: 0; 69 | } 70 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/less/modules/_button.less: -------------------------------------------------------------------------------- 1 | /* Buttons/Badges */ 2 | [class*='button'] { 3 | @media (min-width: 500px) { 4 | & + & { 5 | margin-left: 1.8rem; 6 | } 7 | } 8 | 9 | @media (max-width: 499px) { 10 | & + & { 11 | margin-top: 0.8rem; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/less/modules/_cards.less: -------------------------------------------------------------------------------- 1 | /*=========================================== 2 | 10. Cards 3 | ============================================= */ 4 | 5 | [class*='card-'] { 6 | &, 7 | & > a { 8 | clear: both; 9 | display: flex; 10 | flex-direction: row; 11 | position: relative; 12 | } 13 | 14 | .fullscreen &, 15 | .fullscreen & > a { 16 | min-height: 100vh; 17 | } 18 | 19 | figure img, 20 | figure iframe { 21 | display: block; 22 | margin: 0 auto; 23 | } 24 | 25 | figure figcaption { 26 | bottom: 0; 27 | font-size: 1.4rem; 28 | left: 0; 29 | line-height: 2.4rem; 30 | padding: 0.8rem 2.4rem; 31 | position: absolute; 32 | z-index: 2; 33 | 34 | svg { 35 | font-size: 1rem; 36 | } 37 | } 38 | } 39 | 40 | @media (min-width: 768px) { 41 | [class*='card'][class*='bg-'] figure, 42 | .fullscreen [class*='card'] figure { 43 | max-height: 100%; 44 | min-width: 380px; 45 | text-align: center; 46 | vertical-align: middle; 47 | } 48 | 49 | [class*='card-'][class*='bg-'] figure img, 50 | [class*='card-'][class*='bg-'] figure iframe, 51 | .fullscreen [class*='card-'] figure img, 52 | .fullscreen [class*='card-'] figure iframe { 53 | height: 100%; 54 | left: 0; 55 | object-fit: cover; 56 | position: absolute; 57 | top: 0; 58 | width: 100%; 59 | z-index: 1; 60 | } 61 | } 62 | 63 | .flex-content, 64 | [class*='card'] blockquote { 65 | padding: 2.4rem; 66 | position: relative; 67 | } 68 | 69 | [class*='card-'] .flex-content, 70 | [class*='card-'] blockquote { 71 | display: flex; 72 | flex-direction: column; 73 | justify-content: center; 74 | } 75 | 76 | .flex-content p { 77 | position: relative; 78 | } 79 | 80 | @media (min-width: 768px) { 81 | .card-50 figure, 82 | .card-50 blockquote, 83 | .card-50 .flex-content { 84 | width: 50%; 85 | } 86 | 87 | .card-30 figure, 88 | .card-70 .flex-content, 89 | .card-70 blockquote { 90 | width: 30%; 91 | } 92 | 93 | .card-40 figure, 94 | .card-60 .flex-content, 95 | .card-60 blockquote { 96 | width: 40%; 97 | } 98 | 99 | .card-60 figure, 100 | .card-40 .flex-content, 101 | .card-40 blockquote { 102 | width: 60%; 103 | } 104 | 105 | .card-70 figure, 106 | .card-30 .flex-content, 107 | .card-30 blockquote { 108 | width: 70%; 109 | } 110 | 111 | [class*='card']:nth-child(odd) figure { 112 | order: 0; 113 | } 114 | 115 | [class*='card']:nth-child(even) figure { 116 | order: 1; 117 | } 118 | 119 | .flex-content, 120 | [class*='card'] blockquote { 121 | padding: 4.8rem; 122 | } 123 | 124 | .fullscreen [class*='card'] .flex-content, 125 | .fullscreen [class*='card'] blockquote { 126 | padding: 6.4rem; 127 | } 128 | } 129 | 130 | @media (max-width: 767px) { 131 | [class*='card-'], 132 | [class*='card-'] > a { 133 | flex-flow: column; 134 | } 135 | 136 | .card figure, 137 | .card header { 138 | width: 100%; 139 | } 140 | } 141 | -------------------------------------------------------------------------------- /packages/nodeppt-js/assets/less/modules/_flexblock-activity.less: -------------------------------------------------------------------------------- 1 | /*=========================================== 2 | 6.9 Block Activity