From 66f285c2b1dca7eebfa10d684e98b23a63b04018 Mon Sep 17 00:00:00 2001
From: Stasiek Michalski <hellcp@opensuse.org>
Date: Sun, 3 Jun 2018 03:25:29 +0200
Subject: [PATCH 1/2] Add supporting classes to square based layout

---
 resources/views/profile/show.blade.php | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/resources/views/profile/show.blade.php b/resources/views/profile/show.blade.php
index f81e96dbb..8894cccab 100644
--- a/resources/views/profile/show.blade.php
+++ b/resources/views/profile/show.blade.php
@@ -101,12 +101,14 @@
       @foreach($timeline as $status)
       <div class="col-12 col-md-4 mb-4">
         <a class="card info-overlay" href="{{$status->url()}}">
-          <img class="card-img-top" src="{{$status->thumb()}}" width="300px" height="300px">
-          <div class="info-overlay-text">
-            <h5 class="text-white m-auto">
-              <span class="icon-heart">{{$item->likes()->count()}}</span>
-              <span class="icon-speech">{{$item->comments()->count()}}</span>
-            </h5>
+          <div class="square">
+            <div class="square-content" style="background-image: url('{{$status->thumb()}}')"></div>
+            <div class="info-overlay-text">
+              <h5 class="text-white m-auto">
+                <span class="icon-heart">{{$item->likes()->count()}}</span>
+                <span class="icon-speech">{{$item->comments()->count()}}</span>
+              </h5>
+            </div>
           </div>
         </a>
       </div>

From ea119a28ed36a3861467bc9e82cd6e2cf0b62e09 Mon Sep 17 00:00:00 2001
From: Stasiek Michalski <hellcp@opensuse.org>
Date: Sun, 3 Jun 2018 03:28:58 +0200
Subject: [PATCH 2/2] Add CSS for added classes

---
 resources/assets/sass/custom.scss | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/resources/assets/sass/custom.scss b/resources/assets/sass/custom.scss
index bc24a07ed..a972f29d1 100644
--- a/resources/assets/sass/custom.scss
+++ b/resources/assets/sass/custom.scss
@@ -153,3 +153,23 @@ body, button, input, textarea {
 .font-weight-ultralight {
     font-weight: 200 !important;
 }
+
+.square {
+    position: relative;
+    width: 100%;
+}
+
+.square::after {
+    content: "";
+    display: block;
+    padding-bottom: 100%;
+}
+
+.square-content {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: 50%;
+}