Slightly improve the media experience (#452)

* Slightly improve the media experience

- Use a grid to display the list of media
- Add icons for non-image media preview
- Paginate the gallery
- Add links to the gallery in the editor and in the profile settings to make it more discoverable when you need it

Fixes #432

* Allow video and audio tags in SafeString

Otherwise we can't display their preview, nor show them in articles

Also show controls by default for these two elements

* Show fallback images for audio and unknown files, to make them more visible

* Add a new constructor to SafeString when the input is trusted and doesn't need to be escaped.

And use it to generate media previews.

* Make it possible to insert video/audio in articles

static/css/_global.scss

@@ -307,6 +307,10 @@ figure {
   figcaption {
     padding: 1em;
   }
+
+  audio, video {
+    width: 100%;
+  }
 }
 
 .preview {
@@ -318,6 +322,30 @@ figure {
   margin-right: 20px;
 }
 
+.media-preview {
+  min-height: 8em;
+
+  &:not(.image) {
+    background-color: #7765E3;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 4em;
+  }
+
+  &.unknown {
+    background-image: url('/static/images/unknown-file.svg');
+    display: block;
+  }
+
+  &.audio {
+    background-image: url('/static/images/audio-file.svg');
+  }
+
+  &.video {
+    background-image: url('/static/images/video-file.svg');
+  }
+}
+
 /// Avatars
 .avatar {
   background-position: center;