setup cards for content

suchwowx/static/css/custom.css

@@ -4,6 +4,22 @@
   margin: 0 auto;
 }
 
-/* #memeImage {
+.card {
-  cursor: zoom-in;
+  margin: 1em;
-} */
+  padding: 1em;
+  width: 300px;
+  border-radius: 6px;
+}
+
+.image {
+  text-align: center;
+}
+
+.image img, .image video {
+  border-radius: 6px;
+}
+
+.img-fluid {
+  max-height: 200px;
+  object-fit: cover;
+}

suchwowx/templates/index.html

@@ -22,17 +22,40 @@
         <div class="columns">
 
           {% for meme in _meme %}
-          <div class="column" style="padding-top:1em;">
+          <div class="card">
-            <a href="{{ url_for('meta.meme', meme_id=meme.id) }}" up-preload up-follow=".container">
+            <div class="card-image">
-            {% if meme.upload_path.endswith('mp4') %}
+              <figure class="image">
-              <video style="max-height: 60vh!important;max-width:80px;" {% if not request.MOBILE %}autoplay{% else %}controls{% endif %} muted loop>
+                <a href="{{ url_for('meta.meme', meme_id=meme.id) }}" up-preload up-follow=".container">
-                <source src="{{ url_for('meta.uploaded_file', filename=meme.upload_path) }}" type="video/mp4">
+                  {% if meme.upload_path.endswith('mp4') %}
-                Your browser does not support the video tag.
+                    <video class="img-fluid" {% if not request.MOBILE %}autoplay{% else %}controls{% endif %} muted loop>
-              </video>
+                      <source src="{{ url_for('meta.uploaded_file', filename=meme.upload_path) }}" type="video/mp4">
-            {% else %}
+                      Your browser does not support the video tag.
-              <img src="{{ url_for('meta.uploaded_file', filename=meme.upload_path) }}" width="200px" class="img-fluid" style="" />
+                    </video>
-            {% endif %}
+                  {% else %}
-            </a>
+                    <img alt="{{ meme.title }}" src="{{ url_for('meta.uploaded_file', filename=meme.upload_path) }}" width="200px" class="img-fluid" style="" />
+                  {% endif %}
+                </a>
+              </figure>
+            </div>
+            <div class="card-content">
+              <div class="media">
+                <div class="media-left">
+                  <!-- <figure class="image is-48x48">
+                    <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
+                  </figure> -->
+                </div>
+                <div class="media-content">
+                  <p class="title is-4">John Smith</p>
+                  <p class="subtitle is-6">@johnsmith</p>
+                </div>
+              </div>
+
+              <div class="content">
+                {{ meme.description }}
+                <br>
+                <time datetime="2016-1-1">{{ meme.create_date.strftime('%H:%M UTC - %d %b %Y') }}</time>
+              </div>
+            </div>
           </div>
 
           {% endfor %}