--- /dev/null
+.picture-mini-box, .picture-box {
+ display: inline-block;
+ margin: 0;
+ vertical-align: top;
+}
+
+
+.picture-box {
+ width: 37.5em;
+}
+
+.picture-mini-box {
+ width: 12.5em;
+}
+
+.picture-mini-box a, .picture-box-inner {
+ display: block;
+ color: black;
+ border: 1px solid #ddd;
+ height: 20em;
+ padding: .75em;
+ margin: .1em;
+ background: #fff;
+ -moz-box-shadow: 2px 2px 2px #ddd;
+ -webkit-box-shadow: 2px 2px 2px #ddd;
+ box-shadow: 2px 2px 2px #ddd;
+ overflow: hidden;
+}
+
+.picture-mini-box a {
+ height: 20em;
+ margin: .1em;
+}
+.picture-box-inner {
+ height: 14.4em;
+ margin: .5em;
+}
+
+.picture-mini-box img, .picture-box img {
+ width: 10.8em;
+ height: 14.4em;
+}
+.picture-mini-box img {
+ margin-bottom: .3em;
+}
+.picture-box img {
+ float: left;
+ margin-right: 1.5em;
+}
+
+.picture-mini-box .author {
+ color: #777;
+}
+
+
+.picture-box-body {
+ height: 13em;
+ overflow: hidden;
+}
+.picture-box-head {
+ min-height: 7em;
+}
+.picture-box-tag {
+ font-size: .8em;
+ margin-right: .5em;
+}
+.picture-box-download {
+ position: relative;
+}
+.picture-box-formats {
+ display: none;
+ top: -2em;
+ position: absolute;
+ height: 2em;
+ width: 100em;
+}
+.picture-box-formats a {
+ margin-right: 1em;
+}
+.picture-box-download:hover .picture-box-formats {
+ display: block;
+}
+
+.picture-box-tools a:before {
+ content: "⇩";
+ font-family: WL-Nav;
+ font-size: 2em;
+ margin-right: .25em;
+ vertical-align: middle;
+}
--- /dev/null
+{% load i18n %}
+{% load thumbnail %}
+<div class="picture-box">
+<div class="picture-box-inner">
+ <a href="{{ picture.get_absolute_url }}">
+ {% thumbnail picture.image_file "216x288" as thumb %}
+ <img src="{{thumb.url}}"/>
+ {% endthumbnail %}
+ </a>
+ <div class="picture-box-body">
+ <div class="picture-box-head">
+ <div class="mono author">
+ {% for author in tags.author %}
+ {{ author }}
+ {% endfor %}
+ </div>
+ <div class="title">{{ picture.title }}</div>
+ </div>
+ <div class="tags">
+ {% spaceless %}
+
+ <span class="mono">{% trans "Epoch" %}: </span>
+ <span class="picture-box-tag">
+ {% for tag in tags.epoch %}
+ <a href="{{ tag.get_absolute_url }}">{{ tag.name }} </a>
+ {% endfor %}
+ </span>
+
+ <span class="mono">{% trans "Kind" %}: </span>
+ <span class="picture-box-tag">
+ {% for tag in tags.kind %}
+ <a href="{{ tag.get_absolute_url }}">{{ tag.name }} </a>
+ {% endfor %}
+ </span>
+
+ {% endspaceless %}
+ </div>
+ </div>
+ <ul class="picture-box-tools">
+ </ul>
+</div>
+</div>