edit images block

_includes/prj_scr.html

@@ -1,11 +1,13 @@
-<figure class="sign" style="float:none;">
+<ins class="thumbnail">
-  {% if page.category == "ru" %}
+  <div class="r">
-    <a href="/resources/screenshots/{{ scrname }}.png" title="Полный размер" type="image/png">
+    {% if page.category == "ru" %}
-  {% else %}
+      <a href="/resources/screenshots/{{ scrname }}.png" title="Полный размер" type="image/png">
-    <a href="/resources/screenshots/{{ scrname }}.png" title="Full size" type="image/png">
+    {% else %}
-  {% endif %}
+      <a href="/resources/screenshots/{{ scrname }}.png" title="Full size" type="image/png">
-    <img src="/resources/preview/{{ scrname }}_prev.jpg" alt="{{ scrname }}">
+    {% endif %}
-  </a><br>
+      <img src="/resources/preview/{{ scrname }}_prev.jpg" alt="{{ scrname }}">
-  <figcaption style="float:left">{{ scrdesc }}</figcaption>
+    </a>
-</figure>
+    <br>
-<br>
+    {{ scrdesc }}
+  </div>
+</ins>

_posts/2014-07-17-writting-own-completions-p1.html

@@ -6,7 +6,7 @@ layout: paper
 tags: linux, development
 title: Writting own Shell completions. Zsh
 short: writting-own-completions-p1
-description: <figure class="sign"><img src="/resources/papers/zsh_completion.png" alt="bash_completion"></figure> Some basics of creating a completion files for own application are described in these articles.
+description: <figure class="img"><img src="/resources/papers/zsh_completion.png" alt="bash_completion"></figure> Some basics of creating a completion files for own application are described in these articles.
 ---
 <h2><a href="#preamble" class="anchor" name="preamble"><span class="octicon octicon-link"></span></a>Preamble</h2>
 <p>While developing <a href="/ru/projects/netctl-gui">one of my projects</a> I have wanted to add completion files. I have already tried to create these files, but I was too lazy to read some manuals about it.</p>

_posts/2014-07-17-writting-own-completions-p2.html

@@ -6,7 +6,7 @@ layout: paper
 tags: linux, development
 title: Writting own Shell completions. Bash
 short: writting-own-completions-p2
-description: <figure class="sign"><img src="/resources/papers/bash_completion.png" alt="bash_completion"></figure> Some basics of creating a completion files for own application are described in these articles.
+description: <figure class="img"><img src="/resources/papers/bash_completion.png" alt="bash_completion"></figure> Some basics of creating a completion files for own application are described in these articles.
 ---
 <h2><a href="#preamble" class="anchor" name="preamble"><span class="octicon octicon-link"></span></a>Preamble</h2>
 <p>While developing <a href="/ru/projects/netctl-gui" title="Netctl-gui project page">one of my projects</a> I have wanted to add completion files. I have already tried to create these files, but I was too lazy to read some manuals about it.</p>

about.html

@@ -37,7 +37,7 @@ GS/CS d-(+) s: a-- C++++ UL+++>$ P L++ E--- W++ N !o !K w- !O M- !V PS+@ PE Y PG
 ------END GEEK CODE BLOCK------
 {% endhighlight %}
 
-<figure class="sign">
+<figure class="img">
   <a href="/resources/screenshots/photo_siicm.png" title="Full size" type="image/png">
     <img src="/resources/preview/photo_siicm_prev.jpg" alt="Photo">
   </a>

projects/git-etc.html

@@ -165,7 +165,7 @@ systemctl restart git-etc
 <h3><a href="#screenshots" class="anchor" name="screenshots"><span class="octicon octicon-link"></span></a>Screenshots</h3>
 <p>(Screenshots in Russian, but GUI has English translation.)</p>
 
-<p>
+<div class="thumbnails">
   {% assign scrdesc = "Main window" %}
   {% assign scrname = "git-etc_mainwindow" %}
   {% include prj_scr.html %}
@@ -181,5 +181,5 @@ systemctl restart git-etc
   {% assign scrdesc = "Roll back window" %}
   {% assign scrname = "git-etc_rollbackwindow" %}
   {% include prj_scr.html %}
-</p>
+</div>
 <!-- end of gui block -->

projects/netctl-gui.html

@@ -125,7 +125,7 @@ sudo make install
 <p>Graphical interface provides by <code>netctl-gui</code> application.</p>
 
 <h3><a name="screenshots" class="anchor" href="#screenshots"><span class="octicon octicon-link"></span></a>Screenshots</h3>
-<p>
+<div class="thumbnails">
   {% assign scrdesc = "DataEngine" %}
   {% assign scrname = "netctl-gui_dataengine" %}
   {% include prj_scr.html %}
@@ -159,5 +159,5 @@ sudo make install
   {% assign scrdesc = "Settings window" %}
   {% assign scrname = "netctl-gui_settings" %}
   {% include prj_scr.html %}
-</p>
+</div>
 <!-- end of gui block -->

projects/oblikuestrategies.html

@@ -93,12 +93,12 @@ kbuildsycoca4 &> /dev/null
 <h2><a href="#gui" class="anchor" name="gui"><span class="octicon octicon-link"></span></a>Graphical user interface</h2>
 
 <h3><a name="screenshots" class="anchor" href="#screenshots"><span class="octicon octicon-link"></span></a>Screenshots</h3>
-<p>
+<div class="thumbnails">
   {% assign scrdesc = "Widget" %}
   {% assign scrname = "oblikuestrategies_widget" %}
   {% include prj_scr.html %}
   {% assign scrdesc = "Configuration window" %}
   {% assign scrname = "oblikuestrategies_config" %}
   {% include prj_scr.html %}
-</p>
+</div>
 <!-- end of gui block -->

projects/pytextmonitor.html

@@ -596,7 +596,7 @@ sudo make install
 <h2><a href="#gui" class="anchor" name="gui"><span class="octicon octicon-link"></span></a>Graphical user interface</h2>
 
 <h2><a href="#screenshots" class="anchor" name="screenshots"><span class="octicon octicon-link"></span></a>Screenshots</h2>
-<p>
+<div class="thumbnails">
   {% assign scrdesc = "Widget (clickable)" %}
   {% assign scrname = "pytextmonitor_widget" %}
   {% include prj_scr.html %}
@@ -618,4 +618,4 @@ sudo make install
   {% assign scrdesc = "Tooltips" %}
   {% assign scrname = "pytextmonitor_tooltips" %}
   {% include prj_scr.html %}
-</p>
+</div>

resources/css/styles.css

@@ -1,16 +1,39 @@
 /* in-text images */
-.sign {
+figure.img {
   float: right;
   border: 0px solid #333;
   padding: 0px;
   margin: 5px 0px 5px 10px;
 }
-.sign figcaption {
+figure.img img {
+  max-width: 100%;
+  height: auto;
+}
+figure.img figcaption {
   margin: 0px;
+  font-size: 90%;
   font-style: italic;
   text-align: center;
 }
 
+/* screenshots */
+.thumbnails {
+  margin: -3em 0 0 -2em;
+  font-size: 90%;
+  font-style:italic;
+  text-align: center;
+}
+.thumbnail {
+  display: -moz-inline-box;
+  display: inline-block;
+  vertical-align: top;
+  margin: 3em 0 0 2em;
+}
+.thumbnail .r {
+  width: 14em;
+  float: left;
+}
+
 /* spoiler */
 .spoiler > input + .box > blockquote {
   display: none;