Merge branch 'spotlights_list_image_spacing' into 'master'

Improve layout of Spotlights list See merge request hifis/overall/hifis.net!355

Merge branch 'spotlights_list_image_spacing' into 'master'
14409f80 · Uwe Jandt (DESY, HIFIS) · 5632856d · 5874cacd · 14409f80 · 14409f80
Commit 14409f80 authored 3 years ago by Uwe Jandt (DESY, HIFIS)
--- a/_layouts/spotlight-list.html
+++ b/_layouts/spotlight-list.html
 {% include top.html %}

 <body>
+    <link rel="stylesheet" href="{{ '/assets/css/spotlights.css' | relative_url }}">

    {% include header.html %}

@@ -11,22 +12,23 @@

            {% assign spotlights = site.spotlights %}

-            <div class="alert alert-success">
+            <article class="salert alert-success">
            This is a preliminary list of software spotlights and more will be added soon. Stay tuned!
-            </div>
+            </article>

            {% for spotlight in spotlights %}
            <article class="list-entry">
-                <div class="image-block">
-                    <a href="{{ spotlight.url | relative_url}}">
-                        <img
-                            class="help-image left"
-                            alt="Logo of {{ spotlight.name }}"
-                            src="{{ site.directory.images | relative_url }}spotlights/{{spotlight.preview_image}}"
-                            style="max-height:7rem;"
-                        />
-                    </a>
-                    <div>
+                <div class="spotlight-image-block">
+                    <div class= "image-container">
+                        <a href="{{ spotlight.url | relative_url}}">
+                            <img
+                                class="help-image left"
+                                alt="Logo of {{ spotlight.name }}"
+                                src="{{ site.directory.images | relative_url }}spotlights/{{spotlight.preview_image}}"
+                            />
+                        </a>
+                    </div>
+                    <div class="teaser">
                        <h3>
                            <a href="{{ spotlight.url | relative_url }}">
                                {{ spotlight.name }}

--- a/assets/css/spotlights.scss
+++ b/assets/css/spotlights.scss
@@ -3,6 +3,39 @@

 @import "boilerplate/breakpoints";

+.spotlight-image-block {
+    display: flex;
+    padding: 1rem 0;
+    align-items: center;
+
+    .image-container {
+        flex: 1 0 0;
+        display: flex;
+        justify-content: center;
+        padding-right: 1.0rem;
+    }
+
+    .teaser {
+        flex: 2 0 0;
+    }
+
+    .help-image {
+        max-width: 14rem; // needed for Chrome on large screens
+        max-height: 7rem;
+        min-height: 5rem; // needed for Firefox on small screens
+
+        &.right {
+            @include medium-is-tablet-plus {
+                order: 1
+            }
+        }
+    }
+
+    @include medium-is-phone {
+        flex-direction: column;
+    }
+}
+
 .spotlight-info {
    zoom: 90%;
    display: inline-table;