[frontend] Reduce width of profile img with screen width (#615)

The commit makes the profile image on the profile page reduce in width
if the screen width is less then it's normal width while maintaining
it's 1:1 aspect ration.

Signed-off-by: Sashanoraa <sasha@noraa.gay>

1 files changed, 25 insertions, 5 deletions

diff --git a/web/assets/profile.css b/web/assets/profile.css
index 7631b08ab..978468f72 100644
--- a/web/assets/profile.css
+++ b/web/assets/profile.css
@@ -34,13 +34,33 @@ main {
       text-decoration: none;
     }
 
-.profile .basic .avatar img {
-        height: 25em;
-        width: 25em;
-        object-fit: cover;
-        border-radius: 10px;
+.profile .basic .avatar-container {
+      position: relative;
+      width: 100%;
+      max-width: 25em;
+    }
+
+.profile .basic .avatar-container .avatar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
       }
 
+.profile .basic .avatar-container .avatar img {
+          object-fit: cover;
+          border-radius: 10px;
+          width: 100%;
+          height: 100%;
+        }
+
+.profile .basic .avatar-container:before {
+      content: "";
+      float: left;
+      padding-top: 100%;
+    }
+
 .profile .basic .displayname {
       font-weight: bold;
       font-size: 1.6rem;