datenspuren videos: style

content/static/datenspuren/2018/style/style.css

@@ -295,16 +295,34 @@ footer {
 .resource {
     display: inline-block;
     margin: 8px;
-    padding: 0;
+    padding: 3px;
     box-sizing: border-box;
-    /* width: 290px; */
+    width: 20rem;
+    text-align: center;
+    border: 4px solid white;
+    border-radius: 1.5rem;
 }
 .resource h4 {
-    text-align: center;
-    margin: 2px 4px;
+    margin: 2px;
     padding: 0;
-    font-size: 100%;
+    font-size: 120%;
     font-weight: bold;
+    background-color: #b6ff00;
+    border-radius: 1rem;
+    line-height: 2rem;
+}
+.resource h4 a {
+    color: black;
+}
+.resource .subtitle {
+    margin: 0;
+    padding: 0.5rem;
+    font-size: 95%;
+    line-height: 1.3em;
+    height: 1.3em;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 .resource img {
     width: 100%;

xsl/datenspuren/xhtml5.xsl

@@ -272,9 +272,13 @@
               <xsl:value-of select="$title"/>
             </a>
           </h4>
-          <em><xsl:value-of select="$subtitle"/></em>
+          <p class="subtitle">
+            <xsl:value-of select="$subtitle"/>
+          </p>
           <div class="preview">
-            <img src="{$preview}" title="{$title}"/>
+            <a href="{link}">
+              <img src="{$preview}" title="{$title}"/>
+            </a>
           </div>
           <ul class="links">
             <xsl:for-each select="$feeds/feed">