Merge branch '342-improve-scaling-of-pictures' into 'master'

Improve scaling of pictures in side-by-side arrangements

Closes #342

See merge request !579

_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
 

_posts/2022/08/2022-08-01-update-cloudportal.md

@@ -11,16 +11,20 @@ categories:
 tags:
   - Helmholtz Cloud Portal
   - Update
+additional_css:
+  - image-scaling.css
 excerpt: >
     The Helmholtz Cloud Portal just got updated with a new user interface. It has a fresh, clean look, but also introduces new functionalities: keywords, a faceted search and a better mobile view.
 ---
 
 ## Helmholtz Cloud Portal introduces a better search and keywords
 
-<figure>
-    <img src="{% link assets/img/posts/2022-07-29-update-cloudportal/Screenshot_cloudportal4.png %}" alt="Screenshot of the new user interface" style="float:right;width:66%;min-width:500px;padding:5px 5px 20px 20px;">
-</figure>
+<div class="floating-boxes">
+<div class="image-box align-right">
+    <img class="right large nonuniform" src="{% link assets/img/posts/2022-07-29-update-cloudportal/Screenshot_cloudportal4.png %}" alt="Screenshot of the new user interface" />
+</div>
 
+<div class="text-box" markdown="1">
 The Helmholtz Cloud Portal just got updated with a new user interface.
 It has a fresh, clean look, but also introduces new functionalities: 
 We tagged the services with keywords like "Chat" or "Collaboration" that describe the main features of each service. 
@@ -33,6 +37,9 @@ Additionally, all filters are represented in the URL which can be used to save t
 For example, the link [`https://helmholtz.cloud/services?provider=DESY,HZDR,KIT&keywords=Infrastructure`](https://helmholtz.cloud/services?provider=DESY,HZDR,KIT&keywords=Infrastructure)
 delivers all services tagged with "Infrastructure" and provided by DESY, HZDR, or KIT.
 The second option to make use of the keywords is to click the keyword on one service card and find all other services with the same keyword.
+</div>
+</div>
+<div class="clear"></div>
 
 ## Now with better mobile view
 The Cloud Portal has also been adapted to better work on mobile devices. 

_sass/boilerplate/_breakpoints.scss

@@ -8,13 +8,15 @@
 */
 
 /* $bp-min-phone:      0px; /* implicit */
-$bp-max-phone:       599px;
-$bp-min-tablet:      600px;
-$bp-max-tablet:     1449px;
-$bp-min-desktop:    1450px;
-$bp-max-desktop:    1799px;
-$bp-min-disp_2k:    1800px;
-$bp-max-disp_2k:    2399px;
+$bp-max-phone:         599px;
+$bp-min-tablet:        600px;
+$bp-max-small-tablet:  849px;
+$bp-min-large-tablet:  850px;
+$bp-max-tablet:       1449px;
+$bp-min-desktop:      1450px;
+$bp-max-desktop:      1799px;
+$bp-min-disp_2k:      1800px;
+$bp-max-disp_2k:      2399px;
 
 
 @mixin medium-is-phone { 
@@ -22,6 +24,38 @@ $bp-max-disp_2k:    2399px;
         { @content; } 
 }
 
+@mixin medium-is-small-tablet {
+    @media  (min-width: #{$bp-min-tablet}) and
+            (max-width: #{$bp-max-small-tablet})
+        { @content; }
+}
+
+@mixin medium-is-small-tablet-minus {
+    @media  (max-width: #{$bp-min-large-tablet})
+        { @content; }
+}
+
+@mixin medium-is-small-tablet-plus {
+    @media  (min-width: #{$bp-min-tablet})
+        { @content; }
+}
+
+@mixin medium-is-large-tablet {
+    @media  (min-width: #{$bp-min-large-tablet}) and
+            (max-width: #{$bp-max-tablet})
+        { @content; }
+}
+
+@mixin medium-is-large-tablet-minus {
+    @media  (max-width: #{$bp-max-tablet})
+        { @content; }
+}
+
+@mixin medium-is-large-tablet-plus {
+    @media  (min-width: #{$bp-min-large-tablet})
+        { @content; }
+}
+
 @mixin medium-is-tablet { 
     @media  (min-width: #{$bp-min-tablet}) and 
             (max-width: #{$bp-max-tablet})

_sass/boilerplate/_responsive.scss

@@ -19,8 +19,9 @@
 
 
 /* --- Scaling factors for visual elements --- */
-$tablet-scale:      0.8;
-$phone-scale:       0.6;
+$tablet-scale:       0.8;
+$tablet-small-scale: 0.7;
+$phone-scale:        0.6;
 
 @mixin respond-to-medium($property, $base_value, $tablet_value: null, $phone_value: null) {
     #{$property}: #{$base_value};
@@ -47,3 +48,40 @@ $phone-scale:       0.6;
         }
     }
 }
+
+@mixin respond-to-medium-extra($property, $base_value, $tablet_large_value: null, $tablet_small_value: null, $phone_value: null) {
+    #{$property}: #{$base_value};
+
+    @if $tablet_large_value {
+        @include medium-is-large-tablet {
+            #{$property}: #{$tablet_large_value};
+        }
+    }
+    @else {
+        @include medium-is-large-tablet {
+            #{$property}: #{$base_value * $tablet-scale};
+        }
+    }
+
+    @if $tablet_small_value {
+        @include medium-is-small-tablet {
+            #{$property}: #{$tablet_small_value};
+        }
+    }
+    @else {
+        @include medium-is-small-tablet {
+            #{$property}: #{$base_value * $tablet-small-scale};
+        }
+    }
+
+    @if $phone_value {
+        @include medium-is-phone {
+            #{$property}: #{$phone_value};
+        }
+    }
+    @else {
+        @include medium-is-phone {
+            #{$property}: #{$base_value * $phone-scale};
+        }
+    }
+}

assets/css/image-scaling.scss

+---
+---
+
+@import "boilerplate/breakpoints";
+@import "boilerplate/responsive";
+
+.clear {
+    clear: both;
+}
+
+$floatings: center, left, right;
+.floating-boxes {
+  .image-box {
+    @each $floating in $floatings  {
+      &.align-#{$floating} {
+        @include respond-to-medium-extra("text-align", "#{$floating}", "#{$floating}", "center", "center");
+      }
+    }
+    img {
+      @each $floating in $floatings  {
+        &.#{$floating} {
+          @if $floating == 'center' {
+            @include respond-to-medium-extra("float", "none", "none", "none", "none");
+            @include respond-to-medium-extra("padding", "0.25rem 0.25rem 0.25rem 0.25rem", "0.25rem 0.25rem 0.25rem 0.25rem", "0.25rem 0.25rem 0.25rem 0.25rem", "0.25rem 0.25rem 0.25rem 0.25rem");
+          }
+          @if $floating == 'left' {
+            @include respond-to-medium-extra("float", "left", "left", "none", "none");
+            @include respond-to-medium-extra("padding", "2rem 2rem 2rem 1rem", "2rem 2rem 2rem 1rem", "0.25rem 0.25rem 0.25rem 0.25rem", "0.25rem 0.25rem 0.25rem 0.25rem");
+          }
+          @if $floating == 'right' {
+            @include respond-to-medium-extra("float", "right", "right", "none", "none");
+            @include respond-to-medium-extra("padding", "2rem 1rem 2rem 2rem", "2rem 1rem 2rem 2rem", "0.25rem 0.25rem 0.25rem 0.25rem", "0.25rem 0.25rem 0.25rem 0.25rem");
+          }
+          &.full {
+            &.nonuniform {
+              @include respond-to-medium-extra(min-width, 50rem, 40rem, 35rem, 90%);
+              @include respond-to-medium-extra(max-width, 50rem, 40rem, 35rem, 90%);
+            }
+            &.linear {
+              @include respond-to-medium-extra(min-width, 50rem);
+              @include respond-to-medium-extra(max-width, 50rem);
+            }
+            &.constant {
+              min-width: 50rem;
+              max-width: 50rem;
+            }
+          }
+          &.large {
+            &.nonuniform {
+              @include respond-to-medium-extra(min-width, 35rem, 30rem, 25rem, 90%);
+              @include respond-to-medium-extra(max-width, 35rem, 30rem, 25rem, 90%);
+            }
+            &.linear {
+              @include respond-to-medium-extra(min-width, 35rem);
+              @include respond-to-medium-extra(max-width, 35rem);
+            }
+            &.constant {
+              min-width: 35rem;
+              max-width: 35rem;
+            }
+          }
+          &.medium {
+            &.nonuniform {
+              @include respond-to-medium-extra(min-width, 20rem, 17.5rem, 15rem, 90%);
+              @include respond-to-medium-extra(max-width, 20rem, 17.5rem, 15rem, 90%);
+            }
+            &.linear {
+              @include respond-to-medium-extra(min-width, 20rem);
+              @include respond-to-medium-extra(max-width, 20rem);
+            }
+            &.constant {
+              min-width: 20rem;
+              max-width: 20rem;
+            }
+          }
+          &.small {
+            &.nonuniform {
+              @include respond-to-medium-extra(min-width, 15rem, 12.5rem, 10rem, 90%);
+              @include respond-to-medium-extra(max-width, 15rem, 12.5rem, 10rem, 90%);
+            }
+            &.linear {
+              @include respond-to-medium-extra(min-width, 15rem);
+              @include respond-to-medium-extra(max-width, 15rem);
+            }
+            &.constant {
+              min-width: 15rem;
+              max-width: 15rem;
+            }
+          }
+          &.tiny {
+            &.nonuniform {
+              @include respond-to-medium-extra(min-width, 12.5rem, 10rem, 7.5rem, 90%);
+              @include respond-to-medium-extra(max-width, 12.5rem, 10rem, 7.5rem, 90%);
+            }
+            &.linear {
+              @include respond-to-medium-extra(min-width, 12.5rem);
+              @include respond-to-medium-extra(max-width, 12.5rem);
+            }
+            &.constant {
+              min-width: 12.5rem;
+              max-width: 12.5rem;
+            }
+          }
+        }
+      }
+    }
+  }
+  .text-box {
+
+  }
+}

assets/css/media-page-images.scss

+---
+---
+
+@import "boilerplate/breakpoints";
+@import "boilerplate/responsive";
+
+.image-block {
+    display: flex;
+    padding: 1rem 0;
+    align-items: center;
+
+    div {
+        flex: 3 0 0;
+    }
+
+    .figure-image {
+        padding: 1rem 2rem;
+        flex: 1 0 0;
+
+        .help-image {
+            @include respond-to-medium-extra(min-width, 24rem, 18rem, 16rem, 16rem);
+            @include respond-to-medium-extra(max-width, 24rem, 18rem, 16rem, 16rem); // needed for Chrome on large screens
+            @include respond-to-medium-extra(min-height, 8rem, 14rem); // needed for Firefox on small screens
+        }
+
+        &.right {
+            @include medium-is-large-tablet-plus {
+                order: 1
+            }
+        }
+    }
+
+    @include medium-is-small-tablet-minus {
+        flex-direction: column;
+    }
+}
+
+.image-attrib {
+    font-size: 0.8rem;
+    text-align: right;
+}

assets/css/services/services-page-images.scss

@@ -2,6 +2,7 @@
 ---
 
 @import "boilerplate/breakpoints";
+@import "boilerplate/responsive";
 
 .image-block {
     display: flex;
@@ -16,16 +17,16 @@
         padding: 1rem 2rem;
         flex: 1 0 0;
         max-width: 14rem; // needed for Chrome on large screens
-        min-height: 5rem; // needed for Firefox on small screens
+        min-height: 8rem; // needed for Firefox on small screens
 
         &.right {
-            @include medium-is-tablet-plus {
+            @include medium-is-large-tablet-plus {
                 order: 1
             }
         }
     }
 
-    @include medium-is-phone {
+    @include medium-is-small-tablet-minus {
         flex-direction: column;
     }
 }

hifisfor/itsupport.md

@@ -3,7 +3,7 @@ title: HIFIS for IT Support Experts
 title_image: default
 layout: default
 additional_css:
-    - services/services-page-images.css
+  - image-scaling.css
 excerpt: >-
     HIFIS for IT Support Staff.
 ---
@@ -12,13 +12,15 @@ If you **work in local IT support in a Helmholtz Centre**, find information here
 
 ## What HIFIS can do for IT supporters
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-right">
     <img
-        class="help-image right"
+        class="right medium nonuniform"
         alt="Symbolic Picture 1"
         src="{{ site.directory.images | relative_url }}/illustrations/undraw_software_engineer_lvl5.svg"
     />
-    <div>
+    </div>
+    <div class="text-box">
         <ol>
         <li>
         <p>We provide a <strong>multitude of cloud services</strong> for Helmholtz.
@@ -29,14 +31,17 @@ If you **work in local IT support in a Helmholtz Centre**, find information here
         </ol>
     </div>
 </div>
+<div class="clear"></div>
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-left">
     <img
-        class="help-image left"
+        class="left medium nonuniform"
         alt="Symbolic Picture 2"
         src="{{ site.directory.images | relative_url }}/illustrations/undraw_teacher_re_sico.svg"
     />
-    <div>
+    </div>
+    <div class="text-box">
         Further check our information and documentation:
         <ul>
         <li><a href="https://hifis.net/doc"><strong>Technical and Administrative Documentation for HIFIS Services</strong></a></li>
@@ -48,14 +53,17 @@ If you **work in local IT support in a Helmholtz Centre**, find information here
         </ul>
     </div>
 </div>
+<div class="clear"></div>
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-right">
     <img
-        class="help-image right"
+        class="right medium nonuniform"
         alt="Symbolic Picture 3"
         src="{{ site.directory.images | relative_url }}/illustrations/undraw_team_spirit_hrr4.svg"
     />
-    <div>
+    </div>
+    <div class="text-box">
         <ol start="2">
         <li>
         <p>We provide <a href="{{ "services/software/training" | relative_url }}"><strong>training and courses</strong></a> on techniques for research software engineering, e.g. on programming languages, best practices, distributed service usage.</p>
@@ -71,18 +79,21 @@ If you **work in local IT support in a Helmholtz Centre**, find information here
         <a href="{{ "contact" | relative_url }}"><strong>contact us anytime via our contact form</strong></a> or equivalently via <a href="mailto:support@hifis.net"><strong>support@hifis.net</strong></a>.</p>
     </div>
 </div>
+<div class="clear"></div>
 
 ---
 
 ## What we can not do
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-left">
     <img
-        class="help-image left"
+        class="left medium nonuniform"
         alt="Symbolic Picture 4"
         src="{{ site.directory.images | relative_url }}/illustrations/undraw_cancel_re_pkdm.svg"
     />
-    <div>
+    </div>
+    <div class="text-box">
         <p>
         In general, we are <i>not</i> entitled to assist with any problems or issues that can and should be solved locally, i.e. within one centre or institute.
         For example:
@@ -96,3 +107,4 @@ If you **work in local IT support in a Helmholtz Centre**, find information here
         </p>
     </div>
 </div>
+<div class="clear"></div>

hifisfor/rse.md

@@ -3,20 +3,22 @@ title: HIFIS for Research Software Engineers
 title_image: adi-goldstein-mDinBvq1Sfg-unsplash_shrinked.jpg
 layout: services/default
 additional_css:
-    - services/services-page-images.css
+  - image-scaling.css
 excerpt: >-
     No text.
 ---
 
 **HIFIS supports Research Software Engineering** with Education & Training, Consulting, Platform and Community Services.
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-left">
     <img
-        class="help-image left"
+        class="left medium nonuniform"
         alt="Poster Element 1: We are starting a scientific Project. Can you help us?"
         src="{{ site.directory.images | relative_url }}/illustrations/undraw_teacher_re_sico.svg"
     />
-    <div>
+    </div>
+    <div class="text-box">
         <h3>Education & Training</h3>
         <p markdown=1>
         We offer courses, materials, and workshops to help you in getting started, or to boost your engineering practices.
@@ -30,14 +32,17 @@ excerpt: >-
         </p>
     </div>
 </div>
+<div class="clear"></div>
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-right">
     <img
-        class="help-image right"
+        class="right medium nonuniform"
         alt="Two people standing either side of a board containing goals to be completed"
         src="{{ site.directory.images | relative_url }}/services/undraw_team_goals_hrii.svg"
     />
-    <div>
+    </div>
+    <div class="text-box">
         <h3>Consulting</h3>
         <p markdown=1>
         HIFIS offers free-of-charge consulting as a service to research groups under the Helmholtz umbrella.
@@ -49,14 +54,17 @@ excerpt: >-
         </p>
     </div>
 </div>
+<div class="clear"></div>
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-left">
     <img
-        class="help-image left"
+        class="left medium nonuniform"
         alt="A software developer working with GitLab."
         src="{{ site.directory.images | relative_url }}/services/undraw_developer_activity_bv83.svg"
     />
-    <div>
+    </div>
+    <div class="text-box">
         <h3>Platform and Cloud Services for Research Software Development</h3>
         <p markdown=1>
         We provide a sustainable, well integrated, easy-to-use Technology Infrastructure and Cloud Service Portfolio for scientific software. For an overview, have a look at our [Cloud Services Portal](https://helmholtz.cloud/services).</p><p markdown=1>
@@ -68,14 +76,17 @@ excerpt: >-
         </p>
     </div>
 </div>
+<div class="clear"></div>
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-right">
     <img
-        class="help-image right"
+        class="right medium nonuniform"
         alt="Poster Element 4: Data Re-use. We help you to transfer your results."
         src="{{ site.directory.images | relative_url }}/services/community_rsd.svg"
     />
-    <div>
+    </div>
+    <div class="text-box">
         <h3>Communities</h3>
         <p markdown=1>
         We build and foster communities to support the necessary cultural change in science when dealing with research software.
@@ -93,14 +104,17 @@ excerpt: >-
         </p>
     </div>
 </div>
+<div class="clear"></div>
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-left">
     <img
-        class="help-image left"
+        class="left medium nonuniform"
         alt="HIFIS Logo, claim. Contact us anytime at support@hifis.net"
         src="{{ site.directory.images | relative_url }}/hifisfor/HIFIS_logo_claim_blue.svg"
     />
-    <div>
+    </div>
+    <div class="text-box">
         <h3>Queries, comments and suggestions</h3>
         <p>
             If you have suggestions or questions, please do not hesitate to contact us.
@@ -113,5 +127,6 @@ excerpt: >-
         </p>
     </div>
 </div>
+<div class="clear"></div>
 
 <div class="image-attrib">Images by Katerina Limpitsouni via <a href="https://undraw.co/">undraw.co</a></div>

hifisfor/scientists.md

@@ -3,7 +3,7 @@ title: HIFIS for Scientists
 title_image: default
 layout: services/default
 additional_css:
-    - services/services-page-images.css
+  - image-scaling.css
 excerpt: >-
     No text.
 ---
@@ -12,14 +12,15 @@ excerpt: >-
 **HIFIS supports scientific projects** with IT resources, services, consulting and expertise from the collection, storage, linking and analysis of research data to the publication of the results.
 Particular focus is placed on the topic of research software development.
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-left">
     <img
-        class="help-image left"
+        class="left medium nonuniform"
         alt="Poster Element 1: We are starting a scientific Project. Can you help us?"
         src="{{ site.directory.images | relative_url }}/hifisfor/poster-1.svg"
-        style="max-width: 28rem !important; min-height: 10rem !important; min-width: 10rem !important; flex: 2 0 0 !important"
     />
-    <div>
+    </div>
+    <div class="text-box">
         <h3>Set up and plan your projects</h3>
         <p>
             HIFIS provides a multitude of Helmholtz Cloud Services that are extremely useful to
@@ -40,15 +41,17 @@ Particular focus is placed on the topic of research software development.
         </p>
     </div>
 </div>
+<div class="clear"></div>
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-right">
     <img
-        class="help-image right"
+        class="right medium nonuniform"
         alt="Poster Element 2: Data gathering, processing, testing. That's how you automate testing."
         src="{{ site.directory.images | relative_url }}/hifisfor/poster-2.svg"
-        style="max-width: 28rem !important; min-height: 10rem !important; min-width: 10rem !important; flex: 2 0 0 !important"
     />
-    <div>
+    </div>
+    <div class="text-box">
         <h3>Data gathering, processing and testing</h3>
         <p>
             Collect and process your data with HIFIS provided
@@ -76,15 +79,17 @@ Particular focus is placed on the topic of research software development.
         </p>
     </div>
 </div>
+<div class="clear"></div>
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-left">
     <img
-        class="help-image left"
+        class="left medium nonuniform"
         alt="Poster Element 3: Data consolidation: Sustainability. We support you with courses, consulting and collaboration tools."
         src="{{ site.directory.images | relative_url }}/hifisfor/poster-3.svg"
-        style="max-width: 28rem !important; min-height: 10rem !important; min-width: 10rem !important; flex: 2 0 0 !important"
     />
-    <div>
+    </div>
+    <div class="text-box">
         <h3>Consolidation of your Research</h3>
         <p>
             Today, there is hardly a scientific project that can be done without the support of scientific software.
@@ -102,15 +107,17 @@ Particular focus is placed on the topic of research software development.
         </p>
     </div>
 </div>
+<div class="clear"></div>
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-right">
     <img
-        class="help-image right"
+        class="right medium nonuniform"
         alt="Poster Element 4: Data Re-use. We help you to transfer your results."
         src="{{ site.directory.images | relative_url }}/hifisfor/poster-4.svg"
-        style="max-width: 28rem !important; min-height: 10rem !important; min-width: 10rem !important; flex: 2 0 0 !important"
     />
-    <div>
+    </div>
+    <div class="text-box">
         <h3>Publication and Re-use</h3>
         <p>
         HIFIS provides a services for sustainably making the results of your research data accessible.
@@ -128,15 +135,17 @@ Particular focus is placed on the topic of research software development.
         </p>
     </div>
 </div>
+<div class="clear"></div>
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-left">
     <img
-        class="help-image left"
+        class="left medium nonuniform"
         alt="HIFIS Logo, claim. Contact us anytime at support@hifis.net"
         src="{{ site.directory.images | relative_url }}/hifisfor/HIFIS_logo_claim_blue.svg"
-        style="max-width: 28rem !important; min-height: 10rem !important; min-width: 10rem !important; flex: 2 0 0 !important"
     />
-    <div>
+    </div>
+    <div class="text-box">
         <h3>Queries, comments and suggestions</h3>
         <p>
             If you have suggestions or questions, please do not hesitate to contact us.
@@ -149,6 +158,6 @@ Particular focus is placed on the topic of research software development.
         </p>
     </div>
 </div>
-
+<div class="clear"></div>
 
 <div class="image-attrib">Images by <a href="https://lornaschuette.com">Lorna Sch&uuml;tte</a>.</div>

media/index.md

@@ -5,26 +5,30 @@ layout: default
 additional_css:
     - frontpage.css
     - title/service-title-buttons.css
+    - media-page-images.css
 additional_js: frontpage.js
 redirect_from: pr
 excerpt:
     HIFIS Media & Materials.
 ---
 
-    
-## General Publications
+<div class="image-block">
 
-- [List of Publications on HIFIS]({{ "publications" | relative_url }})
-
-<figure style="float:right">
- <img
-    alt="person on the right and person on the left talk about starting a project and how HIFIS can help with that"
-    src="{{ site.directory.images | relative_url }}/hifisfor/poster-1.svg"
-    style="width:50%;min-width:400px;padding:5px 0px 20px 20px;">
-<figcaption style="12px;text-indent:100px">Lorna Schütte, CC-BY-NC-SA</figcaption>
+<div class="figure-image right">
+<figure>
+    <img class="help-image"
+        alt="person on the right and person on the left talk about starting a project and how HIFIS can help with that"
+        src="{{ site.directory.images | relative_url }}/hifisfor/poster-1.svg" />
+    <figcaption style="text-align: center;">Lorna Schütte, CC-BY-NC-SA</figcaption>
 </figure>
+</div>
 
-## Media and Material from HIFIS
+<div>
+<h3>General Publications</h3>
+<ul>
+    <li><a href="{{ 'publications' | relative_url }}">List of Publications on HIFIS</a></li>
+</ul> 
+<h3>Media and Material from HIFIS</h3>
 <ul style="line-height:200%">
 <li>Meet <b>Sam, the Scientist</b>: HIFIS for Scientific Workflows</li>
     <ul>
@@ -43,3 +47,6 @@ excerpt:
     </ul>
 <li><a href="{{ 'media/Helmholz-Incubator-Folder_2022.pdf' | relative_url }}">Helmholtz Incubator Brochure</a></li>
 </ul>
+</div>
+
+</div>

services/cloud/provider.md

@@ -4,7 +4,7 @@ title_image: background-cloud.jpg
 layout: services/default
 author: none
 additional_css:
-    - services/services-page-images.css
+  - image-scaling.css
 redirect_from:
     - hifisfor/csp
 excerpt: >-
@@ -12,19 +12,21 @@ excerpt: >-
 ---
 
 <h1> Helmholtz Cloud Service Providers </h1>
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-right">
     <img
-        class="help-image right"
+        class="right medium nonuniform"
         alt="Screenshot of Helmholtz Cloud Portal"
         src="{{ site.directory.images | relative_url }}/services/Cloud_Portal.jpg"
-        style="max-width: 20rem !important;min-width:  5rem !important;"
     />
-    <div style="flex: 1 0 0;">
+    </div>
+    <div class="text-box">
         <p>
         The Helmholtz Cloud is a platform of the Helmholtz Association that enables IT resources to be shared. A Helmholtz Centre can make selected IT services available so that other Hemholtz Centres can use them seamlessly and free of charge. Helmholtz-wide projects and initiatives can also participate. The services also allow to integrate external guests, so that national and international scientific collaborations are easily possible.
         </p>
     </div>
 </div>
+<div class="clear"></div>
 
 <div>
 <h3> Technical and Administrative Documentation about HIFIS</h3>
@@ -33,14 +35,15 @@ excerpt: >-
     </p>
 </div>
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-left">
     <img
-        class="help-image left"
+        class="left large nonuniform"
         alt="application form in Plony"
         src="{{ site.directory.images | relative_url }}/services/application_form.jpg"
-        style="max-width: 20rem !important;min-width:  5rem !important;"
     />
-    <div style="flex: 1 0 0;">
+    </div>
+    <div class="text-box">
     <h3>Becoming Service Provider</h3>
     <p>
         A service provider can hand in a service for Helmholtz Cloud at any time. The application form for potential Helmholtz Cloud Services is online available in <a href="https://plony.helmholtz-berlin.de/">Plony</a>. Detailed step-by-step instruction on the application form is available on the landing page of Plony.
@@ -50,15 +53,17 @@ excerpt: >-
     </p>
     </div>
 </div>
+<div class="clear"></div>
 
-<div class="image-block">
+<div class="floating-boxes">
+    <div class="image-box align-right">
     <img
-        class="help-image right"
+        class="right large nonuniform"
         alt="Helmholtz Cloud Service Types"
         src="{{ site.directory.images | relative_url }}services/service_types.jpg"
-        style="max-width: 20rem !important;min-width:  5rem !important;"
     />
-    <div style="flex: 1 0 0;">
+    </div>
+    <div class="text-box">
     <h4>Service Types: Full Service or Pilot Service</h4>
         <p>
         A fully integrated Helmholtz service means that the service has gone through the complete onboarding process: all information is available, all interfaces are ready. But it may happen that a service is made available while this information and interfaces are still being developed, hence a pilot service. Find more information about <a href="https://www.hifis.net/doc/process-framework/3_Service-Portfolio-Management/3.2_Service-Type-Definitions/3.2.0_Service-Type-Definitions/">fully integrated and pilot services</a>. 
@@ -72,6 +77,7 @@ excerpt: >-
         </p>        
     </div>
 </div>
+<div class="clear"></div>
 
 ### Service Operation KPI
 The usage of each Helmholtz Cloud Serivce and its overall contribution to the success of the Helmholtz Cloud is monitored continuously.