add support for auto-sized big text via r-fit-text
This commit is contained in:
parent
66cbd66fb6
commit
1b6a3b1e6f
|
@ -79,6 +79,16 @@
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Remove trailing margins after titles */
|
||||||
|
.reveal h1:last-child,
|
||||||
|
.reveal h2:last-child,
|
||||||
|
.reveal h3:last-child,
|
||||||
|
.reveal h4:last-child,
|
||||||
|
.reveal h5:last-child,
|
||||||
|
.reveal h6:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* Ensure certain elements are never larger than the slide itself */
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
.reveal img,
|
.reveal img,
|
||||||
.reveal video,
|
.reveal video,
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -108,6 +108,15 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
line-height: 1.3; }
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Remove trailing margins after titles */
|
||||||
|
.reveal h1:last-child,
|
||||||
|
.reveal h2:last-child,
|
||||||
|
.reveal h3:last-child,
|
||||||
|
.reveal h4:last-child,
|
||||||
|
.reveal h5:last-child,
|
||||||
|
.reveal h6:last-child {
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
/* Ensure certain elements are never larger than the slide itself */
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
.reveal img,
|
.reveal img,
|
||||||
.reveal video,
|
.reveal video,
|
||||||
|
|
|
@ -101,6 +101,15 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
line-height: 1.3; }
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Remove trailing margins after titles */
|
||||||
|
.reveal h1:last-child,
|
||||||
|
.reveal h2:last-child,
|
||||||
|
.reveal h3:last-child,
|
||||||
|
.reveal h4:last-child,
|
||||||
|
.reveal h5:last-child,
|
||||||
|
.reveal h6:last-child {
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
/* Ensure certain elements are never larger than the slide itself */
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
.reveal img,
|
.reveal img,
|
||||||
.reveal video,
|
.reveal video,
|
||||||
|
|
|
@ -107,6 +107,15 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
line-height: 1.3; }
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Remove trailing margins after titles */
|
||||||
|
.reveal h1:last-child,
|
||||||
|
.reveal h2:last-child,
|
||||||
|
.reveal h3:last-child,
|
||||||
|
.reveal h4:last-child,
|
||||||
|
.reveal h5:last-child,
|
||||||
|
.reveal h6:last-child {
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
/* Ensure certain elements are never larger than the slide itself */
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
.reveal img,
|
.reveal img,
|
||||||
.reveal video,
|
.reveal video,
|
||||||
|
|
|
@ -110,6 +110,15 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
line-height: 1.3; }
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Remove trailing margins after titles */
|
||||||
|
.reveal h1:last-child,
|
||||||
|
.reveal h2:last-child,
|
||||||
|
.reveal h3:last-child,
|
||||||
|
.reveal h4:last-child,
|
||||||
|
.reveal h5:last-child,
|
||||||
|
.reveal h6:last-child {
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
/* Ensure certain elements are never larger than the slide itself */
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
.reveal img,
|
.reveal img,
|
||||||
.reveal video,
|
.reveal video,
|
||||||
|
|
|
@ -108,6 +108,15 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
line-height: 1.3; }
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Remove trailing margins after titles */
|
||||||
|
.reveal h1:last-child,
|
||||||
|
.reveal h2:last-child,
|
||||||
|
.reveal h3:last-child,
|
||||||
|
.reveal h4:last-child,
|
||||||
|
.reveal h5:last-child,
|
||||||
|
.reveal h6:last-child {
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
/* Ensure certain elements are never larger than the slide itself */
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
.reveal img,
|
.reveal img,
|
||||||
.reveal video,
|
.reveal video,
|
||||||
|
|
|
@ -102,6 +102,15 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
line-height: 1.3; }
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Remove trailing margins after titles */
|
||||||
|
.reveal h1:last-child,
|
||||||
|
.reveal h2:last-child,
|
||||||
|
.reveal h3:last-child,
|
||||||
|
.reveal h4:last-child,
|
||||||
|
.reveal h5:last-child,
|
||||||
|
.reveal h6:last-child {
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
/* Ensure certain elements are never larger than the slide itself */
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
.reveal img,
|
.reveal img,
|
||||||
.reveal video,
|
.reveal video,
|
||||||
|
|
|
@ -104,6 +104,15 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
line-height: 1.3; }
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Remove trailing margins after titles */
|
||||||
|
.reveal h1:last-child,
|
||||||
|
.reveal h2:last-child,
|
||||||
|
.reveal h3:last-child,
|
||||||
|
.reveal h4:last-child,
|
||||||
|
.reveal h5:last-child,
|
||||||
|
.reveal h6:last-child {
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
/* Ensure certain elements are never larger than the slide itself */
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
.reveal img,
|
.reveal img,
|
||||||
.reveal video,
|
.reveal video,
|
||||||
|
|
|
@ -104,6 +104,15 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
line-height: 1.3; }
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Remove trailing margins after titles */
|
||||||
|
.reveal h1:last-child,
|
||||||
|
.reveal h2:last-child,
|
||||||
|
.reveal h3:last-child,
|
||||||
|
.reveal h4:last-child,
|
||||||
|
.reveal h5:last-child,
|
||||||
|
.reveal h6:last-child {
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
/* Ensure certain elements are never larger than the slide itself */
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
.reveal img,
|
.reveal img,
|
||||||
.reveal video,
|
.reveal video,
|
||||||
|
|
|
@ -111,6 +111,15 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
line-height: 1.3; }
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Remove trailing margins after titles */
|
||||||
|
.reveal h1:last-child,
|
||||||
|
.reveal h2:last-child,
|
||||||
|
.reveal h3:last-child,
|
||||||
|
.reveal h4:last-child,
|
||||||
|
.reveal h5:last-child,
|
||||||
|
.reveal h6:last-child {
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
/* Ensure certain elements are never larger than the slide itself */
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
.reveal img,
|
.reveal img,
|
||||||
.reveal video,
|
.reveal video,
|
||||||
|
|
|
@ -105,6 +105,15 @@ html * {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
line-height: 1.3; }
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Remove trailing margins after titles */
|
||||||
|
.reveal h1:last-child,
|
||||||
|
.reveal h2:last-child,
|
||||||
|
.reveal h3:last-child,
|
||||||
|
.reveal h4:last-child,
|
||||||
|
.reveal h5:last-child,
|
||||||
|
.reveal h6:last-child {
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
/* Ensure certain elements are never larger than the slide itself */
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
.reveal img,
|
.reveal img,
|
||||||
.reveal video,
|
.reveal video,
|
||||||
|
|
|
@ -101,6 +101,15 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
line-height: 1.3; }
|
line-height: 1.3; }
|
||||||
|
|
||||||
|
/* Remove trailing margins after titles */
|
||||||
|
.reveal h1:last-child,
|
||||||
|
.reveal h2:last-child,
|
||||||
|
.reveal h3:last-child,
|
||||||
|
.reveal h4:last-child,
|
||||||
|
.reveal h5:last-child,
|
||||||
|
.reveal h6:last-child {
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
/* Ensure certain elements are never larger than the slide itself */
|
/* Ensure certain elements are never larger than the slide itself */
|
||||||
.reveal img,
|
.reveal img,
|
||||||
.reveal video,
|
.reveal video,
|
||||||
|
|
|
@ -22,6 +22,7 @@
|
||||||
<section>
|
<section>
|
||||||
<h2>Layout Helper Examples</h2>
|
<h2>Layout Helper Examples</h2>
|
||||||
<ul>
|
<ul>
|
||||||
|
<li><a href="#/fit-text">Big Text</a></li>
|
||||||
<li><a href="#/stretch">Stretch</a></li>
|
<li><a href="#/stretch">Stretch</a></li>
|
||||||
<li><a href="#/stack">Stack</a></li>
|
<li><a href="#/stack">Stack</a></li>
|
||||||
<li><a href="#/hstack">HStack</a></li>
|
<li><a href="#/hstack">HStack</a></li>
|
||||||
|
@ -29,6 +30,19 @@
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section id="fit-text">
|
||||||
|
<h2>Fit Text</h2>
|
||||||
|
<p>Resizes text to be as large as possible within its container.</p>
|
||||||
|
<pre><code class="html" data-trim data-line-numbers>
|
||||||
|
<h2 class="r-fit-text">FIT-TEXT</h2>
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="r-fit-text">HELLO WORLD</h2>
|
||||||
|
<h2 class="r-fit-text">BOTH THESE TITLES USE FIT-TEXT</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section id="stretch">
|
<section id="stretch">
|
||||||
<h2>Stretch</h2>
|
<h2>Stretch</h2>
|
||||||
<p>Makes an element as tall as possible while remaining within the slide bounds.</p>
|
<p>Makes an element as tall as possible while remaining within the slide bounds.</p>
|
||||||
|
|
11
js/reveal.js
11
js/reveal.js
|
@ -25,6 +25,8 @@ import {
|
||||||
POST_MESSAGE_METHOD_BLACKLIST
|
POST_MESSAGE_METHOD_BLACKLIST
|
||||||
} from './utils/constants.js'
|
} from './utils/constants.js'
|
||||||
|
|
||||||
|
import fitty from 'fitty';
|
||||||
|
|
||||||
// The reveal.js version
|
// The reveal.js version
|
||||||
export const VERSION = '4.0.2';
|
export const VERSION = '4.0.2';
|
||||||
|
|
||||||
|
@ -281,6 +283,15 @@ export default function( revealElement, options ) {
|
||||||
dom.statusElement = createStatusElement();
|
dom.statusElement = createStatusElement();
|
||||||
|
|
||||||
dom.wrapper.setAttribute( 'role', 'application' );
|
dom.wrapper.setAttribute( 'role', 'application' );
|
||||||
|
|
||||||
|
// The r-fit-text helper resizes text to be as large as
|
||||||
|
// possible within its given container
|
||||||
|
fitty( '.r-fit-text', {
|
||||||
|
minSize: 24,
|
||||||
|
maxSize: config.height * 0.8,
|
||||||
|
observeMutations: false,
|
||||||
|
observeWindow: false
|
||||||
|
} );
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "reveal.js",
|
"name": "reveal.js",
|
||||||
"version": "4.0.1",
|
"version": "4.0.2",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
@ -3068,6 +3068,12 @@
|
||||||
"parse-filepath": "^1.0.1"
|
"parse-filepath": "^1.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"fitty": {
|
||||||
|
"version": "2.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/fitty/-/fitty-2.3.0.tgz",
|
||||||
|
"integrity": "sha512-a4axS2xr0Lcp95We4hIrAvpgdzp6WHPaHp9neb5kMdjefCsNLoD4lPx69yKtKe60X/ZMEJznsPot6C1Tw5KZOA==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"flagged-respawn": {
|
"flagged-respawn": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.1.tgz",
|
||||||
|
|
|
@ -39,6 +39,7 @@
|
||||||
"babel-plugin-transform-html-import-to-string": "0.0.1",
|
"babel-plugin-transform-html-import-to-string": "0.0.1",
|
||||||
"colors": "^1.4.0",
|
"colors": "^1.4.0",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
|
"fitty": "^2.3.0",
|
||||||
"glob": "^7.1.6",
|
"glob": "^7.1.6",
|
||||||
"gulp": "^4.0.2",
|
"gulp": "^4.0.2",
|
||||||
"gulp-autoprefixer": "^7.0.1",
|
"gulp-autoprefixer": "^7.0.1",
|
||||||
|
|
Loading…
Reference in New Issue