profile-mode: improvements

assets/css/profileMode.css

@@ -6,7 +6,6 @@
 .main>.profile {
     display: table-cell;
     vertical-align: middle;
-
 }
 
 .main>.profile>.profile_inner {
@@ -14,7 +13,7 @@
 }
 
 .profile_inner h1 {
-    padding: 8px;
+    padding: 12px 0;
 }
 
 img {
@@ -22,23 +21,27 @@ img {
     width: 180px;
     border-radius: 50%;
     pointer-events: none;
-    margin: 5px;
 }
 
 @media screen and (max-width: 600px) {
     img {
-        width: 130px;
+        width: 150px;
+    }
+    .main>.profile>.profile_inner {
+        transform: translate(0, 0);
     }
 }
 
 .social-icons {
-    padding: 16px;
+    padding: 12px 0;
 }
 
 .buttons {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+    max-width: 400px;
+    margin: 0 auto;
 }
 
 .button {
@@ -53,6 +56,6 @@ img {
     padding: 0 8px;
 }
 
-.button:active, .social-icons>a>svg:active{
+.button:active, .social-icons>a>svg:hover{
     transform: scale(0.96);
 }

layouts/partials/indexProfile.html

@@ -1,21 +1,18 @@
 <div class="profile">
+    {{ with .Site.Params.profileMode }}
     <div class="profile_inner">
-        {{if .Site.Params.profileMode.imageUrl}}
-        <div>
-            <img src="{{ .Site.Params.profileMode.imageUrl}}" alt="{{ .Site.Params.profileMode.imageTitle}}" />
-        </div>
-        {{end}}
-        <h1>{{ if .Site.Params.profileMode.title }}{{.Site.Params.profileMode.title}}{{ else }}{{ .Site.Title }}{{end}}
-        </h1>
-        {{- with .Site.Params.socialIcons }}
+        {{if .imageUrl}}<img src="{{ .imageUrl}}" alt="{{ .imageTitle | default "profile image" }}" />{{end}}
+        <h1>{{ .title | default $.Site.Title }}</h1>
+        {{- with $.Site.Params.socialIcons }}
         <div class="social-icons">
             {{ partial "social-icons.html" . }}
         </div>
         {{- end }}
-        {{- with .Site.Params.profileMode.buttons }}
+        {{- with .buttons }}
         <div class="buttons">
             {{ partial "indexProfileButtons.html" . }}
         </div>
         {{- end }}
     </div>
+    {{end}}
 </div>