add skweet image/video support

static/style.css

@@ -51,7 +51,7 @@ a.active {
   color: #311f20;
 }
 
-img {
+img, video {
   max-width: 100%;
   border: 4px solid #311f20;
 }
@@ -292,7 +292,8 @@ iframe {
   gap: 1em;
 }
 
-.skweet-gallery img {
+.skweet-gallery img,
+.skweet-gallery video {
   border: 4px solid #bf42a0;
   flex: 1 1 auto;
   width: 10px;
@@ -387,4 +388,4 @@ iframe {
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   z-index: 4;
-}
+}

templates/latestskweets.html.tera

@@ -5,12 +5,16 @@
   <div class="skweet">
     <img src="{{ skweet.account.avatar }}" class="profile">
     <div class="skweet-content">
-      <div class="skweet-info"><h4>{{ skweet.account.username }}</h4><a href="skweet.url"><h5>{{ skweet.created_at | date(format="%Y-%m-%d %H:%M") }}UTC</h5></a></div>
+      <div class="skweet-info"><h4>{{ skweet.account.username }}</h4><a href="{{ skweet.url }}" target="_blank" rel="noopener noreferrer"><h5>{{ skweet.created_at | date(format="%Y-%m-%d %H:%M") }}UTC</h5></a></div>
       <div class="skweet-text">{{ skweet.content }}</div>
       {% if skweet.media_attachments[0] %}
       <div class="skweet-gallery">
         {% for media_attachment in skweet.media_attachments %}
+        {% if media_attachment.type == "image" %}
         <img src="{{ media_attachment.url }}">
+        {% elif media_attachment.type == "video" %}
+        <video controls src="{{ media_attachment.url }}"></video>
+        {% endif %}
         {% endfor %}
       </div>
       {% endif %}
@@ -18,4 +22,5 @@
   </div>
   {% endif %}
   {% endfor %}
-</div>
+</div>
+