diff --git a/ChangeLog.md b/ChangeLog.md index 12d9e27..08e3152 100644 --- a/ChangeLog.md +++ b/ChangeLog.md @@ -1,6 +1,21 @@ # Change Log +## 2.0.0 (2021-03-18) + +Changes: + +* Class `"no-nav"` has been renamed to `"offstage"` +* Support for a `"brief"` class has been added the main `
` +* Support for ``, `
` and `` elements has been added to the
+  CSS
+* Unicode symbol for `a[rel="author"]` has been set to `U+2709 U+FE0F`
+* A default label has been created for the links of the main `
` elements * Improved documentation and demo @@ -93,7 +108,7 @@ Changes: * Added support for `article.slide a[rel="tag"]` * Added a `max-width` rule to the hashtag text * Few conversions from `px` to `em` -* Styled <code> tags +* Styled `` tags @@ -103,7 +118,7 @@ Changes: * `z-index` property of `article.slide` set to `11109` * Styled general HTML elements -* Margins of text containers (<p>, <h1>, <h2>, <h3>, +* Margins of text containers (`

`, `

`, `

`, `

`, etc.) * Improved documentation and demo @@ -114,10 +129,10 @@ Changes: * Added embedded font "1942 report" * Converted `px` to `em` in all font-size properties -* Styled <h1>, <h2> and <h3> elements +* Styled `

`, `

` and `

` elements ## 1.0.0 (2017-02-02) -Take five! 1.0.0 is released! +Take Five! 1.0.0 is released! diff --git a/README.md b/README.md index 9c5ac0b..6a2e6cf 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Take five! +# Take Five! A semantically-consistent pure-CSS slide renderer diff --git a/docs/base-example.html b/docs/base-example.html index 331d355..c541334 100644 --- a/docs/base-example.html +++ b/docs/base-example.html @@ -3,9 +3,7 @@ - - - Take five! – Photo of the day + Take Five! – Photo of the day @@ -14,15 +12,15 @@ Photo of the day

-
+ -

This page is powered by Take five! pure-CSS slide renderer.

+

This page is powered by Take Five! pure-CSS slide renderer.

diff --git a/docs/css/docs.css b/docs/css/docs.css index d552034..3e2923c 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -537,8 +537,8 @@ pre.idl { } pre.idl :link, pre.idl :visited { - color:inherit; - background:transparent; + color: inherit; + background: transparent; } /* Data tables */ diff --git a/docs/css/takefive-min.css b/docs/css/takefive-min.css index be3b38c..6275856 100644 --- a/docs/css/takefive-min.css +++ b/docs/css/takefive-min.css @@ -2,8 +2,8 @@ @file takefive-min.css @brief A semantically-consistent pure-CSS slide renderer @source https://github.com/madmurphy/takefive.css/ - @author madmurphy - @copyright GNU Public License v3 or later - @version 1.3.1 + @author madmurphy333@gmail.com + @copyright GPL-3.0-or-later + @version 2.0.0 **/ -@font-face{font-family:report;src:url(fonts/1942-report/1942-report.eot) format("embedded-opentype"),url(fonts/1942-report/1942-report.woff) format("woff"),url(fonts/1942-report/1942-report.ttf) format("truetype"),url(fonts/1942-report/1942-report.svg) format("svg")}article.slide{position:fixed;top:0;left:0;visibility:hidden;box-sizing:border-box;width:100%;height:100%;background-color:rgba(0,0,0,.9);opacity:0;padding:67px 15px 8% calc(80% + 15px);overflow:hidden;color:#fff;font-family:report,courier,monospace;font-size:.8em;z-index:11109;transition:visibility 0s .5s,opacity .5s linear}article.slide:target{visibility:visible;opacity:1;transition:opacity 1s linear}article.slide:not(.no-hashtag)::after,article.slide[data-context]::before{display:block;position:absolute;bottom:-80px;margin:.95em;font-size:1.05em;transition:1s bottom;max-width:calc(50% - 87px)}article.slide:not(.no-hashtag):target::after,article.slide[data-context]:target::before{bottom:0}article.slide:not(.no-hashtag)::after{content:"hashtag: #" attr(id);right:0}article.slide[data-context]::before{content:attr(data-context);left:0}article.slide a[href],article.slide a[href]:active,article.slide a[href]:hover,article.slide a[href]:visited{color:inherit;text-decoration:none;font-weight:700;background-color:transparent;border:none}article.slide hr{width:40%;height:1px;margin:12px auto;border:none;background-color:#fff}article.slide>:not(nav):not(header):not(footer):not(aside){position:absolute;box-sizing:border-box;left:50%;top:50%;width:auto;height:auto;margin:auto -50% auto auto;-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-height:0;max-width:0;overflow:visible;z-index:11115;font-size:1px;transition:.5s ease-in-out,.5s max-height ease,.3s font-size linear}article.slide:target>:not(nav):not(header):not(footer):not(aside){max-height:80%;max-width:calc(100% - (20% + 40px + 15px) * 2);font-size:1em}article.slide>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside){box-sizing:initial;width:initial;height:initial;margin:initial;max-height:initial;max-width:initial;overflow:initial;font-size:inherit;transition:none;-moz-transform:none;-webkit-transform:none;-o-transform:none;transform:none}article.slide:target>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside){max-height:initial;max-width:initial}article.slide>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside),article.slide>aside:not(:first-of-type),article.slide>footer:not(:first-of-type),article.slide>header:not(:first-of-type),article.slide>nav:not(:first-of-type){left:0;top:0;position:relative;z-index:11114}article.slide>nav:first-of-type{display:block!important;position:absolute;left:0;top:90px;box-sizing:border-box;width:calc(20% - 15px);height:auto;margin:0;overflow:visible;padding:0 0;text-align:left}article.slide>header:first-of-type{position:absolute;left:0;right:0;top:0;box-sizing:border-box;width:auto;height:50px;margin:0 50px;padding:15px 0 0 0;text-align:center;overflow:visible;font-size:larger;z-index:11110}article.slide>footer:first-of-type{position:absolute;bottom:8%;box-sizing:border-box;width:calc(20% - 15px);text-align:right;height:auto;margin:0;padding:0;text-align:left;overflow:hidden;z-index:11113}article.slide>aside:first-of-type{position:absolute;left:0;bottom:8%;box-sizing:border-box;width:calc(20% - 15px);text-align:left;height:auto;margin:0;padding:0 0 0 15px;text-align:left;overflow:hidden;z-index:11112}article.slide>nav:first-of-type a[href]{display:block;box-sizing:border-box;font-weight:400}article.slide>nav:first-of-type a[href][rel~=child]:not([rel~=parent]){position:relative;text-align:right;top:0;left:0;overflow:visible;line-height:1.2em;font-size:1.1em;border:2px #fff dashed;margin:24px 0 0 64px;padding:2px 6px;border-radius:8px;box-sizing:border-box;z-index:11116;background-color:transparent;transition:background-color .5s linear;text-align:center}article.slide>nav:first-of-type a[href][rel~=child]:not([rel~=parent]):first-child,article.slide>nav:first-of-type a[href][rel~=parent]:first-child+a[href][rel~=child]:not([rel~=parent]){margin-top:0}article.slide>nav:first-of-type a[href][rel~=child]:not([rel~=parent])+a[href]:not([rel~=parent]):not([rel~=child]),article.slide>nav:first-of-type a[href][rel~=child]:not([rel~=parent])+a[href][rel~=parent]+a[href]:not([rel~=parent]):not([rel~=child]){margin-top:24px}article.slide>nav:first-of-type a[href][rel~=child]:not([rel~=parent]):hover{background-color:rgba(184,184,184,.09)}article.slide>nav:first-of-type a[href][rel~=parent]:not(.no-nav){position:fixed;top:0;left:0;width:100%;height:100%;margin:0;padding:16px 56px 16px 16px;color:transparent;cursor:default;font-style:italic;line-height:1.2em;box-sizing:border-box;text-align:right;z-index:11111;transition:1s color}article.slide>nav:first-of-type a[href][rel~=parent]:not(.no-nav):hover{color:inherit}article.slide>:not(nav):not(header):not(footer):not(aside) a[href][rel~=parent]:empty::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;z-index:11118}article.slide>:not(nav):not(header):not(footer):not(aside) a[href][rel~=parent]:empty~a[href][rel~=parent]:empty::before,article.slide>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside) a[href][rel~=parent]:empty::before{content:initial;display:initial;position:initial;top:initial;left:initial;margin:initial;padding:initial;width:initial;height:initial;z-index:initial}article.slide>nav:first-of-type a.no-nav[href][rel~=parent]:empty,article.slide>nav:first-of-type a[href]:not([rel~=parent]):not([rel~=child]):empty,article.slide>nav:first-of-type a[href][rel~=child].no-label:not([rel~=parent]):empty{position:absolute;top:0;left:0;width:0;height:0;margin:0;padding:0;border:none;text-align:initial;overflow:initial;line-height:initial;font-size:initial;border-radius:0;background-color:transparent;transition:unset;z-index:11116}article.slide>nav:first-of-type a.no-nav[href][rel~=parent]:not(:empty),article.slide>nav:first-of-type a[href]:not([rel~=parent]):not([rel~=child]):not(:empty){position:relative;width:100%;top:0;left:calc(15px + 12px - 100%);margin:0;padding:2px 6px;border-top:2px #fff solid;border-right:2px #fff solid;border-radius:0 8px 8px 0;box-shadow:8px 8px 8px rgba(0,0,0,.9);box-sizing:border-box;text-align:right;transition:.5s left;z-index:11116;line-height:1.2em;font-size:1.1em}article.slide>nav:first-of-type a.no-nav[href][rel~=parent]:not(:empty):hover,article.slide>nav:first-of-type a[href]:not([rel~=parent]):not([rel~=child]):not(:empty):hover{left:0}article.slide>nav:first-of-type a[href][data-label]:not(.no-label):not(:empty)::before,article.slide>nav:first-of-type a[href][rel]:not(.no-label):not(:empty)::before{display:block;font-size:smaller;font-style:normal;margin:0}article.slide>nav:first-of-type a[href][data-label]:not([rel~=child]):not(.no-label):not(:empty)::before,article.slide>nav:first-of-type a[href][rel]:not([rel~=child]):not(.no-label):not(:empty)::before{text-align:right}article.slide>nav:first-of-type a[href][rel~=child]:not([rel~=parent]):not(.no-label):not(:empty)::before{text-align:center}article.slide>nav:first-of-type a[href][rel]:not([data-label]):not(.no-label):not(:empty)::before{content:attr(rel);text-transform:capitalize}article.slide a[href][rel~=tag]:not([data-label]):not(.no-label):not(:empty)::before{content:"\2605"}article.slide>nav:first-of-type a[href][rel~=tag]:not([data-label]):not(.no-label):not(:empty)::before{content:"Tagged content";text-transform:none}article.slide>nav:first-of-type a[href][rel~=author]:not([data-label]):not(.no-label):not(:empty)::before{content:"Author";text-transform:none}article.slide>nav:first-of-type a[href][rel~=bookmark]:not([data-label]):not(.no-label):not(:empty)::before{content:"Share it!";text-transform:none}article.slide>nav:first-of-type a[href][rel~=first]:not([data-label]):not(.no-label):not(:empty)::before{content:"First slide";text-transform:none}article.slide>nav:first-of-type a[href][rel~=last]:not([data-label]):not(.no-label):not(:empty)::before{content:"Last slide";text-transform:none}article.slide>nav:first-of-type a[href][rel~=index]:not([data-label]):not(.no-label):not(:empty)::before{content:"Index";text-transform:none}article.slide>nav:first-of-type a[href][rel~=prev]:not([data-label]):not(.no-label):not(:empty)::before{content:"Previous slide";text-transform:none}article.slide>nav:first-of-type a[href][rel~=next]:not([data-label]):not(.no-label):not(:empty)::before{content:"Next slide";text-transform:none}article.slide>nav:first-of-type a[href][rel~=child]:not([data-label]):not(.no-label)::before{content:"More"!important;text-transform:none}article.slide>nav:first-of-type a[href][rel~=parent]:not([data-label]):not(.no-label):not(:empty)::before{content:"Back to:";text-transform:none}article.slide>nav:first-of-type a[href][rel~=parent]:not([data-label]):not(.no-label):empty::before{content:"Click to exit";text-transform:none}article.slide>nav:first-of-type a.no-nav[href][rel~=parent]:not([data-label]):not(.no-label)::before{content:"Back to";text-transform:none}article.slide a[href][rel~=tag][data-label]:not(.no-label):not(:empty)::before,article.slide>nav:first-of-type a[href][data-label]:not(.no-label):not(:empty)::before{content:attr(data-label)!important}article.slide a[href][rel~=tag]:not(.no-label):not(:empty)::before{margin-right:.3em}article.slide>nav:first-of-type a[href][rel~=author]:not([rel~=parent]):not(.no-nav)::after,article.slide>nav:first-of-type a[href][rel~=bookmark]:not([rel~=parent]):not(.no-nav)::after,article.slide>nav:first-of-type a[href][rel~=first]:not([rel~=parent]):not(.no-nav)::after,article.slide>nav:first-of-type a[href][rel~=index]:not([rel~=parent]):not(.no-nav)::after,article.slide>nav:first-of-type a[href][rel~=last]:not([rel~=parent]):not(.no-nav)::after,article.slide>nav:first-of-type a[href][rel~=next]:not([rel~=parent]):not(.no-nav)::after,article.slide>nav:first-of-type a[href][rel~=prev]:not([rel~=parent]):not(.no-nav)::after{position:fixed;display:block;margin:auto;width:40px;text-align:center;z-index:11116}article.slide>nav:first-of-type a[href][rel~=author]:not([rel~=parent]):not(.no-nav)::after{content:"\1FAB6";left:calc(80% - 40px);top:initial;bottom:10%;height:40px;line-height:40px;font-size:32px}article.slide>nav:first-of-type a[href][rel~=bookmark]:not([rel~=parent]):not(.no-nav)::after{content:"\1F587";left:calc(80% - 40px);top:10%;bottom:initial;height:40px;line-height:40px;font-size:32px}article.slide>nav:first-of-type a[href][rel~=first]:not([rel~=parent]):not(.no-nav)::after{content:"\23EE";top:initial;bottom:calc(10% - 40px - 3px);left:calc(50% - 75px);height:40px;line-height:40px;font-size:24px}article.slide>nav:first-of-type a[href][rel~=last]:not([rel~=parent]):not(.no-nav)::after{content:"\23ED";top:initial;bottom:calc(10% - 40px - 3px);left:calc(50% + 27px);height:40px;line-height:40px;font-size:24px}article.slide>nav:first-of-type a[href][rel~=index]:not([rel~=parent]):not(.no-nav)::after{content:"\2302";top:initial;bottom:calc(10% - 40px - 3px);left:calc(50% - 24px);height:40px;line-height:40px;font-size:40px}article.slide>nav:first-of-type a[href][rel~=prev]:not([rel~=parent]):not(.no-nav)::after{content:"\276E";left:20%;top:0;bottom:0;height:72px;line-height:72px;font-size:72px}article.slide>nav:first-of-type a[href][rel~=next]:not([rel~=parent]):not(.no-nav)::after{content:"\276F";left:calc(80% - 40px);top:0;bottom:0;height:72px;line-height:72px;font-size:72px}article.slide>nav:first-of-type a[href][rel~=parent]:not(.no-nav)::after{content:"\00D7";position:fixed;display:block;width:50px;height:50px;line-height:44px;font-size:28px;font-style:normal;text-align:center;color:#fff;top:-80px;bottom:initial;font-family:serif;left:calc(100% - 50px);cursor:pointer;z-index:11117;transition:1s top}article.slide:target>nav:first-of-type a[href][rel~=parent]:not(.no-nav)::after{top:0}article.slide figure{text-align:center}article.slide figure figcaption{margin:6px 0}article.slide audio,article.slide iframe,article.slide img,article.slide video{border:3px #fff solid;box-shadow:8px 8px 8px rgba(0,0,0,.9);box-sizing:border-box;max-height:0;max-width:0;transition:.5s max-width ease,.5s max-height ease}article.slide:target audio,article.slide:target iframe,article.slide:target img,article.slide:target video{max-width:100%;max-height:75vh}article.slide article,article.slide section{overflow:auto!important}article.slide>article,article.slide>section{padding:6px}article.slide>:not(nav):not(header):not(footer):not(aside)~article,article.slide>:not(nav):not(header):not(footer):not(aside)~section{padding:initial}article.slide>* h1,article.slide>* h2,article.slide>* h3,article.slide>* h4,article.slide>* h5,article.slide>* h6,article.slide>* ol,article.slide>* p,article.slide>* ul,article.slide>:not(nav):not(header):not(footer):not(aside)~h1,article.slide>:not(nav):not(header):not(footer):not(aside)~h2,article.slide>:not(nav):not(header):not(footer):not(aside)~h3,article.slide>:not(nav):not(header):not(footer):not(aside)~h4,article.slide>:not(nav):not(header):not(footer):not(aside)~h5,article.slide>:not(nav):not(header):not(footer):not(aside)~h6,article.slide>:not(nav):not(header):not(footer):not(aside)~ol,article.slide>:not(nav):not(header):not(footer):not(aside)~p,article.slide>:not(nav):not(header):not(footer):not(aside)~ul{margin:.5em 0!important}article.slide article,article.slide h1,article.slide h2,article.slide h3,article.slide h4,article.slide h5,article.slide h6,article.slide p,article.slide section{font-family:inherit;color:inherit}article.slide h1{font-size:1.2em!important;font-weight:700}article.slide h2{font-size:1.1em!important;font-weight:700}article.slide h3{font-size:1.05em!important;font-weight:700}article.slide p{text-align:justify}article.slide blockquote{color:#afafaf;font-style:italic;padding:0 1.75em!important}article.slide:target>blockquote{font-size:1.2em!important}article.slide:target>:not(nav):not(header):not(footer):not(aside)~blockquote{font-size:inherit!important}article.slide>* blockquote,article.slide>:not(nav):not(header):not(footer):not(aside)~blockquote{margin:1em .25em!important;position:relative;left:0;top:0}article.slide blockquote::after,article.slide blockquote::before{position:absolute;display:block;line-height:1em;font-size:2.2em;color:#ccc;width:.75em;height:1em}article.slide blockquote::before{content:"\201C";left:0;top:0;text-align:left}article.slide blockquote::after{content:"\201E";right:0;bottom:0;text-align:right}article.slide blockquote cite{display:block;margin:15px 24px;font-style:normal}article.slide blockquote cite::before{content:"\2014";display:inline-block;width:1em}article.slide fieldset{background-color:transparent;border:1px #fff solid;color:#fff;border-radius:8px}article.slide fieldset>legend{font-size:1.5em;font-weight:700;padding:3px 12px;background-color:transparent;border:none}article.slide button,article.slide input,article.slide select,article.slide textarea{background-color:transparent;border:1px #fff solid;color:#fff;font-family:inherit;font-size:1.2em;border-radius:8px}article.slide code{font-family:monospace;font-size:1.2em}@media only screen and (pointer:coarse),only screen and (pointer:none),only screen and (hover:none){article.slide>nav:first-of-type a.no-nav[href][rel~=parent]:not(:empty),article.slide>nav:first-of-type a[href]:not([rel~=parent]):not([rel~=child]):not(:empty){left:0!important}article.slide:target>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside){max-width:initial!important}article.slide>nav:first-of-type a[href][rel~=prev]:not([rel~=parent]):not(.no-nav)::after{left:calc(20% + 40px - 100px)!important;width:100px!important;text-align:right!important}article.slide>nav:first-of-type a[href][rel~=next]:not([rel~=parent]):not(.no-nav)::after{left:calc(80% - 40px)!important;width:100px!important;text-align:left!important}} +@font-face{font-family:report;src:url(fonts/1942-report/1942-report.eot) format("embedded-opentype"),url(fonts/1942-report/1942-report.woff) format("woff"),url(fonts/1942-report/1942-report.ttf) format("truetype"),url(fonts/1942-report/1942-report.svg) format("svg")}article.slide{position:fixed;top:0;left:0;visibility:hidden;box-sizing:border-box;width:100%;height:100%;background-color:rgba(0,0,0,.9);opacity:0;padding:67px 15px 70px calc(80% + 15px);overflow:hidden;color:#fff;font-family:report,courier,monospace;font-size:.8em;line-height:normal;z-index:11109;transition:visibility 0s .5s,opacity .5s linear}article.slide:target{visibility:visible;opacity:1;transition:opacity 1s linear}article.slide:not(.no-hashtag)::after,article.slide[data-context]::before{display:block;position:absolute;bottom:-80px;margin:.95em;font-size:1.05em;transition:bottom 1s ease;max-width:calc(50% - 87px)}article.slide:not(.no-hashtag):target::after,article.slide[data-context]:target::before{bottom:0}article.slide:not(.no-hashtag)::after{content:"hashtag: #" attr(id);right:0}article.slide[data-context]::before{content:attr(data-context);left:0}article.slide a[href],article.slide a[href]:active,article.slide a[href]:hover,article.slide a[href]:visited{color:inherit;text-decoration:none;font-weight:700;background-color:transparent;border:none}article.slide hr{width:40%;height:1px;margin:12px auto;border:none;background-color:#fff}article.slide a[href][rel~=tag]:not([data-label]):not(.no-label):not(:empty)::before{content:"\2605";font-size:inherit}article.slide a[href][data-label]:not(.no-label):not(:empty)::before{content:attr(data-label)}article.slide a[href]:not(.no-label):not(:empty)::before{margin-right:.3em}article.slide>:not(nav):not(header):not(footer):not(aside){position:absolute;box-sizing:border-box;left:50%;top:50%;width:auto;height:auto;margin:auto -50% auto auto;-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-height:0;max-width:0;z-index:11115;font-size:1px;transition:max-width .6s ease,max-height .6s ease,font-size .3s linear}article.slide:target>:not(nav):not(header):not(footer):not(aside){max-height:80%;max-width:calc(100% - (20% + 40px + 15px) * 2);font-size:1em}article.slide>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside){box-sizing:unset;width:unset;height:unset;margin:unset;max-height:unset;max-width:unset;font-size:unset;transition:unset;-moz-transform:unset;-webkit-transform:unset;-o-transform:unset;transform:unset}article.slide:target>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside){max-height:unset;max-width:unset}article.slide>:not(nav):not(header):not(footer):not(aside):not(section):not(article){overflow:visible}article.slide>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside):not(section):not(article){overflow:unset}article.slide>article,article.slide>section{overflow:auto;padding:6px}article.slide>:not(nav):not(header):not(footer):not(aside)~article,article.slide>:not(nav):not(header):not(footer):not(aside)~section{padding:unset;overflow:unset}article.slide>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside),article.slide>aside:not(:first-of-type),article.slide>footer:not(:first-of-type),article.slide>header:not(:first-of-type),article.slide>nav:not(:first-of-type){left:0;top:0;position:relative;z-index:11114}article.slide>nav:first-of-type{display:block;position:absolute;left:0;top:90px;box-sizing:border-box;width:calc(20% - 15px);height:auto;margin:0;overflow:visible;padding:0;text-align:left}article.slide>header:first-of-type{position:absolute;left:0;right:0;top:2.3%;box-sizing:border-box;width:auto;height:auto;max-height:calc(10% - 2.3% - 6px);margin:0 3.75%;padding:0;text-align:center;overflow:visible;font-size:larger;z-index:11110}article.slide>aside:first-of-type,article.slide>footer:first-of-type{position:absolute;bottom:40px;box-sizing:border-box;width:calc(20% - 30px);height:auto;margin:0;padding:0;overflow:hidden;text-align:left}article.slide>footer:first-of-type{right:15px;z-index:11113}article.slide>aside:first-of-type{left:15px;z-index:11112}article.slide>nav:first-of-type a[href]{display:block;box-sizing:border-box;font-weight:400}article.slide>nav:first-of-type a[href][rel~=child]:not([rel~=parent]){position:relative;text-align:right;top:0;left:0;overflow:visible;line-height:1.2em;font-size:1.1em;border:2px #fff dashed;margin:24px 0 0 64px;padding:2px 6px;border-radius:8px;box-sizing:border-box;z-index:11116;background-color:transparent;transition:background-color .5s linear;text-align:center}article.slide>nav:first-of-type a[href][rel~=child]:not([rel~=parent]):first-child,article.slide>nav:first-of-type a[href][rel~=parent]:first-child+a[href][rel~=child]:not([rel~=parent]){margin-top:0}article.slide>nav:first-of-type a[href][rel~=child]:not([rel~=parent])+a[href]:not([rel~=parent]):not([rel~=child]),article.slide>nav:first-of-type a[href][rel~=child]:not([rel~=parent])+a[href][rel~=parent]+a[href]:not([rel~=parent]):not([rel~=child]){margin-top:24px}article.slide>nav:first-of-type a[href][rel~=child]:not([rel~=parent]):hover{background-color:rgba(184,184,184,.09)}article.slide>nav:first-of-type a[href][rel~=parent]:not(.offstage){position:fixed;top:0;left:0;width:100%;height:100%;margin:0;padding:16px 56px 16px 16px;color:transparent;cursor:default;font-style:italic;line-height:1.2em;box-sizing:border-box;text-align:right;z-index:11111;transition:color 1s linear}article.slide>nav:first-of-type a[href][rel~=parent]:not(.offstage):hover{color:inherit}article.slide>:not(nav):not(header):not(footer):not(aside) a[href][rel~=parent]:not(.offstage):empty::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;z-index:11118}article.slide>:not(nav):not(header):not(footer):not(aside) a[href][rel~=parent]:not(.offstage):empty~a[href][rel~=parent]:not(.offstage):empty::before,article.slide>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside) a[href][rel~=parent]:not(.offstage):empty::before{content:unset;display:unset;position:unset;top:unset;left:unset;margin:unset;padding:unset;width:unset;height:unset;z-index:unset}article.slide>nav:first-of-type a.offstage[href][rel~=parent]:empty,article.slide>nav:first-of-type a[href]:not([rel~=parent]):not([rel~=child]):empty,article.slide>nav:first-of-type a[href][rel~=child].no-label:not([rel~=parent]):empty{position:absolute;top:0;left:0;width:0;height:0;margin:0;padding:0;border:none;text-align:unset;overflow:unset;line-height:unset;font-size:unset;border-radius:0;background-color:transparent;transition:unset;z-index:11116}article.slide>nav:first-of-type a.offstage[href][rel~=parent]:not(:empty),article.slide>nav:first-of-type a[href]:not([rel~=parent]):not([rel~=child]):not(:empty){position:relative;width:100%;top:0;left:calc(15px + 12px - 100%);margin:0;padding:2px 6px;border-top:2px #fff solid;border-right:2px #fff solid;border-radius:0 8px 8px 0;box-shadow:8px 8px 8px rgba(0,0,0,.9);box-sizing:border-box;text-align:right;transition:left .5s ease;z-index:11116;line-height:1.2em;font-size:1.1em}article.slide>nav:first-of-type a.offstage[href][rel~=parent]:not(:empty):hover,article.slide>nav:first-of-type a[href]:not([rel~=parent]):not([rel~=child]):not(:empty):hover{left:0}article.slide>nav:first-of-type a[href]:not(.no-label):not(:empty)::before{display:block;font-size:smaller;font-style:normal;margin:0}article.slide>nav:first-of-type a[href]:not([rel~=child]):not(.no-label):not(:empty)::before{text-align:right}article.slide>nav:first-of-type a[href][rel~=child]:not([rel~=parent]):not(.no-label):not(:empty)::before{text-align:center}article.slide:not(.brief)>nav:first-of-type a[href]:not([data-label]):not(.no-label):not(:empty)::before{content:"See also"}article.slide:not(.brief)>nav:first-of-type a[href][rel]:not([data-label]):not(.no-label):not(:empty)::before{content:attr(rel);text-transform:capitalize}article.slide:not(.brief)>nav:first-of-type a[href][rel~=tag]:not([data-label]):not(.no-label):not(:empty)::before{content:"Tagged content";text-transform:none}article.slide:not(.brief)>nav:first-of-type a[href][rel~=author]:not([data-label]):not(.no-label):not(:empty)::before{content:"Author";text-transform:none}article.slide:not(.brief)>nav:first-of-type a[href][rel~=bookmark]:not([data-label]):not(.no-label):not(:empty)::before{content:"Share it!";text-transform:none}article.slide:not(.brief)>nav:first-of-type a[href][rel~=first]:not([data-label]):not(.no-label):not(:empty)::before{content:"First slide";text-transform:none}article.slide:not(.brief)>nav:first-of-type a[href][rel~=last]:not([data-label]):not(.no-label):not(:empty)::before{content:"Last slide";text-transform:none}article.slide:not(.brief)>nav:first-of-type a[href][rel~=index]:not([data-label]):not(.no-label):not(:empty)::before{content:"Index";text-transform:none}article.slide:not(.brief)>nav:first-of-type a[href][rel~=prev]:not([data-label]):not(.no-label):not(:empty)::before{content:"Previous slide";text-transform:none}article.slide:not(.brief)>nav:first-of-type a[href][rel~=next]:not([data-label]):not(.no-label):not(:empty)::before{content:"Next slide";text-transform:none}article.slide:not(.brief)>nav:first-of-type a[href][rel~=child]:not([data-label]):not(.no-label)::before{content:"More"!important;text-transform:none}article.slide:not(.brief)>nav:first-of-type a[href][rel~=parent]:not([data-label]):not(.no-label):not(:empty)::before{content:"Back to:";text-transform:none}article.slide:not(.brief)>nav:first-of-type a[href][rel~=parent]:not([data-label]):not(.no-label):empty::before{content:"Click to exit";text-transform:none}article.slide:not(.brief)>nav:first-of-type a.offstage[href][rel~=parent]:not([data-label]):not(.no-label)::before{content:"Back to";text-transform:none}article.slide.brief>nav:first-of-type a[href][data-label]:not(.no-label):not(:empty)::before{content:unset}article.slide>nav:first-of-type a[href][rel~=author]:not([rel~=parent]):not(.offstage)::after,article.slide>nav:first-of-type a[href][rel~=bookmark]:not([rel~=parent]):not(.offstage)::after,article.slide>nav:first-of-type a[href][rel~=first]:not([rel~=parent]):not(.offstage)::after,article.slide>nav:first-of-type a[href][rel~=index]:not([rel~=parent]):not(.offstage)::after,article.slide>nav:first-of-type a[href][rel~=last]:not([rel~=parent]):not(.offstage)::after,article.slide>nav:first-of-type a[href][rel~=next]:not([rel~=parent]):not(.offstage)::after,article.slide>nav:first-of-type a[href][rel~=prev]:not([rel~=parent]):not(.offstage)::after{position:fixed;display:block;margin:auto;width:40px;text-align:center;z-index:11116}article.slide>nav:first-of-type a[href][rel~=author]:not([rel~=parent]):not(.offstage)::after{content:"\2709\FE0F";left:calc(80% - 40px);top:unset;bottom:10%;height:40px;line-height:40px;font-size:32px}article.slide>nav:first-of-type a[href][rel~=bookmark]:not([rel~=parent]):not(.offstage)::after{content:"\1F587";left:calc(80% - 40px);top:10%;bottom:unset;height:40px;line-height:40px;font-size:32px}article.slide>nav:first-of-type a[href][rel~=first]:not([rel~=parent]):not(.offstage)::after{content:"\23EE";top:unset;bottom:calc(10% - 40px - 3px);left:calc(50% - 75px);height:40px;line-height:40px;font-size:24px}article.slide>nav:first-of-type a[href][rel~=last]:not([rel~=parent]):not(.offstage)::after{content:"\23ED";top:unset;bottom:calc(10% - 40px - 3px);left:calc(50% + 27px);height:40px;line-height:40px;font-size:24px}article.slide>nav:first-of-type a[href][rel~=index]:not([rel~=parent]):not(.offstage)::after{content:"\2302";top:unset;bottom:calc(10% - 40px - 3px);left:calc(50% - 24px);height:40px;line-height:40px;font-size:40px}article.slide>nav:first-of-type a[href][rel~=prev]:not([rel~=parent]):not(.offstage)::after{content:"\276E";left:20%;top:0;bottom:0;height:72px;line-height:72px;font-size:72px}article.slide>nav:first-of-type a[href][rel~=next]:not([rel~=parent]):not(.offstage)::after{content:"\276F";left:calc(80% - 40px);top:0;bottom:0;height:72px;line-height:72px;font-size:72px}article.slide>nav:first-of-type a[href][rel~=parent]:not(.offstage)::after{content:"\00D7";position:fixed;display:block;width:50px;height:50px;line-height:44px;font-size:28px;font-style:normal;text-align:center;color:#fff;top:-80px;bottom:unset;font-family:serif;left:calc(100% - 50px);cursor:pointer;z-index:11117;transition:top 1s ease}article.slide:target>nav:first-of-type a[href][rel~=parent]:not(.offstage)::after{top:0}article.slide figure,article.slide picture{text-align:center}article.slide figure figcaption{margin:6px 0}article.slide audio,article.slide iframe,article.slide img,article.slide svg,article.slide video{border:3px #fff solid;box-shadow:8px 8px 8px rgba(0,0,0,.9);box-sizing:border-box}article.slide>:not(nav):not(header):not(footer):not(aside) audio,article.slide>:not(nav):not(header):not(footer):not(aside) iframe,article.slide>:not(nav):not(header):not(footer):not(aside) img,article.slide>:not(nav):not(header):not(footer):not(aside) svg,article.slide>:not(nav):not(header):not(footer):not(aside) video{max-height:0;max-width:0;transition:max-width .6s ease,max-height .6s ease}article.slide:target>:not(nav):not(header):not(footer):not(aside) audio,article.slide:target>:not(nav):not(header):not(footer):not(aside) iframe,article.slide:target>:not(nav):not(header):not(footer):not(aside) img,article.slide:target>:not(nav):not(header):not(footer):not(aside) svg,article.slide:target>:not(nav):not(header):not(footer):not(aside) video{max-width:100%;max-height:75vh}article.slide>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside) audio,article.slide>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside) iframe,article.slide>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside) img,article.slide>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside) svg,article.slide>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside) video{max-width:100%!important;max-height:calc(83vh - 67px)!important;transition:unset}article.slide:target>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside) audio,article.slide:target>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside) iframe,article.slide:target>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside) img,article.slide:target>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside) svg,article.slide:target>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside) video{max-height:unset;max-width:unset}article.slide>* h1,article.slide>* h2,article.slide>* h3,article.slide>* h4,article.slide>* h5,article.slide>* h6,article.slide>* ol,article.slide>* p,article.slide>* ul,article.slide>:not(nav):not(header):not(footer):not(aside)~h1,article.slide>:not(nav):not(header):not(footer):not(aside)~h2,article.slide>:not(nav):not(header):not(footer):not(aside)~h3,article.slide>:not(nav):not(header):not(footer):not(aside)~h4,article.slide>:not(nav):not(header):not(footer):not(aside)~h5,article.slide>:not(nav):not(header):not(footer):not(aside)~h6,article.slide>:not(nav):not(header):not(footer):not(aside)~ol,article.slide>:not(nav):not(header):not(footer):not(aside)~p,article.slide>:not(nav):not(header):not(footer):not(aside)~ul{margin:.5em 0!important}article.slide article,article.slide h1,article.slide h2,article.slide h3,article.slide h4,article.slide h5,article.slide h6,article.slide p,article.slide section{font-family:inherit;color:inherit}article.slide h1{font-size:1.2em!important;font-weight:700}article.slide h2{font-size:1.1em!important;font-weight:700}article.slide h3{font-size:1.05em!important;font-weight:700}article.slide p{text-align:justify}article.slide blockquote{color:#afafaf;font-style:italic;padding:0 1.75em!important}article.slide:target>blockquote{font-size:1.2em!important}article.slide:target>:not(nav):not(header):not(footer):not(aside)~blockquote{font-size:inherit!important}article.slide>* blockquote,article.slide>:not(nav):not(header):not(footer):not(aside)~blockquote{margin:1em .25em!important;position:relative;left:0;top:0}article.slide blockquote::after,article.slide blockquote::before{position:absolute;display:block;line-height:1em;font-size:2.2em;color:#ccc;width:.75em;height:1em}article.slide blockquote::before{content:"\201C";left:0;top:0;text-align:left}article.slide blockquote::after{content:"\201E";right:0;bottom:0;text-align:right}article.slide blockquote cite{display:block;margin:15px 24px;font-style:normal}article.slide blockquote cite::before{content:"\2014";display:inline-block;width:1em}article.slide fieldset{background-color:transparent;border:1px #fff solid;box-sizing:border-box;margin:0;color:#fff;border-radius:8px}article.slide fieldset>legend{font-size:1.5em;font-weight:700;padding:3px 12px;background-color:transparent;border:none}article.slide button,article.slide input,article.slide select,article.slide textarea{background-color:transparent;border:1px #fff solid;box-sizing:border-box;color:#fff;font-family:inherit;font-size:1.2em;border-radius:8px}article.slide code{font-family:monospace;font-size:1.2em}article.slide pre{border-left:1px #fff solid;padding:6px;font-family:monospace}@media only screen and (pointer:coarse),only screen and (pointer:none),only screen and (hover:none){article.slide>nav:first-of-type a.offstage[href][rel~=parent]:not(:empty),article.slide>nav:first-of-type a[href]:not([rel~=parent]):not([rel~=child]):not(:empty){left:0!important}article.slide:target>:not(nav):not(header):not(footer):not(aside)~:not(nav):not(header):not(footer):not(aside){max-width:unset!important}article.slide>nav:first-of-type a[href][rel~=prev]:not([rel~=parent]):not(.offstage)::after{left:calc(20% + 40px - 100px)!important;width:100px!important;text-align:right!important}article.slide>nav:first-of-type a[href][rel~=next]:not([rel~=parent]):not(.offstage)::after{left:calc(80% - 40px)!important;width:100px!important;text-align:left!important}} diff --git a/docs/index.html b/docs/index.html index 317bcdb..16e2420 100644 --- a/docs/index.html +++ b/docs/index.html @@ -3,7 +3,7 @@ -Take five! pure-CSS slide renderer +Take Five! pure-CSS slide renderer