diff --git a/content/static/datenspuren/2012/style/style.css b/content/static/datenspuren/2012/style/style.css
index 490a468e9..c1bbf0e7d 100644
--- a/content/static/datenspuren/2012/style/style.css
+++ b/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 */
diff --git a/xsl/datenspuren/xhtml5.xsl b/xsl/datenspuren/xhtml5.xsl
index a4e0ed435..da8a1e441 100644
--- a/xsl/datenspuren/xhtml5.xsl
+++ b/xsl/datenspuren/xhtml5.xsl
@@ -309,9 +309,11 @@