From 0eee7d9e54eee86cca9d9a438f40302457a8bf1f Mon Sep 17 00:00:00 2001
From: "Hueser, Christian (FWCC) - 138593" <c.hueser@hzdr.de>
Date: Tue, 9 Aug 2022 14:15:12 +0200
Subject: [PATCH] Improve scaling of pictures in side-by-side arrangements
---
...20-01-07-contributing-in-4-simple-steps.md | 14 ++-
.../2022/08/2022-08-01-update-cloudportal.md | 13 +-
_sass/boilerplate/_breakpoints.scss | 48 ++++++--
_sass/boilerplate/_responsive.scss | 42 ++++++-
assets/css/image-scaling.scss | 111 ++++++++++++++++++
assets/css/media-page-images.scss | 41 +++++++
assets/css/services/services-page-images.scss | 7 +-
hifisfor/itsupport.md | 38 ++++--
hifisfor/rse.md | 47 +++++---
hifisfor/scientists.md | 53 +++++----
media/index.md | 29 +++--
services/cloud/provider.md | 32 +++--
12 files changed, 381 insertions(+), 94 deletions(-)
create mode 100644 assets/css/image-scaling.scss
create mode 100644 assets/css/media-page-images.scss
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 8474f797c..9eba16b65 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 78fbf1405..c3b681ce9 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 f281a45e9..38fbfc6fd 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 e8b706058..e8fcb4226 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 000000000..52d2617c6
--- /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 000000000..a19cb6088
--- /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 33f3683a5..505196664 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 30a265062..9030cbf18 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 e40c36e1c..b344a2b4f 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 be41ea1c7..28c1124db 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 f8b0a5050..e191ba978 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 3a05a7d3d..70caacb2a 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.
--
GitLab