Images on frontpage, reference to event in notes, audio type

generator/templates/note.html

@@ -23,12 +23,12 @@
   </nav>
   <section class="item-reference">
     Note related to:
-    {% if note.programmeItem %}
+    {% if note.programmeItem.resolved %}
       <a href="{{ note.programmeItem.link }}">
         <h2>{{ note.programmeItem.date }} {{ note.programmeItem.time }} {{ note.programmeItem }}</h2>
       </a>
       {{ note.programmeItem.summary }}
-    {% elif note.event %}
+    {% elif note.event.resolved %}
       <a href="{{ note.event.link }}">
         <h2>{{ note.event.date }} {{ note.event.time }} {{ note.event }}</h2>
       </a>

generator/templates/snippets/audio.html

 <section class="audio">
   <audio controls>
-    <source src="{{ audio.audio }}" type="{% if audio.type %}{{ audio.type }}{% else %}audio/mpeg{% endif %}">
+    <source src="{{ audio.audio }}" type="{% if audio.type.value %}{{ audio.type }}{% else %}audio/mpeg{% endif %}">
   </audio>
-  {% if audio.description %}
+  {% if audio.description.value %}
     <p>
       {{ audio.description }}
     </p>

generator/templates/static/styles.css

@@ -778,7 +778,8 @@ div .pad {
   }
 }
 
-.content img {
+.content img,
+.content figure {
   width: 33%;
   float: left;
   margin-right: .5em;
@@ -788,13 +789,38 @@ div .pad {
   clear: left;
 }
 
-.content img.full,
+.content figure {
+  margin-left: 0;
+}
+
+main img.full,
+main figure.full img {
+  cursor: zoom-out;
+}
+
+.content img.full
+.content figure.full,
 .content audio,
 .content video {
-  max-width: 100%;
+  max-width: 47.5em;
   width: 100%;
-  margin-top: .5em;
-  margin-bottom: .5em;
+  /* margin-top: .5em; */
+  /* margin-bottom: .5em; */
+}
+
+.content figure img {
+	width: 100%;
+	float: none;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.content figure.full figcaption {
+  width: 80%;
+}
+
+figcaption {
+  font-size: 80%;
 }
 
 main > :last-child {

generator/templates/static/styles.simple.css

@@ -487,9 +487,15 @@ main img.full, main figure.full img {
 main img.full,
 main audio,
 main video,
-main figure.full figcaption {
+main figure.full {
   max-width: 47.5em;
   width: 100%;
+  /* margin-top: .5em; */
+  /* margin-bottom: .5em; */
+}
+
+main figure.full figcaption {
+  width: 80%;
 }
 
 main figure img {