diff --git a/ChangeLog.md b/ChangeLog.md index 97028d2..71b09dc 100644 --- a/ChangeLog.md +++ b/ChangeLog.md @@ -1,7 +1,22 @@ # Change Log -## 3.0.0 (2021-03-12) +## 3.1.0 (2021-04-19) + +Changes: + +* The default font has been set to `Victoria Typewriter` (this is due to the + previous `1942 report` font lacking support for accented characters) +* Support for internationalization has been added (`takefive-i18n-*.css`) +* A further new plugin has been created (`takefive-slides.css`) +* A bug affecting the usage of `data-label` has been fixed +* The layout of the slides on small screens in landscape mode has been improved +* Minor adjustments +* Documentation +* Examples + + +## 3.0.0 (2021-04-12) Changes: diff --git a/README.md b/README.md index fce05c3..83ae508 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,15 @@ # Take Five! -A semantically-consistent pure-CSS slide renderer +The most advanced pure CSS lightbox – not one single line of JavaScript +has been wasted See: * [Live demo][1] * [Manual][2] +Please refer to the `dist` subdirectory for the current release of the CSS. + Free software ------------- diff --git a/dev/README.md b/dev/README.md index 3ef544e..a28c945 100644 --- a/dev/README.md +++ b/dev/README.md @@ -9,3 +9,6 @@ A shell script is available for stripping the variables and minifying the CSS files (the original files will not be overwritten -- `qalc` and `uglifycss` are required). +If you are only interested in using the CSS for a website, please refer to the +`dist` subdirectory. + diff --git a/dev/nondev-gen.sh b/dev/build.sh similarity index 74% rename from dev/nondev-gen.sh rename to dev/build.sh index 52c32a6..d99678c 100755 --- a/dev/nondev-gen.sh +++ b/dev/build.sh @@ -1,6 +1,6 @@ #!/bin/sh # -# nondev-gen.sh +# build.sh # # Expand all the CSS variables declared in `$MAINCSS` **recursively** and save # the files generated in the temporary `$EXPDIR` directory. Then simplify the @@ -10,6 +10,7 @@ # +PACKAGE_JSON='../package.json' MAINCSS='takefive-dev.css' EXPDIR='var-expansion' SRCDIR='src' @@ -17,21 +18,20 @@ MINDIR='min' DISTDIR='dist' _RE_VAR_='^\s*--\([^:]\+\): var(--[^,]\+, \([^\)]\+\));' +_RE_JSON_VERSION_='\(^\|[,{]\)\s*"version"\s*:\s*"\([^"]\+\)"\s*\([,}]\|$\)' # Maximum four levels of nesting are supported _RE_CALC_='calc\(([^()]+|[^()]*\([^()]+\)[^()]*|[^()]*\([^()]*\([^()]+\)[^()]*\)[^()]*|[^()]*\([^()]*\([^()]*\([^()]+\)[^()]*\)[^()]*\)[^()]*|[^()]*\([^()]*\([^()]*\([^()]*\([^()]+\)[^()]*\)[^()]*\)[^()]*\)[^()]*)\)' _ALLVARS_="$(cat "${MAINCSS}" | grep -o "${_RE_VAR_}" "${MAINCSS}" | sed 's/'"${_RE_VAR_}"'/s\/var(--\1)\/\2\/g;/g')" -rm -rf "${EXPDIR}" "${SRCDIR}" "${MINDIR}" +rm -rf "${EXPDIR}" "${SRCDIR}" "${MINDIR}" "${DISTDIR}" mkdir -p $(find '.' -type f -name '*-dev.css' -printf "${EXPDIR}/%h\\n") find '.' -type f -name '*-dev.css' ! -wholename "./${EXPDIR}/*" \ -exec cp '{}' "${EXPDIR}/{}" ';' \ - -exec 'sed' '-i' "${_ALLVARS_}//g" "${EXPDIR}/{}" ';' \ + -exec 'sed' '-i' "${_ALLVARS_}//g;/!\s*DEV_ONLY\s*!/,/!\s*END_DEV_ONLY\s*!/{d}" "${EXPDIR}/{}" ';' \ -exec 'diff' '-u' '{}' "${EXPDIR}/{}" ';' \ > "${EXPDIR}/${EXPDIR}.diff" -sed -i '/!\s*DEV_ONLY\s*!/,/!\s*END_DEV_ONLY\s*!/{d}' "${EXPDIR}/${MAINCSS}" - if ! which qalc &> /dev/null ; then echo 'You need to have qalc installed on your machine.' 1>&2 exit 1 @@ -47,7 +47,7 @@ rm -f "${SRCDIR}/${EXPDIR}.diff" echo 'Simplifying the content of `calc()` ...' -# Calculations yelding zero as final result are not supported +# Calculations yelding zero as final result are not yet supported find "${SRCDIR}" -type f -name '*.css' | while read -r _CSSFILE_ ; do echo "${_CSSFILE_}" @@ -90,13 +90,15 @@ done mkdir -p $(cd "${SRCDIR}" && find '.' -type f -name '*.css' -printf "${MINDIR}/%h\\n") +_PKGVERSION_="$(grep -o "${_RE_JSON_VERSION_}" "${PACKAGE_JSON}" | head -1 | sed 's/'"${_RE_JSON_VERSION_}"'/\2/g')" + { (cd "${SRCDIR}" && find '.' -type f -name '*.css') | while read -r _CSSFILE_ ; do _CLEANNAME_="$(echo "${_CSSFILE_}" | sed 's/-dev\.css$/.css/g')" test "x${_CLEANNAME_}" = "x${_CSSFILE_}" || mv "${SRCDIR}/${_CSSFILE_}" "${SRCDIR}/${_CLEANNAME_}" > /dev/null diff -u "${EXPDIR}/${_CSSFILE_}" "${SRCDIR}/${_CLEANNAME_}" { - echo '/* https://github.com/madmurphy/takefive.css */' + echo "/* https://github.com/madmurphy/takefive.css (v${_PKGVERSION_}) */" uglifycss "${SRCDIR}/${_CLEANNAME_}" | sed 's/ not(/ not (/g' } > "${MINDIR}/$(echo "${_CLEANNAME_}" | sed 's/\.css$/.min.css/g')" echo @@ -110,5 +112,20 @@ rsync -azq --remove-source-files \ rm -rf "${EXPDIR}" "${SRCDIR}" "${MINDIR}" +echo +cat << 'END_HEREDOC' +All done. You can now launch + + (cd 'dist' && find '.' -type f -name '*.min.css' -exec cp '{}' \ + '../../docs/css' ';' && mkdir -p $(find '.' -type f -name '*.css' \ + -printf '../../dist/%h\n') && find '.' -type f -name '*.css' -exec mv \ + '{}' '../../dist/{}' ';') && rm -r 'dist' 'src.diff' && (cd \ + '../docs/css' && find '.' -type f -wholename \ + './takefive-i18n-*.min.css' ! -wholename \ + './takefive-i18n-la.min.css' -exec 'rm' '{}' ';') + +to merge the files created and clean this directory +END_HEREDOC + # EOF diff --git a/dev/plugins/counters/takefive-counters-dev.css b/dev/plugins/counters/takefive-counters-dev.css index 373e97f..f6292f5 100644 --- a/dev/plugins/counters/takefive-counters-dev.css +++ b/dev/plugins/counters/takefive-counters-dev.css @@ -1,3 +1,14 @@ +/*\ +|*| +|*| :: Take Five! -- Counters :: +|*| +|*| Version 1.0.0 +|*| +|*| https://github.com/madmurphy/takefive.css/ +|*| +\*/ + + @media all { section.slides > :first-child { diff --git a/dev/plugins/glyphs/takefive-glyphs-dev.css b/dev/plugins/glyphs/takefive-glyphs-dev.css index 38a6d29..e692178 100644 --- a/dev/plugins/glyphs/takefive-glyphs-dev.css +++ b/dev/plugins/glyphs/takefive-glyphs-dev.css @@ -1,3 +1,14 @@ +/*\ +|*| +|*| :: Take Five! -- Glyphs :: +|*| +|*| Version 1.0.0 +|*| +|*| https://github.com/madmurphy/takefive.css/ +|*| +\*/ + + @media only screen { article.slide > nav:first-of-type a[href][data-glyph]:not(.no-glyph)::after { diff --git a/dev/plugins/i18n/takefive-i18n-de-dev.css b/dev/plugins/i18n/takefive-i18n-de-dev.css new file mode 100644 index 0000000..7e4a1c8 --- /dev/null +++ b/dev/plugins/i18n/takefive-i18n-de-dev.css @@ -0,0 +1,100 @@ +/*\ +|*| +|*| :: German translation of **Take Five!** :: +|*| +|*| Version 1.0.0 +|*| +|*| https://github.com/madmurphy/takefive.css/ +|*| +\*/ + + +@media only screen { + + /* + No need to use `!important`, these selectors already have sufficient + specificity. + + Do not change the order whereby the selectors are listed. + */ + + article.slide:lang(de) > nav:first-of-type a[href]:not([rel])::before { + /* English: "See also"; */ + content: "Siehe auch"; + } + + article.slide:lang(de) > nav:first-of-type a[href][rel~="tag"]::before { + /* English: "Tagged content"; */ + content: "Verwandte Inhalte"; + } + + article.slide:lang(de) > nav:first-of-type a[href][rel~="discussion"]::before { + /* English: "Comments"; */ + content: "Kommentare"; + } + + article.slide:lang(de) > nav:first-of-type a[href][rel~="author"]::before { + /* English: "Author"; */ + content: "Autor"; + } + + article.slide:lang(de) > nav:first-of-type a[href][rel~="attachment"]::before { + /* English: "Download"; */ + content: "Herunterladen"; + } + + article.slide:lang(de) > nav:first-of-type a[href][rel~="bookmark"]::before { + /* English: "Share it!"; */ + content: "Verbreite"; + } + + article.slide:lang(de) > nav:first-of-type a[href][rel~="index"]::before { + /* English: "Index"; */ + content: "Index"; + } + + article.slide:lang(de) > nav:first-of-type a[href][rel~="first"]::before { + /* English: "First slide"; */ + content: "Erste Folie"; + } + + article.slide:lang(de) > nav:first-of-type a[href][rel~="last"]::before { + /* English: "Last slide"; */ + content: "Letzte Folie "; + } + + article.slide:lang(de) > nav:first-of-type a[href][rel~="prev"]::before { + /* English: "Previous slide"; */ + content: "Vorherige Folie"; + } + + article.slide:lang(de) > nav:first-of-type a[href][rel~="next"]::before { + /* English: "Next slide"; */ + content: "N\0000E4chste Folie"; + } + + article.slide:lang(de) > nav:first-of-type a[href][rel~="child"]::before { + /* English: "More"; */ + content: "Mehr"; + } + + article.slide:lang(de) > nav:first-of-type a[href][rel~="parent"]::before { + /* English: "Back to"; */ + content: "Zur\0000FCck zu"; + } + + article.slide:lang(de) > nav:first-of-type a[href][rel~="parent"]:empty::before { + /* English: "Exit"; */ + content: "Ausgang"; + } + + article.slide:lang(de) > nav:first-of-type a[href][rel~="parent"]:not(.tab):not(.plate):not(.no-rel):empty::before { + /* English: "Click to exit"; */ + content: "Klick zum Verlassen"; + } + +} + + +/* EOF */ + diff --git a/dev/plugins/i18n/takefive-i18n-es-dev.css b/dev/plugins/i18n/takefive-i18n-es-dev.css new file mode 100644 index 0000000..6de7fa4 --- /dev/null +++ b/dev/plugins/i18n/takefive-i18n-es-dev.css @@ -0,0 +1,100 @@ +/*\ +|*| +|*| :: Spanish translation of **Take Five!** :: +|*| +|*| Version 1.0.0 +|*| +|*| https://github.com/madmurphy/takefive.css/ +|*| +\*/ + + +@media only screen { + + /* + No need to use `!important`, these selectors already have sufficient + specificity. + + Do not change the order whereby the selectors are listed. + */ + + article.slide:lang(es) > nav:first-of-type a[href]:not([rel])::before { + /* English: "See also"; */ + content: "Ver también"; + } + + article.slide:lang(es) > nav:first-of-type a[href][rel~="tag"]::before { + /* English: "Tagged content"; */ + content: "Contenido relacionado"; + } + + article.slide:lang(es) > nav:first-of-type a[href][rel~="discussion"]::before { + /* English: "Comments"; */ + content: "Comentarios"; + } + + article.slide:lang(es) > nav:first-of-type a[href][rel~="author"]::before { + /* English: "Author"; */ + content: "Autor"; + } + + article.slide:lang(es) > nav:first-of-type a[href][rel~="attachment"]::before { + /* English: "Download"; */ + content: "Descargar"; + } + + article.slide:lang(es) > nav:first-of-type a[href][rel~="bookmark"]::before { + /* English: "Share it!"; */ + content: "Difundir"; + } + + article.slide:lang(es) > nav:first-of-type a[href][rel~="index"]::before { + /* English: "Index"; */ + content: "\0000CDndice"; + } + + article.slide:lang(es) > nav:first-of-type a[href][rel~="first"]::before { + /* English: "First slide"; */ + content: "Primera diapositiva"; + } + + article.slide:lang(es) > nav:first-of-type a[href][rel~="last"]::before { + /* English: "Last slide"; */ + content: "\0000DAltima diapositiva"; + } + + article.slide:lang(es) > nav:first-of-type a[href][rel~="prev"]::before { + /* English: "Previous slide"; */ + content: "Diapositiva anterior"; + } + + article.slide:lang(es) > nav:first-of-type a[href][rel~="next"]::before { + /* English: "Next slide"; */ + content: "Diapositiva siguiente"; + } + + article.slide:lang(es) > nav:first-of-type a[href][rel~="child"]::before { + /* English: "More"; */ + content: "M\0000E1s"; + } + + article.slide:lang(es) > nav:first-of-type a[href][rel~="parent"]::before { + /* English: "Back to"; */ + content: "Regresar a"; + } + + article.slide:lang(es) > nav:first-of-type a[href][rel~="parent"]:empty::before { + /* English: "Exit"; */ + content: "Salida"; + } + + article.slide:lang(es) > nav:first-of-type a[href][rel~="parent"]:not(.tab):not(.plate):not(.no-rel):empty::before { + /* English: "Click to exit"; */ + content: "Haga clic para salir"; + } + +} + + +/* EOF */ + diff --git a/dev/plugins/i18n/takefive-i18n-it-dev.css b/dev/plugins/i18n/takefive-i18n-it-dev.css new file mode 100644 index 0000000..0aa2a65 --- /dev/null +++ b/dev/plugins/i18n/takefive-i18n-it-dev.css @@ -0,0 +1,100 @@ +/*\ +|*| +|*| :: Italian translation of **Take Five!** :: +|*| +|*| Version 1.0.0 +|*| +|*| https://github.com/madmurphy/takefive.css/ +|*| +\*/ + + +@media only screen { + + /* + No need to use `!important`, these selectors already have sufficient + specificity. + + Do not change the order whereby the selectors are listed. + */ + + article.slide:lang(it) > nav:first-of-type a[href]:not([rel])::before { + /* English: "See also"; */ + content: "Vedi anche"; + } + + article.slide:lang(it) > nav:first-of-type a[href][rel~="tag"]::before { + /* English: "Tagged content"; */ + content: "Contenuto correlato"; + } + + article.slide:lang(it) > nav:first-of-type a[href][rel~="discussion"]::before { + /* English: "Comments"; */ + content: "Commenti"; + } + + article.slide:lang(it) > nav:first-of-type a[href][rel~="author"]::before { + /* English: "Author"; */ + content: "Autore"; + } + + article.slide:lang(it) > nav:first-of-type a[href][rel~="attachment"]::before { + /* English: "Download"; */ + content: "Download"; + } + + article.slide:lang(it) > nav:first-of-type a[href][rel~="bookmark"]::before { + /* English: "Share it!"; */ + content: "Condividi!"; + } + + article.slide:lang(it) > nav:first-of-type a[href][rel~="index"]::before { + /* English: "Index"; */ + content: "Indice"; + } + + article.slide:lang(it) > nav:first-of-type a[href][rel~="first"]::before { + /* English: "First slide"; */ + content: "Prima slide"; + } + + article.slide:lang(it) > nav:first-of-type a[href][rel~="last"]::before { + /* English: "Last slide"; */ + content: "Ultima slide"; + } + + article.slide:lang(it) > nav:first-of-type a[href][rel~="prev"]::before { + /* English: "Previous slide"; */ + content: "Slide precedente"; + } + + article.slide:lang(it) > nav:first-of-type a[href][rel~="next"]::before { + /* English: "Next slide"; */ + content: "Slide successiva"; + } + + article.slide:lang(it) > nav:first-of-type a[href][rel~="child"]::before { + /* English: "More"; */ + content: "Di pi\F9"; + } + + article.slide:lang(it) > nav:first-of-type a[href][rel~="parent"]::before { + /* English: "Back to"; */ + content: "Torna a"; + } + + article.slide:lang(it) > nav:first-of-type a[href][rel~="parent"]:empty::before { + /* English: "Exit"; */ + content: "Esci"; + } + + article.slide:lang(it) > nav:first-of-type a[href][rel~="parent"]:not(.tab):not(.plate):not(.no-rel):empty::before { + /* English: "Click to exit"; */ + content: "Clicca per uscire"; + } + +} + + +/* EOF */ + diff --git a/dev/plugins/i18n/takefive-i18n-la-dev.css b/dev/plugins/i18n/takefive-i18n-la-dev.css new file mode 100644 index 0000000..eaf66d3 --- /dev/null +++ b/dev/plugins/i18n/takefive-i18n-la-dev.css @@ -0,0 +1,130 @@ +/*\ +|*| +|*| :: Latin translation of **Take Five!** :: +|*| +|*| Version 1.0.0 +|*| +|*| https://github.com/madmurphy/takefive.css/ +|*| +|*| You can use this translation as as a template for any other language by +|*| replacing every occurrence of `lang(la)` with `lang([YOUR LANGUAGE])` +|*| and renaming the CSS file accordingly. +|*| +|*| If you want to keep the original English version of a specific text +|*| just remove the rule from the translation file. +|*| +\*/ + + +@media only screen { + + /* + No need to use `!important`, these selectors already have sufficient + specificity. + + Do not change the order whereby the selectors are listed. + */ + + article.slide:lang(la) > nav:first-of-type a[href]:not([rel])::before { + /* English: "See also"; */ + content: "Videre quoque"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="tag"]::before { + /* English: "Tagged content"; */ + content: "Argumentum relatum"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="discussion"]::before { + /* English: "Comments"; */ + content: "Commentarium"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="author"]::before { + /* English: "Author"; */ + content: "Auctor"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="attachment"]::before { + /* English: "Download"; */ + content: "Extrahere"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="bookmark"]::before { + /* English: "Share it!"; */ + content: "Diffundere"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="index"]::before { + /* English: "Index"; */ + content: "Index"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="first"]::before { + /* English: "First slide"; */ + content: "Primum quadrum"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="last"]::before { + /* English: "Last slide"; */ + content: "Ultimum quadrum"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="prev"]::before { + /* English: "Previous slide"; */ + content: "Quadrum praecedens"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="next"]::before { + /* English: "Next slide"; */ + content: "Quadrum sequens"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="child"]::before { + /* English: "More"; */ + content: "Excavare"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="parent"]::before { + /* English: "Back to"; */ + content: "Revertere ad"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="parent"]:empty::before { + /* English: "Exit"; */ + content: "Exire"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="parent"]:not(.tab):not(.plate):not(.no-rel):empty::before { + /* English: "Click to exit"; */ + content: "Premere ad exeundum"; + } + + article.slide:lang(la):not(.no-hashtag)::after { + /* English: "hashtag: #" attr(id); */ + content: "cancellulus: #" attr(id); + } + + + /* + It is also possible to add support to new `rel` attributes that in + English would be displayed verbatim. For example: + */ + + /* + article.slide:lang(la) > nav:first-of-type a[href][rel~="webmention"]::before { + content: "Mentio internexualis"; + text-transform: none; + } + */ + + /* + Note that unknown `rel` attributes have the `text-transform` property + set to `capitalize` by default. + */ + +} + + +/* EOF */ + diff --git a/dev/plugins/i18n/translation-template.css.tpl b/dev/plugins/i18n/translation-template.css.tpl new file mode 100644 index 0000000..eaf66d3 --- /dev/null +++ b/dev/plugins/i18n/translation-template.css.tpl @@ -0,0 +1,130 @@ +/*\ +|*| +|*| :: Latin translation of **Take Five!** :: +|*| +|*| Version 1.0.0 +|*| +|*| https://github.com/madmurphy/takefive.css/ +|*| +|*| You can use this translation as as a template for any other language by +|*| replacing every occurrence of `lang(la)` with `lang([YOUR LANGUAGE])` +|*| and renaming the CSS file accordingly. +|*| +|*| If you want to keep the original English version of a specific text +|*| just remove the rule from the translation file. +|*| +\*/ + + +@media only screen { + + /* + No need to use `!important`, these selectors already have sufficient + specificity. + + Do not change the order whereby the selectors are listed. + */ + + article.slide:lang(la) > nav:first-of-type a[href]:not([rel])::before { + /* English: "See also"; */ + content: "Videre quoque"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="tag"]::before { + /* English: "Tagged content"; */ + content: "Argumentum relatum"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="discussion"]::before { + /* English: "Comments"; */ + content: "Commentarium"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="author"]::before { + /* English: "Author"; */ + content: "Auctor"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="attachment"]::before { + /* English: "Download"; */ + content: "Extrahere"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="bookmark"]::before { + /* English: "Share it!"; */ + content: "Diffundere"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="index"]::before { + /* English: "Index"; */ + content: "Index"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="first"]::before { + /* English: "First slide"; */ + content: "Primum quadrum"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="last"]::before { + /* English: "Last slide"; */ + content: "Ultimum quadrum"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="prev"]::before { + /* English: "Previous slide"; */ + content: "Quadrum praecedens"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="next"]::before { + /* English: "Next slide"; */ + content: "Quadrum sequens"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="child"]::before { + /* English: "More"; */ + content: "Excavare"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="parent"]::before { + /* English: "Back to"; */ + content: "Revertere ad"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="parent"]:empty::before { + /* English: "Exit"; */ + content: "Exire"; + } + + article.slide:lang(la) > nav:first-of-type a[href][rel~="parent"]:not(.tab):not(.plate):not(.no-rel):empty::before { + /* English: "Click to exit"; */ + content: "Premere ad exeundum"; + } + + article.slide:lang(la):not(.no-hashtag)::after { + /* English: "hashtag: #" attr(id); */ + content: "cancellulus: #" attr(id); + } + + + /* + It is also possible to add support to new `rel` attributes that in + English would be displayed verbatim. For example: + */ + + /* + article.slide:lang(la) > nav:first-of-type a[href][rel~="webmention"]::before { + content: "Mentio internexualis"; + text-transform: none; + } + */ + + /* + Note that unknown `rel` attributes have the `text-transform` property + set to `capitalize` by default. + */ + +} + + +/* EOF */ + diff --git a/dev/plugins/maxsize/takefive-maxsize-dev.css b/dev/plugins/maxsize/takefive-maxsize-dev.css index 12fd157..c328815 100644 --- a/dev/plugins/maxsize/takefive-maxsize-dev.css +++ b/dev/plugins/maxsize/takefive-maxsize-dev.css @@ -1,3 +1,14 @@ +/*\ +|*| +|*| :: Take Five! -- MaxSize :: +|*| +|*| Version 1.0.0 +|*| +|*| https://github.com/madmurphy/takefive.css/ +|*| +\*/ + + @media only screen and not (max-width: 768px) { article.slide.maxsize > :not(nav):not(header):not(footer):not(aside) { diff --git a/dev/plugins/polaroid/takefive-polaroid-dev.css b/dev/plugins/polaroid/takefive-polaroid-dev.css index 7dd866f..557bae2 100644 --- a/dev/plugins/polaroid/takefive-polaroid-dev.css +++ b/dev/plugins/polaroid/takefive-polaroid-dev.css @@ -1,3 +1,14 @@ +/*\ +|*| +|*| :: Take Five! -- Polaroid :: +|*| +|*| Version 1.0.0 +|*| +|*| https://github.com/madmurphy/takefive.css/ +|*| +\*/ + + @media only screen { article.slide .polaroid { diff --git a/dev/plugins/slides/takefive-slides-dev.css b/dev/plugins/slides/takefive-slides-dev.css new file mode 100644 index 0000000..9f6ec0a --- /dev/null +++ b/dev/plugins/slides/takefive-slides-dev.css @@ -0,0 +1,96 @@ +/*\ +|*| +|*| :: Take Five! -- Slides :: +|*| +|*| Version 1.0.0 +|*| +|*| https://github.com/madmurphy/takefive.css/ +|*| +\*/ + + +@media all { + + section.slides { + margin: 0; + padding: 0; + } + +} + + +@media only screen { + + section.slides { + position: fixed; + top: 0; + left: 0; + visibility: hidden; + z-index: 10000; + } + + section.slides > :not(article), + section.slides > :not(.slide) { + display: none; + } + + section.slides section.slides { + position: revert; + top: revert; + left: revert; + visibility: revert; + z-index: revert; + } + +} + + +@media only print { + + section.slides { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + break-before: always; + break-after: always; + /* Old syntax */ + page-break-before: always; + page-break-after: always; + } + + /*@@@@@@@@@@@@@@@@@@@@@@@@@@@@ !DEV_ONLY! @@@@@@@@@@@@@@@@@@@@@@@@@@@*/ + section.slides:first-child { + break-before: auto; + /* Old syntax */ + page-break-before: auto; + } + /*@@@@@@@@@@@@@@@@@@@@@@@@@@ !END_DEV_ONLY! @@@@@@@@@@@@@@@@@@@@@@@@@*/ + + section.slides:last-child { + break-after: auto; + /* Old syntax */ + page-break-after: auto; + } + + section.slides > header { + position: relative; + top: 40vh; + left: 0; + font-size: 1.5em; + break-before: always; + break-after: always; + /* Old syntax */ + page-break-before: always; + page-break-after: always; + } + + section.slides > header > * { + text-align: center; + } + +} + + +/* EOF */ + diff --git a/dev/plugins/toolbar/takefive-toolbar-dev.css b/dev/plugins/toolbar/takefive-toolbar-dev.css index d78bb00..b2e281f 100644 --- a/dev/plugins/toolbar/takefive-toolbar-dev.css +++ b/dev/plugins/toolbar/takefive-toolbar-dev.css @@ -1,3 +1,14 @@ +/*\ +|*| +|*| :: Take Five! -- Toolbar :: +|*| +|*| Version 1.0.1 +|*| +|*| https://github.com/madmurphy/takefive.css/ +|*| +\*/ + + @media only screen { article.slide .toolbar { @@ -16,7 +27,7 @@ position: fixed; top: 0; left: calc(var(--t5as) - var(--t5hp) + var(--t5fo)); - height: calc(100% - var(--t5fp)); + height: calc(100% - var(--t5vp) + var(--t5fh)); width: calc(var(--t5hp) - var(--t5as)); background-color: rgba(25, 25, 25, .9); border-radius: 0 0 var(--t5br) 0; @@ -212,7 +223,7 @@ article.slide:not(.nonadaptive) .toolbar > details { left: calc(-50% + var(--t5fo)); - height: calc(100% - var(--t5fp)); + height: calc(100% - var(--t5em) - var(--t5ags) - 1.5em); width: 50%; } @@ -228,9 +239,7 @@ article.slide:not(.nonadaptive):target .toolbar > :not(details):hover, article.slide:not(.nonadaptive):target .toolbar > details[open] > summary:first-of-type, article.slide:not(.nonadaptive):target .toolbar > details > summary:first-of-type:hover { - bottom: var(--t5fp); - visibility: visible; - transition: bottom 1s ease; + bottom: calc(var(--t5vp) - var(--t5fh)); } article.slide:not(.nonadaptive) .toolbar > :not(details)[data-glyph]::after, diff --git a/dev/sandbox/var-test.html b/dev/sandbox/var-test.html new file mode 100644 index 0000000..f7026c0 --- /dev/null +++ b/dev/sandbox/var-test.html @@ -0,0 +1,124 @@ + + + + + + + + +Take Five! – CSS var() test + + + + + +

+ Take Five! – CSS var() test +

+ +
+
+

<header>

+
+
+ <leeloo> +
+
+ Anything else +
+ + + +
+ +

Free software

+

Take Five! is free software. You can redistribute it and/or modify it under the terms of the GPL license, version 3 or any later version. The code is available on GitHub.

+ + + diff --git a/dev/takefive-dev.css b/dev/takefive-dev.css index 62c1ed8..a339cc7 100644 --- a/dev/takefive-dev.css +++ b/dev/takefive-dev.css @@ -7,7 +7,7 @@ |*| |*| https://github.com/madmurphy/takefive.css/ |*| -|*| Version 3.0.0 +|*| Version 3.1.0 |*| |*| (c) madmurphy333@gmail.com |*| @@ -16,7 +16,6 @@ |*| |*| https://www.gnu.org/licenses/gpl-3.0.html |*| -|*| \*/ @@ -28,28 +27,21 @@ \*/ -@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"); -} +@import url("fonts/victoria-typewriter/victoria-typewriter.css"); +/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@ !DEV_ONLY! @@@@@@@@@@@@@@@@@@@@@@@@@@@*/ +/* + Other possible fonts: -/* Uncomment this for using the GNU Typewriter font */ -/* -@font-face { - font-family: "typewriter"; - src: url("fonts/gnutypewriter/gnutypewriter.eot") format("embedded-opentype"), url("fonts/gnutypewriter/gnutypewriter.otf") format("opentype"), url("fonts/gnutypewriter/gnutypewriter.woff") format("woff"), url("fonts/gnutypewriter/gnutypewriter.ttf") format("truetype"), url("fonts/gnutypewriter/gnutypewriter.svg") format("svg"); -} -*/ + * "1942 report" --> @import url("fonts/1942-report/1942-report.css"); + * "GNUTypewriter" --> @import url("fonts/gnutypewriter/gnutypewriter.css"); + * "My Underwood" --> @import url("fonts/my-underwood/my-underwood.css"); + Although beautiful, unfortunately these fonts do not support accented + characters. -/* Uncomment this for using the My Underwood font */ -/* -@font-face { - font-family: "My Underwood"; - src: url("fonts/my-underwood/my-underwood.woff2") format("woff2"), url("fonts/my-underwood/my-underwood.eot") format("embedded-opentype"), url("fonts/my-underwood/my-underwood.woff") format("woff"), url("fonts/my-underwood/my-underwood.ttf") format("truetype"), url("fonts/my-underwood/my-underwood.otf") format("opentype"); -} */ +/*@@@@@@@@@@@@@@@@@@@@@@@@@@ !END_DEV_ONLY! @@@@@@@@@@@@@@@@@@@@@@@@@*/ @@ -74,29 +66,35 @@ article.slide { /*@@@@@@@@@@@@@@@@@@@@@@@@@@@@ !DEV_ONLY! @@@@@@@@@@@@@@@@@@@@@@@@@@@*/ + /* Font size */ + --t5fs: var(--take5-font-size, .8em); /* preferably `em` */ + /* Vertical padding */ - --t5vp: var(--take5-vpadding, 60px); /* accepts viewport percentage (height) */ + --t5vp: var(--take5-vpadding, 9.5vh); /* absolute values only */ /* Horizontal padding */ --t5hp: var(--take5-hpadding, 18%); /* accepts viewport percentage (width) */ /* A vertical space */ - --t5vs: var(--take5-vspace, .472vh); /* absolute values only */ + --t5vs: var(--take5-vspace, .47vh); /* absolute values only */ /* An orientation-agnostic (`vmin`) space */ - --t5as: var(--take5-aspace, .786vmin); /* absolute values only */ + --t5as: var(--take5-aspace, .78vmin); /* absolute values only */ /* A horizontal space */ - --t5hs: var(--take5-hspace, .888vw); /* absolute values only */ + --t5hs: var(--take5-hspace, .88vw); /* absolute values only */ /* Icon size */ --t5gs: var(--take5-glyphsize, 40px); /* absolute values only */ - /* `