~~USETHEME:landing~~
~~NOTOC~~
<container>
===== The landing pages must be kept clean. =====
  * Use short sentences
  * Clear and easy language. 
  * Meta Tags give good and correct signals to Search Engines
    * Use a **title** that reflects the page content, ideally the H1 of the page or the actual window title. Will show in Google, Facebook, Twitter as headline.
    * **Description** is a rephrase of existing page content. Will appear on Google, Facebook, Twitter as summary.
    * Link the **share-image** for open graph and twitter cards. When shared it looks more engaging that way.
    * **Keywords** have to be words used in the page, which have relevance to the topic. Keywords are not interpreted by major search engines, but meta-search-engines.
  * Use boostrap containers to visually separate context and create easy bites of information.
    * Interrupt the white desert with a ribbon where applicaple
    * Best use ribbon for a very relevant section of the page
    * keep the word-count low and the significance high.
  * Keep the footer clean. Only a few helpful links is enough. Imprint is the bare minumum.
  * Use H1 for the first headline - it will be prefixed to the page title.
    * Use H2 for later sections and when nesting, increment accordingly
    * Do not used headlines "just for the look".
  * Introduce classes in the template CSS where adjustments / special cases are needed
    * Do not put styling elements into the wikitext
    * Do not create "more margin" with extra newlines. Create a class in the template.
  * Update translations immediately.

</container>

<container>
===== Container =====
Every vertical visual section goes into a <container> Tag.\\
Containers cannot be nested.\\
This is a regular container.\\
Containers can be fluid (full width) or not.

Inside containers you can stuff whatever you want.
Give a class to a special container so you can style the content individually - or use a predefined class.
</container>

<container>
<code>
<container>
  Your stuff here
</container>
</code>
</container>


<container class="lpd-ribbon">
===== Ribbon =====
This is a regular ribbon container
</container>

<container>
<code>
<container class="lpd-ribbon">
  Your stuff here
</container>
</code>
</container>

<container fluid="1" class="lpd-ribbon">
===== Fluid Ribbon =====
This is a fluid ribbon container
</container>

<container>
<code>
<container fluid="1" class="lpd-ribbon">
  Your stuff here
</container>
</code>
</container>

<container fluid="1" class="text-center">
===== Center content =====
You can use the text-center class from Bootstrap to center the content of a container.
</container>

<container>
<code>
<container fluid="1" class="text-center">
  Your stuff here
</container>
</code>
</container>

<container class="ribbon">
===== Custom Styling =====
When you create custom stylesheets make sure your classname is unique.\\
**Styles are located in the theme "landing".**
</container>

<container>
<code>
<container class="very-unique-class">
  ==== Your stuff here ====
  
  Foo bar
</container>

.very-unique-class p {
  font-size: 200px;
  color: #deadee;
}
</code>
</container>