settings page bisschen aufgehübscht

public/s/css/f0ck.css

@@ -2992,3 +2992,27 @@ button#togglebg {
 .fader-out {
     animation: fadeOut  .8s steps(100) forwards
 } 
+
+.settings {
+  display: grid;
+  justify-content: center;
+}
+
+input[name="i_avatar"] {
+  text-align: center;
+  width: 50px;
+  padding: 10px;
+}
+
+input#s_avatar {
+  padding: 5px;
+  border: 1px solid var(--black);
+  border-radius: 3px;
+  background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
+  box-shadow: var(--nav-link-box-shadow);
+  cursor: pointer;
+}
+
+#s_avatar:hover {
+  background: #ffffff0f;
+}

views/settings.html

@@ -1,7 +1,6 @@
 @include(snippets/header)
-<div id="main">
+<div class="settings">
   <h1>Settings</h1>
-  @if(session.avatar)<a href="/{{ session.avatar }}"><img id="img_avatar" src="/t/{{ session.avatar }}.webp"></a>@endif
   <h2>Account</h2>
   <table class="table">
     <tbody>
@@ -18,7 +17,7 @@
         <td>{!! session.user !!}</td>
       </tr>
       <tr>
-        <td>avatar</td>
+        <td>@if(session.avatar)<a href="/{{ session.avatar }}"><img id="img_avatar" src="/t/{{ session.avatar }}.webp"></a>@endif</td>
         <td><input type="text" class="input" name="i_avatar" value="{{ session.avatar }}"></td>
       </tr>
       <tr>