style: improve typography

1 files changed, 12 insertions, 13 deletions

diff --git a/layouts/partials/widgets/about.html b/layouts/partials/widgets/about.html
index fc364ff..4f4bb6d 100644
--- a/layouts/partials/widgets/about.html
+++ b/layouts/partials/widgets/about.html
@@ -1,16 +1,16 @@
-<div class="flex flex-col md:flex-row items-center justify-center mb-12">
-  {{ $img := partial "utils/get-image" (dict "context" . "url" .Params.avatar "keyword" "*avatar*")}}
+<div class="mb-12 flex flex-col items-center justify-center md:flex-row">
+  {{ $img := partial "utils/get-image" (dict "context" . "url" .Params.avatar "keyword" "*avatar*") }}
   {{ with $img }}
-    <div class="flex-none w-48 mx-auto md:ms-0 md:me-8 md:pe-8 md:border-e">
-      <img src="{{ . }}" class="rounded-full" alt="Avatar">
+    <div class="md:ms-0 md:me-8 md:pe-8 md:border-e mx-auto w-48 flex-none">
+      <img src="{{ . }}" class="rounded-full" alt="Avatar" />
     </div>
   {{ end }}
-  <div class="grow mt-4 md:mt-0">
-    <div class="text-3xl py-4">{{ .Title }}</div>
-    <div class="w-3/12 xl:w-2/12 border-b"></div>
+  <div class="mt-4 grow md:mt-0">
+    <div class="py-4 text-3xl">{{ .Title }}</div>
+    <div class="w-3/12 border-b xl:w-2/12"></div>
 
     <div class="flex items-center pt-4">
-      {{ with or (.Params.role) (.Params.organizations)}}
+      {{ with or (.Params.role) (.Params.organizations) }}
         <i class="fas fa-user"></i>
       {{ end }}
       <div class="flex flex-wrap">
@@ -22,7 +22,6 @@
           <a href="{{ .url }}" class="ps-4">{{ .name | markdownify }}</a>
         {{ end }}
       </div>
-
     </div>
 
     {{ with .Params.bio }}
@@ -31,8 +30,8 @@
       </div>
     {{ end }}
   </div>
-  <div class="flex md:flex-col justify-center items-end ms-8">
-    {{ $brand := $.Param "social"}}
+  <div class="ms-8 flex items-end justify-center md:flex-col">
+    {{ $brand := $.Param "social" }}
     {{ range $brand }}
       {{/* Deprecation warning(v1.0.0) starts */}}
       {{ if .icon_pack }}
@@ -41,12 +40,12 @@
       {{ $iconPack := .iconPack | default .icon_pack }}
       {{/* Deprecation warning(v1.0.0) ends */}}
       {{ $src := print $iconPack " fa-" .icon }}
-      <div class="pb-2 pe-4 md:pe-0 pt-4 md:pt-0">
+      <div class="pe-4 md:pe-0 pb-2 pt-4 md:pt-0">
         <a href="{{ .url }}"><i class="{{ print $src }}"></i></a>
       </div>
     {{ end }}
   </div>
 </div>
-<div class="content">
+<div class="prose max-w-none">
   {{ .Content }}
 </div>