screenshots: add press articles and embedded videos

Author: davvid

cola.css

@@ -142,9 +142,9 @@ ul {
 
 .caption {
     font-variant: small-caps;
-    margin-bottom: 4em;
-    text-align: left;
-    margin-left: 20%;
+    margin-top: 4em;
+    margin-bottom: 1em;
+    text-align: center;
 }
 
 .downloads-box {

screenshots.html

@@ -1,40 +1,126 @@
 ---
-title: "git-cola: Screenshots"
+title: "git-cola: Articles, Screenshots and Videos"
 layout: headerbar
 ---
 <div class="page">
 
-    <div class="screenshot">
-        <a href="images/screenshot-imagediff.png">
-        <img src="images/screenshot-imagediff.png" alt="git cola imagediff"></a>
-    </div>
-    <div class="caption">Image Diff</div>
-
-    <div class="screenshot">
-        <a href="images/main.png">
-        <img src="images/main.png" alt="git cola"></a>
-    </div>
-    <div class="caption">Keyboard-Driven Diff Editor and UI
-        (<a href="share/doc/git-cola/hotkeys.html">Hotkeys Cheatsheat</a>)
-    </div>
-
-    <div class="screenshot">
-        <a href="images/screenshot-dark-linux.png">
-        <img src="images/screenshot-dark-linux.png" alt="git cola dark"></a>
-    </div>
-
-    <div class="screenshot">
-        <a href="images/screenshot-main-linux.png">
-        <img src="images/screenshot-main-linux.png" alt="git cola"></a>
-    </div>
-    <div class="caption">
-        Made using Python and Qt with Linux, BSD, MacOS and Windows support
-    </div>
-
-    <div class="screenshot">
-        <a href="images/dag.png">
-        <img src="images/dag.png" alt="git dag"></a>
-    </div>
-    <div class="caption">git dag: Advanced DAG Visualizer</div>
+<h2 align="center" style="font-variant: small-caps"><em>Articles</em></h2>
+
+<div width="60%" style="list-style-type: circle; margin-left: 20%">
+<ul>
+<li>
+    <a href="https://opensource.com/article/20/3/git-cola">
+        Make Git easy with Git Cola</a> by
+    <a href="https://opensource.com/users/seth">Seth Kenlon</a>
+</li>
+<li>
+    <a href="https://cerebrux.net/2013/02/07/github-git-cola-gui-step-by-step-management-of-your-code/">
+        Step by step management of Github with Git Cola GUI</a>
+</li>
+<li>
+    <a href="https://www.thegeekdiary.com/git-cola-a-powerful-git-gui-with-a-slick-and-intuitive-user-interface/">
+        Git Cola: A powerful Git GUI with a slick and intuitive user interface</a>
+</li>
+<li>
+    <a href="https://commandmasters.com/commands/git-cola-common/">
+        Using Git Cola (with examples)</a>
+</li>
+</ul>
+</div>
+<br>
+
+<div>
+<h2 align="center" style="font-variant: small-caps"><em>Screenshots</em></h2>
+</div>
+
+<div class="caption" style="margin-top: 2em">Image Diff</div>
+<div class="screenshot">
+    <a href="images/screenshot-imagediff.png">
+    <img src="images/screenshot-imagediff.png" alt="git cola imagediff"></a>
+</div>
+
+<div class="caption">Keyboard-Driven Diff Editor and UI
+    (<a href="share/doc/git-cola/hotkeys.html">Hotkeys Cheatsheat</a>)
+</div>
+<div class="screenshot">
+    <a href="images/main.png">
+    <img src="images/main.png" alt="git cola"></a>
+</div>
+
+<div class="caption">
+    Made using Python and Qt with Linux, BSD, MacOS and Windows support
+</div>
+<div class="screenshot">
+    <a href="images/screenshot-dark-linux.png">
+    <img src="images/screenshot-dark-linux.png" alt="git cola dark"></a>
+</div>
+
+<div class="screenshot">
+    <a href="images/screenshot-main-linux.png">
+    <img src="images/screenshot-main-linux.png" alt="git cola"></a>
+</div>
+
+<div class="caption">git dag: Advanced DAG Visualizer</div>
+<div class="screenshot">
+    <a href="images/dag.png">
+    <img src="images/dag.png" alt="git dag"></a>
+</div>
+<br>
+
+<br>
+<h2 align="center" style="font-variant: small-caps">
+<em>Videos</em>
+</h2>
+
+<div class="caption" style="margin-top: 2em">
+    <a href="https://www.youtube.com/watch?v=CIHZXHHvqTo">
+        Tutorialzinho (não tão bom) sobre Git Cola</a> by
+    <a href="https://www.youtube.com/@Andre-LA">André-LA</a>
+</div>
+<div class="screenshot">
+    <iframe
+        src="https://www.youtube-nocookie.com/embed/CIHZXHHvqTo"
+        width="60%" height="60%"
+        title="Tutorialzinho (não tão bom) sobre Git Cola"
+        frameborder="0"
+        allow="clipboard-write; encrypted-media; picture-in-picture; web-share"
+        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
+    </iframe>
+</div>
+
+<div class="caption">
+    <a href="https://www.youtube.com/watch?v=BRxGo8Z94hc">
+        Git Cola Relocatable Demonstration (2018)</a> by
+    <a href="https://www.youtube.com/@brlin">林博仁Buo-ren, Lin</a>
+</div>
+<div class="screenshot">
+    <iframe
+        src="https://www.youtube-nocookie.com/embed/BRxGo8Z94hc"
+        width="60%" height="60%"
+        title="Git Cola Relocatable Demonstration (2018)"
+        frameborder="0"
+        allow="clipboard-write; encrypted-media; picture-in-picture; web-share"
+        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
+    </iframe>
+</div>
+
+<div class="caption">
+    <a href="https://www.youtube.com/watch?v=a5TAS25aud4">
+        Git Cola Installation on Ubuntu 16.04 (2017)</a> by
+    <a href="https://www.youtube.com/@itechnocare8425">ITechno Care</a>
+</div>
+<div class="screenshot">
+    <iframe
+        src="https://www.youtube-nocookie.com/embed/a5TAS25aud4"
+        width="60%" height="60%"
+        title="Git Cola Installation on Ubuntu 16.04 (2017)"
+        frameborder="0"
+        allow="clipboard-write; encrypted-media; picture-in-picture; web-share"
+        referrerpolicy="strict-origin-when-cross-origin"
+        allowfullscreen>
+    </iframe>
+</div>
+
+<div class="caption">&nbsp;</div>
 
 </div>