better profile display

src/BirdsiteLive/Views/Users/Index.cshtml

@@ -3,16 +3,32 @@
     ViewData["Title"] = "User";
 }
 
-<div class="profile" style="background-image: url('@ViewData.Model.ProfileBannerURL');">
+
+<div class="col-6 mx-auto">
+    <a href="@ViewData.Model.Url" class="nounderline" title="@ViewData.Model.Url">
+        @*<div class="profile" style="background-image: url('@ViewData.Model.ProfileBannerURL');">*@
+        <div class="profile">
+
             <div class="sub-profile">
+                <div class="logo">
+                    <svg viewBox="0 0 24 24" class="logo-twitter r-13gxpu9 r-4qtqp9 r-yyyyoo r-6zzn7w r-19fsva8 r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-q1j0wu"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g></svg>
+                </div>
+
                 <img class="avatar" src="@ViewData.Model.ProfileImageUrl" />
 
-        <a href="@ViewData.Model.Url"><h1>@ViewData.Model.Name</h1></a>
+                <h1>@ViewData.Model.Name <span class="handle">@@@ViewData.Model.Acct</span></h1>
-        <h2>@@@ViewData.Model.Acct</h2>
+
+                @*<h2>@@@ViewData.Model.Acct</h2>*@
 
 
                 <div class="description">
                     @ViewData.Model.Description
                 </div>
             </div>
+
+        </div>
+    </a>
+    <br/>
+    <p>Search this handle to find it in your instance:</p>
+
 </div>

src/BirdsiteLive/wwwroot/css/birdsite.css

@@ -1,43 +1,72 @@
-.profile {
+.nounderline {
-    border: 1px #dddddd solid;
+    text-decoration: none !important
-    border-radius: 5px;
-    background-repeat: no-repeat;
-    /*background-attachment: fixed;*/
-    background-position: center;
 }
 
+.logo {
+    width: 25px;
+    height: 25px;
+    float: right;
+}
+
+.logo-twitter {
+    filter: invert(51%) sepia(92%) saturate(1166%) hue-rotate(180deg) brightness(94%) contrast(98%);
+    /*background: #349fef;*/
+}
+
+.profile {
+    border: 1px #dddddd solid;
+    border-radius: 15px;
+    /*background-repeat: no-repeat;*/
+    /*background-attachment: fixed;*/
+    /*background-position: center;*/
+    color: black;
+}
+
+    .profile:hover {
+        transition: all .2s;
+        background-color: #f5f8fa;
+    }
+
     .profile h1 {
-        font-size: 32px;
+        font-size: 18px;
-        margin-left: 120px;
+        margin-left: 60px;
-        padding-top: 8px;
+        padding-top: 0px;
     }
 
     .profile h2 {
         font-size: 20px;
-        margin-left: 120px;
+        margin-left: 0px;
     }
 
-    .profile a {
+/*.profile a {
         color: black;
     }
 
         .profile a:hover {
             color: #555555;
-    }
+        }*/
+
+.handle {
+    color: gray;
+    font-weight: normal;
+}
 
 .sub-profile {
-    padding: 20px;
+    padding: 10px 15px;
-    background-color: rgba(255, 255, 255, 0.7);
 }
 
+/*.sub-profile a {
+        color: black;
+    }*/
+
 .avatar {
     float: left;
-    width: 100px;
+    width: 50px;
     border-radius: 50%;
 }
 
 .description {
-    margin-top: 40px;
+    margin-top: 0px;
-    margin-left: 20px;
+    margin-left: 60px;
-    font-weight: bold;
+    /*font-weight: bold;*/
 }