Changes

Page history
Update Slide Layout authored by Eric Hauke's avatar Eric Hauke
Show whitespace changes
Inline Side-by-side
Slide-Layout.md
View page @ 9a32b808
TODO: Move content from Eric's Wiki repo [[_TOC_]]
\ No newline at end of file
# Slide Format
## Headers
Decker uses [markdown headings](https://www.markdownguide.org/basic-syntax/) (level 1 to 3) to structure slides.
| MD Code | Level |Description | Example |
| --------| ------- |------------------------------------------------------- | --------------- |
| `#` | level 1 |Creates a new slide. Precedes the titel slide. | ```# Titel``` |
| `##` | level 2 |Creates a new paragrapph. Precedes the paragraph title. | ```## Titel``` |
| `###` | level 3 |Starts a new line. | ```### Titel``` |
**Example:**
```markdown
# Title
## Paragrapgh
### Line
```
<img src="uploads/f7765dd59a2405a48db490e52ed1e7c2/image.png" width=20% height=20%>
## Column Layout
Add columns to slides by adding `{.columns}` to the slide header, and by defining columns using level-2 headers (##) with the position of each column noted as `{.left}`, `{.center}`, `{.right}`, `{.top}` or `{.bottom}`.
For example:
```markdown
# Multicolumn Slides {.columns}
## Top Column {.top}
This spans across the top of all columns.
## Left Column{.left}
1
## Center Column {.center}
2
## right Column {.right}
3
## Bottom Column
This spans across the bottom of all columns
```
<img src="uploads/0cb7fd0fcdd09b4ab6370a7d9f493ec1/image.png" width=60% height=60%>
## Split
To split the layout of a slide into two columns at your point of choosing add the `{.split}` parameter to a level 2 [header](https://gitlab2.informatik.uni-wuerzburg.de/s334445/decker-struktur-wiki/-/wikis/Slide-Layout#headers).
```markdown
# Haskell
##
This is what Haskell sounds and looks like.
## {.split .example}
Pronounciation: ![](audio/haskell.mp3){.controls}
## {.example}
Haskell logo: ![](img/haskell.png){width=60%}
```
<img src="uploads/3e00de665de92340597b2ecc806e3ade/image.png" width=60% height=60%>
## Grid Layout
Use a grid layout in slides by adding `{.grid}` to the slide [header](), and by defining columns using level-2 headers (##) with the position of each column noted as `{.top-left}`,`{.top}`,`{.top-right}`,`{.left}`, `{.center}`,`{.right}`,`{.bottom-left}`,`{.bottom}`, or `{.bottom-right}`.
```markdown
# Grid Layout {.grid}
## One {.top-left}
## Two {.top}
## Three {.top-right}
## Four {.left}
## Five {.center}
## Six {.right}
## Sieben {.bottom-left}
## Acht {.bottom}
## Neun {.bottom-right}
```
<img src="uploads/4129f7b6f8b493c93170ca417a7a89ac/image.png" width=70% height=70%>
## Vertical Slides
Add slides below the current slide by adding `{.sub}` to the slide header. Navigate to these slides using the `↓` key or by pressing the space-bar. The yaml option `vertical-slides` defaults to `true`.
<img src="uploads/e230963071b27fa9bf2be8d5ef2feaa2/image.png" width=60% height=60% >
If [vertical slides](https://gitlab2.informatik.uni-wuerzburg.de/decker/decker/-/wikis/WIP:-List-of-all-meta-options) are in use the <kbd>SPACE</kbd> should be used to navigate to the next slide.
## Custom Title Slide
Example:
```
affiliation: JMU Würzburg
author: Chair of Human-Computer Interaction
title: Title Header
subtitle: Customizable title slide
template:
title-page:
affiliation-logo: 'img/logo.png'
teaser-img: 'img/hci.png'
banner: 'img/unilogoc4gross.png'
```
![Screenshot_2020-04-29_at_13.07.52](uploads/bb70a1bc2f69a3a96f37026f6072ecff/Screenshot_2020-04-29_at_13.07.52.png)
## Background content
You can set images or color as your slide background.
The last image in a level 1 `#` [header]() is promoted to the slide background.
To color your background add `{style="background-color:COLOR"}`. COLOR is a standin for any other color you wish to use e.g. `green`.
**Example:**
```
# ![](/img/grid.png){size="cover"}
```
<img src="uploads/bf246de252d09e770362e04ed4809865/image.png" width=70% height=70%>
# Element Layout
## Fragments
Adding the `{.fragment}` parameter to [headers](https://gitlab2.informatik.uni-wuerzburg.de/s334445/decker-struktur-wiki/-/wikis/Slide-Layout#headers) allows for a divded slides into segments, which get revealed sequentially.
<img src="" width=80% height=80%>
## Lists
### Enumerated Lists
```
- Take out trash
- Vacuum
- Bedrooms
- Wash dishes
```
### Ordered Lists
```
1. bread
2. milk
3. sugar
4. flour
```
### Task Lists (WIP 🚧)
### Fragmented Lists
This list will sequentially reveal its items. Similar to a segment marked with *.fragment*, an item will be revealed on a left mouse button press.
```
> - Python
- JavaScript
- Java
- C#
- C++
```
<img src="" width=50% height=50%>
### Sequential Lists
Use the `(@)` symbol to automatically number items in a list. Numbered items do not need to be in a single list.
```
(@) *This method of listing items has many advantages, especially if you want to cite sources. Some of them are listed here.*
(@) *It is easy to use, expand and edit because it automatically keeps track of all your items and numbers them in order of appearance.*
Additionally:
(@) *It does’t care about line breaks or formatting and continues your list. So you can put additional information between your items.*
# New Slide
## sequential list continuation
(@) *It even continues your list throughout your whole presentation so every source has its corresponding number.*
(@) Cite All The Sources [digital image]. (2020). Retrieved from http:/cheezburger.com/6079429632
```
<img src="uploads/b1e36ff5df940534f8fff386d548d577/image.png" width=65% height=65%>
<img src="uploads/7c416b906441d02f680bdf0326e94bbf/image.png" width=65% height=65%>
## Tables
Decker uses the [markdown syntax for creating tables](https://www.markdownguide.org/extended-syntax/#tables).
Example:
``` {.markdown}
Assignment List
| Week | Topic | Reading | Book |
| ---: | :------------------------------ | :------: | ------- |
| 1 | Course Introduction | Chapt. 1 | Physics |
| 2 | Inertia, Equilibrium, Kinematics | Chapt. 2-3 | Physics |
| 3 | Vectors, Momentum, Energy | Chapt. 4-8 | Physics |
```
<img src="uploads/822cf1cc47a4afe25712c4de2112bec0/image.png" width=60% height=60%>
## Block Quotes
To quote a block of text, preceed each line with a `>` character:
```markdown
> This is a block quote.
>
> > A block quote within a block quote.
```
<img src="uploads/380085700b2ce569165bd3fb077dc9f6/image.png" width=60% height=60%>
\ No newline at end of file