diff --git a/_posts/2020/01/2020-01-07-contributing-in-4-simple-steps.md b/_posts/2020/01/2020-01-07-contributing-in-4-simple-steps.md
index 8474f797c5ad983846ccec5ead8df15eb73f9c7c..9eba16b65b767dc3cf100a18a68ca46034b51d21 100644
--- a/_posts/2020/01/2020-01-07-contributing-in-4-simple-steps.md
+++ b/_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}
-
+<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
diff --git a/_posts/2022/08/2022-08-01-update-cloudportal.md b/_posts/2022/08/2022-08-01-update-cloudportal.md
index 78fbf1405391a95e86d292001400c6011c14864a..c3b681ce969bd442917c2b5bcba3cb51d70b8733 100644
--- a/_posts/2022/08/2022-08-01-update-cloudportal.md
+++ b/_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.
diff --git a/_sass/boilerplate/_breakpoints.scss b/_sass/boilerplate/_breakpoints.scss
index f281a45e9b8a5fa1fd8839c844beda61f89b98e2..38fbfc6fdfe2a253f030be3741921d0c539c1559 100644
--- a/_sass/boilerplate/_breakpoints.scss
+++ b/_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})
diff --git a/_sass/boilerplate/_responsive.scss b/_sass/boilerplate/_responsive.scss
index e8b70605813f600d2c7bb1393c77097af4b654f3..e8fcb42269a697b3659f52f3ebff791e38b3bcdf 100644
--- a/_sass/boilerplate/_responsive.scss
+++ b/_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};
+ }
+ }
+}
diff --git a/assets/css/image-scaling.scss b/assets/css/image-scaling.scss
new file mode 100644
index 0000000000000000000000000000000000000000..52d2617c6f286e295d7f26881e5ae49a02c5ffdf
--- /dev/null
+++ b/assets/css/image-scaling.scss
@@ -0,0 +1,111 @@
+---
+---
+
+@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 {
+
+ }
+}
diff --git a/assets/css/media-page-images.scss b/assets/css/media-page-images.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a19cb6088d2315d31e84c7d69a51a16310cdc1bd
--- /dev/null
+++ b/assets/css/media-page-images.scss
@@ -0,0 +1,41 @@
+---
+---
+
+@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;
+}
diff --git a/assets/css/services/services-page-images.scss b/assets/css/services/services-page-images.scss
index 33f3683a555561727e8b7ea46833776b2072c366..505196664c32652b4a795f8c0a6fb832c49cc8dc 100644
--- a/assets/css/services/services-page-images.scss
+++ b/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;
}
}
diff --git a/hifisfor/itsupport.md b/hifisfor/itsupport.md
index 30a265062b529be6cf76e47c409dadfa4130f8be..9030cbf18d4c003f5646a406652928368796322a 100644
--- a/hifisfor/itsupport.md
+++ b/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>
diff --git a/hifisfor/rse.md b/hifisfor/rse.md
index e40c36e1c36e4a27a364e1236f14a7ec6f758bbb..b344a2b4f2b65017a869e7baccfc7e405d87ace0 100644
--- a/hifisfor/rse.md
+++ b/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>
diff --git a/hifisfor/scientists.md b/hifisfor/scientists.md
index be41ea1c7178d5d014125e6d434f4e91082197e1..28c1124dbaefc54260465ab20871bd49b23ac59f 100644
--- a/hifisfor/scientists.md
+++ b/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ütte</a>.</div>
diff --git a/media/index.md b/media/index.md
index f8b0a5050d3b99c9b30e158d0d243614803c7abc..e191ba978ed89e71545da9cda22be64ed2e5f54a 100644
--- a/media/index.md
+++ b/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>
diff --git a/services/cloud/provider.md b/services/cloud/provider.md
index 3a05a7d3d68007e05f0be7893e90d8265a92a46c..70caacb2a66a04a3490ddbab5fd27ed64a55fc22 100644
--- a/services/cloud/provider.md
+++ b/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.