j1-template 2020.0.15 → 2020.0.20
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_includes/themes/j1/blocks/footer/boxes/about_box.proc +2 -2
- data/_includes/themes/j1/blocks/footer/boxes/links_box.proc +3 -3
- data/_includes/themes/j1/blocks/footer/boxes/news_box.proc +2 -2
- data/_includes/themes/j1/layouts/content_generator_blog_archive.html +19 -16
- data/_includes/themes/j1/layouts/content_generator_collection.html +2 -2
- data/_includes/themes/j1/layouts/content_generator_page.html +8 -56
- data/_includes/themes/j1/layouts/content_generator_post.html +4 -2
- data/_includes/themes/j1/procedures/global/create_bs_button.proc +10 -10
- data/_includes/themes/j1/procedures/posts/collate_timeline.proc +39 -40
- data/_layouts/blog_archive.html +4 -3
- data/_layouts/collection.html +1 -1
- data/_layouts/home.html +1 -1
- data/_layouts/page.html +2 -2
- data/_layouts/post.html +3 -3
- data/apps/public/cc/cc.yml +33 -34
- data/apps/public/cc/index.adoc +1 -1
- data/assets/data/authclient.html +39 -28
- data/assets/data/banner.html +10 -10
- data/assets/data/cookiebar.html +7 -7
- data/assets/data/gallery_customizer.html +2 -2
- data/assets/data/jupyter/notebooks/visualisation.ipynb +1 -1
- data/assets/data/menu.html +6 -6
- data/assets/data/mmenu.html +4 -4
- data/assets/data/mmenu_sidebar.html +1 -1
- data/assets/data/mmenu_toc.html +1 -1
- data/assets/data/panel.html +114 -96
- data/assets/data/quicklinks.html +8 -2
- data/assets/data/ssm.html +1 -1
- data/assets/data/themes.json +2 -0
- data/assets/themes/j1/adapter/js/back2top.js +231 -0
- data/assets/themes/j1/adapter/js/{mdb.js → bmd.js} +10 -10
- data/assets/themes/j1/adapter/js/carousel.js +134 -133
- data/assets/themes/j1/adapter/js/clipboard.js +1 -0
- data/assets/themes/j1/adapter/js/cookiebar.js +1 -0
- data/assets/themes/j1/adapter/js/framer.js +0 -4
- data/assets/themes/j1/adapter/js/gallery_customizer.js +1 -0
- data/assets/themes/j1/adapter/js/j1.js +61 -11
- data/assets/themes/j1/adapter/js/logger.js +1 -0
- data/assets/themes/j1/adapter/js/mmenu.js +9 -7
- data/assets/themes/j1/adapter/js/navigator.js +104 -31
- data/assets/themes/j1/adapter/js/ssm.js +29 -28
- data/assets/themes/j1/adapter/js/themer.js +7 -13
- data/assets/themes/j1/adapter/js/toccer.js +36 -6
- data/assets/themes/j1/core/css/animate.css +17 -0
- data/assets/themes/j1/core/css/bootstrap.css +54 -48
- data/assets/themes/j1/core/css/bootstrap.min.css +3 -3
- data/assets/themes/j1/core/css/{fontawesome.css → icons-fontawesome.css} +31 -12
- data/assets/themes/j1/core/css/{fontawesome.min.css → icons-fontawesome.min.css} +0 -0
- data/assets/themes/j1/core/css/{iconify-icons.css → icons-iconify.css} +51 -38
- data/assets/themes/j1/core/css/{iconify-icons.min.css → icons-iconify.min.css} +1 -1
- data/assets/themes/j1/core/css/{material-design-icons.css → icons-materialdesign.css} +326 -244
- data/assets/themes/j1/core/css/icons-materialdesign.min.css +1 -0
- data/assets/themes/j1/core/css/{twemoji.css → icons-twemoji.css} +61 -51
- data/assets/themes/j1/core/css/{twemoji.min.css → icons-twemoji.min.css} +0 -0
- data/assets/themes/j1/core/css/{theme_extensions.css → theme-extensions.css} +1793 -1342
- data/assets/themes/j1/core/css/theme-extensions.min.css +1 -0
- data/assets/themes/j1/core/css/uno-dark.css +8012 -0
- data/assets/themes/j1/core/css/uno-dark.min.css +6 -0
- data/assets/themes/j1/core/css/uno.css +14080 -1653
- data/assets/themes/j1/core/css/uno.min.css +8 -1
- data/assets/themes/j1/core/css/vendor.css +49 -13413
- data/assets/themes/j1/core/css/vendor.min.css +1 -7
- data/assets/themes/j1/core/js/template.js +6 -6
- data/assets/themes/j1/core/js/template.js.map +1 -1
- data/assets/themes/j1/core/js/template.min.js +1 -1
- data/assets/themes/j1/modules/backstretch/js/backstretch.js +12 -13
- data/assets/themes/j1/modules/backstretch/js/backstretch.min.js +12 -13
- data/assets/themes/j1/modules/bsThemeSwitcher/js/switcher.js +43 -34
- data/assets/themes/j1/modules/bsThemeSwitcher/js/switcher.min.js +11 -12
- data/assets/themes/j1/modules/carousel/css/carousel.css +8 -9
- data/assets/themes/j1/modules/carousel/css/carousel.min.css +7 -9
- data/assets/themes/j1/modules/carousel/css/carousel_transitions.css +7 -8
- data/assets/themes/j1/modules/carousel/css/carousel_transitions.min.css +7 -9
- data/assets/themes/j1/modules/carousel/css/theme/uno.css +7 -8
- data/assets/themes/j1/modules/carousel/css/theme/uno.min.css +8 -9
- data/assets/themes/j1/modules/clipboard/css/theme/uno.css +7 -7
- data/assets/themes/j1/modules/clipboard/css/theme/uno.min.css +8 -45
- data/assets/themes/j1/modules/iframeResizer/examples/frame.absolute.html +2 -5
- data/assets/themes/j1/modules/iframeResizer/examples/frame.content.html +17 -44
- data/assets/themes/j1/modules/iframeResizer/examples/frame.hover.html +2 -5
- data/assets/themes/j1/modules/iframeResizer/examples/frame.nested.html +5 -7
- data/assets/themes/j1/modules/iframeResizer/examples/frame.textarea.html +1 -1
- data/assets/themes/j1/modules/iframeResizer/examples/frame.tolerance.html +3 -5
- data/assets/themes/j1/modules/iframeResizer/examples/index.html +4 -3
- data/assets/themes/j1/modules/iframeResizer/examples/two.html +4 -3
- data/assets/themes/j1/modules/justifiedGallery/css/theme/uno.css +8 -9
- data/assets/themes/j1/modules/justifiedGallery/css/theme/uno.min.css +8 -31
- data/assets/themes/j1/modules/lightGallery/css/themes/uno.css +7 -8
- data/assets/themes/j1/modules/lightGallery/css/themes/uno.min.css +8 -10
- data/assets/themes/j1/modules/lightbox/css/lightbox.css +11 -12
- data/assets/themes/j1/modules/lightbox/css/lightbox.min.css +11 -12
- data/assets/themes/j1/modules/lightbox/css/theme/uno.css +7 -7
- data/assets/themes/j1/modules/lightbox/css/theme/uno.min.css +7 -8
- data/assets/themes/j1/modules/lightbox/js/lightbox.js +11 -12
- data/assets/themes/j1/modules/lightbox/js/lightbox.min.js +11 -27
- data/assets/themes/j1/modules/mdiPreviewer/css/previewer.css +82 -0
- data/assets/themes/j1/modules/mdiPreviewer/css/previewer.min.css +15 -0
- data/assets/themes/j1/modules/mdiPreviewer/js/readme +0 -0
- data/assets/themes/j1/modules/mmenuLight/css/mmenu.css +11 -11
- data/assets/themes/j1/modules/mmenuLight/css/mmenu.min.css +12 -386
- data/assets/themes/j1/modules/mmenuLight/css/theme/uno.css +15 -19
- data/assets/themes/j1/modules/mmenuLight/css/theme/uno.min.css +8 -163
- data/assets/themes/j1/modules/tocbot/css/theme/uno.css +12 -19
- data/assets/themes/j1/modules/tocbot/css/theme/uno.min.css +8 -82
- data/assets/themes/j1/modules/twemoji/css/picker/twemoji-picker.css +153 -0
- data/assets/themes/j1/modules/twemoji/css/picker/twemoji-picker.min.css +19 -0
- data/assets/themes/j1/modules/twemoji/js/picker/twemoji-picker.js +12 -13
- data/assets/themes/j1/modules/twemoji/js/picker/twemoji-picker.min.js +12 -268
- data/assets/themes/j1/modules/twemoji/js/twemoji.js +11 -20
- data/assets/themes/j1/modules/twemoji/js/twemoji.min.js +11 -17
- data/lib/j1/version.rb +1 -1
- data/lib/j1_app/j1_auth_manager/config.rb +10 -5
- data/lib/j1_app/j1_auth_manager/views/auth_manager_ui.erb +391 -389
- data/lib/starter_web/Gemfile +7 -3
- data/lib/starter_web/_config.yml +4 -4
- data/lib/starter_web/_data/apps/carousel.yml +6 -7
- data/lib/starter_web/_data/apps/defaults/carousel.yml +2 -3
- data/lib/starter_web/_data/apps/defaults/gallery_customizer.yml +1 -2
- data/lib/starter_web/_data/apps/defaults/justified_gallery.yml +1 -2
- data/lib/starter_web/_data/apps/defaults/light_gallery.yml +1 -2
- data/lib/starter_web/_data/apps/defaults/lightbox.yml +1 -2
- data/lib/starter_web/_data/apps/gallery_customizer.yml +1 -2
- data/lib/starter_web/_data/apps/justified_gallery.yml +4 -5
- data/lib/starter_web/_data/apps/light_gallery.yml +1 -2
- data/lib/starter_web/_data/apps/lightbox.yml +1 -2
- data/lib/starter_web/_data/blocks/banner.yml +27 -23
- data/lib/starter_web/_data/blocks/defaults/banner.yml +3 -4
- data/lib/starter_web/_data/blocks/defaults/footer.yml +1 -2
- data/lib/starter_web/_data/blocks/defaults/panel.yml +3 -4
- data/lib/starter_web/_data/blocks/footer.yml +1 -2
- data/lib/starter_web/_data/blocks/panel.yml +29 -23
- data/lib/starter_web/_data/builder/blog_navigator.yml +1 -2
- data/lib/starter_web/_data/layouts/app.yml +1 -2
- data/lib/starter_web/_data/layouts/blog_archive.yml +1 -2
- data/lib/starter_web/_data/layouts/collection.yml +1 -2
- data/lib/starter_web/_data/layouts/home.yml +7 -28
- data/lib/starter_web/_data/layouts/post.yml +1 -2
- data/lib/starter_web/_data/layouts/raw.yml +1 -2
- data/lib/starter_web/_data/modules/advertising.yml +0 -1
- data/lib/starter_web/_data/modules/attics.yml +1 -2
- data/lib/starter_web/_data/modules/authentication.yml +0 -1
- data/lib/starter_web/_data/modules/back2top.yml +30 -0
- data/lib/starter_web/_data/modules/defaults/attics.yml +6 -4
- data/lib/starter_web/_data/modules/defaults/authentication.yml +8 -10
- data/lib/starter_web/_data/modules/defaults/back2top.yml +146 -0
- data/lib/starter_web/_data/modules/defaults/framer.yml +1 -3
- data/lib/starter_web/_data/modules/defaults/jekyll_search.yml +0 -1
- data/lib/starter_web/_data/modules/defaults/log4javascript.yml +4 -5
- data/lib/starter_web/_data/modules/defaults/log4r.yml +1 -2
- data/lib/starter_web/_data/modules/defaults/navigator.yml +16 -14
- data/lib/starter_web/_data/modules/defaults/stickybits.yml +1 -2
- data/lib/starter_web/_data/modules/defaults/themer.yml +3 -3
- data/lib/starter_web/_data/modules/defaults/toccer.yml +1 -2
- data/lib/starter_web/_data/modules/framer.yml +1 -2
- data/lib/starter_web/_data/modules/log4javascript.yml +4 -5
- data/lib/starter_web/_data/modules/log4r.yml +1 -2
- data/lib/starter_web/_data/modules/navigator_menu.yml +6 -6
- data/lib/starter_web/_data/modules/themer.yml +2 -1
- data/lib/starter_web/_data/modules/toccer.yml +1 -1
- data/lib/starter_web/_data/private.yml +56 -108
- data/lib/starter_web/_data/resources.yml +106 -31
- data/lib/starter_web/_data/template_settings.yml +1 -1
- data/lib/starter_web/assets/images/modules/attics/aditya-joshi-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/alex-holyoake-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/anaya-katlego-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/antonella-lombardi-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/antonino-visalli-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/admin-dashboard-bootstrap-1280x800-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/docker-1280x600-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/jekyll.1200x600-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/library-1920x800-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/signpost-1920x800-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/water-journal-1280x600.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/write-1280x600-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/brandon-mowinkel-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/building-blocks-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/cookies-1920x1200-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/daniel-jensen-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/giammarco-boscaro-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/go-up-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/ian-schneider-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/ideas-start-here-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/jason-rosewell-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/jessica-ruscello-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/lianhao-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/library-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/mae-mue-1920x1280-v.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/mae-mue-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/matthaeus-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/nousnou-iwasaki-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/premium-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/robert-v-ruggiero-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/romain-vignes-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/runner-1920x1200-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/spider-web-1920x1200-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/the-place-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/welcome-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-1.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-2.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-3.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-4.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-5.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-6.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-7.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-8.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/mega_cities/andreas-brucker_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/mega_cities/denys-nevozhai-1_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/mega_cities/denys-nevozhai-2_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/mega_cities/luca-bravo_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/mega_cities/thomas-tucker_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/andreas-brucker_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/banter-snaps_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/denys-nevozhai-1_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/denys-nevozhai-2-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/denys-nevozhai-2_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/emmad-mazhari_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/ethan-brooke_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/federico-rizzarelli_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/gints-gailis_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/johan-mouchet_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/luca-bravo_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/oskars-sylwan_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/steven-diaz_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/thomas-tucker-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/thomas-tucker_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/favicon.ico +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-256x256.png +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-32x32.ico +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-512x512.png +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-64x64.png +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1.ico +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/scalable/j1.svg +31 -35
- data/lib/starter_web/assets/images/modules/lightbox/close.png +0 -0
- data/lib/starter_web/assets/images/modules/lightbox/loading.gif +0 -0
- data/lib/starter_web/assets/images/modules/lightbox/next.png +0 -0
- data/lib/starter_web/assets/images/modules/lightbox/prev.png +0 -0
- data/lib/starter_web/assets/images/pages/material/apple-touch-icon.png +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/100_present_images/lightbox-image-1.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/100_present_images/lightbox-image-2.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/100_present_images/lightbox-image-3.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/bootstrap-1920x1000-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/cards-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/emojies-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/images-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/puzzle-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/tables-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/themes-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/typography-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/adriana-lima-poster.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/kick-it-old-school-poster.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/video1-poster.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/video2-poster.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/video2-thumb.jpg +0 -0
- data/lib/starter_web/assets/videos/headers/still/underground-broadway.jpg +0 -0
- data/lib/starter_web/assets/videos/headers/still/victoria-oskolovich-on-vimeo.jpg +0 -0
- data/lib/starter_web/collections/posts/public/featured/_posts/0000-00-00-welcome-to-j1-template.adoc.erb +2 -2
- data/lib/starter_web/collections/posts/public/featured/_posts/2018-05-01-confusion-about-base-url.adoc +2 -2
- data/lib/starter_web/collections/posts/public/featured/_posts/2019-05-01-top-open-source-static-site-generators.adoc +4 -4
- data/lib/starter_web/collections/posts/public/featured/_posts/2019-06-01-about-cookies.adoc +3 -3
- data/lib/starter_web/collections/posts/public/series/_posts/2018-11-01-docker-using-shared-folders.adoc +3 -2
- data/lib/starter_web/index.html +2 -4
- data/lib/starter_web/package.json +4 -4
- data/lib/starter_web/pages/{public → protected}/site_search.adoc +3 -3
- data/lib/starter_web/pages/public/000_nav_pagination_tester.adoc +297 -0
- data/lib/starter_web/pages/public/about/about_site.adoc +1 -1
- data/lib/starter_web/pages/public/about/become_a_patron.adoc +1 -1
- data/lib/starter_web/pages/public/blog/navigator/archive.html +12 -18
- data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +14 -19
- data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +14 -20
- data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +12 -13
- data/lib/starter_web/pages/public/blog/navigator/index.html +1 -1
- data/lib/starter_web/pages/public/learn/examples/floating_div.adoc +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/attributes.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_bottom_info.asciidoc +6 -3
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_bottom_left_warning.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_bottom_right_danger.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_central_success.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_full_height_left_info.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_full_height_right_success.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_top_info.asciidoc +3 -3
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_top_left_info.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_top_right_success.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/419_advanced_modals_demo.asciidoc +337 -0
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +52 -60
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc +22 -22
- data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc +25 -25
- data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc +21 -21
- data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc +68 -68
- data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc +2 -28
- data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc +19 -19
- data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc +11 -11
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/attributes.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_bottom_info.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_bottom_left_warning.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_bottom_right_danger.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_central_success.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_full_height_left_info.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_full_height_right_success.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_top_info.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_top_left_info.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_top_right_success.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/whats_up.adoc +1 -1
- data/lib/starter_web/pages/public/legal/de/300_privacy.adoc +1 -1
- data/lib/starter_web/pages/public/legal/en/000_copyright.adoc +1 -1
- data/lib/starter_web/pages/public/legal/en/100_impress.adoc +1 -1
- data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +3 -3
- data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc +1 -1
- data/lib/starter_web/pages/public/previewer/bootstrap_theme.adoc +1271 -685
- data/lib/starter_web/pages/public/previewer/iframer.adoc +1 -1
- data/lib/starter_web/pages/public/previewer/justified_gallery.html +1 -1
- data/lib/starter_web/pages/public/previewer/mdi_icons_preview.adoc +3 -3
- data/lib/starter_web/pages/public/previewer/twitter_emoji_preview.adoc +14 -12
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +84 -65
- data/_includes/themes/j1/blocks/footer/boxes/about_box.proc.org +0 -40
- data/assets/themes/j1/core/css/material-design-icons.min.css +0 -1
- data/assets/themes/j1/core/css/theme_extensions.min.css +0 -1
- data/assets/themes/j1/modules/backstretch/js/backstretch.min.js.org +0 -1
- data/lib/starter_web/assets/images/modules/attics/aditya-joshi-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/alex-holyoake-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/anaya-katlego-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/antonella-lombardi-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/antonino-visalli-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/admin-dashboard-bootstrap-1280x800-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/docker-1280x600-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/jekyll.1200x600-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/library-1920x800-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/signpost-1920x800-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/water-journal-1280x600.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/write-1280x600-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/brandon-mowinkel-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/building-blocks-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/cookies-1920x1200-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/daniel-jensen-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/giammarco-boscaro-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/go-up-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/ian-schneider-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/ideas-start-here-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/jason-rosewell-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/jessica-ruscello-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/lianhao-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/library-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/matthaeus-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/nousnou-iwasaki-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/premium-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/robert-v-ruggiero-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/romain-vignes-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/runner-1920x1200-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/spider-web-1920x1200-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/the-place-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/welcome-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/bootstrap-1920x1000-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/cards-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/emojies-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/images-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/puzzle-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/tables-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/themes-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/typography-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/videos/headers/still/underground-broadway.webp +0 -0
- data/lib/starter_web/assets/videos/headers/still/victoria-oskolovich-on-vimeo.webp +0 -0
- data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour.1.asciidoc +0 -120
- data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour.adoc +0 -144
- data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour_api.adoc +0 -642
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/419_advanced_modals_html.asciidoc +0 -928
@@ -14,7 +14,7 @@ permalink: /pages/public/learn/roundtrip/present_im
|
|
14
14
|
regenerate: true
|
15
15
|
|
16
16
|
resources: [
|
17
|
-
carousel, lightbox,
|
17
|
+
clipboard, rouge, carousel, lightbox,
|
18
18
|
justified_gallery, light_gallery
|
19
19
|
]
|
20
20
|
resource_options:
|
@@ -23,7 +23,7 @@ resource_options:
|
|
23
23
|
padding_bottom: 50
|
24
24
|
opacity: 0.5
|
25
25
|
slides:
|
26
|
-
- url: /assets/images/pages/roundtrip/images-1920x1280-bw.
|
26
|
+
- url: /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
|
27
27
|
alt: Photo by Ricardo Gomez Angel on Unsplash
|
28
28
|
badge:
|
29
29
|
type: unsplash
|
@@ -64,26 +64,26 @@ include::{includedir}/attributes.asciidoc[tag=data]
|
|
64
64
|
// Include sub-documents
|
65
65
|
// -----------------------------------------------------------------------------
|
66
66
|
|
67
|
-
Welcome to the first preview page focussing the
|
67
|
+
Welcome to the first preview page focussing the image module. This page shows
|
68
68
|
you some of the quite useful features of J1 Template to manage your image based
|
69
69
|
content using lightboxes, carousels (slider) and galleries.
|
70
70
|
|
71
|
-
The
|
72
|
-
libraries like the build-in Gallely
|
73
|
-
image galleries or
|
74
|
-
maps. The build-in carousel app
|
71
|
+
The image module offer complex functionality based on powerful open source
|
72
|
+
libraries like the build-in Gallely gallery for simple _Bootstrap_ grid-based
|
73
|
+
image galleries or Justified Gallery for high-end, masonry styled preview
|
74
|
+
maps. The build-in carousel app carousel, using the jQuery plugin Owl Carousel
|
75
75
|
as a base, let you present your images as slide shows.
|
76
76
|
|
77
|
-
Lightboxes like
|
78
|
-
views of your
|
77
|
+
Lightboxes like LightGallery or Lightbox V2 support your web for full image
|
78
|
+
views of your picture or video content. Have a look, a quick tour what J1
|
79
79
|
can do. Have fun!
|
80
80
|
|
81
81
|
== J1 Lightboxes
|
82
82
|
|
83
|
-
A
|
83
|
+
A Lightbox in general is a helper which displays enlarged, almost
|
84
84
|
screen-filling versions of pictures (or videos), while dimming the rest of the
|
85
85
|
page. The technique, introduced by Lightbox V2, gained widespread popularity
|
86
|
-
due to its simple and elegant style. The term
|
86
|
+
due to its simple and elegant style. The term lightbox is used since then for
|
87
87
|
Javascript libraries to support such functionality.
|
88
88
|
|
89
89
|
For J1 Template, two different lightboxes can be used:
|
@@ -91,41 +91,40 @@ For J1 Template, two different lightboxes can be used:
|
|
91
91
|
* Lightbox V2 (lightbox)
|
92
92
|
* LightGallery
|
93
93
|
|
94
|
-
The default lightbox used by J1 Template is
|
95
|
-
written by _Lokesh Dhakar_. The name of that (build-in) is simply:
|
94
|
+
The default lightbox used by J1 Template is Lightbox V2, a Javascript library
|
95
|
+
written by _Lokesh Dhakar_. The name of that (build-in) is simply: lightbox.
|
96
96
|
For more complex use cases, like a thumbnail gallery preview or video support,
|
97
|
-
|
97
|
+
LightGallery can be used alternatively.
|
98
98
|
|
99
|
-
NOTE: The name
|
100
|
-
_lightbox_. And,
|
99
|
+
NOTE: The name LightGallery implies a sort of a Gallery but the library is a
|
100
|
+
_lightbox_. And, LightGallery provides much more functionality on image-based
|
101
101
|
data rather than enlarged displaying of images. See the examples below to check
|
102
|
-
for the differences in compare to the more simpler
|
102
|
+
for the differences in compare to the more simpler Lightbox V2 lightbox.
|
103
103
|
|
104
104
|
Both lightboxes are fully integrated to be used as standalone modules or to be
|
105
105
|
used as helpers _under-the-hood_ by other apps or modules focussing on image
|
106
|
-
data like
|
106
|
+
data like gallery or carousel, the build-in carousel module.
|
107
107
|
|
108
108
|
== Lightbox Examples
|
109
109
|
|
110
|
-
Find below an example of using the lightbox Lightbox
|
111
|
-
|
110
|
+
Find below an example of using the lightbox Lightbox standalone. See how
|
111
|
+
single (individual) images are linked for the use with Lightbox.
|
112
112
|
|
113
113
|
.A Lightbox block for standalone images
|
114
114
|
lightbox::example-standalone[ 400, {data-images-standalone} ]
|
115
115
|
|
116
|
-
For a
|
117
|
-
on the images below to see how
|
116
|
+
For a group of images (image sets), Lightbox support image groups. Click
|
117
|
+
on the images below to see how Lightbox manage image groups.
|
118
118
|
|
119
119
|
.A Lightbox block for grouped images
|
120
120
|
lightbox::example-group[ 400, {data-images-group}, group ]
|
121
121
|
|
122
|
-
|
123
122
|
=== LightGallery Example
|
124
123
|
|
125
|
-
|
124
|
+
LightGallery provides more complex functions on image data. The lightbox
|
126
125
|
supports a gallery-styled thumbnail preview plus image resizing, a dowload
|
127
126
|
dialog, sharing provider support and some more helpfull. Check what
|
128
|
-
|
127
|
+
LightGallery can do by the following example.
|
129
128
|
|
130
129
|
[subs=attributes]
|
131
130
|
++++
|
@@ -160,39 +159,37 @@ dialog, sharing provider support and some more helpfull. Check what
|
|
160
159
|
</script>
|
161
160
|
++++
|
162
161
|
|
163
|
-
|
164
162
|
== J1 Carousel App
|
165
163
|
|
166
|
-
|
164
|
+
J1 Carousel is based on OWL Carousel V1 in the latest (and unfortuneatly
|
167
165
|
last) version of 1.3.3. OWL Carousel is a clean and neat jQuery slider plugin
|
168
166
|
for creating fully responsive and touch-enabled carousel sliders.
|
169
167
|
|
170
|
-
NOTE: OWL Carousel V1 is
|
171
|
-
reason. Anyway, J1 Template is using this version of
|
168
|
+
NOTE: OWL Carousel V1 is not longer available on the Internet; for unknown
|
169
|
+
reason. Anyway, J1 Template is using this version of OWL Carousel as a
|
172
170
|
build-in carousel module because the software does an excellent job, is based
|
173
171
|
on a MIT license with no issues using them for private and business use.
|
174
172
|
And offers a lot of great features!
|
175
173
|
|
176
|
-
/////
|
177
174
|
=== Simple Text Carousel
|
178
175
|
|
179
176
|
A slider or carousel typically is used for displaying images but the
|
180
|
-
implementation for J1 Template support a lot more
|
181
|
-
as a slide show: simple
|
177
|
+
implementation for J1 Template support a lot more sources to be displayed
|
178
|
+
as a slide show: simple text for example.
|
182
179
|
|
183
180
|
carousel::owl_demo_text_carousel[role="mb-3"]
|
184
181
|
|
185
182
|
Important statements or topics can be placed e.g. on top of an article or a
|
186
|
-
paragraph to give them a better
|
187
|
-
a bunch of
|
183
|
+
paragraph to give them a better visibility. In one line, you can present
|
184
|
+
a bunch of facts to know animated for the readers attention within as single
|
188
185
|
line - no much space is needed.
|
189
186
|
|
190
187
|
=== Parallax Text Carousel
|
191
188
|
|
192
|
-
A more
|
189
|
+
A more eye-minded type of a text show is a parallax text slider. If you
|
193
190
|
want to place emphasis on you personal statements focussing the meaning, this
|
194
191
|
type of a slide show may be interesting. Image based slide shows may draw off
|
195
|
-
the readers attention from the text, therefor a
|
192
|
+
the readers attention from the text, therefor a pure text based presentation
|
196
193
|
may the better choice.
|
197
194
|
|
198
195
|
.Parallax Slider
|
@@ -214,16 +211,14 @@ may the better choice.
|
|
214
211
|
</script>
|
215
212
|
++++
|
216
213
|
|
217
|
-
|
218
214
|
Parallax text shows are can be placed as banners on a page. A lot of different
|
219
215
|
animations can be used. Internally, J1 Template is using some of the really
|
220
216
|
great CSS styles offered by _animate.css_.
|
221
217
|
|
222
218
|
TIP: Have a look a https://daneden.github.io/animate.css/[Dan Eden's home page]
|
223
|
-
to see all the possible dynamic styles you can create based on pure CSS.
|
224
|
-
of them are implemented for
|
225
|
-
for the
|
226
|
-
/////
|
219
|
+
to see all the possible dynamic styles you can create based on pure CSS. Some
|
220
|
+
of them are implemented for OWL Carousel for animation. See the documetation
|
221
|
+
for the CAROUSEL Module for more details.
|
227
222
|
|
228
223
|
=== Simple Image Carousel
|
229
224
|
|
@@ -240,53 +235,51 @@ carousel::owl_demo_simple[role="mb-5"]
|
|
240
235
|
=== Carousel + Caption + Lightbox
|
241
236
|
|
242
237
|
Carousels can be used for a quite compact form of image galleries. This example
|
243
|
-
show some pictures having individual caption text
|
238
|
+
show some pictures having individual caption text and support a lightbox to
|
244
239
|
enlarge images full size. For the example below, a quite simple lightbox
|
245
|
-
is used:
|
240
|
+
is used: Lightbox V2; or short: lightbox.
|
246
241
|
|
247
242
|
.Nice cats
|
248
243
|
carousel::owl_demo_cats[role="mb-5"]
|
249
244
|
|
250
|
-
|
251
|
-
The J1 module *lightbox* is a simple Lightbox but offers a bunch of interesting
|
245
|
+
The J1 module lightbox is a simple Lightbox but offers a bunch of interesting
|
252
246
|
features for displaying images. For example, lightbox can display all images
|
253
|
-
(of a carousel) as a
|
247
|
+
(of a carousel) as a group. If one picture is opened in the lightbox, all
|
254
248
|
the other can browsed as well.
|
255
249
|
|
256
250
|
=== One Slide Carousel + Lightbox
|
257
251
|
|
258
|
-
The build-in Carousel
|
259
|
-
Here you find an example of an single image slide show with
|
252
|
+
The build-in Carousel carousel supports multiple and single image shows.
|
253
|
+
Here you find an example of an single image slide show with controls enabled
|
260
254
|
to browse all images back and forth. An indicator below the slider shows how
|
261
255
|
many images the show contains.
|
262
256
|
|
263
257
|
.Single Slide Carousel and a Lightbox
|
264
258
|
carousel::owl_demo_oneslide[role="mb-5"]
|
265
259
|
|
266
|
-
|
267
260
|
== J1 Gallery App
|
268
261
|
|
269
|
-
To create
|
270
|
-
plugin
|
262
|
+
To create image and video galleries, J1 Template implements the jQuery
|
263
|
+
plugin JustifiedGallery as the main gallery module. Beside Justified
|
271
264
|
Gallery, a gallery based on pure _Bootstrap_ code is available with the build-in
|
272
|
-
gallery app
|
265
|
+
gallery app gallery.
|
273
266
|
|
274
|
-
|
275
|
-
and high quality
|
276
|
-
with the
|
267
|
+
Justified Gallery is a great jQuery plugin to create responsive, infinite
|
268
|
+
and high quality justified image galleries. J1 Template combines the gallery
|
269
|
+
with the lightboxes supported to enlage the images of a gallery.
|
277
270
|
|
278
|
-
See
|
271
|
+
See Justified Gallery in action - and for sure all what you see is even
|
279
272
|
responsive. Change the size of your current browser window, by width or height,
|
280
273
|
to see what will happen!
|
281
274
|
|
282
275
|
=== Justified Gallery
|
283
276
|
|
284
|
-
Pictures you've made are typically
|
277
|
+
Pictures you've made are typically not even in size. Images may have the
|
285
278
|
same size (resolution), but some of the are orientated landscape or other
|
286
279
|
may portrait. For that reason, a more powerful gallery is needed to create
|
287
|
-
so-called
|
280
|
+
so-called justified views.
|
288
281
|
|
289
|
-
|
282
|
+
Justified Gallery is using a so-called masonry grid layout. It works by
|
290
283
|
placing elements in an optimal position based on available horizontal and
|
291
284
|
vertical space. Sort of like mason fitting stones in a wall. You’ll have
|
292
285
|
seen it in use all over the Internet!
|
@@ -294,7 +287,6 @@ seen it in use all over the Internet!
|
|
294
287
|
.Masonry grid layout of Justified Gallery
|
295
288
|
gallery::jg_customizer[]
|
296
289
|
|
297
|
-
|
298
290
|
== Whats next
|
299
291
|
|
300
292
|
Hopefully you've enjoyed exploring the possibilities J1 offers for managing
|
@@ -26,7 +26,7 @@ resource_options:
|
|
26
26
|
color_2: md_grey_400
|
27
27
|
slides:
|
28
28
|
# Broadway Underground - still image (animate default)
|
29
|
-
- url: /assets/videos/headers/still/underground-broadway.
|
29
|
+
- url: /assets/videos/headers/still/underground-broadway.jpg
|
30
30
|
alt: Broadway Underground
|
31
31
|
alignY: top
|
32
32
|
animateFirst: false
|
@@ -37,7 +37,7 @@ resource_options:
|
|
37
37
|
loop: false
|
38
38
|
duration: 12000
|
39
39
|
# Broadway Underground - still image (animate random)
|
40
|
-
- url: /assets/videos/headers/still/underground-broadway.
|
40
|
+
- url: /assets/videos/headers/still/underground-broadway.jpg
|
41
41
|
alt: Broadway Underground
|
42
42
|
alignY: top
|
43
43
|
transition: push_left|push_right|cover_up|cover_down|fade|fadeInOut
|
@@ -79,50 +79,50 @@ include::{includedir}/attributes.asciidoc[tag=data]
|
|
79
79
|
|
80
80
|
Playing video on a web page seems not that special since you can already
|
81
81
|
watch videos on web pages through plugins like _Flash Player_, _Quicktime_
|
82
|
-
or _Silverlight_. A new standard goes to
|
82
|
+
or _Silverlight_. A new standard goes to HTML5 Video, a pure HTML way to
|
83
83
|
show video on the web; instead of the previous de facto standard of using
|
84
|
-
|
84
|
+
proprietary software.
|
85
85
|
|
86
86
|
== Video Galleries
|
87
87
|
|
88
|
-
|
88
|
+
HTML5 Video open the doors to your way presenting video content. Modern
|
89
89
|
browsers support the video tag `<video>` for the HTML5 Video standard. Browsers
|
90
90
|
have a build-in multimedia framework already for decoding and displaying
|
91
91
|
video content. No need to use such proprietary software components anymore!
|
92
92
|
|
93
|
-
HTML5 Video support is given by the App
|
94
|
-
|
93
|
+
HTML5 Video support is given by the App gallery combined with the Lightbox
|
94
|
+
LightGallery.
|
95
95
|
|
96
96
|
Two types of video sources are supported:
|
97
97
|
|
98
|
-
. videos from
|
99
|
-
. videos from
|
98
|
+
. videos from local files (your web space)
|
99
|
+
. videos from online sources (on the Internet) like YouTube, Vimeo, etc.
|
100
100
|
|
101
|
-
The combination of the App
|
101
|
+
The combination of the App gallery and the lightbox LightGallery is quite
|
102
102
|
usable for all the video content you want to present on your site. Galleries
|
103
103
|
can be placed elsewhere with your content. You can use them for video blogs
|
104
104
|
for example by placing them into your blog articles content.
|
105
105
|
|
106
|
-
WARNING:
|
107
|
-
business use, a
|
108
|
-
how to use LightGallery for
|
106
|
+
WARNING: LightGallery can be used for free for private use but for
|
107
|
+
business use, a commercial license is needed. See link:{light-gallery-license}[Light Gallery license]
|
108
|
+
how to use LightGallery for commercial webs and projects.
|
109
109
|
|
110
110
|
== Local video content
|
111
111
|
|
112
112
|
Digital image content, simple pictures or vidoes, are quite easy to make.
|
113
113
|
Today, each and every mobile has a camera - not that bad! Presenting a bunch
|
114
|
-
of (digital) pictures is very easy by using
|
114
|
+
of (digital) pictures is very easy by using Justified Gallery for example.
|
115
115
|
Videos created by a digi cam or a mobile can played by J1 Template using the
|
116
|
-
|
116
|
+
HTML5 Video support of LightGallery.
|
117
117
|
|
118
|
-
Two players are available with
|
118
|
+
Two players are available with LightGallery:
|
119
119
|
|
120
120
|
. an internal player used by default
|
121
121
|
. http://videojs.com/[video.js], a excellent Javascript video library
|
122
122
|
|
123
123
|
NOTE: The HTML5 specification does _not_ define which video and audio formats
|
124
|
-
browsers _should_ support. J1
|
125
|
-
HTML5 Video formats browsers support today such as
|
124
|
+
browsers _should_ support. J1 LightGallery supports all _typical_ types of
|
125
|
+
HTML5 Video formats browsers support today such as MP4, WebM, and Ogg.
|
126
126
|
|
127
127
|
.HTML5 video gallery
|
128
128
|
gallery::jg_video_html5[role="mb-5"]
|
@@ -133,7 +133,7 @@ The Internet is full of interesting content. Video content is very popular,
|
|
133
133
|
the number of channels at e.g. _YouTube_ is enormous. If you want to present
|
134
134
|
video content from the Internet, e.g. your channnel, the online video
|
135
135
|
support of J1 Template may a good choice. Find some enjoyable videos from
|
136
|
-
|
136
|
+
James Cordon's channel: Carpool Karaoke.
|
137
137
|
|
138
138
|
.YouTube Video Gallery - Carpool Karaoke
|
139
139
|
gallery::jg_video_online_youtube[role="mb-5"]
|
@@ -143,9 +143,9 @@ gallery::jg_video_online_vimeo[role="mb-5"]
|
|
143
143
|
|
144
144
|
== Whats next
|
145
145
|
|
146
|
-
Images and videos are quite
|
147
|
-
But the most visual component is
|
146
|
+
Images and videos are quite visual - and could be impressive, for sure.
|
147
|
+
But the most visual component is text for all pages, for all sites on the
|
148
148
|
Internet. To see how text could be presented great for modern responsive
|
149
|
-
websites, check the section
|
149
|
+
websites, check the section Typography next.
|
150
150
|
|
151
151
|
What? Find out how it works. go for: link:{roundtrip-typography}[Typography].
|
@@ -22,7 +22,7 @@ resource_options:
|
|
22
22
|
padding_bottom: 50
|
23
23
|
opacity: 0.3
|
24
24
|
slides:
|
25
|
-
- url: /assets/images/pages/roundtrip/typography-1920x1280-bw.
|
25
|
+
- url: /assets/images/pages/roundtrip/typography-1920x1280-bw.jpg
|
26
26
|
alt: Photo by Alice Donovan Rousel on Unsplash
|
27
27
|
preload: 0
|
28
28
|
transitionDuration: fast
|
@@ -78,7 +78,7 @@ images.
|
|
78
78
|
== Responsive Text
|
79
79
|
|
80
80
|
One common flaw seen in many templates and frameworks (sadly to say: the same
|
81
|
-
to Bootstrap) is a lack of support for truly
|
81
|
+
to Bootstrap) is a lack of support for truly responsive text. While elements
|
82
82
|
on a page resize fluidly, text still resizes on a fixed basis. To avoiding this
|
83
83
|
issue, especially for heavily text focussed pages, J1 Template supports styles
|
84
84
|
that fluidly scales text size and line-height to optimize readability for the
|
@@ -90,15 +90,15 @@ will happen in terms of responsiveness.
|
|
90
90
|
|
91
91
|
++++
|
92
92
|
<div>
|
93
|
-
<button type="button" name="toggle-r-text" class="btn btn-
|
93
|
+
<button type="button" name="toggle-r-text" class="btn btn-primary btn-raised btn-flex mt-3 mb-3">
|
94
94
|
<i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-bg-primary-50 mr-1"></i>
|
95
95
|
Toggle rtext
|
96
96
|
</button>
|
97
|
-
<div class="
|
97
|
+
<div class="mb-4">
|
98
98
|
<div class="content">
|
99
|
-
<h4 class="notoc
|
100
|
-
<h6 class="notoc
|
101
|
-
<p class="
|
99
|
+
<h4 class="notoc">The Extremes of Good and Evil</h4>
|
100
|
+
<h6 class="notoc text-gray mb-3">Cicero, Paragraph 1.10.32 · Translation by H. Rackham, Issue 1914 - De Finibus</h6>
|
101
|
+
<p class="toggle-description no-r-text">
|
102
102
|
But I must explain to you how all this mistaken idea of denouncing
|
103
103
|
pleasure and praising pain was born and I will give you a complete
|
104
104
|
account of the system, and expound the actual teachings of the great
|
@@ -140,21 +140,21 @@ you can offer different text sizes of your Web for vistors having a visual
|
|
140
140
|
handicap or reading disabilities.
|
141
141
|
|
142
142
|
To see `r-text` scaling in action, click on the button above to resize
|
143
|
-
the text from `r-text` level
|
143
|
+
the text from `r-text` level 300 to 500 back and forth. And again: resize
|
144
144
|
your Browser and watch the size of this text body change to see responsiveness
|
145
145
|
of the text in action.
|
146
146
|
|
147
147
|
++++
|
148
148
|
<div>
|
149
|
-
<button type="button" name="scale-r-text" class="btn btn-
|
149
|
+
<button type="button" name="scale-r-text" class="btn btn-primary btn-raised btn-flex mt-3 mb-3">
|
150
150
|
<i class="scale-button mdi mdi-arrow-up mdi-lg mdi-md-bg-primary-50 mr-1"></i>
|
151
151
|
Scale rtext
|
152
152
|
</button>
|
153
|
-
<div class="
|
153
|
+
<div class="mb-4">
|
154
154
|
<div class="content">
|
155
|
-
<h4 class="notoc
|
156
|
-
<h6 class="notoc
|
157
|
-
<p class="
|
155
|
+
<h4 class="notoc">The Extremes of Good and Evil</h4>
|
156
|
+
<h6 class="notoc text-gray mb-3">Cicero, Paragraph 1.10.33 · Translation by H. Rackham, Issue 1914 - De Finibus</h6>
|
157
|
+
<p class="scale-description r-text-300">
|
158
158
|
On the other hand, we denounce with righteous indignation and dislike men who
|
159
159
|
are so beguiled and demoralized by the charms of pleasure of the moment, so
|
160
160
|
blinded by desire, that they cannot foresee the pain and trouble that are
|
@@ -198,7 +198,7 @@ base.
|
|
198
198
|
That way, five series are available by the five scale factors. See the following
|
199
199
|
table how `r-text` scales.
|
200
200
|
|
201
|
-
[cols="3,2,7a", options="header", role="table-responsive-stacked-lg
|
201
|
+
[cols="3,2,7a", options="header", role="table-responsive-stacked-lg"]
|
202
202
|
|===============================================================================
|
203
203
|
|Property | Factor |Example text
|
204
204
|
|
@@ -252,11 +252,11 @@ explorer of the truth, the master-builder of human happiness.
|
|
252
252
|
//////////
|
253
253
|
=== Mixing font sizes
|
254
254
|
|
255
|
-
See the example below. Two cards are tied together by a title of
|
256
|
-
The
|
257
|
-
is on each and every card of such a group, it makes sense to give the
|
258
|
-
level headline a smaller font size than the
|
259
|
-
|
255
|
+
See the example below. Two cards are tied together by a title of Your Topic.
|
256
|
+
The taglines are different and focus on different things. Because the title
|
257
|
+
is on each and every card of such a group, it makes sense to give the upper
|
258
|
+
level headline a smaller font size than the tagline that decribes different
|
259
|
+
features.
|
260
260
|
|
261
261
|
To not loose the focus on reading the text, font icons are used to support what
|
262
262
|
a card decribes to get the readers orientated better. The left one has a
|
@@ -267,7 +267,7 @@ video and audio.
|
|
267
267
|
<div id="roundtrip_example_panel" class="mt-2 mb-3"></div>
|
268
268
|
++++
|
269
269
|
|
270
|
-
The
|
270
|
+
The body text is the smallest in size. On one hand to save space on other
|
271
271
|
hand the readers know in general what they can can expect to read about. To
|
272
272
|
focus the body text, it's positioned in the middle and centered for optimal
|
273
273
|
placement. A final quote text followed by a button in card footer guides the
|
@@ -284,10 +284,10 @@ elements may help to reduce to space needed - more can be placed on page. On
|
|
284
284
|
other hand, navigation elements present by playful and interactive means.
|
285
285
|
|
286
286
|
The next two simple examples shows you what type of UI's may helpful to present
|
287
|
-
a bunch of information
|
288
|
-
|
287
|
+
a bunch of information on a small footprint: tabbed text by using Bootstrap's
|
288
|
+
Nav Pills.
|
289
289
|
|
290
|
-
The design for the Bootstrap
|
290
|
+
The design for the Bootstrap nav pills were change into MD Design. As all
|
291
291
|
elements available with J1 Template, the _Meterial Design_ color palette is
|
292
292
|
used. All Bootstrap base classes can be used to colorize:
|
293
293
|
|
@@ -298,7 +298,7 @@ used. All Bootstrap base classes can be used to colorize:
|
|
298
298
|
|`nav-pills-primary`
|
299
299
|
|
|
300
300
|
++++
|
301
|
-
<button type="button" class="btn btn-
|
301
|
+
<button type="button" class="btn btn-secondary btn-raised btn-round">
|
302
302
|
color example
|
303
303
|
</button>
|
304
304
|
++++
|
@@ -314,7 +314,7 @@ used. All Bootstrap base classes can be used to colorize:
|
|
314
314
|
|`nav-pills-info`
|
315
315
|
|
|
316
316
|
++++
|
317
|
-
<button type="button" class="btn btn-
|
317
|
+
<button type="button" class="btn btn-primary btn-raised btn-round">
|
318
318
|
color example
|
319
319
|
</button>
|
320
320
|
++++
|