diff --git a/_layouts/spotlight-list.html b/_layouts/spotlight-list.html
index 9e5a5ba38e71dd0ec58cba5b40d81778e1b6e117..9ff951d38f17ae20de482579f85bf6fe962a6f54 100644
--- a/_layouts/spotlight-list.html
+++ b/_layouts/spotlight-list.html
@@ -1,6 +1,7 @@
{% 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 }}
diff --git a/assets/css/spotlights.scss b/assets/css/spotlights.scss
index 72ca26930afb7988bbc6ac0b4a1d297a1a5d8642..55469b80c310776a69402d225e29356f33e5f0bc 100644
--- 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;