diff --git a/.coverage b/.coverage index 3852886..7eb1003 100644 Binary files a/.coverage and b/.coverage differ diff --git a/examples/getting-started/getting_started.md b/examples/getting-started/getting_started.md index e23fea8..f28f8cc 100644 --- a/examples/getting-started/getting_started.md +++ b/examples/getting-started/getting_started.md @@ -1,26 +1,14 @@ ----metadata -title = Getting Started to play with MaTiSSe.py -subtitle = a bad-showcase of MaTiSSe.py features -authors = ['Stefano Zaghi','John Doe'] -authors_short = ['S. Zaghi','J. Doe'] -emails = ['stefano.zaghi@gmail.com','jdoe@lost.com'] -affiliations = ['NERD Laboratory, The World Most Uncool Research Center','LOST Institute, Missed People Research Institute'] -affiliations_short = ['NERD Laboratory','LOST Institute'] -location = Via dell'Isola del Giorno Prima 139, Utopia, Universo -location_short = Utopia, Universo -date = 29th February, 2015 -conference = Nhill Symposium 2015 -conference_short = NS2015 -session = Third High Performance Sleeping, HPS3 -session_short = HPS3 -logo = images/logo.png -max_time = 60 -dirs_to_copy = ['images'] ----endmetadata - -$include(main_theme.md) - -#titlepage[plain] +$include(metadata.yaml) + +$include(theme.yaml) + +#### $titlepage +--- +overtheme: + - slide: + - content: + - padding: '0%' +--- $box $style[width:100%;height:35%;background:#4788B3;font-family:'Comic Sans MS', cursive, sans-serif;] @@ -52,9 +40,11 @@ $endbox # Introduction -## MaTiSSe.py, what is? +## Background -### The Acronym +### MaTiSSe.py, what is? + +#### The Acronym _MaTiSSe.py_ means **Ma**rkdown **T**o **I**mpressive **S**cientific **S**lid**e**s @@ -76,49 +66,42 @@ $note $content{The real cool feature is that for setting up your theme, as the one of the presentation you are reading, **you do not need to be a html-css guru!**} $endnote -### Prezi-effect ----slide ----theme_slide_global -background = white -border-radius = 50% -data-offset = 200 ----endtheme_slide_global - ----theme_slide_content -border-radius = 50% -padding = 15% 20% -font-size = 200% ----endtheme_slide_content - ----theme_slide_header_1 -active = False ----endtheme_slide_header_1 - ----theme_slide_footer_1 -active = False ----endtheme_slide_footer_1 - ----theme_slide_sidebar_1 -active = False ----endtheme_slide_sidebar_1 ----endslide +#### Prezi-effect +--- +overtheme: + - slide: + - transition: 'absolute' + - data-y: '1000' + - data-z: '100' + - data-rotate-x: '45' + - border-radius: '50%' + - data-offset: '200' + - background: 'white' + - content: + - border-radius: '50%' + - padding: '15% 20%' + - font-size: '180%' +--- The *elliptic* theme of this slide is made just -```lua ----theme_slide_global -border-radius = 50% ----endtheme_slide_global - ----theme_slide_content -border-radius = 50% ----endtheme_slide_content +```yaml +overtheme: + - slide: + - border-radius: '50%' + - data-offset: '200' + - content: + - border-radius: '50%' + - padding: '15% 20%' + - font-size: '180%' ``` This is not so complicated, rigth? ### Why? +#### Why? + There are tons of markdown to html presentation tools. **Why yet another presenter?** Because other tools are designed for _hackers_ for producing short, essentially **not structured** presentation. For high quality scientific presentations we need more, thus MaTiSSe.py born! @@ -148,6 +131,8 @@ If you like these features give a try to MaTiSSe.py, continue to read! ### For whom? +#### For whom? + Let me be clear: MaTiSSe.py is designed for **scientific researchers**, _at least the brave ones_, being used to write presentation with _LaTeX-beamer_ or other not *WYSIWYG* presentation makers. _LaTeX_ is great, but some drawbacks can be highlighted: 1. the compilation of an even small presentation can be _time consuming_; @@ -167,8 +152,12 @@ $content[padding:1% 5%;width:74%;box-shadow: 7px 7px 5px rgba(200,200,200,0.3);b $caption(None){copyrights of http://xkcd.com/} $endfigure +## Installation + ### Requirements +#### Requirements + $columns $column[width:50%;padding-rigth:1%;] @@ -188,6 +177,7 @@ MaTiSSe.py relies on other great python module for making its magic: + sys; + required modules that are not into the standard library: + [markdown](https://pythonhosted.org/Markdown/); + + [yaml](http://pyyaml.org/wiki/PyYAML); + [yattag](http://www.yattag.org/); $column[width:50%;padding-left:1%;] @@ -207,11 +197,11 @@ MaTiSSe.py relies on other programs that are shipped within MaTiSSe.py itself. T $endcolumns -# Getting started +### Installation -## Installation +#### Installation -### Manual Installation +##### Manual Installation MaTiSSe.py is a complex program built-up by many python modules. However, a one-file-script wrapper is provided. The tree structure of the MaTiSSe.py project is the following: @@ -233,33 +223,37 @@ git clone https://github.com/szaghi/MaTiSSe ``` and then make a link to the script where your environment can find it. -$note -$content{ -PIP installation is under developing. -} -$endnote +##### PyPi Installation + +MaTiSSe.py is indexed on PyPi. You can easily install it by `pip` package manager: + +```shell +[sudo] pip install matisse +``` After installation, you are ready to convert your markdown source into impressive html presentation... -## Usage +# Usage + +## Getting started -### How it works? +### Approach + +#### How it works? You write your presentation in markdown and MaTiSSe.py creates an impressive presentation even if you are a *boring scientific researcher*. MaTiSSe.py is a not-WYSISWYG command line, CLI, tool. Printing the main help message: ```bash MaTiSSe.py -h ``` will echo: ```bash -usage: MaTiSSe.py [-h] [-v] [-i INPUT] [-o OUTPUT] [-hs STYLE.CSS] +usage: MaTiSSe.py [-h] [-v] [-i INPUT] [-o OUTPUT] [-t THEME] [-hs STYLE.CSS] + [-s SAMPLE] [--toc-at-chap-beginning TOC-DEPTH] [--toc-at-sec-beginning TOC-DEPTH] [--toc-at-subsec-beginning TOC-DEPTH] [--print-preamble] [--print-css] [--print-options] [--print-highlight-styles] - [--verbose] [--indented] [--online-MathJax] + [--print-themes] [--verbose] [--online-MathJax] MaTiSSe.py, Markdown To Impressive Scientific Slides - -optional arguments: - -h, --help show this help message and exit ... ``` @@ -272,18 +266,17 @@ This command will generate a *new* directory into which the html presentation is chromium index.html ``` -### How it works? (continued) +#### How it works? continued To generate the presentation you are reading I have used the following command line arguments: ```bash -MaTiSSe.py -i getting_started.md --indented --toc-at-subsec-beginning 2 +MaTiSSe.py -i getting_started.md --toc-at-sec-beginning 3 ``` That means: + process the source file `getting_started.md`; -+ indent the html output, `--indented`; -+ insert a TOC at the beginning of each subsection with a depth of 2, `--toc-at-subsec-beginning 2`; ++ insert a TOC at the beginning of each section with a depth of 3, `--toc-at-sec-beginning 3`; MaTiSSe.py will create a directory, named *getting_started*, into which the compiled html presentation is placed. @@ -302,30 +295,36 @@ In both the steps MaTiSSe.py is strongly friendly. Firstly we see the MaTiSSe.py *flavored* markdown syntax. -## MaTiSSe.py flavored markdown syntax +# MaTiSSe.py flavored markdown syntax + +## Presentation structuring + +### Chapters, sections, subsections and slides + +#### Presentation structuring +MaTiSSe.py supports the structuring of long presentation. As a matter of fact, for long scientific presentation, it is often useful to structure the talk into chapters, sections and/or subsections. Therefore, after the preamble, where typically the user defines theme and metadata, the presentation structuring starts: -### Presentation structuring -MaTiSSe.py supports the structuring of long presentation. As a matter of fact, for long scientific presentation, it is often useful to structure the talk into sections and/or subsections. Therefore, after the preamble, where typically the user defines theme and metadata, the presentation structuring starts: ```md -# First section -## First subsection of first section -### First slide of first subsection of first section +# First chapter +## First section +### First subsection of first section +#### First slide of first subsection of first section of first chapter ``` -As you can see defining a section/subsection/slide is very simple: just use the h1/h2/h3 headings of markdown, respectively. The titles of these structures are available as metadata (e.g. `sectiontitle`, `sectionnumber`, `slidetitle`, etc...) and can be used inside other elements. +As you can see defining a chapter/section/subsection/slide is very simple: just use the h1/h2/h3/h4 headings of markdown, respectively. The titles of these structures are available as metadata (e.g. `chaptertitle`, `sectiontitle`, `sectionnumber`, `slidetitle`, etc...) and can be used inside other elements. -Note that if you define at least one section all other subsections/slides before this section are omitted: +Note that if you define at least one chapter all other sections/subsections/slides before this section are omitted: ```md -## Bad placed subsection -### Bad placed slide -# First section -## First subsection of first section -### First slide of first subsection of first section +### Bad placed subsection +#### Bad placed slide + +# First chapter +#### First slide of first chapter ``` -The same is valid if at least one subsection is defined. If `--verbose` is used this kind of *issues* are highlighted into the standard output warnings, but the compilation is still completed. +The same is valid if at least one section or subsection is defined. If `--verbose` is used this kind of *issues* are highlighted into the standard output warnings, but the compilation is still completed. At this point, it is useful to define the MaTiSSe.py *universe*... -### Presentation structuring (continued) +#### Presentation structuring, continued The **universe** of MaTiSSe.py is composed by an _infinite canvas_ over which the presentation slides are rendered: @@ -359,22 +358,24 @@ The headers, footers and sidebars are designed to be *theme-containers* rather t } $endnote -### Slide: how write it? -Once you have structured your talk into section/subsections it is time to write the slide contents! As aforementioned a slide starts with: +### Slides + +#### Slide: how write it? +Once you have structured your talk into chapters/sections/subsections it is time to write the slide contents! As aforementioned a slide starts with: ```md -### Slide title +#### Slide title ... ``` -The `Slide title` is stored by MaTiSSe.py into the *metadata*, see the following, and can be handled as a local-to-the-slide variable. What follows the slide title is actually the slide contents: these data is place into the slide *content* element. +The `Slide title` is stored by MaTiSSe.py into its *metadata*, see the following, and can be handled as a local-to-the-slide variable. What follows the slide title is actually the slide contents: these data is place into the slide *content* element. $note $content{ Into the slide content you can place any valid markdown source. -Note that the markdown used by MaTiSSe.py is an extended version of the [http://daringfireball.net/projects/markdown/](http://daringfireball.net/projects/markdown/), that is very similar to the one used by github, the so called [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/). +Note that the markdown used by MaTiSSe.py is an extended version of the [http://daringfireball.net/projects/markdown/](http://daringfireball.net/projects/markdown/), that is very similar to the one used by GitHub, the so called [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/). -Indeed, the syntax supported by MaTiSSe.py is even more extended with respect the github flavored syntax: MaTiSSe.py supports latex equations and some specaial environments. +Indeed, the syntax supported by MaTiSSe.py is even more extended with respect the GitHub flavored syntax: MaTiSSe.py supports latex equations and some special environments. The markdown source is parsed by means of **markdown** python module: for more informations on the supported syntax see [https://pythonhosted.org/Markdown/](https://pythonhosted.org/Markdown/). } @@ -382,84 +383,140 @@ $endnote The first extension to the standard markdown syntax is the **metadata** objects... +## Metadata + ### Presentation metadata -For long scientific presentation it is often useful to define some (meta)data in order to reuse them inside the presentation itself. Such data are defined into MaTiSSe.py as *metadata*. You can define the presentation metadata anywhere into your markdown source, however it has sense to place it at the beginning, inside the presentation _preamble_, that is just a convention rather than a physical part of the markdown document. The available metadata are: - -```lua -title = -subtitle = -authors = [] -authors_short = [] -emails = [] -affiliations = [] -affiliations_short = [] -logo = -location = -location_short = -date = -conference = -conference_short = -session = -session_short = -max_time = 25 -dirs_to_copy = [] +#### Presentation metadata + +For long scientific presentation it is often useful to define some (meta)data in order to reuse them inside the presentation itself. Such data are defined into MaTiSSe.py as *metadata*. You can define the presentation metadata anywhere into your markdown source, however it has sense to place it at the beginning, inside the presentation _preamble_, that is just a convention rather than a physical part of the markdown document. The presentation metadata that the user is allowed to define are: + ++ `title`: title presentation; ++ `subtitle`: subtitle presentation; ++ `authors`: list of authors name; ++ `authors_short`: list of authors name in short format; ++ `emails`: list of authors emails address; ++ `affiliations`: list of authors affiliations; ++ `affiliations_short`: list of authors affiliations in short format; ++ `logo`: a relative (to final presentation directory) path for the presentation logo image; ++ `location`: location address; ++ `location_short`: location short address; ++ `date`: date of the presentation; ++ `conference`: conference name; ++ `conference_short`: conference short name; ++ `session`: conference session name; ++ `session_short`: conference session short name; ++ `max_time`: time the presentation is expected to take; ++ `toc_depth`: depth of the default rendering of TOCs; ++ `dirs_to_copy`: paths to copy into the final presentation path, i.e. your assets; + +$note +$content{ +The metadata must be formatted as a valid [YAML](http://yaml.org/) source. + +This is a common choice: it is very common to place yaml block as front-matter of markdown sources. +} +$endnote + +#### Presentation metadata, continued + +To define the presentation metadata you must use a specific yaml environment, i.e.: +```yaml +metadata: + - metadata-1: 'value-1' + - metadata-2: 'value-2' + - metadata-3: + - value-1 + - value-2 + ... + - value-n + ... + - metadata-n: 'value-n' ``` +there are **scalar** valued metadata like `metadata-1` and **list** valued metadata like `metadata-3` + $note $content{ -All metadata values are treated as string except the one with `[]` brackets that are list of strings. To split long metadata definitions use the symbol `&&` as line continuation. +The metadata yaml block **must** start with the `metadata:` entry! } $endnote -### Presentation metadata (continued) +#### Presentation metadata, continued -To define the presentation metadata you must use a specific environment, i.e. `---metadata`-`---endmetadata`: -```lua ----metadata -metadata_name1 = metadata_value1 -metadata_name2 = metadata_value2 -... ----endmetadata -``` -The metadata of this presentation is the following: -```lua ----metadata -title = Getting Started to play with MaTiSSe.py -subtitle = a bad-showcase of MaTiSSe.py features -authors = ['Stefano Zaghi','John Doe'] -authors_short = ['S. Zaghi','J. Doe'] -emails = ['stefano.zaghi@gmail.com','jdoe@lost.com'] -affiliations = ['NERD Laboratory, The World Most Uncool Research Center',&& - 'LOST Institute, Missed People Research Institute'] -affiliations_short = ['NERD Laboratory','LOST Institute'] -location = "Via dell'Isola del Giorno Prima 139, Utopia, Universo" -location_short = Utopia, Universo -date = 29th February, 2015 -conference = Nhill Symposium 2015 -conference_short = NS2015 -session = Third High Performance Sleeping, HPS3 -session_short = HPS3 -logo = images/logo.png -max_time = 10 -dirs_to_copy = ['images'] ----endmetadata -``` - -### Presentation metadata (continued) -Besides the presentation metada above described, that are the ones whose value must be set by the user, there are many other metadata whose values are automatically computed by MaTiSSe.py. The following is a not complete list of such metadata: - -+ *sectiontitle*; -+ *sectionnumber*; -+ *subsectiontitle*; -+ *subsectionnumber*; -+ *slidetitle*; -+ *slidenumber*; -+ *total_slides_number*; -+ *toc*. +A complete example of metadata definition into your markdown sources is the following + +$columns + +$column[width:50%] + +```yaml +metadata: + - title: 'your title' + - subtitle: 'your name' + - authors: + - first long author name + - second long author name + ... + - last long author name + - authors_short: + - first short author name + - second short author name + ... + - last short author name + - emails: + - first author email + - second author email + ... + - last author email +``` + +$column[width:50%] + +```yaml +metadata: + - affiliations: + - first author long affiliations + - second author long affiliations + ... + - last author long affiliations + - affiliations_short: + - first author short affiliations + - second author short affiliations + ... + - last author short affiliations + - logo: 'relative_path_to_your_logo_image' + - location: 'your location' + - location_short: 'your short location' + - date: 'the date' + - conference: 'conference name' + - conference_short: 'conference short name' + - session: 'session name' + - session_short: 'session short name' + - max_time: #minutes_the_talk_should_take + - toc_depth: #depth_of_the_default_rendering_of_TOC + - dirs_to_copy: + - path_to_first_directory_to_copy + ... + - path_to_last_directory_to_copy +``` + +$endcolumns + +#### Presentation metadata, continued +Besides the presentation metadata above described, that are the ones whose value must be set by the user, there are many other metadata whose values are automatically computed by MaTiSSe.py. The following is a not complete list of such metadata: + ++ `sectiontitle`; ++ `sectionnumber`; ++ `subsectiontitle`; ++ `subsectionnumber`; ++ `slidetitle`; ++ `slidenumber`; ++ `total_slides_number`; ++ `toc`. $note $content{ -The slide you are reading is composed using such metadata: the header contains the *slidetitle*, the right sidebar contains the *toc*, while the footer contains the current *slidenumber* and *total_slides_number* among other things. +The slide you are reading is composed using such metadata: the header contains the `slidetitle`, the right sidebar contains the `toc`, while the footer contains the current `slidenumber` and `total_slides_number` among other things. Such metadata can be directly used also inside the main content slide and not only into the other slide containers. Just use the `$metadata[style]` notation, where the `[style]` is the css style for rendering the metadata value and it is optional. } $endnote @@ -469,8 +526,12 @@ $authors[color:#4788B3;] ``` into the slide content will be replaced by $authors[color:#4788B3;] -### Code listings -The code listings is accomplished very similarly to the github flavored markdown approach. +## Markdown with steroids + +### Markdown + +#### Code listings +The code listings is accomplished very similarly to the GitHub flavored markdown approach. Just use fenced code blocks or in-line codes. @@ -503,6 +564,8 @@ Presently the code blocks defined by simple indentation, as the original markdow $endnote ### LaTeX equations + +#### LaTeX equations For scientific contents equations environments are mandatory. The *de facto* standard of equations typesetting is LaTeX. @@ -512,7 +575,7 @@ The *de facto* standard of equations typesetting is LaTeX. Just type your equations as you do into your LaTeX source: ```md -### Equations, equations, equations... LaTeX is supported! +#### Equations, equations, equations... LaTeX is supported! Just type your equations as you do into your LaTeX sources: @@ -525,14 +588,28 @@ $$ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} $$ +Equations are supported also inside special environments like notes... + +$note +$caption(none){LaTeX inside a note!} +$content{ +$$ +x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} +$$ +} +$endnote + ### Special Environments + +#### Special Environments As aforementioned, MaTiSSe.py supports some special environments as helpers for some special contents handling. Presently the special environments supported are: + `Columns` environment; -+ `Box` environment, that has 3 sub-class environments for more specialized contents: - * `Figure` environment; - * `Table` environment; ++ `Box` environment, that has 4 sub-class environments for more specialized contents: * `Note` environment; + * `Table` environment; + * `Figure` environment; + * `Video` environment; $note $content{ @@ -548,7 +625,7 @@ $endnote Let us dive into these environments... -### The Columns environment +#### The Columns environment It is often useful to subdivide the contents into columns, e.g. to place comments aside figures. MaTiSSe.py provides an environment for such a contents layout. The syntax is very simple: @@ -560,20 +637,21 @@ $column[column2_options] column2_contents $endcolumns ``` -#### Example + +As an example see the following: $columns $column[width:60%;padding-right:1%;border-right:1px solid #4788B3;] This two columns environment has been made by means of the following code: ``` -$columns -$column[width:60%;padding-right:1%;border-right:1px solid #4788B3;] +Scolumns +Scolumn[width:60%;padding-right:1%;border-right:1px solid #4788B3;] This two columns... -$column[width:40%;padding-left:1%;] +Scolumn[width:40%;padding-left:1%;] ... -$endcolumns +Sendcolumns ``` $column[width:40%;padding-left:1%;] $note @@ -583,9 +661,13 @@ The column *options* can contain any css style options, however the options *dis $endnote $endcolumns +$note +$content{ In case the column style options are completely omitted MaTiSSe.py defines the width of each column as `100/columns_numer%` by default for having an uniform spaced columns environment. +} +$endnote -### Box environment +#### Box environment The generic *box* is designed to contains any contents you want to be rendered with a different theme with respect other paragraph. The syntax is the following: ```md @@ -597,17 +679,17 @@ $endbox ``` where: -+ $box and $endbox are the tags defining the box environment; ++ $`box` and $`endbox` are the tags defining the box environment; + `$style[style_options]` defines the style of the whole box; this is optional and can be omitted; the `style_options` are any valid css style definitions; + `$caption(caption_type)[caption_options]{caption}` defines the caption of the box that can be styled differently from the main box content and it is optional; the `(caption_type)` defines caption prefixing *class*, e.g. *Fig.* for figures, and it is itself optional: any sentences are valid; to disable the printing of the prefixing class use `$caption(none)...`; the `[caption_options]` defines the style options of the only caption: they are any valid css definitions; the `{caption}` defines the caption text and it must be present if `$caption` is defined; + `$content(content_type)[content_options]{content}` is not optional: it defines the box's content; the `(content_type)` defines defines the type of the content, 'figure', 'table', 'note' and 'box' for generic environments, and it is itself optional; the `[content_options]` defines the style options of the only content: they are any valid css definitions; the `{content}` defines the content data; -### Box environment (continued) +#### Box environment, continued Consider the following code: ```md -### Box environment example +#### Box environment example $box $style[background:rgb(100,100,100);] @@ -632,7 +714,7 @@ Note that the caption of the example as *Mybox 4*: the numeration is automatic, } $endnote -### Note environment +#### Note environment The *note* environment is a subclass of box one that is specialized for rendering notes. The syntax is the following: ```md $note @@ -643,7 +725,7 @@ $endnote ``` where the elements are the same of box environment, but: -+ the `content_type` and `caption_type` are automatically set to `note` and `Note` respectively; anyhow they can be still specified inside the $note/$endnote environment; ++ the `content_type` and `caption_type` are automatically set to `note` and `Note` respectively; anyhow they can be still specified inside the $`note`/$`endnote` environment; + no matter the order of `$caption`/`$content` statements, the caption is always placed above the content. You have seen this env on many preceding slides. Consider the following code: @@ -661,7 +743,7 @@ As all other box subclass, the themes of note environments can be defined once f } $endnote -### Figure environment +#### Figure environment The *figure* environment is a subclass of box one that is specialized for rendering figures. The syntax is the following: ```md $figure @@ -672,7 +754,7 @@ $endfigure ``` where the elements are the same of box environment, but: -+ the `content_type` and `caption_type` are automatically set to `figure` and `Figure` respectively; anyhow they can be still specified inside the $figure/$endfigure environment; ++ the `content_type` and `caption_type` are automatically set to `figure` and `Figure` respectively; anyhow they can be still specified inside the $`figure`/$`endfigure` environment; + the `content` must be the (relative to the root) path of an external figure file; + no matter the order of `$caption`/`$content` statements, the caption is always placed below the content. @@ -685,7 +767,7 @@ $endfigure ``` becomes => ... -### Figure environment (continued) +#### Figure environment, continued $figure $content[padding:1% 5%;width:90%;box-shadow: 7px 7px 5px rgba(200,200,200,0.3);border-radius:25px]{images/matisse-universe-no_bg.png} $caption(none){MaTiSSe.py **Universe**} @@ -693,18 +775,68 @@ $endfigure Note that, as all other box subclass, the themes of figure environments can be defined once for all into the preamble in order to not have to repeat the styling options for each figure. -### Titlepage -Titlepage is indeed a special slide rather than a special environment. It is designed to be a special slide where is extremely easy to have a plain slide theme in order to build a special slide. Indeed all slide are easily customizable, as you seen in the following, but a titlepage starts from a plain theme rather than the default one. To define a titlepage the syntax is: +#### Video environment +The *Video* environment is a subclass of box one that is specialized for rendering videos. The syntax is the following: +```md +$video +$style[style_options] +$caption[caption_options]{caption} +$content[content_options]{content} +$endvideo +``` +where the elements are the same of box environment, but: + ++ the `content_type` and `caption_type` are automatically set to `video` and `Video` respectively; anyhow they can be still specified inside the $`video`/$`endvideo` environment; ++ the `content` must be the (relative to the root) path of an external video file; ++ no matter the order of `$caption`/`$content` statements, the caption is always placed below the content. + +Consider the following code: +```md +$video +$content[width:95%;]{video/big_buck_bunny.mp4} +$caption(none){Big Buck Bunny, https://peach.blender.org/about/} +$endvideo +``` +becomes => ... + +#### Video environment, continued +$video +$content[width:95%;]{video/big_buck_bunny.mp4} +$caption(none){Big Buck Bunny, https://peach.blender.org/about/} +$endvideo + +Note that, as all other box subclass, the themes of video environments can be defined once for all into the preamble in order to not have to repeat the styling options for each video. + +$note +$content{ +For adding the video controls, e.g. play, pause, stop... you must pass the *controls* css option to either the main video style or to the style of the specific video environment. If controls css option is not specified, it has sense to specify the *autoplay* option. For an example, see the video theme of this presentation. + +} +$endnote + +#### Titlepage +Titlepage is indeed a special slide rather than a special environment. It is designed to be a special slide that is not inserted into the TOC. To define a titlepage the syntax is: ```md -#titlepage[plain] +#### $titlepage ``` -where `[plain]` is optional and if defined set the titlepage slide theme to the default plain, while if it is not defined the titlepage slide adopts the same theme as you have defined for other slides. The slide title of a titlepage is automatically set to a null string thus it has no sense to use the corresponding metadata. On the contrary all other metadata can be used within a titlepage. +To obtain a plain slide that is ready to be filled with a very custom contents (typically the titlepage does not contain headers, sidebars and footers) just use a plain *overtheme* +```md +#### $titlepage +--- +overtheme: + slide: +--- +``` The titlepage of this presentation has been made with a code similar to the following: ```md -#titlepage[plain] +#### $titlepage +--- +overtheme: + slide: +--- $box $style[width:100%;height:35%;background:#4788B3;font-family:'Comic Sans MS', cursive, sans-serif;] $content[color:white;text-align:center;]{ @@ -716,7 +848,7 @@ $endbox ... ``` -### Including external files +#### Including external files It is common to split long presentation into multiple files. These file can be included into the main source by ```md @@ -729,16 +861,16 @@ $include(metadata.dat) $include(theme.dat) -# First section +## First section -# First subsection +### First subsection -# First slide +#### First slide ``` $note $content{ -The `$include` statements are parsed one time at the beginning of the MaTiSSe.py execution, therefore no recursive inclusions are admitted. +The $`include` statements are parsed one time at the beginning of the MaTiSSe.py execution, therefore no recursive inclusions are admitted. } $endnote @@ -746,11 +878,13 @@ Now it is time to talk about theme customization... Do you are interested to learn how complex was to set the theme of this presentation? Continue to read! -# Customize the Themes +# Themes -## MaTiSSe.py Universe +## Customize the Themes -### MaTiSSe.py Universe (again) +### MaTiSSe.py Universe + +#### MaTiSSe.py Universe, again I known, you have just seen the universe of MaTiSSe.py, this is just a recall... The customizable theme elements are: * **presentation** with its own options, having: @@ -771,7 +905,9 @@ In the following subsections we will see how to customize each element. ## Presentation-level Theme -### Canvas container, available options and their setting +### Canvas + +#### Canvas container, available options and their setting Presently, the **canvas** container has only one default option: @@ -785,292 +921,206 @@ You can define other css options, however the background seems to be only with a To set the canvas options use the following syntax: -```lua ----theme_canvas -background = #background_value ----endtheme_canvas +```yaml +theme: + - canvas: + - background: 'red' ``` The canvas you are viewing is made by: -```lua ----theme_canvas -background = radial-gradient(rgb(240, 240, 240), rgb(110, 110, 110)) ----endtheme_canvas -``` - -$note -$content{Such a theme data can placed anywhere inside your markdown source, however it has sense to place it at the beginning, inside the presentation _preamble_, that is just a convention rather than a physical part of the markdown document.} -$endnote - -### Headings and Custom Selector Themes - -Besides the main presentation theme, you can set the default theme of headings (h1,h2,...,h6) and you can specify the theme of **custom selectors** for customizing special elements of the presentation that are not part of the main theme, e.g. the blocks of code. - -$note -$content{Both headings and custom selectors can be re-defined by the slide overriding theme, read the following.} -$endnote - -### Headings, available options - -The **headings** themes, that are 6, have the following default _user_ options: - -+ `width`; -+ `height`; -+ `background`, default `inherit`; -+ `border`, default `0`; -+ `border-radius`, default `0 0 0 0`; -+ `color`, default `black`; -+ `font`, default `inherit`; -+ `font-size`, default `[120%,140%,160%,180%,200%,220%]` for `[h6,h5,h4,h3,h2,h1]`; -+ `font-family`, default `Open Sans, Arial, sans-serif`; -+ `margin`, default `0`; -+ `padding`, default `0`; -+ `text-decoration`, default `inherit`; -+ `border-bottom`, default `inherit`. - -The options are all standard `CSS` ones. - -$note -$content{The headings `H1`, `H2` and `H3` are not available for standard use being MaTiSSe.py protected keywords; as a matter of facts, MaTiSSe.py uses these three headings for the definition of sections, subsections and slides respectively. To effectively use the first 3 headings you must use html syntax rather than markdown one.} -$endnote - -### Headings, setting options - -To customize the _global_ options of **heading** n. N the syntax is the following - -```lua ----theme_heading_N -option_name1 = option_value1 -option_name2 = option_value2 -... ----endtheme_heading_N +```yaml +theme: + - canvas: + - background = radial-gradient(rgb(240, 240, 240), rgb(110, 110, 110)) ``` -where `option_name` is one of the previously cited options, e.g. `height`, `background`, etc, while `option_value` is its value. The heading options **must** be enclosed into the tags `---theme_heading_N` and `---endtheme_heading_N` otherwise they will not considered. $note $content{Such a theme data can placed anywhere inside your markdown source, however it has sense to place it at the beginning, inside the presentation _preamble_, that is just a convention rather than a physical part of the markdown document.} $endnote -### Custom Selector, available options - -The **custom** selector has the following default _user_ options: - -+ `width `; -+ `height `; -+ `background `, default `white `; -+ `border `, default `0 `; -+ `border-radius `, default `0 0 0 0`; -+ `color `, default `black `; -+ `font `; -+ `font-size `, default `100%`; -+ `font-family `, default `Open Sans, Arial, sans-serif`; -+ `display `; -+ `margin `; -+ `padding `; -+ `text-decoration`; -+ `border-bottom `; -+ `box-shadow `; -+ `white-space `; -+ `overflow-x `, default `auto`; - -The options are all standard `CSS` ones. - -### Custom Selector, setting options - -To customize a _custom_ selector the syntax is the following - -```lua ----theme_selector_selname -option_name1 = option_value1 -option_name2 = option_value2 -... ----endtheme_selector_selname -``` -where `option_name` is one of the previously cited options, e.g. `height`, `background`, etc, while `option_value` is its value. The theme data **must** be enclosed into the tags `---theme_selector_selname` and `---endtheme_selector_selname` otherwise they will not considered. +### TOC -$note -$content{Such a theme data can placed anywhere inside your markdown source, however it has sense to place it at the beginning, inside the presentation _preamble_, that is just a convention rather than a physical part of the markdown document.} -$endnote - -The selector has a particular behavior for selecting nested selectors, continue read... - -### Custom Selector, setting options (continued) -```lua ----theme_selector_selname -option_name1 = option_value1 -option_name2 = option_value2 -... ----endtheme_selector_selname -``` -$note -$content{The **selname** indicate the **class** of css element to which the theme will be applied; you can also define nested class} -$endnote -Let us suppose we want customized the theme of blocks of code that are generally defined as a `code` tag inside a `pre` tag; our custom selector should look like: -```lua ----theme_selector_pre-code -display = block -white-space = pre -font-family = monospace, monospace ----endtheme_selector_pre-code -``` -the selector name, `pre-code` will be converted into the nested css tags selector `pre code {...}` doing the magic for you: the symbol `-` is used to select nested selectors like `pre code` one. - -Simple and elegant! - -### TOC Theme +#### TOC Theme Table of Contents, TOC, is a particular metadata and its handling is very different from any other metatada. Consequently TOC has its own special theme that can be customized by the following syntax: -```lua - ---theme_toc -option_name1 = option_value1 -option_name2 = option_value2 -... ----endtheme_toc -``` - -As common for MaTiSSe.py the `option_name = option_value` pairs are valid css style options. Into the TOC it is possible to emphasize the current section/subsection/slide as it has been done for this presentation. The syntax to define an emphasized current position into the TOC is: - -```lua ----theme_section_emph_toc -option_name1 = option_value1 -... ----endtheme_section_emph_toc - ----theme_subsection_emph_toc -option_name1 = option_value1 -... ----endtheme_subsection_emph_toc - ----theme_slide_emph_toc -option_name1 = option_value1 -... ----endtheme_slide_emph_toc -``` -### Box-like environments themes +```yaml +theme: + - toc: + - css-1: 'value' + - css-2: 'value' + ... + - chapter-emph: + - css-1: 'value' + - css-2: 'value' + ... + - section-emph: + - css-1: 'value' + - css-2: 'value' + ... + - subsection-emph: + - css-1: 'value' + - css-2: 'value' + ... + - slide-emph: + - css-1: 'value' + - css-2: 'value' + ... +``` + +As common for MaTiSSe.py the `css-n: 'value'` pairs are valid css style options. Into the TOC it is possible to emphasize the current chapter/section/subsection/slide as it has been done for this presentation. The syntax to define an emphasized current position into the TOC is: + +#### TOC Theme, continued +For example the theme of the TOC of the this presentation is: +```yaml +theme: + - toc: + - font-variant: 'small-caps' + - chapter-emph: + - border: '1px solid #4788B3' + - border-radius: '5px' + - section-emph: + - border: '1px solid #4788B3' + - border-radius: '5px' + - subsection-emph: + - border: '1px solid #4788B3' + - border-radius: '5px' + - slide-emph: + - border: '1px solid #4788B3' + - border-radius: '3px' +``` +The rendering of this theme can be seen on the right sidebar of this slide or in the following TOC: + +##### Table of Contents + +$toc[depth:1] + +### Special environments themes + +#### Box-like environments themes To customize a *box-like* environments the syntax is the following -```lua ----theme_box -style = style_options -caption = caption_options -content = content_options ----endtheme_box +```yaml +theme: + - box: + - css-1: 'value' + - css-2: 'value' + ... + - caption: + - css-1: 'value' + - css-2: 'value' + ... + - content: + - css-1: 'value' + - css-2: 'value' + ... ``` -where `style/caption/content_options` are valid css style. $note -$content{Such a theme data can placed anywhere inside your markdown source, however it has sense to place it at the beginning, inside the presentation _preamble_, that is just a convention rather than a physical part of the markdown document.} -$endnote +$content{Such a theme data can placed anywhere inside your markdown source, however it has sense to place it at the beginning, inside the presentation _preamble_, that is just a convention rather than a physical part of the markdown document. -For example the above note uses the following theme: +Note that the first css definition are used for the main *style* box options whereas *caption* and *content* have their own css definition. +} +$endnote -```lua ----theme_note -style = display:inline-block;font-variant:small-caps;box-shadow: 7px 7px 5px rgba(200,200,200,0.3);border-radius:20px -caption = padding:0 2%;color:#4788B3;border-bottom:1px solid #4788B3;display:inline-block; -content = padding:0 2%;font-size:120%; ----endtheme_note +#### Box-like environments themes, continued +For example the notes of the this presentation use the following theme: + +```yaml +theme: + - note: + - display: 'inline-block' + - font-variant: 'small-caps' + - box-shadow: '7px 7px 5px rgba(200,200,200,0.3)' + - border-radius: '20px' + - caption: + - padding: '0 2%' + - color: '#4788B3' + - border-bottom: '1px solid #4788B3' + - display: 'inline-block' + - content: + - padding: '0 2%' + - font-size: '120%' ``` ### Presentation-level Theme, an example -This presentation uses: +#### Presentation-level Theme, an example -```lua ----theme_canvas -background = radial-gradient(rgb(240, 240, 240), rgb(110, 110, 110)) ----endtheme_canvas - ----theme_toc -font-variant = small-caps ----endtheme_toc - ----theme_section_emph_toc -border = 1px solid #4788B3 -border-radius = 5px ----endtheme_section_emph_toc - ----theme_subsection_emph_toc -border = 1px solid #4788B3 -border-radius = 5px ----endtheme_subsection_emph_toc ----theme_figure -style = font-variant:small-caps;text-align:center; -caption = font-size:80%;color:#4788B3; ----endtheme_figure +This presentation uses: ----theme_note -style = display:inline-block;font-variant:small-caps;box-shadow: 7px 7px 5px rgba(200,200,200,0.3);border-radius:20px -caption = padding:0 2%;color:#4788B3;border-bottom:1px solid #4788B3;display:inline-block; -content = padding:0 2%;font-size:120%; ----endtheme_note +```yaml +theme: + - canvas: + - background: 'radial-gradient(rgb(240, 240, 240), rgb(110, 110, 110))' + - toc: + - font-variant: 'small-caps' + - chapter-emph: + - border: '1px solid #4788B3' + - border-radius: '5px' + - section-emph: + - border: '1px solid #4788B3' + - border-radius: '5px' + - subsection-emph: + - border: '1px solid #4788B3' + - border-radius: '5px' + - slide-emph: + - border: '1px solid #4788B3' + - border-radius: '3px' + - note: + - display: 'inline-block' + - font-variant: 'small-caps' + - box-shadow: '7px 7px 5px rgba(200,200,200,0.3)' + - border-radius: '20px' + - caption: + - padding: '0 2%' + - color: '#4788B3' + - border-bottom: '1px solid #4788B3' + - display: 'inline-block' + - content: + - padding: '0 2%' + - font-size: '120%' ``` ## Slide-level Theme -### Slide container, available options - -The **slide** container has the following default _user_ options: - -+ `width `, default `900px`; -+ `height `, default `700px`; -+ `background `, default `white`; -+ `border `, default `0`; -+ `border-radius `, default `0 0 0 0`; -+ `color `, default `black`; -+ `font `; -+ `font-size `, default `100%`; -+ `font-family `, default `Open Sans, Arial, sans-serif`; -+ `slide-transition`, default `horizontal`; -+ `data-scale `, default `1`; -+ `data-rotate `, default `0`; -+ `data-rotate-x `, default `0`; -+ `data-rotate-y `, default `0`; -+ `data-rotate-z `, default `0`; -+ `data-x `, default `0`; -+ `data-y `, default `0`; -+ `data-z `, default `0`. -+ `data-offset `, default `1`. - -The most part of options are standard `CSS` options. However some exceptions are present. Before read about them, we discuss how set the slide options. +### Slide-level Global Theme -$note -$content{ -For all the slide containers the user can set any valid css style options, not only the default ones. -} -$endnote +#### Slide container, available options + +The **slide** theme container has the following default _css_ options: -### Slide container, setting options ++ `display`, default `block`; ++ `width`, default `900px`; ++ `height`, default `700px`; To customize the _global_ options of **slide** container the syntax is the following -```lua ----theme_slide_global -option_name1 = option_value1 -option_name2 = option_value2 -... ----endtheme_slide_global +```yaml +theme: + - slide: + - css-1: 'value' + - css-2: 'value' + ... ``` -where `option_name` is one of the previously cited options, e.g. `height`, `background`, etc, while `option_value` is its value. The slide options **must** be enclosed into the tags `---theme_slide_global` and `---endtheme_slide_global` otherwise they will not considered. Such a theme data can placed anywhere inside your markdown source, however it has sense to place it at the beginning inside the presentantion _preamble_, that is just a convention rather than a physical part of the markdown document. +Such a theme data can placed anywhere inside your markdown source, however it has sense to place it at the beginning inside the presentantion _preamble_, that is just a convention rather than a physical part of the markdown document. The slide options of the slide you are reading is made by -```lua ----theme_slide_global -width = 900px -height = 700px -border-radius = 10px -background = green -color = rgb(102,102,102) -font-size = 100% -slide-transition = horizontal ----endtheme_slide_global +```yaml +theme: + - slide: + - width: 900px + - height: 700px + - border-radius: 10px + - background: green + - color: rgb(102,102,102) + - font-size: 100% + - transition: horizontal ``` +Note that `transition` is not a standard css option, it a special one of MaTiSSe.py. Let us now discuss about some of the special options. -Let us now discuss about some of the special options. - -### Slide container, SLIDE-TRANSITION option +#### Slide container, TRANSITION option -The **slide-transition** option set the transition effect between subsequent slides. Presently, the available values for this options are: +The **transition** option set the transition effect between subsequent slides. Presently, the available values for this options are: + `horizontal`: the slides are placed into a horizontal raw from left-to-right direction; this the default setting; + `-horizontal`: the slides are placed into a horizontal raw from right-to-left direction; @@ -1084,475 +1134,515 @@ The **slide-transition** option set the transition effect between subsequent sli The **absolute** transition mode has a practical use just for a _local-slide overriding theme_ that is the subject of a following subsection: if you set `slide-transition = absolute` in the preamble settings and you do **not** set the `data-x`, `data-y` and `data-z` values for each slide **all** slides will be placed in the same point... the canvas center! -### Slide container, DATA-SCALE option +#### Slide container, DATA-SCALE option The **data-scale** option set the scaling factor of the slides. By default it is set to `1`. This option has a practical use just for a _local-slide overriding theme_ that is the subject of a following subsection: changing its value in the preamble settings has no visual effect because all slides will be rendered with the same scaling factor. On the contrary, setting different scale for different slides using _local-slide overriding theme_ will produce a nice zooming effect... -### Slide container, DATA-ROTATE, DATA-ROTATE-X/Y/Z options +#### Slide container, DATA-ROTATE, DATA-ROTATE-X/Y/Z options To be written... -### Slide Header container, available options +### Slide Header Theme -The *header* element is designed to render data in a _single row_ above the main content rather than wrap the content into multi-lines. - -Header element has the following default _user_ options: +#### Slide Header container -+ `display `, default `block`; -+ `width `, default `100%`; -+ `height `, default `100%`, preferably expressed in percent _of the slide height_; -+ `padding `, default `0`; -+ `font-size `, default `100%`; -+ `font-family `, default `Open Sans, Arial, sans-serif`; -+ `overflow `, default `hidden`. -+ `metadata `, a list of objects to be inserted, e.g. slide-title, presentation-title, presentation-logo,etc...; -+ `active `, default `True`. +$columns -The most part of options are standard `CSS` options. The special thing is the `metadata` option... but let it to the following! +$column[width:50%;padding-right:1%;border-right:1px solid #4788B3;] -Note that the `width` is automatically set to `100%` and should not be customized from users. +The *header* element is designed to render data in a _single row_ above the main content rather than wrap the content into multi-lines. -### Slide Header container, setting options +Note that the `width` of headers is automatically set to `100%` and should not be customized from users. To customize the options of header n. _N_ the syntax is the following -```lua ----theme_slide_header_N -option_name1 = option_value1 -option_name2 = option_value2 -... ----endtheme_slide_header_N -``` -where `option_name` is one of the previously cited options, e.g. `height`, `display`, etc..., while `option_value` is its value. Each header is indicated by its own number: the numeration can be not strictly consecutive, e.g. you can start with header 2 instead of header 1. However, the insertion follows the number order, thus header 1, if present, is inserted **before** header 2. +```yaml +theme: + - slide: + - header-N: + - css-1: 'value' + - css-2: 'value' + ... + - metadata: + - metadata-1: + - css-1: 'value' + - css-2: 'value' + ... +``` + +Each header is indicated by its own number: the numeration can be not strictly consecutive, e.g. you can start with header 2 instead of header 1. However, the insertion follows the number order, thus header 1, if present, is inserted **before** header 2. -The header of the slide you are reading is made by -```lua ----theme_slide_header_1 -height = 6% -background = #4788B3 -color = white -border-radius = 10px 10px 0 0 -padding = 1% -metadata = [['slidetitle','font-variant:small-caps;font-size:180%;padding:2%'],&& - ['logo','float:right;height:90%;']] ----endtheme_slide_header_1 -``` -### Slide Footer container, available options +$column[width:50%;padding-left:1%;] -The *footer* element is designed to render data in a _single row_ below the main content rather than wrap the content into multi-lines. +The header of the slide you are reading is made by +```yaml +theme: + - slide: + - header-1: + - height: '6%' + - padding: '1% 2%' + - background: '#4788B3' + - color: 'white' + - border-radius: '10px 10px 0 0' + - metadata: + - slidetitle: + - padding: '0% 0%' + - font-size: '150%' + - float: 'left' + - font-variant: 'small-caps' + - logo: + - height: '100%' + - float: 'right' +``` +$endcolumns -Footer element has the following default _user_ options: +### Slide Footer Theme -+ `display `, default `block`; -+ `width `, default `100%`; -+ `height `, default `100%`, preferably expressed in percent _of the slide height_; -+ `padding `, default `0`; -+ `font-size `, default `100%`; -+ `font-family `, default `Open Sans, Arial, sans-serif`; -+ `overflow `, default `hidden`. -+ `metadata `, a list of objects to be inserted, e.g. slide-title, presentation-title, presentation-logo,etc...; -+ `active `, default `True`. +#### Slide Footer container -The most part of options are standard `CSS` options. The special thing is the `metadata` option... but let it to the following! +$columns -Note that the `width` is automatically set to `100%` and should not be customized from users. +$column[width:50%;padding-right:1%;border-right:1px solid #4788B3;] +The *footer* element is designed to render data in a _single row_ below the main content rather than wrap the content into multi-lines. -### Slide Footer container, setting options +Note that the `width` of footers is automatically set to `100%` and should not be customized from users. To customize the options of footer n. _N_ the syntax is the following -```lua ----theme_slide_footer_N -option_name1 = option_value1 -option_name2 = option_value2 -... ----endtheme_slide_footer_N -``` -where `option_name` is one of the previously cited options, e.g. `height`, `display`, etc..., while `option_value` is its value. Each footer is indicated by its own number: the numeration can be not strictly consecutive, e.g. you can start with footer 2 instead of footer 1. However, the insertion follows the number order, thus footer 1, if present, is inserted **before** footer 2. +```yaml +theme: + - slide: + - footer-N: + - css-1: 'value' + - css-2: 'value' + ... + - metadata: + - metadata-1: + - css-1: 'value' + - css-2: 'value' + ... +``` + +Each footer is indicated by its own number: the numeration can be not strictly consecutive, e.g. you can start with footer 2 instead of footer 1. However, the insertion follows the number order, thus footer 1, if present, is inserted **before** footer 2. +$column[width:50%;padding-left:1%;] The footer of the slide you are reading is made by -```lua ----theme_slide_footer_1 -height = 6% -padding = 1% 2% -background = #86B2CF -color = white -metadata = [['timer','controls;font-size:70%;font-variant:small-caps;float:right'],&& - ['total_slides_number','float:right;padding:0 1%;'], && - ['|custom| of ','float:right;'], && - ['slidenumber','float:right;padding:0 1%;'], && - ['|custom|slide ','float:right;']] ----endtheme_slide_footer_1 -``` - -### Slide Sidebar container, available options +```yaml +theme: + - slide: + - footer-1: + - height: '6%' + - padding: '1% 2%' + - background: '#86B2CF' + - color: 'white' + - metadata: + - timer: + - controls: '' + - font-size: '70%' + - font-variant: 'small-caps' + - float: 'right' + - total_slides_number: + - float: 'right' + - padding: '0 1%' + - custom-1: + - value: ' of ' + - float: 'right' + - slidenumber: + - float: 'right' + - padding: '0 1%' + - custom-2: + - value: 'slide ' + - float: 'right' +``` +$endcolumns -The *sidebar* element is designed to render data in a _single column_ aside, left or right, the main content. +### Slide Sidebar Theme -Sidebar element has the following default _user_ options: +#### Slide Sidebar container -+ `display `, default `block`; -+ `width `, default `100%`, preferably expressed in percent _of the slide height_; -+ `height `, default `100%`; -+ `padding `, default `0`; -+ `font-size `, default `100%`; -+ `font-family `, default `Open Sans, Arial, sans-serif`; -+ `overflow `, default `hidden`. -+ `metadata `, a list of objects to be inserted, e.g. slide-title, presentation-title, presentation-logo,etc...; -+ `active `, default `True`. - -The most part of options are standard `CSS` options. The special thing is the `metadata` option... but let it to the following! +$columns -Note that the `height` is automatically set to `100%` and should not be customized from users. +$column[width:50%;padding-right:1%;border-right:1px solid #4788B3;] +The *sidebar* element is designed to render data in a _single column_ aside, left or right, the main content. -### Slide Sidebar container, setting options +Note that the `height` of sidebars is automatically set to `100%` and should not be customized from users. To customize the options of sidebar n. _N_ the syntax is the following -```lua ----theme_slide_sidebar_N -option_name1 = option_value1 -option_name2 = option_value2 -... ----endtheme_slide_sidebar_N -``` -where `option_name` is one of the previously cited options, e.g. `width`, `display`, etc..., while `option_value` is its value. Each sidebar is indicated by its own number: the numeration can be not strictly consecutive, e.g. you can start with sidebar 2 instead of sidebar 1. However, the insertion follows the number order and the left to right order, thus left sidebars are inserted before right one and sidebar 1, if present, is inserted **before** sidebar 2. +```yaml +theme: + - slide: + - sidebar-N: + - css-1: 'value' + - css-2: 'value' + ... + - metadata: + - metadata-1: + - css-1: 'value' + - css-2: 'value' + ... +``` + +Each sidebar is indicated by its own number: the numeration can be not strictly consecutive, e.g. you can start with sidebar 2 instead of sidebar 1. However, the insertion follows the number order and the left to right order, thus left sidebars are inserted before right one and sidebar 1, if present, is inserted **before** sidebar 2. +$column[width:50%;padding-left:1%;] The sidebar of the slide you are reading is made by -```lua ----theme_slide_sidebar_1 -position = R -width = 20% -padding = 1% 2% -background = linear-gradient(#4788B3,#86B2CF) -color = white -border-radius = 0 -metadata = [['title','font-weight:bold;font-variant:small-caps;font-size:105%;display:inline-block'], && - ['authors','font-variant:small-caps;font-size:90%;display:inline-block'], && - ['affiliations','margin-top:4%;margin-bottom:10%;font-variant:small-caps;font-size:70%;white-space:pre-wrap;display:inline-block'],&& - ['toc','font-size:70%;',2]] ----endtheme_slide_sidebar_1 -``` - -### Slide Content container, available options +```yaml +theme: + - slide: + - sidebar-1: + - position: 'R' + - width: '20%' + - padding: '1% 2%' + - background: 'linear-gradient(#4788B3,#86B2CF)' + - color: 'white' + - border-radius: '0' + - metadata: + - title: + - font-weight: 'bold' + - font-variant: 'small-caps' + - font-size: '105%' + - display: 'inline-block' + - authors: + - font-variant: 'small-caps' + - font-size: '90%' + - display: 'inline-block' + - affiliations: + - margin-top: '4%' + - margin-bottom: '10%' + - font-variant: 'small-caps' + - font-size: '80%' + - white-space: 'pre-wrap' + - display: 'inline-block' + - toc: + - depth: '3' + - font-size: '70%' +``` + +$endcolumns + +### Slide Content Theme + +#### Slide Content container The *content* element is designed to render the main slide contents. -Content element has the following default _user_ options: +Content element has the following default _css_ options: + `display `, default `block`; + `width `, default `100%`; + `height `, default `100%`; -+ `padding `, default `0`; -+ `font-size `, default `100%`; -+ `font-family `, default `Open Sans, Arial, sans-serif`; -+ `overflow `, default `hidden`. - -All are are standard `CSS` options. Note that the `height` and `width` are automatically computed by MaTiSSe.py accordingly to the dimensions of headers, footers and sidebars, thus it has no sense for the user to set them. -### Slide Content container, setting options - To customize the options of content the syntax is the following -```lua ----theme_slide_content -option_name1 = option_value1 -option_name2 = option_value2 -... ----endtheme_slide_content +```yaml +theme: + - slide: + - content: + - css-1: 'value' + - css-2: 'value' + ... ``` -where `option_name` is one of the previously cited options, e.g. `display`, `padding`, etc..., while `option_value` is its value. - The content of the slide you are reading is made by -```lua ----theme_slide_content -background = white -color = rgb(102,102,102) -padding = 1% ----endtheme_slide_content +```yaml +theme: + - slide: + - content: + - background: 'white' + - color: 'rgb(102,102,102)' + - padding: '1%' ``` ### Slide-level Theme, an example -This presentation uses: +#### Slide-level Theme, an example -```lua ----theme_slide_global -width = 900px -height = 700px -border-radius = 10px -background = green -color = rgb(102,102,102) -font-size = 100% -slide-transition = horizontal -data-offset = 200 ----endtheme_slide_global - ----theme_slide_content -background = white -color = rgb(102,102,102) -padding = 1% ----endtheme_slide_content - ----theme_slide_header_1 -height = 6% -padding = 1% 2% -background = #4788B3 -color = white -border-radius = 10px 10px 0 0 -metadata = [['slidetitle','font-variant:small-caps;font-size:150%;'],&& - ['logo','float:right;height:100%;']] ----endtheme_slide_header_1 -``` - -### Slide-level Theme, an example (continued) -```lua ----theme_slide_footer_1 -height = 6% -padding = 1% 2% -background = #86B2CF -color = white -metadata = [['timer','controls;font-size:70%;font-variant:small-caps;float:right'],&& - ['total_slides_number','float:right;padding:0 1%;'], && - ['|custom| of ','float:right;'], && - ['slidenumber','float:right;padding:0 1%;'], && - ['|custom|slide ','float:right;']] ----endtheme_slide_footer_1 - ----theme_slide_sidebar_1 -position = R -width = 20% -padding = 1% 2% -background = linear-gradient(#4788B3,#86B2CF) -color = white -border-radius = 0 -metadata = [['title','font-weight:bold;font-variant:small-caps;font-size:105%;display:inline-block'], && - ['authors','font-variant:small-caps;font-size:90%;display:inline-block'], && - ['affiliations','margin-top:4%;margin-bottom:10%;font-variant:small-caps;font-size:70%;white-space:pre-wrap;display:inline-block'],&& - ['toc','font-size:70%;',2]] ----endtheme_slide_sidebar_1 -``` - -### Metadata option +$columns -In the previous slides we learn that `metadata` can be used inside the theme definition. Considering a generic theme element, the syntax is the following: +$column[width:50%;padding-right:1%;border-right:1px solid #4788B3;] +This presentation uses: +```yaml +theme: + - slide: + # global slide + - width: '900px' + - height: '700px' + - border-radius: '10px' + - background: 'green' + - color: 'rgb(102,102,102)' + - font-size: '100%' + - data-offset: '20' + # elements + - content: + - background: 'white' + - color: 'rgb(102,102,102)' + - padding: '1%' + - header-1: + - height: '6%' + - padding: '1% 2%' + - background: '#4788B3' + - color: 'white' + - border-radius: '10px 10px 0 0' + - metadata: + - slidetitle: + - padding: '0% 0%' + - font-size: '150%' + - float: 'left' + - font-variant: 'small-caps' + - logo: + - height: '100%' + - float: 'right' +``` -```lua -metadata = [list_of_metadata] +$column[width:50%;padding-left:1%;] +```yaml + ... + - footer-1: + - height: '6%' + - padding: '1% 2%' + - background: '#86B2CF' + - color: 'white' + - metadata: + - timer: + - controls: '' + - font-size: '70%' + - font-variant: 'small-caps' + - float: 'right' + - total_slides_number: + - float: 'right' + - padding: '0 1%' + - custom-1: + - value: ' of ' + - float: 'right' + - slidenumber: + - float: 'right' + - padding: '0 1%' + - custom-2: + - value: 'slide ' + - float: 'right' + ... ``` -where the *list_of_metadata* is the list of the metadata used into the theme element. Each metadata can be styled or it can inherit the style from its element container. For example: +$endcolumns + +#### Slide-level Theme, an example, continued +```yaml + ... + - sidebar-1: + - position: 'R' + - width: '20%' + - padding: '1% 2%' + - background: 'linear-gradient(#4788B3,#86B2CF)' + - color: 'white' + - border-radius: '0' + - metadata: + - title: + - font-weight: 'bold' + - font-variant: 'small-caps' + - font-size: '105%' + - display: 'inline-block' + - authors: + - font-variant: 'small-caps' + - font-size: '90%' + - display: 'inline-block' + - affiliations: + - margin-top: '4%' + - margin-bottom: '10%' + - font-variant: 'small-caps' + - font-size: '80%' + - white-space: 'pre-wrap' + - display: 'inline-block' + - toc: + - depth: '3' + - font-size: '70%' + +``` + +#### Metadata option -```lua -metadata = ['slidetile', && - ['logo','float:right;']] +In the previous slides we learn that `metadata` can be used inside the theme definition. Considering a generic theme element, the syntax is the following: + +```yaml +theme: + - slide: + - element: # header, footer or sidebar + - metadata: + - name-1: # metadata name, e.g. title, sectiontitle, etc... + - css-1: 'value' + ... + - name-2: # metadata name, e.g. title, sectiontitle, etc... + ... +``` +Each metadata can be styled or it can inherit the style from its element container. For example: + +```yaml + - slide: + - element: # header, footer or sidebar + - metadata: + - title: + - authors: + - font-variant: 'small-caps' ``` defines 2 metadata: -1. `'slidetitle'` that ha no special style; -2. `['logo','float:right;']` that has its own special style, i.e. `float:right`. - -$note -$content{ -To define a styled metadata use a list where the second element is the css style. -} -$endnote +1. `'title'` that ha no special style; +1. `authors` that has its own special style, i.e. a custom `font-variant`. -The `toc` metadata is a special case. If styled it can accept a third optional value: +The `toc` metadata is a special case. If styled it can accept a non standard css option, the *depth*: -```lua -metadata = [ ['toc','float:right;','2'] ] +```yaml + - slide: + - element: # header, footer or sidebar + - metadata: + - toc: + - depth: '3' + - font-size: '70%' ``` -This third optional value, `2`, indicates the TOC depth. ## Slide-Overriding theme ### Changing the Slide Theme on-the-fly + +#### Changing the Slide Theme on-the-fly A very nice MaTiSSe.py feature is the possibility to define a theme locally to each slide, the so called *slide overtheme*, and change the theme **on-the-fly**. The syntax is the following: -```lua -### Slide Title ----slide -any valid slide-level theme ----endslide +```yaml +#### Slide Title +--- +overtheme: + - slide + # any valid slide-level theme +--- ``` -just put the slide themes into a ---slide/---endslide environment after the slide title and the slide will be rendered with its own theme. +just put the slide themes into a yaml block environment, named **overtheme** after the slide title and the slide will be rendered with its own theme. If you do not believe me, look the following slide! -### Changing the Slide Theme on-the-fly (continued) ----slide ----theme_slide_global -slide-transition = diagonal -data-z = -2000 -data-scale = 2 -data-rotate = 90 -data-rotate-y = 30 ----endtheme_slide_global - ----theme_slide_content -font-family = 'Comic Sans MS', cursive, sans-serif ----endtheme_slide_content - ----theme_slide_sidebar_1 -active = False ----endtheme_slide_sidebar_1 ----endslide - -##### Where is the right sidebar? +#### Changing the Slide Theme on-the-fly continued +--- +overtheme: + - slide: + - transition: 'diagonal' + - content: + - font-family: Comic Sans MS, cursive, sans-serif +--- + +##### Where is the header, footer and sidebar? ##### Why the font family is comic-like? -##### Why the slide has been rotated, scaled...? +##### Why the slide transition has been different from the previous? Because this slide has the following overtheme: -```lua ----slide - ----theme_slide_global -slide-transition = diagonal -data-z = -2000 -data-scale = 2 -data-rotate = 90 -data-rotate-y = 30 ----endtheme_slide_global - ----theme_slide_content -font-family = 'Comic Sans MS', cursive, sans-serif ----endtheme_slide_content - ----theme_slide_sidebar_1 -active = False ----endtheme_slide_sidebar_1 - ----endslide -``` - -# Theme Example - -## Sapienza, University of Rome, theme - -### Sapienza Theme ----slide ----theme_slide_global -data-offset = 200 -background = white ----endtheme_slide_global - ----theme_slide_header_1 -background = white -color = #822433 -metadata = [['slidetitle','font-variant:small-caps;font-size:150%;']] ----endtheme_slide_header_1 - ----theme_slide_footer_1 -height = 3% -width = 90% -float = right -background = #822433 -metadata = [] ----endtheme_slide_footer_1 - ----theme_slide_footer_2 -height = 6% -padding = 1% 2% -background = #822433 -color = white -metadata = [['title','padding:0 1%;'], && - ['date','padding:0 1%;'], && - ['total_slides_number','float:right;padding:0 1%;'], && - ['|custom| of ','float:right;'], && - ['slidenumber','float:right;padding:0 1%;'], && - ['|custom|slide ','float:right;']] ----endtheme_slide_footer_2 - ----theme_slide_sidebar_1 -active = False ----endtheme_slide_sidebar_1 ----endslide - -Slide Overtheme definition: - -```lua ----slide ----theme_slide_global -data-offset = 200 -background = white ----endtheme_slide_global - ----theme_slide_header_1 -background = white -color = #822433 -metadata = [['slidetitle','font-variant:small-caps;font-size:150%;']] ----endtheme_slide_header_1 - ----theme_slide_footer_1 -height = 3% -width = 90% -float = right -background = #822433 -metadata = [] ----endtheme_slide_footer_1 - -``` - -### Sapienza Theme (continued) ----slide ----theme_slide_global -data-offset = 200 -background = white ----endtheme_slide_global - ----theme_slide_header_1 -background = white -color = #822433 -metadata = [['slidetitle','font-variant:small-caps;font-size:150%;']] ----endtheme_slide_header_1 - ----theme_slide_footer_1 -height = 3% -width = 90% -float = right -background = #822433 -metadata = [] ----endtheme_slide_footer_1 - ----theme_slide_footer_2 -height = 6% -padding = 1% 2% -background = #822433 -color = white -metadata = [['title','padding:0 1%;'], && - ['date','padding:0 1%;'], && - ['total_slides_number','float:right;padding:0 1%;'], && - ['|custom| of ','float:right;'], && - ['slidenumber','float:right;padding:0 1%;'], && - ['|custom|slide ','float:right;']] ----endtheme_slide_footer_2 - ----theme_slide_sidebar_1 -active = False ----endtheme_slide_sidebar_1 ----endslide - -```lua ----theme_slide_footer_2 -height = 6% -padding = 1% 2% -background = #822433 -color = white -metadata = [['title','padding:0 1%;'], && - ['date','padding:0 1%;'], && - ['total_slides_number','float:right;padding:0 1%;'], && - ['|custom| of ','float:right;'], && - ['slidenumber','float:right;padding:0 1%;'], && - ['|custom|slide ','float:right;']] ----endtheme_slide_footer_2 - ----theme_slide_sidebar_1 -active = False ----endtheme_slide_sidebar_1 ----endslide +```yaml +--- +overtheme: + - slide: + - transition: 'diagonal' + - content: + - font-family: Comic Sans MS, cursive, sans-serif +--- +``` + +# Theme Examples + +## Universities Themes + +### Sapienza, University of Rome, theme + +#### Sapienza Theme +--- +overtheme: + - slide: + - background: white + - header-1: + - height: 6% + - background: white + - color: '#822433' + - metadata: + - slidetitle: + - font-variant: small-caps + - font-size: '150%' + - footer-1: + - height: '3%' + - width: '90%' + - float: right + - background: '#822433' + - footer-2: + - height: '6%' + - padding: '1% 2%' + - background: '#822433' + - color: white + - metadata: + - title: + - padding: '0 1%' + - date: + - padding: '0 1%' + - total_slides_number: + - float: right + - padding: '0 1%' + - custom-1: + - value: ' of ' + - float: right + - slidenumber: + - float: right + - padding: '0 1%' + - custom-2: + - value: 'slide ' + - float: right +--- + +$columns + +$column[width:50%;] +```yaml +overtheme: + - slide: + - background: white + - header-1: + - height: 6% + - background: white + - color: '#822433' + - metadata: + - slidetitle: + - font-variant: small-caps + - font-size: '150%' + - footer-1: + - height: '3%' + - width: '90%' + - float: right + - background: '#822433' + ... +``` +$column[width:50%;] + +```yaml + ... + - footer-2: + - height: '6%' + - padding: '1% 2%' + - background: '#822433' + - color: white + - metadata: + - title: + - padding: '0 1%' + - date: + - padding: '0 1%' + - total_slides_number: + - float: right + - padding: '0 1%' + - custom-1: + - value: ' of ' + - float: right + - slidenumber: + - float: right + - padding: '0 1%' + - custom-2: + - value: 'slide ' + - float: right ``` +$endcolumns ## Beamer Themes -### Beamer Themes +### Most Common Beamer Themes + +#### Beamer Themes MaTiSSe.py has been greatly inspired by LaTeX-Beamer class. @@ -1564,440 +1654,490 @@ In the following slide we try to reproduce some of the most used LaTeX-Beamer th For each theme the **overtheme** definition is reported as code listings. -$note -$content{ -Into each listing the tags ---slide/---endslide are omitted because it is implicitly assumed that the listing can be referred to both *main* and *over* slide theme. -} -$endnote +#### Bergen +--- +overtheme: + - slide: + - header-1: + - width: '75%' + - height: '10%' + - background: white + - color: black + - float: right + - border-radius: '0' + - metadata: + - slidetitle: + - font-size: '150%' + - sidebar-2: + - position: L + - width: '25%' + - height: '100%' + - background: '#272586' + - color: white + - min-height: '100%' + - metadata: + - toc: + - depth: '1' + - font-size: '120%' + - text-align: 'right' + - line-height: '500%' + - padding: '30% 5%' + - float: 'right' +--- + +Theme definition +```yaml +overtheme: + - slide: + - header-1: + - width: 75% + - height: 10% + - background: white + - color: black + - float: right + - border-radius: 0 + - metadata: + - slidetitle: + - font-size: 150% + - sidebar-2: + - position: L + - width: 25% + - background: #272586 + - color: white + - min-height: 100% + - metadata: + - toc: + - depth: 1 + - font-size: 120% + - text-align: right + - line-height: 500% + - padding: 30% 5% + - float: right +``` + +#### Madrid +--- +overtheme: + - slide: + - header-1: + - height: '10%' + - background: '#3333B3' + - metadata: + - slidetitle: + - font-size: '150%' + - footer-1: + - height: '6%' + - background: '#3333B3' + - padding: '0' + - metadata: + - authors_short: + - float: 'left' + - height: '100%' + - width: '20%' + - padding: '1% 2%' + - background: '#191959' + - title: + - float: 'left' + - font-size: '80%' + - height: '100%' + - width: '35%' + - padding: '1% 2%' + - background: '#262686' + - date: + - float: 'left' + - font-size: '80%' + - height: '100%' + - width: '35%' + - padding: '1% 2%' + - background: '#3333B3' + - total_slides_number: + - float: 'right' + - padding: '1% 1%' + - custom-1: + - value: ' / ' + - float: 'right' + - padding: '1% 0%' + - slidenumber: + - float: 'right' + - padding: '1% 1%' +--- -### Bergen ----slide - ----theme_slide_header_1 -width = 75% -height = 10% -background = white -color = black -float = right -border-radius = 0 -metadata = [['slidetitle','font-size:150%;']] ----endtheme_slide_header_1 - ----theme_slide_footer_1 -active = False ----endtheme_slide_footer_1 - ----theme_slide_sidebar_1 -active = False ----endtheme_slide_sidebar_1 - ----theme_slide_sidebar_2 -position = L -width = 25% -background = #272586 -color = white -min-height = 100% -metadata = [['toc','font-size:120%;text-align:right;line-height:500%;padding:30% 5%;float:right',1]] ----endtheme_slide_sidebar_2 - ----endslide +$columns +$column[width:50%;] +```yaml +overtheme: + - slide: + - header-1: + - height: '10%' + - background: '#3333B3' + - metadata: + - slidetitle: + - font-size: '150%' + - footer-1: + - height: '6%' + - background: '#3333B3' + - metadata: + - authors_short: + - float: 'left' + - height: '100%' + - width: '20%' + - padding: '1% 2%' + - background: '#191959' + - title: + - float: 'left' + - font-size: '80%' + - height: '100%' + - width: '35%' + - padding: '1% 2%' + - background: '#262686' + ... +``` + +$column[width:50%;] Theme definition: -```lua ----theme_slide_header_1 -width = 75% -height = 10% -background = white -color = black -float = right -metadata = [['slidetitle','font-size:150%;']] ----endtheme_slide_header_1 - ----theme_slide_sidebar_1 -position = L -width = 25% -background = #272586 -color = white -min-height = 100% -metadata = [['toc','font-size:120%;text-align:right;line-height:500%;padding:30% 5%;float:right',1]] ----endtheme_slide_sidebar_1 -``` - -### Madrid ----slide - ----theme_slide_header_1 -height = 10% -background = #3333B3 -metadata = [['slidetitle','font-size:150%;']] ----endtheme_slide_header_1 - ----theme_slide_footer_1 -height = 6% -background = #3333B3 -padding = 0 -metadata = [['authors_short','float:left;height:100%;width:20%;padding:1% 2%;background: #191959;'], && - ['title','float:left;font-size:80%;height:100%;width:35%;padding:1% 2%;background: #262686;'], && - ['date','float:left;font-size:80%;height:100%;width:35%;padding:1% 2%;background: #3333B3;'], && - ['total_slides_number','float:right;padding:0 1%;'], && - ['|custom| / ','float:right;'], && - ['slidenumber','float:right;padding:0 1%;']] ----endtheme_slide_footer_1 - ----theme_slide_sidebar_1 -active = False ----endtheme_slide_sidebar_1 - ----endslide +```yaml + ... + - date: + - float: 'left' + - font-size: '80%' + - height: '100%' + - width: '35%' + - padding: '1% 2%' + - background: '#3333B3' + - total_slides_number: + - float: 'right' + - padding: '0 1%' + - custom: + - value: ' / ' + - float: 'right' + - slidenumber: + - float: 'right' + - padding: '0 1%' +``` +$endcolumns -Theme definition: -```lua ----theme_slide_header_1 -height = 10% -background = #3333B3 -metadata = [['slidetitle','font-size:150%;']] ----endtheme_slide_header_1 - ----theme_slide_footer_1 -height = 6% -background = #3333B3 -padding = 0 -metadata = [['authors_short','float:left;height:100%;width:20%;padding:1% 2%;background: #191959;'], && - ['title','float:left;font-size:80%;height:100%;width:35%;padding:1% 2%;background: #262686;'], && - ['date','float:left;font-size:80%;height:100%;width:35%;padding:1% 2%;background: #3333B3;'], && - ['total_slides_number','float:right;padding:0 1%;'], && - ['|custom| / ','float:right;'], && - ['slidenumber','float:right;padding:0 1%;']] ----endtheme_slide_footer_1 -``` - -### Antibes ----slide - ----theme_slide_header_1 -height = 4% -background = black -color = white -padding = 1% 2% -metadata = [['title','font-size:90%;']] ----endtheme_slide_header_1 - - ---theme_slide_header_2 -height = 4% -background = #191959 -color = white -padding = 1% 4% -metadata = [['|custom|Ð','float:left;font-size:90%'],&& - ['sectiontitle','font-size:90%;']] ----endtheme_slide_header_2 - - ---theme_slide_header_3 -height = 4% -background = #262686 -color = white -padding = 1% 6% -metadata = [['|custom|Ð','float:left;font-size:90%'],&& - ['subsectiontitle','font-size:90%;']] ----endtheme_slide_header_3 - ----theme_slide_header_4 -height = 6% -background = #3333B2 -color = white -padding = 1% 2% -metadata = [['slidetitle','font-size:160%;']] ----endtheme_slide_header_4 - ----theme_slide_footer_1 -active = False ----endtheme_slide_footer_1 - ----theme_slide_sidebar_1 -active = False ----endtheme_slide_sidebar_1 - ----endslide +#### Antibes +--- +overtheme: + - slide: + - header-1: + - height: '4%' + - background: 'black' + - color: 'white' + - padding: '1% 2%' + - metadata: + - title: + - font-size: '90%' + - header-2: + - height: '4%' + - background: '#191959' + - color: 'white' + - padding: '1% 4%' + - metadata: + - custom-1: + - value: 'Ð' + - float: 'left' + - font-size: '90%' + - sectiontitle: + - font-size: '90%' + - header-3: + - height: '4%' + - background: '#262686' + - color: 'white' + - padding: '1% 6%' + - metadata: + - custom-1: + - value: 'Ð' + - float: 'left' + - font-size: '90%' + - subsectiontitle: + - font-size: '90%' + - header-4: + - height: '6%' + - background: '#3333B2' + - color: 'white' + - padding: '1% 2%' + - metadata: + - slidetitle: + - font-size: '160%' +--- -Theme definition: -```lua ----theme_slide_header_1 -height = 3% -background = black -color = white -padding = 1% 2% -metadata = [['title','font-size:90%;']] ----endtheme_slide_header_1 - - ---theme_slide_header_2 -height = 3% -background = #191959 -color = white -padding = 1% 4% -metadata = [['|custom|Ð','float:left;font-size:90%'],&& - ['sectiontitle','font-size:90%;']] ----endtheme_slide_header_2 - -``` -### Antibes (continued) ----slide - ----theme_slide_header_1 -height = 4% -background = black -color = white -padding = 1% 2% -metadata = [['title','font-size:90%;']] ----endtheme_slide_header_1 - ----theme_slide_header_2 -height = 4% -background = #191959 -color = white -padding = 1% 4% -metadata = [['|custom|Ð','float:left;font-size:90%'],&& - ['sectiontitle','font-size:90%;']] ----endtheme_slide_header_2 - ----theme_slide_header_3 -height = 4% -background = #262686 -color = white -padding = 1% 6% -metadata = [['|custom|Ð','float:left;font-size:90%'],&& - ['subsectiontitle','font-size:90%;']] ----endtheme_slide_header_3 - ----theme_slide_header_4 -height = 6% -background = #3333B2 -color = white -padding = 1% 2% -metadata = [['slidetitle','font-size:160%;']] ----endtheme_slide_header_4 - ----theme_slide_footer_1 -active = False ----endtheme_slide_footer_1 - ----theme_slide_sidebar_1 -active = False ----endtheme_slide_sidebar_1 - ----endslide +$columns +$column[width:50%] Theme definition: -```lua ----theme_slide_header_3 -height = 3% -background = #262686 -color = white -padding = 1% 6% -metadata = [['|custom|Ð','float:left;font-size:90%'],&& - ['subsectiontitle','font-size:90%;']] ----endtheme_slide_header_3 - - ---theme_slide_header_4 -height = 7% -background = #3333B2 -color = white -padding = 1% 2% -metadata = [['slidetitle','font-size:180%;']] ----endtheme_slide_header_4 -``` - -### Montpellier ----slide - ----theme_slide_header_1 -height = 6% -background = white -color = black -padding = 1% 2% -border-top = 8px solid #9999D9 -border-radius = 0 -metadata = [['title','font-size:90%;']] ----endtheme_slide_header_1 - ----theme_slide_header_2 -height = 6% -background = white -color = #9999D9 -padding = 1% 4% -metadata = [['|custom|Ð','float:left;font-size:90%'],&& - ['sectiontitle','font-size:90%;']] ----endtheme_slide_header_2 - ----theme_slide_header_3 -height = 6% -background = white -color = #9999D9 -padding = 1% 6% -border-bottom = 8px solid #9999D9 -metadata = [['|custom|Ð','float:left;font-size:90%'],&& - ['subsectiontitle','font-size:90%;']] ----endtheme_slide_header_3 - ----theme_slide_header_4 -height = 8% -background = white -color = #9999D9 -padding = 1% 2% -metadata = [['slidetitle','font-size:160%;']] ----endtheme_slide_header_4 - ----theme_slide_footer_1 -active = False ----endtheme_slide_footer_1 - ----theme_slide_sidebar_1 -active = False ----endtheme_slide_sidebar_1 - ----endslide +```yaml +overtheme: + - slide: + - header-1: + - height: '4%' + - background: 'black' + - color: 'white' + - padding: '1% 2%' + - metadata: + - title: + - font-size: '90%' + - header-2: + - height: '4%' + - background: '#191959' + - color: 'white' + - padding: '1% 4%' + - metadata: + - custom-1: + - value: 'Ð' + - float: 'left' + - font-size: '90%' + - sectiontitle: + - font-size: '90%' + ... +``` + +$column[width:50%] +```yaml + ... + - header-3: + - height: '4%' + - background: '#262686' + - color: 'white' + - padding: '1% 6%' + - metadata: + - custom-1: + - value: 'Ð' + - float: 'left' + - font-size: '90%' + - subsectiontitle: + - font-size: '90%' + - header-4: + - height: '6%' + - background: '#3333B2' + - color: 'white' + - padding: '1% 2%' + - metadata: + - slidetitle: + - font-size: '160%' +``` +$endcolumns -Theme definition: -```lua ----theme_slide_header_1 -height = 6% -background = white -color = black -padding = 1% 2% -border-top = 8px solid #9999D9 -border-radius = 0 -metadata = [['title','font-size:90%;']] ----endtheme_slide_header_1 - ----theme_slide_header_2 -height = 6% -background = white -color = #9999D9 -padding = 1% 4% -metadata = [['|custom|Ð','float:left;font-size:90%'],&& - ['sectiontitle','font-size:90%;']] ----endtheme_slide_header_2 -``` - -### Montpellier (continued) ----slide - ----theme_slide_header_1 -height = 6% -background = white -color = black -padding = 1% 2% -border-top = 8px solid #9999D9 -border-radius = 0 -metadata = [['title','font-size:90%;']] ----endtheme_slide_header_1 - ----theme_slide_header_2 -height = 6% -background = white -color = #9999D9 -padding = 1% 4% -metadata = [['|custom|Ð','float:left;font-size:90%'],&& - ['sectiontitle','font-size:90%;']] ----endtheme_slide_header_2 - ----theme_slide_header_3 -height = 6% -background = white -color = #9999D9 -padding = 1% 6% -border-bottom = 8px solid #9999D9 -metadata = [['|custom|Ð','float:left;font-size:90%'],&& - ['subsectiontitle','font-size:90%;']] ----endtheme_slide_header_3 - ----theme_slide_header_4 -height = 8% -background = white -color = #9999D9 -padding = 1% 2% -metadata = [['slidetitle','font-size:160%;']] ----endtheme_slide_header_4 - ----theme_slide_footer_1 -active = False ----endtheme_slide_footer_1 - ----theme_slide_sidebar_1 -active = False ----endtheme_slide_sidebar_1 - ----endslide +#### Montpellier +--- +overtheme: + - slide: + - header-1: + - height: '6%' + - background: 'white' + - color: 'black' + - padding: '1% 2%' + - border-top: '8px solid #9999D9' + - border-radius: '0' + - metadata: + - title: + - font-size: '90%' + - header-2: + - height: '6%' + - background: 'white' + - color: '#9999D9' + - padding: '1% 4%' + - metadata: + - custom-1: + - value: 'Ð' + - float: 'left' + - font-size: '90%' + - sectiontitle: + - font-size: '90%' + - header-3: + - height: '6%' + - background: 'white' + - color: '#9999D9' + - padding: '1% 6%' + - border-bottom: '8px solid #9999D9' + - metadata: + - custom-1: + - value: 'Ð' + - float: 'left' + - font-size: '90%' + - subsectiontitle: + - font-size: '90%' + - header-4: + - height: '8%' + - background: 'white' + - color: '#9999D9' + - padding: '1% 2%' + - metadata: + - slidetitle: + - font-size: '160%' +--- -Theme definition: -```lua ----theme_slide_header_3 -height = 6% -background = white -color = #9999D9 -padding = 1% 6% -border-bottom = 8px solid #9999D9 -metadata = [['|custom|Ð','float:left;font-size:90%'],&& - ['subsectiontitle','font-size:90%;']] ----endtheme_slide_header_3 - ----theme_slide_header_4 -height = 6% -background = white -color = #9999D9 -padding = 1% 2% -metadata = [['slidetitle','font-size:160%;']] ----endtheme_slide_header_4 -``` - -### Berkeley ----slide - ----theme_slide_header_1 -height = 10% -background = #3333B2 -color = white -padding = 0 -metadata = [['|custom|.','float:left;height:100%;width:20%;color:#262686;background:#262686;'],&& - ['slidetitle','float:left;padding:1% 2%;font-size:190%;']] ----endtheme_slide_header_1 - ----theme_slide_footer_1 -active = False ----endtheme_slide_footer_1 - ----theme_slide_sidebar_1 -position = L -background = #3333B2 ----endtheme_slide_sidebar_1 - ----endslide +$columns +$column[width:50%] Theme definition: -```lua ----theme_slide_header_1 -height = 10% -background = #3333B2 -color = white -padding = 0 -metadata = [['|custom|.','float:left;height:100%;width:20%;color:#262686;background:#262686;'],&& - ['slidetitle','float:left;padding:1% 2%;font-size:190%;']] ----endtheme_slide_header_1 - ----theme_slide_sidebar_1 -position = L -width = 20% -padding = 1% 2% -background = #3333B2 -color = white -metadata = [['title','font-weight:bold;font-variant:small-caps;font-size:105%;display:inline-block'], && - ['authors','font-variant:small-caps;font-size:90%;display:inline-block'], && - ['affiliations','margin-top:4%;margin-bottom:10%;font-variant:small-caps;font-size:70%;white-space:pre-wrap;display:inline-block'],&& - ['toc','font-size:70%;',2]] ----endtheme_slide_sidebar_1 -``` - -### $overview ----slide ----theme_slide_global -data-scale = 10 ----endtheme_slide_global ----endslide +```yaml +overtheme: + - slide: + - header-1: + - height: '6%' + - background: 'white' + - color: 'black' + - padding: '1% 2%' + - border-top: '8px solid #9999D9' + - border-radius: '0' + - metadata: + - title: + - font-size: '90%' + - header-2: + - height: '6%' + - background: 'white' + - color: '#9999D9' + - padding: '1% 4%' + - metadata: + - custom-1: + - value: 'Ð' + - float: 'left' + - font-size: '90%' + - sectiontitle: + - font-size: '90%' + ... +``` + +$column[width:50%] +```yaml + ... + - header-3: + - height: '6%' + - background: 'white' + - color: '#9999D9' + - padding: '1% 6%' + - border-bottom: '8px solid #9999D9' + - metadata: + - custom-1: + - value: 'Ð' + - float: 'left' + - font-size: '90%' + - subsectiontitle: + - font-size: '90%' + - header-4: + - height: '8%' + - background: 'white' + - color: '#9999D9' + - padding: '1% 2%' + - metadata: + - slidetitle: + - font-size: '160%' +``` +$endcolumns + +#### Berkeley +--- +overtheme: + - copy-from-theme: True + - slide: + - header-1: + - height: '10%' + - background: '#3333B2' + - color: 'white' + - padding: '0' + - metadata: + - custom-1: + - value: '.' + - float: 'left' + - height: '100%' + - width: '20%' + - color: '#262686' + - background: '#262686' + - slidetitle: + - float: 'left' + - padding: '1% 2%' + - font-size: '190%' + - footer-1: + - active: 'no' + - sidebar-1: + - position: 'L' + - width: '20%' + - padding: '1% 2%' + - background: '#3333B2' + - color: 'white' + - border-radius: '0' + - metadata: + - title: + - font-weight: 'bold' + - font-variant: 'small-caps' + - font-size: '105%' + - display: 'inline-block' + - authors: + - font-variant: 'small-caps' + - font-size: '90%' + - display: 'inline-block' + - affiliations: + - margin-top: '4%' + - margin-bottom: '10%' + - font-variant: 'small-caps' + - font-size: '80%' + - white-space: 'pre-wrap' + - display: 'inline-block' + - toc: + - depth: '1' + - font-size: '70%' +--- + +$columns + +$column[width:50%] + +Theme definition +```yaml +overtheme: + - slide: + - header-1: + - height: '10%' + - background: '#3333B2' + - color: 'white' + - padding: '0' + - metadata: + - custom-1: + - value: '.' + - float: 'left' + - height: '100%' + - width: '20%' + - color: '#262686' + - background: '#262686' + - slidetitle: + - float: 'left' + - padding: '1% 2%' + - font-size: '190%' + ... +``` + +$column[width:50%] + +```yaml + ... + - sidebar-1: + - position: 'L' + - width: '20%' + - padding: '1% 2%' + - background: '#3333B2' + - color: 'white' + - border-radius: '0' + - metadata: + - title: + - font-weight: 'bold' + - font-variant: 'small-caps' + - font-size: '105%' + - display: 'inline-block' + - authors: + - font-variant: 'small-caps' + - font-size: '90%' + - display: 'inline-block' + - affiliations: + - margin-top: '4%' + - margin-bottom: '10%' + - font-variant: 'small-caps' + - font-size: '80%' + - white-space: 'pre-wrap' + - display: 'inline-block' + - toc: + - depth: '3' + - font-size: '70%' +``` +$endcolumns diff --git a/examples/getting-started/getting_started/css/theme.css b/examples/getting-started/getting_started/css/theme.css index 84928f3..bd49877 100644 --- a/examples/getting-started/getting_started/css/theme.css +++ b/examples/getting-started/getting_started/css/theme.css @@ -1,3 +1,4 @@ +/* CSS theme generated by MaTiSSe.py */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -26,6 +27,7 @@ ol { pre { display:flex; padding: 1% 0; + font-size: 90%; } .columns:after { visibility: hidden; @@ -50,6 +52,9 @@ input[type=button] { .timer { display:table-row; } +.timercontainer { + padding: 0% 1%; +} .step { position: relative; } @@ -57,676 +62,528 @@ input[type=button] { opacity: 1; } .impress-enabled .step { - margin: 0; - opacity: 0.3; - -webkit-transition: opacity 1s; - -moz-transition: opacity 1s; - -ms-transition: opacity 1s; - -o-transition: opacity 1s; + margin: 0; + opacity: 0.3; + -webkit-transition: opacity 1s; + -moz-transition: opacity 1s; + -ms-transition: opacity 1s; + -o-transition: opacity 1s; transition: opacity 1s; } -table tr {border-top: 1px solid #cccccc; background-color: white; margin: 0; padding: 0; -} -table tr td { border: 1px solid #cccccc; text-align: left; margin: 0; padding: 6px 13px; -} -table tr th {font-weight: bold; border: 1px solid #cccccc; text-align: left; margin: 0; padding: 6px 13px; -} -table tr th :first-child, table tr td :first-child {margin-top: 0; +.toc { + display: block; } -table tr th :last-child, table tr td :last-child {margin-bottom: 0; +.toc-chapter, .toc-section, .toc-subsection, .toc-slide { + clear: both; + float: left; + white-space: pre-wrap; } -table tr:nth-child(2n) {background-color: #f8f8f8; +.toc-chapter-emph, .toc-section-emph, .toc-subsection-emph, .toc-slide-emph { + clear: both; + float: left; + white-space: pre-wrap; } + body { background: radial-gradient(rgb(240, 240, 240), rgb(110, 110, 110)); } - -h1 { - font-size: 220%; -} - -h2 { - font-size: 200%; + .toc { + font-variant: small-caps; } - -h3 { - font-size: 180%; + .toc-chapter-emph { + border: 1px solid #4788B3; + border-radius: 5px; } - -h4 { - font-size: 160%; + .toc-section-emph { + border: 1px solid #4788B3; + border-radius: 5px; } - -h5 { - font-size: 140%; + .toc-subsection-emph { + border: 1px solid #4788B3; + border-radius: 5px; } - -h6 { - font-size: 120%; + .toc-slide-emph { + border: 1px solid #4788B3; + border-radius: 3px; } - .slide { - display: block; - padding: 0; - margin: 0; width: 900px; height: 700px; - font-size: 100%; - font-family: Open Sans, Arial, sans-serif; border-radius: 10px; background: green; color: rgb(102,102,102); + font-size: 100%; + data-offset: 20; + display: block; } - - .slide-header_1 { + .slide-content { + background: white; + color: rgb(102,102,102); + padding: 1%; display: block; - width: 100%; + float: left; + width: 80%; + height: 88%; +} + .slide-header-1 { height: 6%; - font-size: 100%; - font-family: Open Sans, Arial, sans-serif; - overflow: hidden; padding: 1% 2%; background: #4788B3; color: white; border-radius: 10px 10px 0 0; -} - - .slide-footer_1 { - clear: both; display: block; + active: yes; width: 100%; +} + .slide-footer-1 { height: 6%; - font-size: 100%; - font-family: Open Sans, Arial, sans-serif; - overflow: hidden; padding: 1% 2%; background: #86B2CF; color: white; -} - - .slide-sidebar_1 { - float: left; display: block; + clear: both; + active: yes; + width: 100%; +} + .slide-sidebar-1 { + position: R; width: 20%; - height: 88%; - font-size: 100%; - font-family: Open Sans, Arial, sans-serif; - overflow: hidden; padding: 1% 2%; background: linear-gradient(#4788B3,#86B2CF); color: white; border-radius: 0; -} - - .slide-content { - float: left; display: block; - width: 80%; + float: left; + active: yes; height: 88%; - padding: 1%; - font-size: 100%; - font-family: Open Sans, Arial, sans-serif; - overflow: hidden; - background: white; - color: rgb(102,102,102); } - -.toc { - display: block; + .box { + display: inline-block; font-variant: small-caps; + box-shadow: 7px 7px 5px rgba(200,200,200,0.3); + border-radius: 20px; } -.toc-section{ - display: block; - clear: both; - float: left; - white-space: pre-wrap; + .box-caption { + padding: 0 2%; + color: red; + border-bottom: 1px solid #4788B3; + display: inline-block; } -.toc-subsection{ - display: block; - clear: both; - float: left; - white-space: pre-wrap; + .box-content { + padding: 0 2%; + font-size: 120%; } -.toc-slide{ - display: block; - clear: both; - float: left; - white-space: pre-wrap; + .note { + display: inline-block; + font-variant: small-caps; + box-shadow: 7px 7px 5px rgba(200,200,200,0.3); + border-radius: 20px; } - -.toc-section.emph { - margin: 1% 0; - clear: both; - float: left; - border: 1px solid #4788B3; - border-radius: 5px; + .note-caption { + padding: 0 2%; + color: #4788B3; + border-bottom: 1px solid #4788B3; + display: inline-block; } - -.toc-subsection.emph { - clear: both; - float: left; - margin: 1% 0; - border: 1px solid #4788B3; - border-radius: 5px; + .note-content { + padding: 0 2%; + font-size: 120%; } - -.toc-slide.emph { - margin: 1% 0; - clear: both; - float: left; - border: 1px solid #4788B3; - border-radius: 5px; + .figure { + font-variant: small-caps; + text-align: center; } - -#slide-1.slide { + .figure-caption { + font-size: 80%; + color: #4788B3; +} + .figure-content { + padding: 1% 5%; + box-shadow: 5px 5px 3px rgba(200,200,200,0.3); + border-radius: 15px; +} + .video { + font-variant: small-caps; + text-align: center; +} + .video-caption { + font-size: 80%; + color: #4788B3; +} + .video-content { + padding: 1% 5%; + box-shadow: 5px 5px 3px rgba(200,200,200,0.3); + border-radius: 15px; +} +#slide-0.slide { display: block; - padding: 0; - margin: 0; width: 900px; height: 700px; - font-size: 100%; - font-family: Open Sans, Arial, sans-serif; } - -#slide-1 .slide-content { - float: left; +#slide-0 .slide-content { + padding: 0%; display: block; + float: left; width: 100%; height: 100%; - padding: 0; - font-size: 100%; - font-family: Open Sans, Arial, sans-serif; - overflow: hidden; } - -#slide-4.slide { - display: block; - padding: 0; - margin: 0; - background: white; +#slide-2.slide { + transition: absolute; + data-y: 1000; + data-z: 100; + data-rotate-x: 45; border-radius: 50%; + data-offset: 200; + background: white; + display: block; + width: 900px; + height: 700px; } - -#slide-4 .slide-header_1 { - height: 6%; -} - -#slide-4 .slide-footer_1 { - clear: both; - height: 6%; -} - -#slide-4 .slide-sidebar_1 { - float: left; - width: 20%; - height: 88%; -} - -#slide-4 .slide-content { +#slide-2 .slide-content { + border-radius: 50%; + padding: 15% 20%; + font-size: 180%; + display: block; float: left; width: 100%; height: 100%; - padding: 15% 20%; - font-size: 200%; - border-radius: 50%; } - -#slide-63.slide { +#slide-48.slide { + transition: diagonal; display: block; - padding: 0; - margin: 0; -} - -#slide-63 .slide-header_1 { - height: 6%; -} - -#slide-63 .slide-footer_1 { - clear: both; - height: 6%; -} - -#slide-63 .slide-sidebar_1 { - float: left; - width: 20%; - height: 88%; + width: 900px; + height: 700px; } - -#slide-63 .slide-content { +#slide-48 .slide-content { + font-family: Comic Sans MS, cursive, sans-serif; + display: block; float: left; width: 100%; - height: 88%; - padding: 1%; - font-family: 'Comic Sans MS', cursive, sans-serif; -} - -#slide-65.slide { - display: block; - padding: 0; - margin: 0; - background: white; + height: 100%; } - -#slide-65 .slide-header_1 { - height: 6%; +#slide-49.slide { background: white; - color: #822433; -} - -#slide-65 .slide-footer_2 { - clear: both; - height: 6%; - padding: 1% 2%; - background: #822433; - color: white; -} - -#slide-65 .slide-footer_1 { - clear: both; - width: 90%; - height: 3%; - float: right; - background: #822433; -} - -#slide-65 .slide-sidebar_1 { - float: left; - width: 20%; - height: 88%; + display: block; + width: 900px; + height: 700px; } - -#slide-65 .slide-content { +#slide-49 .slide-content { + display: block; float: left; width: 100%; height: 85%; - padding: 1%; -} - -#slide-66.slide { - display: block; - padding: 0; - margin: 0; - background: white; } - -#slide-66 .slide-header_1 { +#slide-49 .slide-header-1 { height: 6%; background: white; color: #822433; + display: block; + active: yes; + width: 100%; } - -#slide-66 .slide-footer_2 { - clear: both; +#slide-49 .slide-footer-2 { height: 6%; padding: 1% 2%; background: #822433; color: white; -} - -#slide-66 .slide-footer_1 { + display: block; clear: both; - width: 90%; + active: yes; + width: 100%; +} +#slide-49 .slide-footer-1 { height: 3%; + width: 90%; float: right; background: #822433; + display: block; + clear: both; + active: yes; } - -#slide-66 .slide-sidebar_1 { - float: left; - width: 20%; - height: 88%; -} - -#slide-66 .slide-content { - float: left; - width: 100%; - height: 85%; - padding: 1%; +#slide-51.slide { + display: block; + width: 900px; + height: 700px; } - -#slide-69.slide { +#slide-51 .slide-content { display: block; - padding: 0; - margin: 0; + float: left; + width: 75%; + height: 90%; } - -#slide-69 .slide-header_1 { +#slide-51 .slide-header-1 { width: 75%; height: 10%; background: white; color: black; float: right; border-radius: 0; + display: block; + active: yes; } - -#slide-69 .slide-footer_1 { - clear: both; - height: 6%; -} - -#slide-69 .slide-sidebar_2 { - float: left; +#slide-51 .slide-sidebar-2 { + position: L; width: 25%; - height: 90%; + height: 100%; background: #272586; color: white; min-height: 100%; -} - -#slide-69 .slide-sidebar_1 { + display: block; float: left; - width: 20%; - height: 88%; + active: yes; } - -#slide-69 .slide-content { - float: left; - width: 75%; - height: 90%; - padding: 1%; +#slide-52.slide { + display: block; + width: 900px; + height: 700px; } - -#slide-70.slide { +#slide-52 .slide-content { display: block; - padding: 0; - margin: 0; + float: left; + width: 100%; + height: 84%; } - -#slide-70 .slide-header_1 { +#slide-52 .slide-header-1 { height: 10%; background: #3333B3; + display: block; + active: yes; + width: 100%; } - -#slide-70 .slide-footer_1 { - clear: both; +#slide-52 .slide-footer-1 { height: 6%; background: #3333B3; padding: 0; -} - -#slide-70 .slide-sidebar_1 { - float: left; - width: 20%; - height: 88%; -} - -#slide-70 .slide-content { - float: left; - width: 100%; - height: 84%; - padding: 1%; -} - -#slide-71.slide { display: block; - padding: 0; - margin: 0; -} - -#slide-71 .slide-header_1 { - height: 4%; - background: black; - color: white; - padding: 1% 2%; -} - -#slide-71 .slide-header_2 { - height: 4%; - background: #191959; - color: white; - padding: 1% 4%; -} - -#slide-71 .slide-header_3 { - height: 4%; - background: #262686; - color: white; - padding: 1% 6%; -} - -#slide-71 .slide-header_4 { - height: 6%; - background: #3333B2; - color: white; - padding: 1% 2%; -} - -#slide-71 .slide-footer_1 { clear: both; - height: 6%; + active: yes; + width: 100%; } - -#slide-71 .slide-sidebar_1 { - float: left; - width: 20%; - height: 88%; +#slide-53.slide { + display: block; + width: 900px; + height: 700px; } - -#slide-71 .slide-content { +#slide-53 .slide-content { + display: block; float: left; width: 100%; height: 82%; - padding: 1%; -} - -#slide-72.slide { - display: block; - padding: 0; - margin: 0; } - -#slide-72 .slide-header_1 { +#slide-53 .slide-header-1 { height: 4%; background: black; color: white; padding: 1% 2%; + display: block; + active: yes; + width: 100%; } - -#slide-72 .slide-header_2 { +#slide-53 .slide-header-2 { height: 4%; background: #191959; color: white; padding: 1% 4%; + display: block; + active: yes; + width: 100%; } - -#slide-72 .slide-header_3 { +#slide-53 .slide-header-3 { height: 4%; background: #262686; color: white; padding: 1% 6%; + display: block; + active: yes; + width: 100%; } - -#slide-72 .slide-header_4 { +#slide-53 .slide-header-4 { height: 6%; background: #3333B2; color: white; padding: 1% 2%; + display: block; + active: yes; + width: 100%; } - -#slide-72 .slide-footer_1 { - clear: both; - height: 6%; -} - -#slide-72 .slide-sidebar_1 { - float: left; - width: 20%; - height: 88%; +#slide-54.slide { + display: block; + width: 900px; + height: 700px; } - -#slide-72 .slide-content { +#slide-54 .slide-content { + display: block; float: left; width: 100%; - height: 82%; - padding: 1%; -} - -#slide-73.slide { - display: block; - padding: 0; - margin: 0; + height: 74%; } - -#slide-73 .slide-header_1 { +#slide-54 .slide-header-1 { height: 6%; background: white; color: black; padding: 1% 2%; border-top: 8px solid #9999D9; border-radius: 0; + display: block; + active: yes; + width: 100%; } - -#slide-73 .slide-header_2 { +#slide-54 .slide-header-2 { height: 6%; background: white; color: #9999D9; padding: 1% 4%; + display: block; + active: yes; + width: 100%; } - -#slide-73 .slide-header_3 { +#slide-54 .slide-header-3 { height: 6%; background: white; color: #9999D9; padding: 1% 6%; border-bottom: 8px solid #9999D9; + display: block; + active: yes; + width: 100%; } - -#slide-73 .slide-header_4 { +#slide-54 .slide-header-4 { height: 8%; background: white; color: #9999D9; padding: 1% 2%; -} - -#slide-73 .slide-footer_1 { - clear: both; - height: 6%; -} - -#slide-73 .slide-sidebar_1 { - float: left; - width: 20%; - height: 88%; -} - -#slide-73 .slide-content { - float: left; + display: block; + active: yes; width: 100%; - height: 74%; - padding: 1%; } - -#slide-74.slide { - display: block; - padding: 0; - margin: 0; +body #slide-55{ + background: radial-gradient(rgb(240, 240, 240), rgb(110, 110, 110)); } - -#slide-74 .slide-header_1 { - height: 6%; - background: white; - color: black; - padding: 1% 2%; - border-top: 8px solid #9999D9; - border-radius: 0; +#slide-55 .toc { + font-variant: small-caps; } - -#slide-74 .slide-header_2 { - height: 6%; - background: white; - color: #9999D9; - padding: 1% 4%; +#slide-55 .toc-chapter-emph { + border: 1px solid #4788B3; + border-radius: 5px; } - -#slide-74 .slide-header_3 { - height: 6%; - background: white; - color: #9999D9; - padding: 1% 6%; - border-bottom: 8px solid #9999D9; +#slide-55 .toc-section-emph { + border: 1px solid #4788B3; + border-radius: 5px; } - -#slide-74 .slide-header_4 { - height: 8%; - background: white; - color: #9999D9; - padding: 1% 2%; +#slide-55 .toc-subsection-emph { + border: 1px solid #4788B3; + border-radius: 5px; } - -#slide-74 .slide-footer_1 { - clear: both; - height: 6%; +#slide-55 .toc-slide-emph { + border: 1px solid #4788B3; + border-radius: 3px; } - -#slide-74 .slide-sidebar_1 { - float: left; - width: 20%; - height: 88%; +#slide-55.slide { + display: block; + width: 900px; + height: 700px; + border-radius: 10px; + background: green; + color: rgb(102,102,102); + font-size: 100%; + data-offset: 20; } - -#slide-74 .slide-content { +#slide-55 .slide-content { + display: block; float: left; - width: 100%; - height: 74%; + width: 80%; + height: 90%; + background: white; + color: rgb(102,102,102); padding: 1%; } - -#slide-75.slide { - display: block; - padding: 0; - margin: 0; -} - -#slide-75 .slide-header_1 { +#slide-55 .slide-header-1 { height: 10%; background: #3333B2; color: white; padding: 0; + display: block; + active: yes; + width: 100%; + border-radius: 10px 10px 0 0; } - -#slide-75 .slide-footer_1 { +#slide-55 .slide-footer-1 { + active: no; + display: block; clear: both; - height: 6%; + width: 100%; + height: 10%; + padding: 1% 2%; + background: #86B2CF; + color: white; } - -#slide-75 .slide-sidebar_1 { - float: left; +#slide-55 .slide-sidebar-1 { + position: L; width: 20%; - height: 90%; + padding: 1% 2%; background: #3333B2; -} - -#slide-75 .slide-content { + color: white; + border-radius: 0; + display: block; float: left; - width: 80%; + active: yes; height: 90%; - padding: 1%; } - -#slide-76.slide { - display: block; - padding: 0; - margin: 0; +#slide-55 .box { + display: inline-block; + font-variant: small-caps; + box-shadow: 7px 7px 5px rgba(200,200,200,0.3); + border-radius: 20px; } - -#slide-76 .slide-header_1 { - height: 6%; +#slide-55 .box-caption { + padding: 0 2%; + color: red; + border-bottom: 1px solid #4788B3; + display: inline-block; } - -#slide-76 .slide-footer_1 { - clear: both; - height: 6%; +#slide-55 .box-content { + padding: 0 2%; + font-size: 120%; } - -#slide-76 .slide-sidebar_1 { - float: left; - width: 20%; - height: 88%; +#slide-55 .note { + display: inline-block; + font-variant: small-caps; + box-shadow: 7px 7px 5px rgba(200,200,200,0.3); + border-radius: 20px; } - -#slide-76 .slide-content { - float: left; - width: 80%; - height: 88%; - padding: 1%; +#slide-55 .note-caption { + padding: 0 2%; + color: #4788B3; + border-bottom: 1px solid #4788B3; + display: inline-block; +} +#slide-55 .note-content { + padding: 0 2%; + font-size: 120%; +} +#slide-55 .figure { + font-variant: small-caps; + text-align: center; +} +#slide-55 .figure-caption { + font-size: 80%; + color: #4788B3; +} +#slide-55 .figure-content { + padding: 1% 5%; + box-shadow: 5px 5px 3px rgba(200,200,200,0.3); + border-radius: 15px; +} +#slide-55 .video { + font-variant: small-caps; + text-align: center; +} +#slide-55 .video-caption { + font-size: 80%; + color: #4788B3; } +#slide-55 .video-content { + padding: 1% 5%; + box-shadow: 5px 5px 3px rgba(200,200,200,0.3); + border-radius: 15px; +} \ No newline at end of file diff --git a/examples/getting-started/getting_started/index.html b/examples/getting-started/getting_started/index.html index c107c1e..c705fa3 100644 --- a/examples/getting-started/getting_started/index.html +++ b/examples/getting-started/getting_started/index.html @@ -11,155 +11,32 @@
-
+
-
-
+
+
-
- images/logo.png -
+ images/logo.png
-
-
a presentation by
+
+
a presentation by
-
-
+
+
- +
- -
-
-
The Acronym
- images/logo.png +
+
+ + images/logo.png

MaTiSSe.py means Markdown To Impressive Scientific Slides

@@ -174,287 +51,305 @@

All other elements, headers, footers, sidebars, etc…, are handled by MaTiSSe.py once you have setup the theme of your presentation.

-
-
Note
-
-

The real cool feature is that for setting up your theme, as the one of the presentation you are reading, you do not need to be a html-css guru!

-
+
+
Note
+
The real cool feature is that for setting up your theme, as the one of the presentation you are reading, you do not need to be a html-css guru!
-
-
Getting Started to play with MaTiSSe.py
-
Stefano Zaghi , John Doe
-
NERD Laboratory, The World Most Uncool Research Center , LOST Institute, Missed People Research Institute
-
- + - -
+

The elliptic theme of this slide is made just

-            ---theme_slide_global
-border-radius = 50%
----endtheme_slide_global
-
----theme_slide_content
-border-radius = 50%
----endtheme_slide_content
+            overtheme:
+  - slide:
+    - border-radius: '50%'
+    - data-offset: '200'
+    - content:
+      - border-radius: '50%'
+      - padding: '15% 20%'
+      - font-size: '180%'
 
           

This is not so complicated, rigth?

-
-
-
Why?
- images/logo.png +
+
+ + images/logo.png

There are tons of markdown to html presentation tools. Why yet another presenter?

Because other tools are designed for hackers for producing short, essentially not structured presentation. For high quality scientific presentations we need more, thus MaTiSSe.py born!

MaTiSSe.py should:

    -
  • use simple markdown source to produce high-quality html-based presentation;
  • -
  • support for structured, long presentations:
    • presentation metadata;
    • sections and subsections;
    • helpers, e.g TOC, countdown timer, navigation-controls, etc…;
  • -
  • support for non structured, short and impressive presentations;
  • -
  • support for LaTeX equations, both off and online;
  • -
  • support for scientific contents:
    • figure environment fully customizable;
    • note environment fully customizable;
    • code environment fully customizable;
  • -
  • support for multimedia contents:
  • -
  • support for easy theming:
    • the user should be able to easily create complex theme without any or with a very poor knowledge of html/css;
  • -
  • provide an output quality comparable to LaTeX-beamer standard, but:
    • be faster than LaTeX compilation;
    • be easier than LaTeX programming;
  • -
  • support cool effects as the modern prezi-like tools have.
  • +
  • use simple markdown source to produce high-quality html-based presentation;
  • +
  • support for structured, long presentations:
    • presentation metadata;
    • sections and subsections;
    • helpers, e.g TOC, countdown timer, navigation-controls, etc…;
  • +
  • support for non structured, short and impressive presentations;
  • +
  • support for LaTeX equations, both off and online;
  • +
  • support for scientific contents:
    • figure environment fully customizable;
    • note environment fully customizable;
    • code environment fully customizable;
  • +
  • support for multimedia contents:
  • +
  • support for easy theming:
    • the user should be able to easily create complex theme without any or with a very poor knowledge of html/css;
  • +
  • provide an output quality comparable to LaTeX-beamer standard, but:
    • be faster than LaTeX compilation;
    • be easier than LaTeX programming;
  • +
  • support cool effects as the modern prezi-like tools have.

If you like these features give a try to MaTiSSe.py, continue to read!

-
-
Getting Started to play with MaTiSSe.py
-
Stefano Zaghi , John Doe
-
NERD Laboratory, The World Most Uncool Research Center , LOST Institute, Missed People Research Institute
-
- + - -
-
-
For whom?
- images/logo.png +
+
+ + images/logo.png

Let me be clear: MaTiSSe.py is designed for scientific researchers, at least the brave ones, being used to write presentation with LaTeX-beamer or other not WYSIWYG presentation makers. LaTeX is great, but some drawbacks can be highlighted:

    -
  1. the compilation of an even small presentation can be time consuming;
  2. -
  3. LaTeX programming can be very inflexible frustrating the user;
  4. -
  5. the pdf output has great quality, but it behaves not so well with multimedia content;
  6. -
  7. it is rather complicated to introduce prezi-like effects.
  8. -
  9. themes handling is very cumbersome, i.e. inner/outer themes = a nightmare;
  10. +
  11. the compilation of an even small presentation can be time consuming;
  12. +
  13. LaTeX programming can be very inflexible frustrating the user;
  14. +
  15. the pdf output has great quality, but it behaves not so well with multimedia content;
  16. +
  17. it is rather complicated to introduce prezi-like effects.
  18. +
  19. themes handling is very cumbersome, i.e. inner/outer themes = a nightmare;

MaTiSSe.py is designed for scientific researchers that want retain the best of LaTeX-beamer and prezi worlds together overcoming the above listed drawbacks.

-
-
Note
-
-

MaTiSSe.py is not a wysiwyg tool: the content is separated from the layout exactly as in the LaTeX approach.

-
+
+
Note
+
MaTiSSe.py is not a wysiwyg tool: the content is separated from the layout exactly as in the LaTeX approach.
-
+
- Figure-images/types_of_editors.png -
copyrights of http://xkcd.com/
+ Figure-images/types_of_editors.png +
copyrights of http://xkcd.com/
-
-
Getting Started to play with MaTiSSe.py
-
Stefano Zaghi , John Doe
-
NERD Laboratory, The World Most Uncool Research Center , LOST Institute, Missed People Research Institute
-
- + - -
-
-
Requirements
- images/logo.png +
+
+ + images/logo.png
@@ -462,216 +357,103 @@
Python dependencies

MaTiSSe.py relies on other great python module for making its magic:

    -
  • Python 2.7+ or Python 3.x;
    • required modules that are into the standard library and should be present in any recent Python implementation:
      • argparse;
      • ast;
      • collections;
      • copy;
      • os;
      • re;
      • shutil;
      • sys;
    • required modules that are not into the standard library:
  • +
  • Python 2.7+ or Python 3.x;
    • required modules that are into the standard library and should be present in any recent Python implementation:
      • argparse;
      • ast;
      • collections;
      • copy;
      • os;
      • re;
      • shutil;
      • sys;
    • required modules that are not into the standard library:
External dependencies

MaTiSSe.py relies on other programs that are shipped within MaTiSSe.py itself. The author would like to thank the authors of these programs singularly:

    -
  • for prezi-like effects MaTiSSe.py relies on:
  • -
  • for LaTeX equation rendering MaTiSSe.py relies on:
  • -
  • for syntax highlighting MaTiSSe.py relies on:
  • -
  • for resetting the main CSS theme MaTiSSe.py relies on:
  • +
  • for prezi-like effects MaTiSSe.py relies on:
  • +
  • for LaTeX equation rendering MaTiSSe.py relies on:
  • +
  • for syntax highlighting MaTiSSe.py relies on:
  • +
  • for resetting the main CSS theme MaTiSSe.py relies on:
- - -
-
-
-
Table of Contents
- images/logo.png -
- -
-
Getting Started to play with MaTiSSe.py
-
Stefano Zaghi , John Doe
-
NERD Laboratory, The World Most Uncool Research Center , LOST Institute, Missed People Research Institute
-
- + - -
-
-
Manual Installation
- images/logo.png +
+
+ + images/logo.png
+
Manual Installation

MaTiSSe.py is a complex program built-up by many python modules. However, a one-file-script wrapper is provided.

The tree structure of the MaTiSSe.py project is the following:

@@ -692,207 +474,93 @@ 
External dependencies

and then make a link to the script where your environment can find it.

-
-
Note
-
-

PIP installation is under developing.

-
-
+
PyPi Installation
+

MaTiSSe.py is indexed on PyPi. You can easily install it by pip package manager:

+
+            [sudo] pip install matisse
+
+          

After installation, you are ready to convert your markdown source into impressive html presentation…

-
-
Getting Started to play with MaTiSSe.py
-
Stefano Zaghi , John Doe
-
NERD Laboratory, The World Most Uncool Research Center , LOST Institute, Missed People Research Institute
-
- + - - -
-
-
How it works?
- images/logo.png +
+
+ + images/logo.png

You write your presentation in markdown and MaTiSSe.py creates an impressive presentation even if you are a boring scientific researcher. MaTiSSe.py is a not-WYSISWYG command line, CLI, tool. Printing the main help message:

@@ -902,16 +570,14 @@
External dependencies

will echo:

-            usage: MaTiSSe.py [-h] [-v] [-i INPUT] [-o OUTPUT] [-hs STYLE.CSS]
+            usage: MaTiSSe.py [-h] [-v] [-i INPUT] [-o OUTPUT] [-t THEME] [-hs STYLE.CSS]
+                  [-s SAMPLE] [--toc-at-chap-beginning TOC-DEPTH]
                   [--toc-at-sec-beginning TOC-DEPTH]
                   [--toc-at-subsec-beginning TOC-DEPTH] [--print-preamble]
                   [--print-css] [--print-options] [--print-highlight-styles]
-                  [--verbose] [--indented] [--online-MathJax]
+                  [--print-themes] [--verbose] [--online-MathJax]
 
 MaTiSSe.py, Markdown To Impressive Scientific Slides
-
-optional arguments:
-  -h, --help            show this help message and exit
 ...
 
           
@@ -926,905 +592,951 @@
External dependencies
-
-
Getting Started to play with MaTiSSe.py
-
Stefano Zaghi , John Doe
-
NERD Laboratory, The World Most Uncool Research Center , LOST Institute, Missed People Research Institute
-
- + - -
-
-
How it works? (continued)
- images/logo.png +
+
+ + images/logo.png

To generate the presentation you are reading I have used the following command line arguments:

-            MaTiSSe.py -i getting_started.md --indented --toc-at-subsec-beginning 2
+            MaTiSSe.py -i getting_started.md --toc-at-sec-beginning 3
 
           

That means:

    -
  • process the source file getting_started.md;
  • -
  • indent the html output, --indented;
  • -
  • insert a TOC at the beginning of each subsection with a depth of 2, --toc-at-subsec-beginning 2;
  • +
  • process the source file getting_started.md;
  • +
  • insert a TOC at the beginning of each section with a depth of 3, --toc-at-sec-beginning 3;

MaTiSSe.py will create a directory, named getting_started, into which the compiled html presentation is placed.

-
-
Note
-
-

For a comprehensive explanation of the CLI arguments see the main documentation at the official GitHub repository

-
+
+
Note
+
For a comprehensive explanation of the CLI arguments see the main documentation at the official GitHub repository

Now you must learn how to write your markdown source… Writing a presentation with MaTiSSe.py means:

    -
  1. write the contents in (extended) markdown syntax;
  2. -
  3. define the theme of the presentation.
  4. +
  5. write the contents in (extended) markdown syntax;
  6. +
  7. define the theme of the presentation.

In both the steps MaTiSSe.py is strongly friendly.

Firstly we see the MaTiSSe.py flavored markdown syntax.

- - -
-
-
-
Table of Contents
- images/logo.png -
- -
-
Getting Started to play with MaTiSSe.py
-
Stefano Zaghi , John Doe
-
NERD Laboratory, The World Most Uncool Research Center , LOST Institute, Missed People Research Institute
-
- + - -
-
-
Presentation structuring
- images/logo.png +
+
+ + images/logo.png
-

MaTiSSe.py supports the structuring of long presentation. As a matter of fact, for long scientific presentation, it is often useful to structure the talk into sections and/or subsections. Therefore, after the preamble, where typically the user defines theme and metadata, the presentation structuring starts:

+

MaTiSSe.py supports the structuring of long presentation. As a matter of fact, for long scientific presentation, it is often useful to structure the talk into chapters, sections and/or subsections. Therefore, after the preamble, where typically the user defines theme and metadata, the presentation structuring starts:

-            # First section
-## First subsection of first section
-### First slide of first subsection of first section
+            # First chapter
+## First section
+### First subsection of first section
+#### First slide of first subsection of first section of first chapter
 
           
-

As you can see defining a section/subsection/slide is very simple: just use the h1/h2/h3 headings of markdown, respectively. The titles of these structures are available as metadata (e.g. sectiontitle, sectionnumber, slidetitle, etc…) and can be used inside other elements.

-

Note that if you define at least one section all other subsections/slides before this section are omitted:

+

As you can see defining a chapter/section/subsection/slide is very simple: just use the h1/h2/h3/h4 headings of markdown, respectively. The titles of these structures are available as metadata (e.g. chaptertitle, sectiontitle, sectionnumber, slidetitle, etc…) and can be used inside other elements.

+

Note that if you define at least one chapter all other sections/subsections/slides before this section are omitted:

-            ## Bad placed subsection
-### Bad placed slide
-# First section
-## First subsection of first section
-### First slide of first subsection of first section
+            ### Bad placed subsection
+#### Bad placed slide
+
+# First chapter
+#### First slide of first chapter
 
           
-

The same is valid if at least one subsection is defined. If --verbose is used this kind of issues are highlighted into the standard output warnings, but the compilation is still completed.

+

The same is valid if at least one section or subsection is defined. If --verbose is used this kind of issues are highlighted into the standard output warnings, but the compilation is still completed.

At this point, it is useful to define the MaTiSSe.py universe

-
-
Getting Started to play with MaTiSSe.py
-
Stefano Zaghi , John Doe
-
NERD Laboratory, The World Most Uncool Research Center , LOST Institute, Missed People Research Institute
-
- + - -
-
-
Presentation structuring (continued)
- images/logo.png +
+
+ + images/logo.png

The universe of MaTiSSe.py is composed by an infinite canvas over which the presentation slides are rendered:

    -
  • presentation with its own options, having:
    • one canvas with its own options over wich the slides are rendered:
    • N slide(s) with their own options; each slide has:
      • $N_H$headers, with $N_H \in [0,\infty]$;
      • $N_F$footers, with $N_F \in [0,\infty]$;
      • $N_L$ left sidebars, with $N_L \in [0,\infty]$;
      • $N_R$ right sidebars, with $N_R \in [0,\infty]$;
      • 1 main content.
  • +
  • presentation with its own options, having:
    • one canvas with its own options over wich the slides are rendered:
    • N slide(s) with their own options; each slide has:
      • $N_H$headers, with $N_H \in [0,\infty]$;
      • $N_F$footers, with $N_F \in [0,\infty]$;
      • $N_L$ left sidebars, with $N_L \in [0,\infty]$;
      • $N_R$ right sidebars, with $N_R \in [0,\infty]$;
      • 1 main content.
-
+
- Figure-images/matisse-universe-no_bg.png -
MaTiSSe.py Universe
+ Figure-images/matisse-universe-no_bg.png +
MaTiSSe.py Universe
-
-
Note
-
-

A slide has always one content element whereas, headers, footers and sidebars are optional.

-

The headers, footers and sidebars are designed to be theme-containers rather than directly accessible containers. This means that the contents of these slide elements is defined by the theme setting, whereas the content element is the one that is directly accessed and where you put your slide contents.

-
+
+
Note
+
A slide has always one content element whereas, headers, footers and sidebars are optional.

The headers, footers and sidebars are designed to be theme-containers rather than directly accessible containers. This means that the contents of these slide elements is defined by the theme setting, whereas the content element is the one that is directly accessed and where you put your slide contents.

-
-
-
Getting Started to play with MaTiSSe.py
-
Stefano Zaghi , John Doe
-
NERD Laboratory, The World Most Uncool Research Center , LOST Institute, Missed People Research Institute
-
- - -
-
Getting Started to play with MaTiSSe.py
-
Stefano Zaghi , John Doe
-
NERD Laboratory, The World Most Uncool Research Center , LOST Institute, Missed People Research Institute
-
- -