├── .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 |
47 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/images/logos/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
32 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/images/logos/netflix.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
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 |
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
3 | CV / News
4 | ============================================= */
5 |
6 | .flexblock.activity {
7 | flex-direction: column;
8 |
9 | li {
10 | flex: 1;
11 | position: relative;
12 | width: auto;
13 | }
14 |
15 | p {
16 | margin-bottom: 0;
17 | vertical-align: top;
18 | }
19 |
20 | img {
21 | display: block;
22 | }
23 |
24 | .year,
25 | .title {
26 | display: inline;
27 | font-weight: 600;
28 | }
29 |
30 | .summary {
31 | width: 100%;
32 | }
33 |
34 | .title {
35 | margin-left: 1rem;
36 | }
37 |
38 | @media (min-width: 768px) {
39 | p {
40 | float: left;
41 | }
42 |
43 | .year {
44 | width: 15%;
45 | }
46 |
47 | .title {
48 | margin-left: 4%;
49 | margin-right: 4%;
50 | width: 27%;
51 | }
52 |
53 | .summary {
54 | width: 50%;
55 | }
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_flexblock-clients.less:
--------------------------------------------------------------------------------
1 | /*=====================================================================
2 | 6.2 Clients Logos
3 | ======================================================================= */
4 |
5 | .flexblock.clients.blink li > a,
6 | .flexblock.clients li {
7 | padding: 0;
8 | }
9 |
10 | .flexblock.clients li figcaption {
11 | padding: 0 2.4rem 2.4rem;
12 | }
13 |
14 | .flexblock.clients.border li figcaption {
15 | padding-top: 2.4rem;
16 | }
17 |
18 | .clients.blink li > a,
19 | .clients li {
20 | justify-content: inherit;
21 | }
22 |
23 | .clients li img,
24 | .clients li svg {
25 | display: block;
26 | padding: 2.4rem;
27 | }
28 |
29 | .clients.border li img,
30 | .clients.border li svg {
31 | display: block;
32 | margin-left: auto;
33 | margin-right: auto;
34 | }
35 |
36 | .clients li:hover {
37 | z-index: 1;
38 | }
39 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_flexblock-features.less:
--------------------------------------------------------------------------------
1 | /*====================================================================
2 | 6.1 Features
3 | ====================================================================== */
4 |
5 | .flexblock.features {
6 | > li {
7 | border-radius: 0.4rem;
8 | margin-bottom: 4.8rem;
9 | width: 100%;
10 | }
11 | li h2 {
12 | text-transform: uppercase;
13 | }
14 | li span {
15 | font-weight: 300;
16 | }
17 | li p {
18 | margin: 0;
19 | }
20 | li p em {
21 | display: block;
22 | }
23 | li span,
24 | li svg,
25 | li i.fa {
26 | display: block;
27 | font-size: 6.4rem;
28 | line-height: 1;
29 | margin: 0;
30 | }
31 | li img {
32 | width: 6.4rem;
33 | }
34 | li span sup {
35 | font-size: 3rem;
36 | }
37 | @media (min-width: 1200px) {
38 | li span,
39 | li svg,
40 | li i.fa,
41 | li img {
42 | float: left;
43 | margin-right: 0.8rem;
44 | }
45 | li i.fa {
46 | margin-right: 1.8rem;
47 | }
48 | }
49 | }
50 |
51 | @media (min-width: 768px) {
52 | .flexblock.features {
53 | margin-left: -2%;
54 | margin-right: -2%;
55 | }
56 | .flexblock.features > li {
57 | margin-left: 2%;
58 | margin-right: 2%;
59 | width: 29%;
60 | }
61 | .size-50 .flexblock.features > li {
62 | width: 46%;
63 | }
64 | .column .flexblock.features > li {
65 | width: 100%;
66 | }
67 | footer .flexblock.features > li {
68 | margin-bottom: 0;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_flexblock-gallery.less:
--------------------------------------------------------------------------------
1 | /*=================================================
2 | 6.7 Gallery -
3 | Block Thumbnails li+.overlay+image
4 | img size recommended:800x600px
5 | =================================================== */
6 |
7 | .flexblock.gallery {
8 | li {
9 | margin-bottom: 4.8rem;
10 |
11 | &:nth-child(n + 4) {
12 | flex: inherit;
13 | }
14 |
15 | figcaption {
16 | padding: 1.6rem;
17 | position: relative;
18 |
19 | &:before {
20 | content: '';
21 | height: 0;
22 | left: 20%;
23 | margin-left: -0.5em;
24 | position: absolute;
25 | top: 0.4rem;
26 | transform: rotate(135deg);
27 | transform-origin: 0 0;
28 | transition: 0.1s;
29 | width: 0;
30 | }
31 | }
32 |
33 | &:hover figcaption:before {
34 | top: 0.3rem;
35 | }
36 | }
37 |
38 | .aligncenter & li figcaption:before {
39 | left: 55%;
40 | margin-left: 0;
41 | }
42 |
43 | li,
44 | &.blink li > a {
45 | padding: 0;
46 | }
47 |
48 | h2 {
49 | text-transform: uppercase;
50 | }
51 |
52 | h2 + p,
53 | h3 + p {
54 | margin-top: 0.8rem;
55 | }
56 |
57 | p {
58 | font-size: 1.6rem;
59 | line-height: 2.4rem;
60 | margin-bottom: 0;
61 | }
62 |
63 | li footer {
64 | margin-top: 0.8rem;
65 | padding: 1.2rem 0 0;
66 | position: relative;
67 | }
68 |
69 | li img {
70 | display: block;
71 | margin-left: auto;
72 | margin-right: auto;
73 | }
74 |
75 | @media (min-width: 600px) {
76 | margin-left: -2%;
77 | margin-right: -2%;
78 |
79 | li {
80 | margin-left: 2%;
81 | margin-right: 2%;
82 | width: 46%;
83 | }
84 | }
85 | }
86 |
87 | @media (min-width: 1024px) {
88 | .flexblock.gallery li {
89 | width: 21%;
90 | }
91 |
92 | .grid.sm .flexblock.gallery li,
93 | .grid.ms .flexblock.gallery li {
94 | width: 29%;
95 | }
96 |
97 | .grid.sms .flexblock.gallery li {
98 | width: 46%;
99 | }
100 | }
101 |
102 | .overlay {
103 | bottom: 0;
104 | cursor: pointer;
105 | display: flex;
106 | flex-direction: column;
107 | height: 100%;
108 | justify-content: center;
109 | left: 0;
110 | opacity: 1;
111 | position: absolute;
112 | right: 0;
113 | top: 0;
114 | transition: all 0.3s linear;
115 | width: 100%;
116 | z-index: 2;
117 | }
118 |
119 | li .overlay {
120 | align-items: center;
121 | }
122 |
123 | li .overlay h2 {
124 | letter-spacing: 0.2rem;
125 | margin: 0;
126 | padding: 0 2.4rem;
127 | text-align: center;
128 | text-transform: uppercase;
129 | width: 100%;
130 | }
131 |
132 | .overlay p,
133 | .overlay time {
134 | margin-bottom: 0;
135 | }
136 |
137 | li:hover .overlay {
138 | cursor: pointer;
139 | }
140 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_flexblock-metrics.less:
--------------------------------------------------------------------------------
1 | /*=================================================
2 | 6.4 Block Numbers -
3 | =================================================== */
4 |
5 | .metrics li {
6 | text-align: center;
7 | width: 100%;
8 |
9 | @media (min-width: 568px) {
10 | width: 50%;
11 | }
12 |
13 | @media (min-width: 1024px) {
14 | width: 25%;
15 | }
16 | }
17 |
18 | .metrics li strong {
19 | display: block;
20 | }
21 |
22 | .metrics li span,
23 | .metrics li i,
24 | .metrics li svg {
25 | display: block;
26 | font-size: 6.4rem;
27 | line-height: 7.2rem;
28 | margin: 0 auto;
29 | }
30 |
31 | .card-50 .metrics li {
32 | width: 50%;
33 | }
34 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_flexblock-plans.less:
--------------------------------------------------------------------------------
1 | /*===============================================
2 | 6.8 Plans / Pricing
3 | ================================================= */
4 |
5 | .flexblock.plans {
6 | > li {
7 | border-radius: 3px;
8 | margin-bottom: 4.8rem;
9 | text-align: center;
10 | z-index: 1;
11 | }
12 |
13 | li,
14 | &.blink li > a {
15 | padding: 0;
16 | }
17 |
18 | &.blink li > a div,
19 | li div {
20 | padding-bottom: 3.2rem;
21 | }
22 |
23 | li p,
24 | li h2 {
25 | padding: 0.8rem 3.2rem;
26 | }
27 |
28 | li h2 {
29 | float: left;
30 | font-weight: 400;
31 | letter-spacing: 0.1rem;
32 | text-transform: uppercase;
33 | width: 100%;
34 | }
35 |
36 | .price {
37 | clear: both;
38 | display: block;
39 | font-size: 4.8rem;
40 | font-weight: 400;
41 | line-height: 6.2rem;
42 | padding: 2.4rem;
43 |
44 | sup {
45 | font-size: 1.8rem;
46 | margin-right: 0.4rem;
47 | }
48 |
49 | li ul {
50 | margin-bottom: 2.4rem;
51 | }
52 | }
53 |
54 | li ul li {
55 | display: block;
56 | padding: 0.8rem 3.2rem;
57 | text-align: left;
58 | width: 100%;
59 | }
60 |
61 | @media (min-width: 1024px) {
62 | margin-left: -2%;
63 | margin-right: -2%;
64 |
65 | > li {
66 | margin-left: 2%;
67 | margin-right: 2%;
68 | width: 29%;
69 | }
70 |
71 | > li:hover,
72 | > li:nth-child(2) {
73 | position: relative;
74 | transform: scale(1.08);
75 | z-index: 2;
76 | }
77 |
78 | &:hover li:nth-child(2):not(:hover) {
79 | position: relative;
80 | transform: scale(1);
81 | z-index: 1;
82 | }
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_flexblock-reasons.less:
--------------------------------------------------------------------------------
1 | /*=================================================
2 | 6.6 Reasons/Why/Numbers (counter-increment)
3 |
4 | =================================================== */
5 | .flexblock.reasons {
6 | li {
7 | counter-increment: list;
8 | text-align: left;
9 | width: 100%;
10 |
11 | &:hover {
12 | transform: translateY(-0.2rem);
13 | }
14 |
15 | &:after {
16 | bottom: -2.4rem;
17 | content: '';
18 | display: block;
19 | height: 1px;
20 | position: relative;
21 | }
22 |
23 | &:before {
24 | content: counter(list) '.';
25 | font-size: 6.4rem;
26 | line-height: 1;
27 | }
28 |
29 | @media (min-width: 768px) {
30 | padding-left: 8.8rem;
31 | /* You need two digits? (1-10)*/
32 | /*padding-left: 12rem; */
33 |
34 | &:before {
35 | left: 2.4rem;
36 | position: absolute;
37 | }
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_flexblock-specs.less:
--------------------------------------------------------------------------------
1 | /*=====================================================
2 | 6.5 Specs/Items:
3 | ======================================================= */
4 |
5 | .specs li {
6 | text-align: left;
7 | width: 100%;
8 |
9 | &:after {
10 | bottom: -2.4rem;
11 | content: '';
12 | display: block;
13 | height: 1px;
14 | position: relative;
15 | }
16 |
17 | &:hover {
18 | transform: translateX(0.2rem);
19 | }
20 |
21 | span,
22 | i,
23 | svg {
24 | display: block;
25 | font-size: 6.4rem;
26 | line-height: 1;
27 | margin: 0;
28 | }
29 |
30 | img {
31 | width: 6.4rem;
32 | }
33 |
34 | span {
35 | font-weight: 300;
36 |
37 | sup {
38 | font-size: 3rem;
39 | }
40 | }
41 |
42 | @media (min-width: 1024px) {
43 | span,
44 | svg,
45 | i,
46 | img {
47 | float: left;
48 | margin-right: 2.4rem;
49 | }
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_flexblock-steps.less:
--------------------------------------------------------------------------------
1 | /*==================================================
2 | 6.3 flexblock.steps
3 | About, Philosophy...
4 | =================================================== */
5 |
6 | .steps li {
7 | width: 100%;
8 |
9 | img,
10 | span {
11 | display: block;
12 | margin: 0 auto 0.8rem;
13 | }
14 |
15 | span {
16 | font-size: 6.4rem;
17 | }
18 |
19 | @media (min-width: 768px) {
20 | width: 50%;
21 | }
22 | }
23 |
24 | @media (min-width: 1024px) {
25 | .steps li {
26 | width: 25%;
27 | }
28 |
29 | .process {
30 | border-left-style: solid;
31 | border-left-width: 15px;
32 | height: 0;
33 | left: 0;
34 | position: absolute;
35 | top: 60px;
36 | width: 0;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_flexblock.less:
--------------------------------------------------------------------------------
1 | /*===============================================================
2 | 6. Magic blocks with flexbox (Auto-fill & Equal Height)
3 | Blocks Links li>a = .flexblock.blink (.blink required)
4 | ================================================================= */
5 |
6 | .flexblock {
7 | clear: both;
8 | display: flex;
9 | flex-wrap: wrap;
10 | margin-left: auto;
11 | margin-right: auto;
12 | padding: 0;
13 |
14 | &:after {
15 | clear: both;
16 | }
17 |
18 | &:before {
19 | content: '';
20 | display: table;
21 | }
22 |
23 | li,
24 | &.blink li > a {
25 | display: flex;
26 | flex-direction: column;
27 | margin: 0;
28 | padding: 2.4rem;
29 | position: relative;
30 | }
31 |
32 | li {
33 | flex: auto;
34 | text-align: left;
35 | transition: 0.3s;
36 | width: 100%;
37 |
38 | &:hover {
39 | transform: translateY(-0.2rem);
40 | }
41 |
42 | @media (min-width: 600px) {
43 | width: 50%;
44 | }
45 |
46 | @media (min-width: 1024px) {
47 | width: 25%;
48 | }
49 | }
50 |
51 | &.aligncenter li {
52 | text-align: center;
53 | }
54 |
55 | &.vertical-align li {
56 | justify-content: center;
57 | }
58 |
59 | &.blink li {
60 | padding: 0;
61 | }
62 |
63 | li h2 svg,
64 | li h2 i,
65 | li h3 i,
66 | li h3 svg {
67 | margin-top: 0;
68 | }
69 | }
70 |
71 | h1 + .flexblock,
72 | h2 + .flexblock,
73 | h3 + .flexblock,
74 | div + ul,
75 | div + ol {
76 | margin-top: 3.2rem;
77 | }
78 |
79 | .flexblock li h2,
80 | .flexblock li h3,
81 | footer .column h2,
82 | footer .column h3 {
83 | font-size: 1.8rem;
84 | font-weight: 600;
85 | line-height: 3.2rem;
86 | margin-bottom: 0;
87 | }
88 |
89 | .flexblock li li,
90 | .flexblock.blink li li {
91 | padding: 0;
92 | width: 100%;
93 | }
94 |
95 | [class*='content-'] .flexblock li p {
96 | font-size: 1.8rem;
97 | line-height: 3.2rem;
98 | }
99 |
100 | .content-right .flexblock.features li,
101 | .content-left .flexblock.features li {
102 | width: 46%;
103 | }
104 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_form.less:
--------------------------------------------------------------------------------
1 | /*=========================================
2 | 14. Forms
3 | =========================================== */
4 |
5 | form {
6 | text-align: left;
7 |
8 | & + p,
9 | input + p,
10 | textarea + p {
11 | margin-top: 0.8rem;
12 | }
13 | }
14 |
15 | input[type='text'],
16 | input[type='email'],
17 | input[type='tel'],
18 | input[type='url'],
19 | input[type='search'],
20 | input[type='password'] {
21 | appearance: none;
22 | border-radius: 0;
23 | }
24 |
25 | input,
26 | button,
27 | select {
28 | display: inline-block;
29 | font-size: 1.6rem;
30 | font-weight: 400;
31 | height: 4.8rem;
32 | margin: 0;
33 | padding: 0.7rem;
34 | position: relative;
35 | width: 100%;
36 | }
37 |
38 | input[type='radio'],
39 | input[type='checkbox'] {
40 | height: auto;
41 | padding: 4px;
42 | width: auto;
43 | }
44 |
45 | button[type='submit'],
46 | textarea {
47 | width: 100%;
48 | }
49 |
50 | textarea {
51 | padding: 0.7rem;
52 | }
53 |
54 | button {
55 | cursor: pointer;
56 | text-align: center;
57 | width: auto;
58 | }
59 |
60 | .button {
61 | cursor: pointer;
62 | display: inline-block;
63 | font-size: 1.8rem;
64 | font-weight: 400;
65 | line-height: 4.8rem;
66 | min-width: 16rem;
67 | padding: 0 1.6rem;
68 | text-align: center;
69 |
70 | svg {
71 | font-size: 2.4rem;
72 | }
73 | }
74 |
75 | .button.radius,
76 | input.radius {
77 | border-radius: 2.4rem;
78 | }
79 |
80 | button,
81 | input[type='submit'] {
82 | font-weight: 400;
83 | letter-spacing: 0.1rem;
84 | text-transform: uppercase;
85 | }
86 |
87 | .plans .button {
88 | margin-left: auto;
89 | margin-right: auto;
90 | width: 50%;
91 | }
92 |
93 | .try {
94 | display: block;
95 | font-size: 1.6rem;
96 | margin-top: 1.6rem;
97 | }
98 |
99 | fieldset {
100 | padding: 2.4rem;
101 | }
102 |
103 | legend {
104 | border: 0;
105 | font-weight: 400;
106 | letter-spacing: 0.1rem;
107 | padding: 1.6rem 2.4rem;
108 | text-align: center;
109 | text-transform: uppercase;
110 | width: 100%;
111 | }
112 |
113 | input:focus,
114 | textarea:focus,
115 | select:focus {
116 | border-width: 1px;
117 | }
118 |
119 | a.button:hover,
120 | button[type='submit']:hover,
121 | input[type='submit']:hover {
122 | transform: scale(1.01);
123 | }
124 |
125 | :disabled,
126 | button:disabled:hover {
127 | cursor: not-allowed;
128 | }
129 |
130 | .user {
131 | input {
132 | margin-bottom: 0;
133 |
134 | &[type='email'],
135 | &[type='search'],
136 | &[type='text'] {
137 | width: 100%;
138 |
139 | @media (min-width: 500px) {
140 | float: left;
141 | width: 70%;
142 | }
143 | }
144 | }
145 |
146 | button,
147 | input[type='submit'] {
148 | left: 0;
149 | width: 100%;
150 |
151 | @media (min-width: 500px) {
152 | cursor: pointer;
153 | width: 30%;
154 | }
155 | }
156 | }
157 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_grid.less:
--------------------------------------------------------------------------------
1 | /*=== 1.4. Basic Grid (Flexible blocks)
2 | Auto-fill & Equal height === */
3 |
4 | .grid {
5 | clear: both;
6 | display: flex;
7 | flex-wrap: wrap;
8 | margin-left: auto;
9 | margin-right: auto;
10 |
11 | &:after {
12 | clear: both;
13 | }
14 |
15 | &:before {
16 | content: '';
17 | display: table;
18 | }
19 |
20 | & > .column {
21 | display: flex;
22 | flex: auto;
23 | flex-direction: column;
24 | padding: 2.4rem;
25 | position: relative;
26 | transition: 0.3s;
27 | width: 100%;
28 | }
29 |
30 | &.vertical-align .column {
31 | justify-content: center;
32 | }
33 |
34 | @media (min-width: 768px) {
35 | & > .column {
36 | width: 25%;
37 | }
38 |
39 | &.sm .column:nth-child(1) {
40 | width: 30%;
41 | }
42 |
43 | &.sm .column:nth-child(2) {
44 | width: 70%;
45 | }
46 |
47 | &.ms .column:nth-child(1) {
48 | width: 70%;
49 | }
50 |
51 | &.ms .column:nth-child(2) {
52 | width: 30%;
53 | }
54 |
55 | &.sms .column:nth-child(2) {
56 | width: 50%;
57 | }
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_header-footer.less:
--------------------------------------------------------------------------------
1 | /*=========================================
2 | 3. Header & Footer
3 | =========================================== */
4 |
5 | /* -- If you want an unique, global header/footer,read this:
6 | https://github.com/webslides/webslides/issues/57 -- */
7 |
8 | header,
9 | footer,
10 | #navigation {
11 | padding: 2.4rem;
12 | transition: all 0.4s ease-in-out;
13 | width: 100%;
14 | }
15 |
16 | header p,
17 | footer p {
18 | line-height: 4.8rem;
19 | margin-bottom: 0;
20 | }
21 |
22 | header[role='banner'] img,
23 | footer img {
24 | height: 4rem;
25 | vertical-align: middle;
26 | }
27 |
28 | footer {
29 | position: relative;
30 | }
31 |
32 | header,
33 | footer {
34 | z-index: 3;
35 | }
36 |
37 | header,
38 | .ws-ready footer {
39 | left: 0;
40 | position: absolute;
41 | top: 0;
42 | }
43 |
44 | .ws-ready footer {
45 | bottom: 0;
46 | top: auto;
47 | }
48 |
49 | // Remove "opacity=0" if you want an unique, visible header on each slide
50 | header[role='banner'] {
51 | opacity: 0;
52 |
53 | &:hover {
54 | opacity: 1;
55 | }
56 | }
57 |
58 | @media (max-width: 767px) {
59 | footer .alignleft,
60 | footer .alignright {
61 | display: block;
62 | float: none;
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_logo.less:
--------------------------------------------------------------------------------
1 | /*=== 3.1. Logo === */
2 |
3 | .logo {
4 | text-transform: lowercase;
5 |
6 | a {
7 | background: url('../../images/logos/logo.svg') no-repeat 0 0;
8 | background-size: 4.8rem;
9 | float: left;
10 | height: 4.8rem;
11 | text-indent: -4000px;
12 | /*If you remove text-indent and add: */
13 | /*padding-left: 6rem;*/
14 | vertical-align: middle;
15 | width: 4.8rem;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_longform.less:
--------------------------------------------------------------------------------
1 | /*=========================================
2 | 15. Longform
3 | =========================================== */
4 | /* -- Posts = .wrap.longform -- */
5 |
6 | .longform {
7 | width: 72rem;
8 | /* Why 72rem=720px?
9 | 90-95 characters per line = better reading speed */
10 |
11 | & .alignleft,
12 | & .alignright {
13 | max-width: 40%;
14 | }
15 |
16 | img.aligncenter,
17 | figure.aligncenter {
18 | margin-bottom: 3.2rem;
19 | margin-top: 3.2rem;
20 | }
21 |
22 | ul,
23 | ol {
24 | margin-bottom: 3.2rem;
25 | }
26 |
27 | ul ol,
28 | ol ul,
29 | ul ul,
30 | ol ol {
31 | margin-bottom: 0;
32 | }
33 |
34 | figcaption p,
35 | [class*='text-pull-'] p {
36 | font-size: 1.6rem;
37 | line-height: 2.4rem;
38 | }
39 |
40 | /* Mobile: video full width */
41 | .text-pull.embed {
42 | margin-left: -2.4rem;
43 | margin-right: -2.4rem;
44 | padding-bottom: 60.6%;
45 | }
46 |
47 | @media (min-width: 1280px) {
48 | [class*='text-pull-'] {
49 | max-width: 32%;
50 | }
51 |
52 | .text-pull-right {
53 | margin-right: -256px;
54 | }
55 |
56 | .text-pull-left {
57 | margin-left: -256px;
58 | }
59 | }
60 |
61 | @media (min-width: 1024px) {
62 | .text-quote {
63 | margin-left: -4.8rem;
64 | margin-right: -4.8rem;
65 | }
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_media.less:
--------------------------------------------------------------------------------
1 | /*=== 1.3 Responsive Media (videos, iframe...) === */
2 |
3 | .embed {
4 | height: 0;
5 | overflow: hidden;
6 | /*aspect ratio:16:9*/
7 | padding-bottom: 56.6%;
8 | /*aspect ratio: 4:3*/
9 | /*padding-bottom: 75%;*/
10 | position: relative;
11 |
12 | iframe,
13 | object,
14 | embed,
15 | .echarts,
16 | video {
17 | height: 100%;
18 | left: 0;
19 | margin: 0;
20 | position: absolute;
21 | top: 0;
22 | width: 100%;
23 | }
24 |
25 | /* -- Responsive background video
26 | https://fvsch.com/code/video-background/ -- */
27 |
28 | .fullscreen > & {
29 | bottom: 0;
30 | height: auto;
31 | left: 0;
32 | padding-bottom: 0;
33 | position: fixed;
34 | right: 0;
35 | top: 0;
36 |
37 | /* 1. No object-fit support: */
38 | & > iframe,
39 | & > object,
40 | & > .echarts,
41 | & > .lang-mermaid,
42 | & > embed,
43 | & > video {
44 | @media (min-aspect-ratio: 16 / 9) {
45 | height: 300%;
46 | top: -100%;
47 | }
48 |
49 | @media (max-aspect-ratio: 16 / 9) {
50 | left: -100%;
51 | width: 300%;
52 | }
53 |
54 | /* 2. If supporting object-fit, overriding (1): */
55 | @supports (object-fit: cover) {
56 | height: 100%;
57 | left: 0;
58 | object-fit: cover;
59 | top: 0;
60 | width: 100%;
61 | }
62 | }
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_navigation.less:
--------------------------------------------------------------------------------
1 | /*=========================================
2 | 4. Navigation
3 | =========================================== */
4 |
5 | /*=== 4.1. Navbars === */
6 |
7 | nav ul {
8 | display: flex;
9 | flex-wrap: wrap;
10 | /*====align left====*/
11 | justify-content: flex-start;
12 | /* ==== align center ====*/
13 | /*justify-content: center; */
14 | /*====align right====*/
15 | /* justify-content: flex-end; */
16 | /*====separated columns li a====*/
17 | /* justify-content: space-between; */
18 | /*====separated columns centered li a====*/
19 | /*justify-content: space-around;*/
20 |
21 | li {
22 | float: left;
23 | list-style: none;
24 | position: relative;
25 | }
26 | }
27 |
28 | nav ul li:first-child,
29 | nav[role='navigation'] ul li {
30 | margin-left: 0;
31 | }
32 |
33 | nav[role='navigation'] li a {
34 | display: flex;
35 | justify-content: center;
36 | line-height: 4.8rem;
37 | max-width: 100%;
38 | padding: 0 1.6rem;
39 | position: relative;
40 | text-decoration: none;
41 |
42 | svg {
43 | margin: 1.5rem 0.4rem 1.5rem 0;
44 | }
45 | }
46 |
47 | header nav ul {
48 | justify-content: flex-end;
49 | margin: 0;
50 | }
51 |
52 | nav.aligncenter ul,
53 | .aligncenter nav ul {
54 | /* ==== align center ====*/
55 | justify-content: center;
56 | }
57 |
58 | nav.navbar ul li {
59 | /*====full float li a ====*/
60 | flex: 1 1 auto;
61 | }
62 |
63 | @media (max-width: 568px) {
64 | nav.navbar ul {
65 | flex-flow: column wrap;
66 | padding: 0;
67 | }
68 |
69 | nav.navbar li a {
70 | justify-content: flex-start;
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_print.less:
--------------------------------------------------------------------------------
1 | /*=========================================
2 | 17. PRINT
3 | =========================================== */
4 |
5 | // sass-lint:disable no-important
6 | @media print {
7 | @page {
8 | margin: 0.5cm;
9 | size: A4 landscape;
10 | }
11 |
12 | // Black prints faster
13 | * {
14 | // background: transparent !important;
15 | // color: @black !important;
16 | // filter: none !important;
17 | // text-shadow: none !important;
18 | }
19 |
20 | html,
21 | body,
22 | #webslides {
23 | height: auto !important;
24 | overflow: auto !important;
25 | width: auto !important;
26 | }
27 |
28 | #webslides {
29 | overflow-x: auto !important;
30 | overflow-y: auto !important;
31 | }
32 |
33 | section,
34 | .slide {
35 | display: flex !important;
36 | height: auto !important;
37 | }
38 |
39 | section * {
40 | animation: none;
41 | }
42 |
43 | table,
44 | figure {
45 | page-break-inside: avoid;
46 | }
47 |
48 | #counter,
49 | #navigation {
50 | display: none;
51 | }
52 |
53 | .build .tobuild {
54 | opacity: 1 !important;
55 | visibility: visible !important;
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_promos.less:
--------------------------------------------------------------------------------
1 | /*=============================================
2 | 7. Promos/Offers (pricing, tagline, CTA...)
3 | =============================================== */
4 |
5 | .cta {
6 | display: flex;
7 | flex-wrap: wrap;
8 | justify-content: center;
9 | .number,
10 | .benefit {
11 | display: flex;
12 | flex-direction: column;
13 | justify-content: center;
14 | max-width: 100%;
15 | padding: 0.8rem;
16 | }
17 | .number {
18 | text-align: center;
19 | }
20 | .benefit {
21 | max-width: 100%;
22 | text-align: center;
23 | }
24 | .number span {
25 | display: block;
26 | font-size: 8rem;
27 | line-height: 8rem;
28 | }
29 | .number span sup {
30 | font-size: 4rem;
31 | }
32 | p {
33 | margin-bottom: 0;
34 | }
35 | }
36 |
37 | @media (min-width: 768px) {
38 | .cta .number,
39 | .cta .benefit {
40 | max-width: 50%;
41 | padding: 4.8rem;
42 | }
43 | .cta .benefit {
44 | text-align: left;
45 | }
46 | .cta .number span {
47 | font-size: 16rem;
48 | line-height: 16rem;
49 | sup {
50 | font-size: 6rem;
51 | vertical-align: middle;
52 | }
53 | }
54 | }
55 |
56 | /* --- Header CTA --- */
57 |
58 | .cta-cover {
59 | display: table;
60 | width: 100%;
61 | h1 strong {
62 | font-weight: 400;
63 | }
64 | @media (min-width: 1024px) {
65 | h1 {
66 | float: left;
67 | max-width: 80%;
68 | }
69 | h1 strong {
70 | display: block;
71 | }
72 | .button {
73 | margin-top: 1.2rem;
74 | }
75 | .try {
76 | text-align: center;
77 | }
78 | }
79 | @media (max-width: 1023px) {
80 | .alignright {
81 | float: none;
82 | }
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_quotes.less:
--------------------------------------------------------------------------------
1 | /*=========================================
2 | 11. Quotes
3 | =========================================== */
4 |
5 | blockquote {
6 | display: inline-block;
7 | position: relative;
8 | p {
9 | font-size: 2.4rem;
10 | line-height: 4rem;
11 | &:last-child {
12 | margin-bottom: 3.2rem;
13 | }
14 | }
15 | }
16 |
17 | /* -- Interviews dl.text-interview -- */
18 |
19 | dd blockquote p:last-child {
20 | margin-bottom: 0;
21 | }
22 |
23 | cite {
24 | display: block;
25 | text-align: center;
26 | &:before {
27 | content: '\2014 \2009';
28 | margin-right: 6px;
29 | }
30 | }
31 |
32 | cite span {
33 | display: block;
34 | }
35 |
36 | /* -- A big Blockquote -- */
37 |
38 | /* .wall will be deprecated soon. Use .text-quote ;) */
39 |
40 | .text-quote,
41 | .wall {
42 | /* Versatility: blockquote, p, h2... */
43 | position: relative;
44 | &:before {
45 | content: '\201C';
46 | font-family: arial, sans-serif;
47 | font-size: 12rem;
48 | height: 5.6rem;
49 | left: -0.8rem;
50 | line-height: 1;
51 | position: absolute;
52 | text-align: center;
53 | top: -4rem;
54 | width: 5.6rem;
55 | }
56 | @media (min-width: 768px) {
57 | padding-left: 6.4rem;
58 | p {
59 | font-size: 3.2rem;
60 | line-height: 4.8rem;
61 | }
62 | &:before {
63 | left: 0.8rem;
64 | top: -1.6rem;
65 | }
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/packages/nodeppt-js/assets/less/modules/_slides-bg.less:
--------------------------------------------------------------------------------
1 | /*=== 5.3 Slides - Background Images/Videos === */
2 |
3 | .background,
4 | [class*='background-'] {
5 | background-repeat: no-repeat;
6 | bottom: 0;
7 | left: 0;
8 | position: absolute;
9 | right: 0;
10 | top: 0;
11 | }
12 |
13 | /*=== BG Positions === */
14 |
15 | .background {
16 | background-position: center;
17 | background-size: cover;
18 |
19 | &-top {
20 | background-position: top;
21 | background-size: cover;
22 | }
23 |
24 | &-bottom {
25 | background-position: bottom;
26 | background-size: cover;
27 | }
28 |
29 | &-center {
30 | background-position: center;
31 | }
32 |
33 | &-center-top {
34 | background-position: center top;
35 | }
36 |
37 | &-right-top {
38 | background-position: right top;
39 | }
40 |
41 | &-left-top {
42 | background-position: left top;
43 | }
44 |
45 | &-center-bottom,
46 | &-left-bottom,
47 | &-right-bottom,
48 | &-left,
49 | &-right {
50 | background-position: center bottom;
51 | }
52 |
53 | @media (min-width: 1024px) {
54 | &-left-bottom {
55 | background-position: left bottom;
56 | }
57 |
58 | &-right-bottom {
59 | background-position: right bottom;
60 | }
61 |
62 | &-right {
63 | background-position: right;
64 | }
65 |
66 | &-left {
67 | background-position: left;
68 | }
69 | }
70 |
71 | /*fullscreen video
72 |