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)

assets/css/image-scaling.scss

@@ -8,160 +8,93 @@
     clear: both;
 }
 
+$floatings: left, right;
 .floating-boxes {
   .image-box {
-    &.align-right {
-        @include respond-to-medium-extra("text-align", "right", "right", "center", "center");
-    }
-    &.align-left {
-        @include respond-to-medium-extra("text-align", "left", "left", "center", "center");
+    @each $floating in $floatings  {
+      &.align-#{$floating} {
+        @include respond-to-medium-extra("text-align", "#{$floating}", "#{$floating}", "center", "center");
+      }
     }
     img {
-      &.right {
-        @include respond-to-medium-extra("float", "right", "right", "none", "none");
-        @include respond-to-medium-extra("padding", "0.25rem 0.25rem 0.25rem 0.75rem", "0.25rem 0.25rem 0.25rem 0.75rem", "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, 30rem);
-            @include respond-to-medium-extra(max-width, 50rem, 40rem, 35rem, 30rem);
-          }
-          &.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, 40rem, 30rem, 25rem, 20rem);
-            @include respond-to-medium-extra(max-width, 40rem, 30rem, 25rem, 20rem);
-          }
-          &.linear {
-            @include respond-to-medium-extra(min-width, 40rem);
-            @include respond-to-medium-extra(max-width, 40rem);
-          }
-          &.constant {
-            min-width: 40rem;
-            max-width: 40rem;
-          }
-        }
-        &.medium {
-          &.nonuniform {
-            @include respond-to-medium-extra(min-width, 20rem, 17.5rem, 15rem, 12.5rem);
-            @include respond-to-medium-extra(max-width, 20rem, 17.5rem, 15rem, 12.5rem);
-          }
-          &.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, 7.5rem);
-            @include respond-to-medium-extra(max-width, 15rem, 12.5rem, 10rem, 7.5rem);
-          }
-          &.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, 5rem);
-            @include respond-to-medium-extra(max-width, 12.5rem, 10rem, 7.5rem, 5rem);
-          }
-          &.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;
-          }
-        }
-      }
-      &.left {
-        @include respond-to-medium-extra("float", "left", "left", "none", "none");
-        @include respond-to-medium-extra("padding", "0.25rem 0.75rem 0.25rem 0.25rem", "0.25rem 0.75rem 0.25rem 0.25rem", "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, 30rem);
-            @include respond-to-medium-extra(max-width, 50rem, 40rem, 35rem, 30rem);
-          }
-          &.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, 40rem, 30rem, 25rem, 20rem);
-            @include respond-to-medium-extra(max-width, 40rem, 30rem, 25rem, 20rem);
-          }
-          &.linear {
-            @include respond-to-medium-extra(min-width, 40rem);
-            @include respond-to-medium-extra(max-width, 40rem);
-          }
-          &.constant {
-            min-width: 40rem;
-            max-width: 40rem;
-          }
-        }
-        &.medium {
-          &.nonuniform {
-            @include respond-to-medium-extra(min-width, 20rem, 17.5rem, 15rem, 12.5rem);
-            @include respond-to-medium-extra(max-width, 20rem, 17.5rem, 15rem, 12.5rem);
-          }
-          &.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, 7.5rem);
-            @include respond-to-medium-extra(max-width, 15rem, 12.5rem, 10rem, 7.5rem);
-          }
-          &.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, 5rem);
-            @include respond-to-medium-extra(max-width, 12.5rem, 10rem, 7.5rem, 5rem);
-          }
-          &.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;
+      @each $floating in $floatings  {
+        &.#{$floating} {
+          @include respond-to-medium-extra("float", "#{$floating}", "#{$floating}", "none", "none");
+          @if $floating == 'left' {
+            @include respond-to-medium-extra("padding", "0.25rem 0.25rem 0.25rem 0.75rem", "0.25rem 0.25rem 0.25rem 0.75rem", "0.25rem 0.25rem 0.25rem 0.25rem", "0.25rem 0.25rem 0.25rem 0.25rem");
+          }
+          @if $floating == 'right' {
+            @include respond-to-medium-extra("padding", "0.25rem 0.75rem 0.25rem 0.25rem", "0.25rem 0.75rem 0.25rem 0.25rem", "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, 30rem);
+              @include respond-to-medium-extra(max-width, 50rem, 40rem, 35rem, 30rem);
+            }
+            &.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, 40rem, 30rem, 25rem, 20rem);
+              @include respond-to-medium-extra(max-width, 40rem, 30rem, 25rem, 20rem);
+            }
+            &.linear {
+              @include respond-to-medium-extra(min-width, 40rem);
+              @include respond-to-medium-extra(max-width, 40rem);
+            }
+            &.constant {
+              min-width: 40rem;
+              max-width: 40rem;
+            }
+          }
+          &.medium {
+            &.nonuniform {
+              @include respond-to-medium-extra(min-width, 20rem, 17.5rem, 15rem, 12.5rem);
+              @include respond-to-medium-extra(max-width, 20rem, 17.5rem, 15rem, 12.5rem);
+            }
+            &.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, 7.5rem);
+              @include respond-to-medium-extra(max-width, 15rem, 12.5rem, 10rem, 7.5rem);
+            }
+            &.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, 5rem);
+              @include respond-to-medium-extra(max-width, 12.5rem, 10rem, 7.5rem, 5rem);
+            }
+            &.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;
+            }
           }
         }
       }