From eda44a2e7d6404c4bda1497bd96bf4155b9611e7 Mon Sep 17 00:00:00 2001
From: Sebastian Schulze <github.com@bascht.com>
Date: Thu, 9 Jul 2020 21:08:31 +0200
Subject: [PATCH] Fix up a few flexbox glitches

---
 layouts/instagram_image/summary.html  |  2 +-
 layouts/instagram_video/summary.html  |  2 +-
 layouts/mastodon_toot/summary.html    |  3 +-
 layouts/pinboard/summary.html         |  2 +-
 layouts/pocket_favourite/summary.html |  2 +-
 layouts/section/posts.html            |  4 ++-
 layouts/twitter_tweet/summary.html    |  5 +--
 static/css/bascht.com.css             | 48 +++++++++++++++++++--------
 8 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/layouts/instagram_image/summary.html b/layouts/instagram_image/summary.html
index e1eda3a2..3d6261df 100644
--- a/layouts/instagram_image/summary.html
+++ b/layouts/instagram_image/summary.html
@@ -1,4 +1,4 @@
-<a href="{{.Permalink}}" class="summary instagram_image h-entry u-url">
+<a href="{{.Permalink}}" class="summary instagram_image">
   <h2 class="p-name"><span class="social_logo">{{ partial "social_logo" . }}</span>{{.Title | default "Untitled" }}</h2>
   <p><img src="{{ .Params.media_url }}" ></p>
   <small>{{ .Date.Format "January, 02th 2006" }}</small>
diff --git a/layouts/instagram_video/summary.html b/layouts/instagram_video/summary.html
index c6549ff2..5fd37d81 100644
--- a/layouts/instagram_video/summary.html
+++ b/layouts/instagram_video/summary.html
@@ -1,4 +1,4 @@
-<a href="{{.Permalink}}" class="summary instagram_video u-url h-entry">
+<a href="{{.Permalink}}" class="summary instagram_video u-url">
     <h2 class="p-name"><span class="social_logo">{{ partial "social_logo" . }}</span> {{.Title}}</h2>
     {{ if .Params.preview_url }}<p><img src="{{ .Params.preview_url }}" ></p>{{ end }}
     <small>{{ .Date.Format "January, 02th 2006" }}</small>
diff --git a/layouts/mastodon_toot/summary.html b/layouts/mastodon_toot/summary.html
index df6c0fc8..f465eab0 100644
--- a/layouts/mastodon_toot/summary.html
+++ b/layouts/mastodon_toot/summary.html
@@ -1,5 +1,6 @@
-<a class="u-url h-entry" href="{{.Permalink}}">
+<a class="u-url mastodon_toot" href="{{.Permalink}}">
     <h2 class="p-name">{{ partial "social_logo" . }} {{.Title}}</h2>
+    {{ if .Params.media_url }}<p><img src="{{ .Params.media_url }}" ></p>{{ end }}
     <small>{{ .Date.Format "January, 02th 2006" }}</small>
     <a class="hidden u-syndication syn-link" rel="syndication" href="{{ .Params.original_url }}">{{ .Params.original_url }}</a>
 </a>
diff --git a/layouts/pinboard/summary.html b/layouts/pinboard/summary.html
index 1bc6c813..dddb8893 100644
--- a/layouts/pinboard/summary.html
+++ b/layouts/pinboard/summary.html
@@ -1,4 +1,4 @@
-<a class="u-url h-entry" href="{{.Permalink}}">
+<a class="u-url" href="{{.Permalink}}">
     <h2 class="p-name"><span class="social_logo">{{ partial "social_logo" . }}</span>{{.Title | truncate 50}}</h2>
     <small>{{ .Date.Format "January, 02th 2006" }}</small>
 </a>
diff --git a/layouts/pocket_favourite/summary.html b/layouts/pocket_favourite/summary.html
index 1bc6c813..dddb8893 100644
--- a/layouts/pocket_favourite/summary.html
+++ b/layouts/pocket_favourite/summary.html
@@ -1,4 +1,4 @@
-<a class="u-url h-entry" href="{{.Permalink}}">
+<a class="u-url" href="{{.Permalink}}">
     <h2 class="p-name"><span class="social_logo">{{ partial "social_logo" . }}</span>{{.Title | truncate 50}}</h2>
     <small>{{ .Date.Format "January, 02th 2006" }}</small>
 </a>
diff --git a/layouts/section/posts.html b/layouts/section/posts.html
index 610a3e51..a0c44778 100644
--- a/layouts/section/posts.html
+++ b/layouts/section/posts.html
@@ -8,7 +8,9 @@
         <h2>{{ .Key }}</h2>
         <div class="posts summary clearfix">
             {{ range .Pages.ByDate.Reverse }}
-            {{ .Render "summary" }}
+            <div class="h-entry {{ .Params.type }}">
+                {{ .Render "summary" }}
+            </div>
             {{ end }}
         </div>
         {{ end }}
diff --git a/layouts/twitter_tweet/summary.html b/layouts/twitter_tweet/summary.html
index df6c0fc8..80a3bf04 100644
--- a/layouts/twitter_tweet/summary.html
+++ b/layouts/twitter_tweet/summary.html
@@ -1,5 +1,6 @@
-<a class="u-url h-entry" href="{{.Permalink}}">
-    <h2 class="p-name">{{ partial "social_logo" . }} {{.Title}}</h2>
+<a class="u-url" href="{{.Permalink}}">
+    <h2 class="p-name">{{ partial "social_logo" . }} {{.Params.text}}</h2>
+    {{ if .Params.media_url }}<p><img src="{{ .Params.media_url }}" ></p>{{ end }}
     <small>{{ .Date.Format "January, 02th 2006" }}</small>
     <a class="hidden u-syndication syn-link" rel="syndication" href="{{ .Params.original_url }}">{{ .Params.original_url }}</a>
 </a>
diff --git a/static/css/bascht.com.css b/static/css/bascht.com.css
index 44921f2e..7a95828d 100644
--- a/static/css/bascht.com.css
+++ b/static/css/bascht.com.css
@@ -225,31 +225,50 @@ article.summary a.anchor {
     align-content: stretch;
 }
 .posts a {
+    overflow: hidden;
+    text-decoration: none;
+    color: inherit;
+    /* border: 2px solid red; */
+    height: 100%;
+    width: 100%;
+    display: block;
+}
+
+.posts div.h-entry {
     padding: 1em;
     box-sizing: border-box;
     margin: 1em;
     width: 20%;
-    /* height: 10px; */
-    flex: 1 auto;
-    /* float: left; */
-    /* height: 50px; */
+    flex: 2 auto;
     border: 1px solid #cdcdcd;
     border-radius: 5px;
 
-    overflow: hidden;
-    text-decoration: none;
-    color: inherit;
-
     background: -moz-linear-gradient(top, #f2f2f2 0%, #ffffff 100%);
     background: -webkit-linear-gradient(top, #f2f2f2 0%,#ffffff 100%);
     background: linear-gradient(to bottom, #f2f2f2 0%,#ffffff 100%);
 }
 
-.posts.summary a h2 {
-    white-space: nowrap;
+.posts .h-entry.foursquare_checkin {
+    height: 20%;
+}
+.posts .h-entry.pinboard {
+    height: 20%;
+}
+.posts .h-entry.mastodon_toot {
+    width: 30%;
+}
+.posts .h-entry.twitter_tweet {
+    width: 30%;
+}
+.posts .h-entry.instagram_image {
+    /* width: 40%; */
+}
+.posts.summary .h-entry h2 {
+    /* white-space: nowrap; */
+    overflow: hidden;
 }
 
-.posts a:hover {
+.posts .h-entry:hover {
     background: #f2f2f2;
     background: -moz-linear-gradient(top, #f2f2f2 0%, #ffffff 31%);
     background: -webkit-linear-gradient(top, #f2f2f2 0%,#ffffff 31%);
@@ -258,9 +277,12 @@ article.summary a.anchor {
 }
 
 
-.posts .summary.instagram_video img, 
+.posts div.twitter_tweet img,
+.posts div.mastodon_toot img,
+.posts .summary.instagram_video img,
 .posts .summary.instagram_image img {
-    width: 85%;
+    width: 90%;
+    background-color: #fff;
 }
 .posts.summary .spotify_like {
     width: 300px