Improve scaling of pictures in side-by-side arrangements

• Adapt CSS to remove left-right alternation of images on tablets. Pages hifisfor/rse etc. need an adaptation of the CSS. On tablets the left-right alternation of images is removed to have more space for text on small tablet screens.
• Remove CSS customisations on page hifisfor/scientists. Page CSS is streamlined with other pages like hifisfor/rse etc.
• Page media need different structure and own CSS.

Closes #342 (closed)

_posts/2020/01/2020-01-07-contributing-in-4-simple-steps.md

@@ -14,7 +14,8 @@ excerpt:
   Want to contribute? No time to read long tutorials?
   Then this contribution quickstart guide is for <em>you</em>.
 additional_css:
-  - 2020-01-07-contributing-in-4-simple-steps/button-link.css
+  - 2020-01-07-contributing-in-4-simple-steps/button-link.css 
+  - image-scaling.css
 ---
 
 # What This Guide will (not) Cover
@@ -84,9 +85,11 @@ is the 4-digit year, `MM` is the 2-digit month (and later we need `DD` for the
 2-digit day).
 If this path does not fully exist, you should now create it.
 
-{:.treat-as-figure}
-{: .float-left}
-![Dropdown Menu example]({{ site.directory.images | relative_url }}/posts/2020-01-07-contributing-in-4-simple-steps/create_folder.png)
+<div class="floating-boxes">
+<div class="image-box align-left">
+    <img class="left" style="min-width: 300px; max-width: 300px;" src="{% link assets/img/posts/2020-01-07-contributing-in-4-simple-steps/create_folder.png %}" alt="Dropdown Menu example" />
+</div>
+<div class="text-box" markdown="1">
 The dropdown-menu to create a new sub-folder becomes visible on hovering the
 parent folder.
 
@@ -112,6 +115,9 @@ For comparison, the full path of this blog post looks like this:
 ```
 /_posts/2020/01/2020-01-07-contributing-in-4-simple-steps.md
 ```
+</div>
+</div>
+<div class="clear"></div>
 
 ## Frontmatter