prettify css add support for wrap images and img/art grids

24 files changed, 40 insertions, 34 deletions

diff --git a/blog/dst/a/asi_nomas_esta_quedando.html b/blog/dst/a/asi_nomas_esta_quedando.html
index d8cdfc0..e66162c 100644
--- a/blog/dst/a/asi_nomas_esta_quedando.html
+++ b/blog/dst/a/asi_nomas_esta_quedando.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Así nomás está quedando el página -- Luévano's Blog"/>
diff --git a/blog/dst/a/el_blog_ya_tiene_timestamps.html b/blog/dst/a/el_blog_ya_tiene_timestamps.html
index 9136a86..acb94fa 100644
--- a/blog/dst/a/el_blog_ya_tiene_timestamps.html
+++ b/blog/dst/a/el_blog_ya_tiene_timestamps.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Así es raza, el blog ya tiene timestamps -- Luévano's Blog"/>
diff --git a/blog/dst/a/first_blog_post.html b/blog/dst/a/first_blog_post.html
index 0acb615..388d703 100644
--- a/blog/dst/a/first_blog_post.html
+++ b/blog/dst/a/first_blog_post.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="This is the first blog post, just for testing purposes -- Luévano's Blog"/>
diff --git a/blog/dst/a/git_server_with_cgit.html b/blog/dst/a/git_server_with_cgit.html
index 17fe0e4..65dbb4f 100644
--- a/blog/dst/a/git_server_with_cgit.html
+++ b/blog/dst/a/git_server_with_cgit.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Create a git server and setup cgit web app (on Nginx) -- Luévano's Blog"/>
diff --git a/blog/dst/a/linux_video_notes.html b/blog/dst/a/linux_video_notes.html
index 8a7ee0e..fce901a 100644
--- a/blog/dst/a/linux_video_notes.html
+++ b/blog/dst/a/linux_video_notes.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Linux tutorial video notes -- Luévano's Blog"/>
diff --git a/blog/dst/a/mail_server_with_postfix.html b/blog/dst/a/mail_server_with_postfix.html
index 952b84b..e07e1b8 100644
--- a/blog/dst/a/mail_server_with_postfix.html
+++ b/blog/dst/a/mail_server_with_postfix.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Create a mail server with Postfix, Dovecot, SpamAssassin and OpenDKIM -- Luévano's Blog"/>
diff --git a/blog/dst/a/new_blogging_system.html b/blog/dst/a/new_blogging_system.html
index 216ed0c..8e517dd 100644
--- a/blog/dst/a/new_blogging_system.html
+++ b/blog/dst/a/new_blogging_system.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="I'm using a new blogging system -- Luévano's Blog"/>
diff --git a/blog/dst/a/shell_scripting_video_notes.html b/blog/dst/a/shell_scripting_video_notes.html
index d048c1d..7d7fdd2 100644
--- a/blog/dst/a/shell_scripting_video_notes.html
+++ b/blog/dst/a/shell_scripting_video_notes.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Shell scripting tutorial video notes -- Luévano's Blog"/>
diff --git a/blog/dst/a/sql_video_notes.html b/blog/dst/a/sql_video_notes.html
index 867c265..9205eb6 100644
--- a/blog/dst/a/sql_video_notes.html
+++ b/blog/dst/a/sql_video_notes.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="SQL tutorial video notes -- Luévano's Blog"/>
@@ -190,10 +190,12 @@
 <li><code>RIGHT (OUTER) JOIN</code>: returns all records from the right table, and the matched records from the left table.</li>
 <li><code>FULL (OUTER) JOIN</code>: returns all records when there is a match in either left or right table.</li>
 </ul>
+<div class="img-grid">
 <p><img alt="INNER JOIN" src="images/b/notes/sql/img_innerjoin.gif">
 <img alt="LEFT JOIN" src="images/b/notes/sql/img_leftjoin.gif">
 <img alt="RIGHT JOIN" src="images/b/notes/sql/img_rightjoin.gif">
 <img alt="FULL OUTER JOIN" src="images/b/notes/sql/img_fulljoin.gif"></p>
+</div>
 <h4 id="nested-queries">Nested queries</h4>
 <p>A query composed of multiple select statements to get a specific piece of information. This is self explanatory, you do a <code>SELECT</code> query somewhere inside another one, for example <code>SELECT ... IN (SELECT ...)</code>, where the nesting is occurring inside the parenthesis after the <code>IN</code> statement.</p>
 <p>A nesting isn&rsquo;t constrained to the <code>IN</code> statement, it can appear anywhere, for example in a <code>WHERE</code> statement: <code>SELECT ... WHERE something = (SELECT ...)</code>.</p>
@@ -222,7 +224,7 @@
   <div class="article-info">
     <p>By David Luévano</p>
     <p>Created: Tue, Mar 02, 2021 @ 14:35 UTC</p>
-      <p>Modified: Sun, Jun 06, 2021 @ 00:22 UTC</p>
+      <p>Modified: Sun, Jun 06, 2021 @ 03:41 UTC</p>
     <div class="article-tags">
   <p>Tags:
 <a href="https://blog.luevano.xyz/tag/@english.html">english</a>, <a href="https://blog.luevano.xyz/tag/@notes.html">notes</a>  </p>
diff --git a/blog/dst/a/website_with_nginx.html b/blog/dst/a/website_with_nginx.html
index 7834b31..5cb1875 100644
--- a/blog/dst/a/website_with_nginx.html
+++ b/blog/dst/a/website_with_nginx.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Create a website with Nginx and Certbot -- Luévano's Blog"/>
diff --git a/blog/dst/index.html b/blog/dst/index.html
index 2a9b624..2d30138 100644
--- a/blog/dst/index.html
+++ b/blog/dst/index.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Index -- Luévano's Blog"/>
@@ -96,7 +96,7 @@
 
 
     <h2>Articles</h2>
-  <ul>
+  <ul class="page-list">
         <h3>June 2021</h3>
       <li>Jun 04 - <a href="https://blog.luevano.xyz/a/asi_nomas_esta_quedando.html">Así nomás está quedando el página</a></li>
           <h3>May 2021</h3>
diff --git a/blog/dst/rss.xml b/blog/dst/rss.xml
index eea52d2..4a949b8 100644
--- a/blog/dst/rss.xml
+++ b/blog/dst/rss.xml
@@ -13,8 +13,8 @@
     <copyright>Copyright 2021 David Luévano Alvarado</copyright>
     <managingEditor>david@luevano.xyz (David Luévano Alvarado)</managingEditor>
     <webMaster>david@luevano.xyz (David Luévano Alvarado)</webMaster>
-    <pubDate>Sun, 06 Jun 2021 00:30:52 GMT</pubDate>
-    <lastBuildDate>Sun, 06 Jun 2021 00:30:52 GMT</lastBuildDate>
+    <pubDate>Sun, 06 Jun 2021 04:16:37 GMT</pubDate>
+    <lastBuildDate>Sun, 06 Jun 2021 04:16:37 GMT</lastBuildDate>
     <generator>pyssg v0.5.5</generator>
     <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
     <ttl>30</ttl>
@@ -1096,10 +1096,12 @@ function_name () {
 <li><code>RIGHT (OUTER) JOIN</code>: returns all records from the right table, and the matched records from the left table.</li>
 <li><code>FULL (OUTER) JOIN</code>: returns all records when there is a match in either left or right table.</li>
 </ul>
+<div class="img-grid">
 <p><img alt="INNER JOIN" src="images/b/notes/sql/img_innerjoin.gif">
 <img alt="LEFT JOIN" src="images/b/notes/sql/img_leftjoin.gif">
 <img alt="RIGHT JOIN" src="images/b/notes/sql/img_rightjoin.gif">
 <img alt="FULL OUTER JOIN" src="images/b/notes/sql/img_fulljoin.gif"></p>
+</div>
 <h4 id="nested-queries">Nested queries</h4>
 <p>A query composed of multiple select statements to get a specific piece of information. This is self explanatory, you do a <code>SELECT</code> query somewhere inside another one, for example <code>SELECT ... IN (SELECT ...)</code>, where the nesting is occurring inside the parenthesis after the <code>IN</code> statement.</p>
 <p>A nesting isn&rsquo;t constrained to the <code>IN</code> statement, it can appear anywhere, for example in a <code>WHERE</code> statement: <code>SELECT ... WHERE something = (SELECT ...)</code>.</p>
diff --git a/blog/dst/tag/@english.html b/blog/dst/tag/@english.html
index e42a8fd..62d8ea3 100644
--- a/blog/dst/tag/@english.html
+++ b/blog/dst/tag/@english.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Posts filtered by english -- Luévano's Blog"/>
@@ -82,7 +82,7 @@
   <h1>Posts filtered by english</h1>
 
     <h2>Articles</h2>
-  <ul>
+  <ul class="page-list">
         <h3>May 2021</h3>
       <li>May 28 - <a href="https://blog.luevano.xyz/a/new_blogging_system.html">I'm using a new blogging system</a></li>
           <h3>March 2021</h3>
diff --git a/blog/dst/tag/@notes.html b/blog/dst/tag/@notes.html
index a42d265..d4a1216 100644
--- a/blog/dst/tag/@notes.html
+++ b/blog/dst/tag/@notes.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Posts filtered by notes -- Luévano's Blog"/>
@@ -82,7 +82,7 @@
   <h1>Posts filtered by notes</h1>
 
     <h2>Articles</h2>
-  <ul>
+  <ul class="page-list">
         <h3>March 2021</h3>
       <li>Mar 14 - <a href="https://blog.luevano.xyz/a/shell_scripting_video_notes.html">Shell scripting tutorial video notes</a></li>
       <li>Mar 14 - <a href="https://blog.luevano.xyz/a/linux_video_notes.html">Linux tutorial video notes</a></li>
diff --git a/blog/dst/tag/@server.html b/blog/dst/tag/@server.html
index 59b857b..8f4ad53 100644
--- a/blog/dst/tag/@server.html
+++ b/blog/dst/tag/@server.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Posts filtered by server -- Luévano's Blog"/>
@@ -82,7 +82,7 @@
   <h1>Posts filtered by server</h1>
 
     <h2>Articles</h2>
-  <ul>
+  <ul class="page-list">
         <h3>March 2021</h3>
       <li>Mar 21 - <a href="https://blog.luevano.xyz/a/git_server_with_cgit.html">Create a git server and setup cgit web app (on Nginx)</a></li>
       <li>Mar 21 - <a href="https://blog.luevano.xyz/a/mail_server_with_postfix.html">Create a mail server with Postfix, Dovecot, SpamAssassin and OpenDKIM</a></li>
diff --git a/blog/dst/tag/@short.html b/blog/dst/tag/@short.html
index 96721d0..0157d7f 100644
--- a/blog/dst/tag/@short.html
+++ b/blog/dst/tag/@short.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Posts filtered by short -- Luévano's Blog"/>
@@ -82,7 +82,7 @@
   <h1>Posts filtered by short</h1>
 
     <h2>Articles</h2>
-  <ul>
+  <ul class="page-list">
         <h3>June 2021</h3>
       <li>Jun 04 - <a href="https://blog.luevano.xyz/a/asi_nomas_esta_quedando.html">Así nomás está quedando el página</a></li>
           <h3>May 2021</h3>
diff --git a/blog/dst/tag/@spanish.html b/blog/dst/tag/@spanish.html
index b2f72c4..9788ed0 100644
--- a/blog/dst/tag/@spanish.html
+++ b/blog/dst/tag/@spanish.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Posts filtered by spanish -- Luévano's Blog"/>
@@ -82,7 +82,7 @@
   <h1>Posts filtered by spanish</h1>
 
     <h2>Articles</h2>
-  <ul>
+  <ul class="page-list">
         <h3>June 2021</h3>
       <li>Jun 04 - <a href="https://blog.luevano.xyz/a/asi_nomas_esta_quedando.html">Así nomás está quedando el página</a></li>
           <h3>March 2021</h3>
diff --git a/blog/dst/tag/@tools.html b/blog/dst/tag/@tools.html
index e137805..fcc6d4b 100644
--- a/blog/dst/tag/@tools.html
+++ b/blog/dst/tag/@tools.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Posts filtered by tools -- Luévano's Blog"/>
@@ -82,7 +82,7 @@
   <h1>Posts filtered by tools</h1>
 
     <h2>Articles</h2>
-  <ul>
+  <ul class="page-list">
         <h3>May 2021</h3>
       <li>May 28 - <a href="https://blog.luevano.xyz/a/new_blogging_system.html">I'm using a new blogging system</a></li>
           <h3>March 2021</h3>
diff --git a/blog/dst/tag/@tutorial.html b/blog/dst/tag/@tutorial.html
index 44a471c..308f334 100644
--- a/blog/dst/tag/@tutorial.html
+++ b/blog/dst/tag/@tutorial.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Posts filtered by tutorial -- Luévano's Blog"/>
@@ -82,7 +82,7 @@
   <h1>Posts filtered by tutorial</h1>
 
     <h2>Articles</h2>
-  <ul>
+  <ul class="page-list">
         <h3>March 2021</h3>
       <li>Mar 21 - <a href="https://blog.luevano.xyz/a/git_server_with_cgit.html">Create a git server and setup cgit web app (on Nginx)</a></li>
       <li>Mar 21 - <a href="https://blog.luevano.xyz/a/mail_server_with_postfix.html">Create a mail server with Postfix, Dovecot, SpamAssassin and OpenDKIM</a></li>
diff --git a/blog/dst/tag/@update.html b/blog/dst/tag/@update.html
index b3e14cf..f05dee2 100644
--- a/blog/dst/tag/@update.html
+++ b/blog/dst/tag/@update.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
   <meta property="og:title" content="Posts filtered by update -- Luévano's Blog"/>
@@ -82,7 +82,7 @@
   <h1>Posts filtered by update</h1>
 
     <h2>Articles</h2>
-  <ul>
+  <ul class="page-list">
         <h3>June 2021</h3>
       <li>Jun 04 - <a href="https://blog.luevano.xyz/a/asi_nomas_esta_quedando.html">Así nomás está quedando el página</a></li>
           <h3>May 2021</h3>
diff --git a/blog/plt/base.html b/blog/plt/base.html
index 19377d3..42564d0 100644
--- a/blog/plt/base.html
+++ b/blog/plt/base.html
@@ -22,7 +22,7 @@
     <!-- theme related -->
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="css/dark.css">
-    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/solarized-dark.min.css">
+    <link id="code-theme-css" rel="stylesheet" type="text/css" href="hl/styles/nord.min.css">
 
     <!-- og meta -->
     {%block head_og%}{%endblock head_og%}
diff --git a/blog/plt/page_list.html b/blog/plt/page_list.html
index 16dc4d5..bd1f678 100644
--- a/blog/plt/page_list.html
+++ b/blog/plt/page_list.html
@@ -1,6 +1,6 @@
 {%macro print(pages)%}
   <h2>Articles</h2>
-  <ul>
+  <ul class="page-list">
     {%for p in pages%}
       {%if loop.previtem%}
         {%if loop.previtem.cdate_list_sep !=p.cdate_list_sep%}
diff --git a/blog/src/.files b/blog/src/.files
index 361c663..d74933b 100644
--- a/blog/src/.files
+++ b/blog/src/.files
@@ -2,7 +2,7 @@ a/website_with_nginx.md 1616122695.085315 1622938985.447357 english,server,tools
 a/git_server_with_cgit.md 1616353229.8983006 1622793595.4845119 english,server,tools,tutorial
 a/el_blog_ya_tiene_timestamps.md 1615862784.9032707 1621284818.4731243 short,spanish,tools,update
 a/shell_scripting_video_notes.md 1615701454.6499224 1622793622.0414143 english,notes
-a/sql_video_notes.md 1614695711.6048582 1622938935.8065531 english,notes
+a/sql_video_notes.md 1614695711.6048582 1622950879.0081563 english,notes
 a/first_blog_post.md 1614431313.2090824 1621284833.6700118 english,short,tools,update
 a/linux_video_notes.md 1615701443.6397786 1622793573.704325 english,notes
 a/mail_server_with_postfix.md 1616299559.6570284 1622939041.148257 english,server,tools,tutorial
diff --git a/blog/src/a/sql_video_notes.md b/blog/src/a/sql_video_notes.md
index 91c5976..ff20f26 100644
--- a/blog/src/a/sql_video_notes.md
+++ b/blog/src/a/sql_video_notes.md
@@ -140,10 +140,12 @@ There are different types of SQL JOINs:
 * `RIGHT (OUTER) JOIN`: returns all records from the right table, and the matched records from the left table.
 * `FULL (OUTER) JOIN`: returns all records when there is a match in either left or right table.
 
+<div class="img-grid" markdown="1">
 ![INNER JOIN](images/b/notes/sql/img_innerjoin.gif)
 ![LEFT JOIN](images/b/notes/sql/img_leftjoin.gif)
 ![RIGHT JOIN](images/b/notes/sql/img_rightjoin.gif)
 ![FULL OUTER JOIN](images/b/notes/sql/img_fulljoin.gif)
+</div>
 
 #### Nested queries