datenspuren: mitschnitte style

content/static/datenspuren/2012/style/style.css

@@ -154,11 +154,14 @@ nothing { border: 1px solid red; }
 
 /* videos, at least */
 section.resource {
+    display: inline-block;
+    vertical-align: top;
     border: 2pt solid black;
     border-radius: 8pt;
     padding: 10pt;
     margin-bottom: 5pt;
     display: inline-block;
+    max-width: 336px;
 }
 section.resource > h4 {
     margin: 0pt;
@@ -167,9 +170,45 @@ section.resource > h4 {
     margin-right: auto;
     max-width: 300px;
     min-height: 3em;
+    font: 120%/1.5;
 }
-section.resource > p.play {
-    text-align: center !important;
+section.resource > .preview {
+    position: relative;  /* to place .play */
+    margin: 0;
+    text-align: center;
+}
+section.resource > .preview > img {
+    max-width: 100%;
+}
+section.resource > .preview > p.play {
+    position: absolute;
+    left: 40%;
+    top: 30%;
+    margin: 0;
+    padding: 0.42em 0.5em 0.58em;
+    color: white;
+    font-size: 300%;
+    cursor: pointer;
+    line-height: 0.5em;
+    width: 0.5em;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 100%;
+}
+section.resource > ul.links {
+    list-style-type: none;
+    margin: 0.2em 0;
+    padding: 0;
+    text-align: center;
+    font-size: 80%;
+}
+section.resource > ul.links > li {
+    display: inline-block;
+    margin: 0 1em;
+}
+section.resource > ul.links .size {
+    margin: 0 0 0 0.5em;
+    font-size: 80%;
+    color: #333;
 }
 
 /* info */

xsl/datenspuren/xhtml5.xsl

@@ -309,9 +309,11 @@
 	</xsl:choose>
       </h4>
       <xsl:if test="@poster">
-	<img src="{@poster}" title="{@title}"/>
+	<div class="preview">
+	  <img src="{@poster}" title="{@title}"/>
+	</div>
       </xsl:if>
-      <ul>
+      <ul class="links">
 	<li><xsl:call-template name="link-resource"/></li>
 	<xsl:for-each select="alternative">
 	  <li><xsl:call-template name="link-resource"/></li>