Updated GitPitch introductory presentation.

PITCHME.md

@@ -1,117 +1,207 @@
+---?image=assets/images/lets-get-started.jpg&size=auto 90%&color=black
 @title[Introduction]
 
-# Git<span class="gold">Pitch</span>
+---?image=assets/images/face.jpg&position=left&size=55% 100%&color=#020203
+@title[Get Ready]
+
+#### @size[0.6em](Get ready for some)
 
-#### Markdown Presentations For Everyone on Git
 <br>
+
+## @color[#e49436](Git)Pitch
+#### Presentation @fa[magic] @color[#e49436](Magic)
+
+---?image=assets/images/git.svg&opacity=10
+@title[Enhanced GFM]
+
+#### @size[0.6em](Using enhanced)
+
+<br>
+
+## @fa[github fa-1x](GitHub)
+#### Flavored @color[#e49436](Markdown)
+
+---?color=#e49436
+@title[For Everyone on Git]
+
+#### @size[0.8em](Available to @color[black](everyone) on)
+
+<br>
+
+### @fa[github fa-3x], @fa[gitlab fa-3x], and @fa[bitbucket fa-3x].
+
 <br>
-<span class="byline">[ GitHub, GitLab, Bitbucket, GitBucket, Gitea, Gogs ]</span>
 
 ---
+@title[Rich Content Slides]
 
-@title[PITCHME.md]
+#### Enjoy Rich Content Slides
 
-#### GitPitch turns <span class="gold">PITCHME.md</span> into
-#### interactive,
-#### online and offline slideshows.
-<br>
-<span class="aside">Just like this one...</span>
+@div[left-50]
+![](assets/images/de-los-muertos.jpg)
+@divend
+
+@div[right-50]
+![](assets/images/daftpunkocat.gif)
+@divend
 
 ---
+@title[Ideas Step-by-Step]
 
-#### No more <span class="gray">Keynote</span>.
-#### No more <span class="gray">Powerpoint</span>.
-<br>
-#### Just <span class="gold">Markdown</span>.
-#### Then <span class="gold">Git-Commit</span>.
+#### Present Your Ideas Step-by-Step
 
----?code=assets/md/hello.md&title=Step 1. PITCHME.md
+@div[left-50]
 
-<br>
-#### Create slideshow content using GitHub Flavored Markdown in your favorite editor.
+<br><br>
 
-<span class="aside">It's as easy as README.md with simple slide-delimeters (---)</span>
+@ul
+- There are
+- Many reasons
+- To @fa[heart]
+- [GitPitch](https://gitpitch.com)
+- Presentations
+@ulend
+
+@divend
+
+@div[right-50]
+
+![](assets/images/daftpunkocat.gif)
+
+@divend
+
+---?image=assets/images/stormtroopers.jpg&size=55% 55%
+@title[Size & Scale Images]
+
+@css[title-top-right](Size & Scale Image Backgrounds)
+
+---?image=assets/images/stormtroopers.jpg&size=35% 35%&color=#297EA3
+@title[Color Backgrounds]
+
+@css[title-top-right](Add Color Backgrounds)
+
+---?image=assets/images/sunset.jpg
+@title[Image Backgrounds]
+
+@css[title-top-right](Or Go FullScreen)
+
+---?image=assets/images/sunset.jpg&opacity=40
+@title[Image Opacity]
+
+@css[title-top-right](With Optional Opacity)
 
 ---
+@title[Embed Video]
 
-@title[Step 2. Git-Commit]
+@css[title-top-right](Embed Video)
 
-### <span class="gold">STEP 2. GIT-COMMIT</span>
-<br>
+![Gravity](https://player.vimeo.com/video/125471012)
 
-```shell
-$ git add PITCHME.md
-$ git commit -m "New slideshow content."
-$ git push
+---?video=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
+@title[Fullscreen Video]
 
-Done!
-```
+@css[title-top-right](Use Theatre Mode)
 
-@[1](Add your PITCHME.md slideshow content file.)
-@[2](Commit PITCHME.md to your local repo.)
-@[3](Push PITCHME.md to your public repo and you're done!)
-@[5](Supports GitHub, GitLab, Bitbucket, GitBucket, Gitea, and Gogs.)
+---?image=assets/images/css.jpg&opacity=20
+@title[Code Talking]
+
+### Let your
+## @css[shoutout](Code)
+#### Do The Talking
+
+---?code=src/go/server.go&lang=golang&color=black&title=Live Code Presenting
+@title[Live Code Presenting]
+
+@[1](Step through source code as if you were still inside your IDE.)
+@[3-6](Without ever leaving your slideshow.)
+@[9-13](Using GitPitch code-presenting with (optional) annotations.)
+@[19-28](With support for markdown code blocks, repository source files, and GitHub GISTS.)
 
 ---
+@title[Stunning Charts]
 
-@title[Step 3. Done!]
+@css[title-top-right](Add Stunning Charts)
 
-### <span class="gold">STEP 3. GET THE WORD OUT!</span>
 <br>
-![GitPitch Slideshow URLs](assets/images/gp-slideshow-urls.png)
-<br>
-<br>
-#### Instantly use your GitPitch slideshow URL to promote, pitch or present absolutely anything.
+
+<canvas data-chart="line">
+<!--
+{
+ "data": {
+  "labels": ["January"," February"," March"," April"," May"," June"," July"],
+  "datasets": [
+   {
+    "data":[65,59,80,81,56,55,40],
+    "label":"My first dataset","backgroundColor":"rgba(20,220,220,.8)"
+   },
+   {
+    "data":[28,48,40,19,86,27,90],
+    "label":"My second dataset","backgroundColor":"rgba(220,120,120,.8)"
+   }
+  ]
+ },
+ "options": { "responsive": "true" }
+}
+-->
+</canvas>
 
 ---
+@title[Beautiful Math]
 
-@title[Slide Rich]
+@css[title-top-right](And Beautiful Math)
 
-### <span class="gold">Slide Rich</span>
+`\[
+\left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq
+ \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
+\]`
 
-#### Code Presenting for Blocks, Files, and GISTs
-#### Image, Video, Chart, and Math Slides
-#### Multiple Themes with Easy Customization
-<br>
-#### <span class="gold">Plus collaboration is built-in...</span>
-#### Your Slideshow is Part of Your Project
-#### Under Git Version Control within Your Git Repo
+---?image=assets/images/demand-more.jpg
+@title[You want MORE?]
 
----
+@css[title-top-right](MORE! You want MORE?)
 
-@title[Feature Rich]
+---?color=#e49436
+@title[GitPitch Pro]
 
-### <span class="gold">Feature Rich</span>
+# @size[3.5em](OK)
 
-#### Present Online or Offline
-#### With Speaker Notes Support
-#### Print Presentation as PDF
-#### Auto-Generated Table-of-Contents
-#### Share Presentation on Twitter or LinkedIn
+---?image=assets/images/think-type-see.png
+@title[Think-Type-See-It]
 
----
+---?image=assets/images/go-pro-desktop.jpg
+@title[GitPitch Desktop]
 
-### <span class="gold">GitPitch Pro - Now Live!</span>
+[@size[0.4em](click here to learn more)](https://gitpitch.com/desktop)
+<br><br>
 
-<br>
-<div class="left">
-    <i class="fa fa-user-secret fa-5x" aria-hidden="true"> </i><br>
-    <a href="https://gitpitch.com/pro-features" class="pro-link">
-    More details here.</a>
-</div>
-<div class="right">
-    <ul>
-        <li>Private Repos</li>
-        <li>Private URLs</li>
-        <li>Password-Protection</li>
-        <li>Image Opacity</li>
-        <li>SVG Image Support</li>
-    </ul>
-</div>
+---?image=assets/images/go-pro-security.jpg
+@title[GitPitch Security]
 
----
+[@size[0.4em](click here to learn more)](https://gitpitch.com/security)
+<br><br>
 
-### Go for it.
-### Just add <span class="gold">PITCHME.md</span> ;)
-<br>
-[Click here to learn more @fa[external-link fa-pad-left]](https://github.com/gitpitch/gitpitch/wiki)
+---?image=assets/images/go-pro-surveys.jpg
+@title[GitPitch Surveys]
+
+[@size[0.4em](click here to learn more)](https://gitpitch.com/surveys)
+<br><br>
+
+---?image=assets/images/css.jpg&opacity=20
+@title[GitPitch Tutorial]
+
+#### @size[0.5em](@color[gray](click to view a very short tutorial))
+### [GitPitch In-60-Seconds](https://github.com/gitpitch/gitpitch/wiki)
+
+---?image=assets/images/css.jpg&opacity=20
+@title[GitPitch Wiki]
+
+#### @size[0.5em](@color[gray](click to learn how-to on))
+### [The GitPitch Wiki](https://github.com/gitpitch/gitpitch/wiki)
+
+---?image=assets/images/css.jpg&opacity=20
+@title[Your Ideas to Presentation]
+
+#### @size[0.5em](@color[gray](for more visit @))
+## git@css[gold](pitch).com
+
+#### The Fastest Way from Idea to Presentation

PITCHME.yaml

@@ -1,6 +1,19 @@
+
 theme : night
-theme-override : assets/css/PITCHME.css
-background : assets/images/wallpaper.jpg
+
+layout : center-right
+
 logo : assets/images/logo.png
+
+theme-override : assets/css/PITCHME.css
+
 transition : none
+
+highlight : ir-black
+
+charts : true
+
+mathjax : TeX-AMS_HTML-full
+
 published : true
+

assets/css/PITCHME.css

@@ -1,69 +1,78 @@
+/*
+ * GitPitch Custom CSS Styling
+ *
+ * For details, visit Wiki:
+ * https://github.com/gitpitch/gitpitch/wiki/Slideshow-Custom-CSS
+ */
+
+.title-top-right {
+    position: fixed;
+    top: 70px;
+    right: 10px;
+    margin: 0 0 20px 0 !important;
+    color: #eee !important;
+    font-weight: normal !important;
+    line-height: 1.2 !important;
+    letter-spacing: -0.03em !important;
+    font-family: "Montserrat", Impact, sans-serif !important;
+}
+
+.reveal p span.slide-title {
+  padding: 4px 15px;
+  border-radius: 15px;
+  color: #eee !important;
+  font-weight: normal !important;
+  line-height: 1.2 !important;
+  letter-spacing: -0.03em !important;
+  font-family: "Montserrat", Impact, sans-serif !important;
+}
+
+.reveal .slides section .code-presenting-annotation {
+  color: white !important;
+  background: #1f1c18;
+  padding: 1px 15px;
+  border-radius: 15px;
+  opacity: 0.75 !important;
+  font-size: 50% !important;
+}
+
+/*
+ul {
+  list-style-type: disc !important;
+  list-style-position: inside !important;
+}
+
+li {
+   margin:0 0 10px 0;
+}
+*/
+
+#gp-logo img {
+  max-height: 1.5em;
+  max-width: none;
+}
+
 .gold {
   color: #e49436;
 }
 
-.gray {
+.shoutout {
+  color: #e49436;
+  font-size: 1.5em !important;
+}
+
+.reveal pre {
+  width: 100%;
+  box-shadow : none;
+}
+
+.reveal pre code {
+  font-size: 1.2em;
+  line-height: 1.2;
+  border-radius: 10px;
+}
+
+.reveal .slides section .code-presenting-annotation {
   color: gray;
 }
 
-span.byline, span.aside {
-  color: #bbb;
-}
-
-span.byline {
-  font-size: 80%;
-}
-
-span.aside {
-  font-size: 0.7em;
-  font-style: italic;
-}
-
-.reveal section img {
-  border: 0;
-  box-shadow: none;
-  background: none;
-}
-
-.reveal section a {
-  color: #e49436;
-  text-decoration: underline;
-}
-
-.reveal section a:hover {
-  color: #e7ad52;
-}
-
-.fa-pad-left {
-  margin-left: 10px;
-}
-
-.reveal p span.slide-title {
-  color: #e49436;
-  font-size: 1.55em;
-  margin: 0 0 60px 0;
-  font-family: "Montserrat", Impact, sans-serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: -0.03em;
-  text-transform: none;
-  text-shadow: none;
-  word-wrap: break-word;
-  display: block;
-}
-
-.reveal div.left {
-    float: left;
-    z-index: -10;
-    width: 45%;
-}
-
-.reveal div.right {
-    float: right;
-    z-index: -10;
-    width: 55%;
-}
-
-.reveal a.pro-link {
-    font-size: 0.5em;
-}