From ddf263db42012fa1a9cdddaf658716503ea93929 Mon Sep 17 00:00:00 2001
From: WANG Chucheng <me@wangchucheng.com>
Date: Sun, 6 Feb 2022 12:59:04 -0500
Subject: style: improve typography

---
 layouts/_default/list.html                       | 17 ++---
 layouts/_default/single.html                     | 94 +++++++++++-------------
 layouts/_default/terms.html                      | 23 +++---
 layouts/authors/terms.html                       | 23 +++---
 layouts/partials/components/doc-layout.html      | 15 +---
 layouts/partials/components/doc-list.html        | 11 +--
 layouts/partials/components/list-article.html    |  6 ++
 layouts/partials/components/post-article.html    | 12 +++
 layouts/partials/components/post-metadata.html   | 58 ++++++++-------
 layouts/partials/components/post-series.html     | 22 +++---
 layouts/partials/components/post-toc.html        | 26 +++++--
 layouts/partials/components/summary-masonry.html | 12 +--
 layouts/partials/head.html                       |  9 +--
 layouts/partials/utils/get-summary.html          | 34 ++++-----
 layouts/partials/widgets/about.html              | 25 +++----
 layouts/partials/widgets/experience.html         | 47 ++++++------
 16 files changed, 216 insertions(+), 218 deletions(-)
 create mode 100644 layouts/partials/components/list-article.html
 create mode 100644 layouts/partials/components/post-article.html

(limited to 'layouts')

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 47725d5..4f4419f 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,14 +1,7 @@
 {{ define "main" }}
-<article class="mx-6 my-8">
-    <h1 class="font-bold text-3xl text-primary-text">{{ .Title }}</h1>
-    {{ with .Content }}
-    <div class="content">
-        {{ . }}
-    </div>
-    {{ end }}
-</article>
-<div class="bg-secondary-bg rounded px-6">
+  {{ partial "components/list-article" . }}
+  <div class="bg-secondary-bg rounded px-6">
     {{ partial "components/summary-list-plain" .Paginator.Pages }}
-</div>
-{{ template "_internal/pagination.html" . }}
-{{ end }}
\ No newline at end of file
+  </div>
+  {{ template "_internal/pagination.html" . }}
+{{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index bb5b178..04a81d9 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,66 +1,60 @@
 {{ define "main" }}
-{{ $hasToc := and (in .TableOfContents "<li>" ) (.Params.toc) }}
-{{ $hasSidebar := or ($hasToc) (.Params.series) }}
-<div class="grid grid-cols-2 lg:grid-cols-8 gap-4 lg:pt-12">
+  {{ $hasToc := and (in .TableOfContents "<li>" ) (.Params.toc) }}
+  {{ $hasSidebar := or ($hasToc) (.Params.series) }}
+  <div class="grid grid-cols-2 gap-4 lg:grid-cols-8 lg:pt-12">
     <div
-        class="col-span-2 {{ if not $hasSidebar }} {{- print "lg:col-start-2" -}} {{ end }} lg:col-span-6 bg-secondary-bg rounded px-6 py-8">
-        <h1 class="font-bold text-3xl text-primary-text">{{ .Title }}</h1>
-        {{ partial "components/post-metadata" . }}
-        
-        {{ $featured := partial "utils/get-featured" . }}
-        {{ with $featured }}
-        <div class="my-4">
-            {{ . }}
-        </div>
-        {{ end }}
+      class="{{ if not $hasSidebar }}
+        {{- print "lg:col-start-2" -}}
+      {{ end }} bg-secondary-bg col-span-2 rounded px-6 py-8 lg:col-span-6"
+    >
+      {{ partial "components/post-article" . }}
 
-        <div class="content">
-            {{ .Content}}
-        </div>
-        {{ with .GetTerms "tags" }}
+      {{ with .GetTerms "tags" }}
         {{ partial "components/post-tags" . }}
-        {{ end }}
-        
-        {{ partial "components/post-edit" . }}
-        
-        {{ with .GetTerms "authors" }}
+      {{ end }}
+
+      {{ partial "components/post-edit" . }}
+
+      {{ with .GetTerms "authors" }}
         {{ partial "components/post-author" . }}
-        {{ end }}
-        
-        {{ partial "components/post-footer" . }}
-        {{ partial "comment.html" . }}
+      {{ end }}
+
+      {{ partial "components/post-footer" . }}
+      {{ partial "comment.html" . }}
     </div>
-    {{ if $hasSidebar}}
-    <div class="col-span-2">
+    {{ if $hasSidebar }}
+      <div class="col-span-2">
         {{ if .GetTerms "series" }}
-        {{ partial "components/post-series" . }}
+          {{ partial "components/post-series" . }}
         {{ end }}
         {{ if $hasToc }}
-        {{ partial "components/post-toc" . }}
+          {{ partial "components/post-toc" . }}
         {{ end }}
-    </div>
+      </div>
     {{ end }}
 
     {{ $related := .Site.RegularPages.Related . | first 6 }}
     {{ with $related }}
-    <div
-        class="col-span-2 {{ if not $hasSidebar }} {{- print "lg:col-start-2" -}} {{ end }} lg:col-span-6 bg-secondary-bg rounded p-6">
-        <h2 class="text-lg font-semibold mb-4">{{ i18n "seeAlso" }}</h2>
-        <div class="content">
-            {{ range . }}
-            <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
-            <br />
-            {{ end }}
-        </div>
-    </div>
+      <div
+        class="{{ if not $hasSidebar }}
+          {{- print "lg:col-start-2" -}}
+        {{ end }} bg-secondary-bg prose col-span-2 max-w-none rounded p-6 lg:col-span-6"
+      >
+        <h3>{{ i18n "seeAlso" }}</h3>
+        {{ range . }}
+          <a href="{{ .Permalink }}" class="no-underline">{{ .LinkTitle }}</a>
+          <br />
+        {{ end }}
+      </div>
     {{ end }}
-</div>
-{{/* highlight */}}
-{{- if eq .Site.Params.highlight.handler "highlightjs" }}
-<script>
-    document.addEventListener('DOMContentLoaded', ()=>{
+  </div>
+
+  {{/* highlight */}}
+  {{- if eq .Site.Params.highlight.handler "highlightjs" }}
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
         hljs.initHighlightingOnLoad();
-    })
-</script>
-{{- end }}
-{{ end }}
\ No newline at end of file
+      });
+    </script>
+  {{- end }}
+{{ end }}
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index 678efdd..4e4a9b3 100644
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -1,17 +1,12 @@
 {{ define "main" }}
-<article class="mx-6 my-8">
-    <h1 class="font-bold text-3xl text-primary-text">{{ .Title }}</h1>
-    {{ with .Content }}
-    <div class="content">
-        {{ . }}
-    </div>
-    {{ end }}
-</article>
-<div class="bg-secondary-bg rounded px-6 py-8">
+  {{ partial "components/list-article" . }}
+  <div class="bg-secondary-bg rounded px-6 py-8">
     {{ range .Pages }}
-    <h2 class="text-lg text-primary-text my-2">
-        <a href="{{ .Permalink }}" class="text-eureka hover:underline">{{ .LinkTitle }}</a>
-    </h2>
+      <h2 class="text-primary-text my-2 text-lg">
+        <a href="{{ .Permalink }}" class="text-eureka hover:underline"
+          >{{ .LinkTitle }}</a
+        >
+      </h2>
     {{ end }}
-</div>
-{{ end }}
\ No newline at end of file
+  </div>
+{{ end }}
diff --git a/layouts/authors/terms.html b/layouts/authors/terms.html
index 678efdd..4e4a9b3 100644
--- a/layouts/authors/terms.html
+++ b/layouts/authors/terms.html
@@ -1,17 +1,12 @@
 {{ define "main" }}
-<article class="mx-6 my-8">
-    <h1 class="font-bold text-3xl text-primary-text">{{ .Title }}</h1>
-    {{ with .Content }}
-    <div class="content">
-        {{ . }}
-    </div>
-    {{ end }}
-</article>
-<div class="bg-secondary-bg rounded px-6 py-8">
+  {{ partial "components/list-article" . }}
+  <div class="bg-secondary-bg rounded px-6 py-8">
     {{ range .Pages }}
-    <h2 class="text-lg text-primary-text my-2">
-        <a href="{{ .Permalink }}" class="text-eureka hover:underline">{{ .LinkTitle }}</a>
-    </h2>
+      <h2 class="text-primary-text my-2 text-lg">
+        <a href="{{ .Permalink }}" class="text-eureka hover:underline"
+          >{{ .LinkTitle }}</a
+        >
+      </h2>
     {{ end }}
-</div>
-{{ end }}
\ No newline at end of file
+  </div>
+{{ end }}
diff --git a/layouts/partials/components/doc-layout.html b/layouts/partials/components/doc-layout.html
index 3e12176..cf434b3 100644
--- a/layouts/partials/components/doc-layout.html
+++ b/layouts/partials/components/doc-layout.html
@@ -9,21 +9,10 @@
 
         </div>
         <div class="w-full md:w-3/4 lg:w-4/5 pb-8 pt-2 md:pt-8">
-            <div class="w-full lg:w-3/4 ps-6 ms-0 me-auto">
-                <h1 class="font-bold text-3xl text-primary-text">{{ .Title }}</h1>
-                {{ partial "components/post-metadata" . }}
-            </div>
             <div class="flex">
                 <div class="w-full lg:w-3/4 px-6">
-                    {{ $featured := partial "utils/get-featured" . }}
-                    {{ with $featured }}
-                    <div class="my-4">
-                        {{ . }}
-                    </div>
-                    {{ end }}
-                    <div class="content">
-                        {{ .Content}}
-                    </div>
+                    {{ partial "components/post-article" . }}
+                    
                     {{ with .GetTerms "tags" }}
                     {{ partial "components/post-tags" . }}
                     {{ end }}
diff --git a/layouts/partials/components/doc-list.html b/layouts/partials/components/doc-list.html
index 51e71b3..067fdea 100644
--- a/layouts/partials/components/doc-list.html
+++ b/layouts/partials/components/doc-list.html
@@ -1,12 +1,5 @@
-<article class="mx-6 my-8">
-  <h1 class="font-bold text-3xl text-primary-text">{{ .Title }}</h1>
-  {{ with .Content }}
-  <div class="content">
-      {{ . }}
-  </div>
-  {{ end }}
-</article>
+{{ partial "components/list-article" . }}
 <div class="bg-secondary-bg rounded px-6">
   {{ partial "components/summary-list-plain" .Paginator.Pages }}
 </div>
-{{ template "_internal/pagination.html" . }}
\ No newline at end of file
+{{ template "_internal/pagination.html" . }}
diff --git a/layouts/partials/components/list-article.html b/layouts/partials/components/list-article.html
new file mode 100644
index 0000000..6f37b2d
--- /dev/null
+++ b/layouts/partials/components/list-article.html
@@ -0,0 +1,6 @@
+<article class="prose mx-6 my-8 max-w-none">
+  <h1 class="text-primary-text text-3xl font-bold">{{ .Title }}</h1>
+  {{ with .Content }}
+    {{ . }}
+  {{ end }}
+</article>
diff --git a/layouts/partials/components/post-article.html b/layouts/partials/components/post-article.html
new file mode 100644
index 0000000..0cbadd8
--- /dev/null
+++ b/layouts/partials/components/post-article.html
@@ -0,0 +1,12 @@
+<article class="prose max-w-none">
+  <h1 class="mb-4">{{ .Title }}</h1>
+
+  {{ partial "components/post-metadata" . }}
+
+  {{ $featured := partial "utils/get-featured" . }}
+  {{ with $featured }}
+    {{ . }}
+  {{ end }}
+
+  {{ .Content }}
+</article>
diff --git a/layouts/partials/components/post-metadata.html b/layouts/partials/components/post-metadata.html
index 2d108d5..f125cff 100644
--- a/layouts/partials/components/post-metadata.html
+++ b/layouts/partials/components/post-metadata.html
@@ -1,34 +1,42 @@
-<div class="flex flex-wrap flex-row items-center mt-2 text-tertiary-text">
-    <div class="me-6 my-2">
-        <i class="fas fa-calendar me-1"></i>
-        <span>{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02") }}</span>
-    </div>
-    <div class="me-6 my-2">
-        <i class="fas fa-clock me-1"></i>
-        <span>{{ i18n "readingTime" .ReadingTime }}</span>
-    </div>
-    
-    {{ with .GetTerms "categories" }}
+<div
+  class="text-tertiary-text not-proseme mt-2 flex flex-row flex-wrap items-center"
+>
+  <div class="me-6 my-2">
+    <i class="fas fa-calendar me-1"></i>
+    <span
+      >{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02") }}</span
+    >
+  </div>
+  <div class="me-6 my-2">
+    <i class="fas fa-clock me-1"></i>
+    <span>{{ i18n "readingTime" .ReadingTime }}</span>
+  </div>
+
+  {{ with .GetTerms "categories" }}
     <div class="me-6 my-2">
-        <i class="fas fa-folder me-1"></i>
-        {{ range $index, $value := . }}
+      <i class="fas fa-folder me-1"></i>
+      {{ range $index, $value := . }}
         {{ if gt $index 0 }}
-        <span>, </span>
+          <span>, </span>
         {{ end -}}
-        <a href="{{ .Permalink }}" class="hover:text-eureka">{{ .LinkTitle }}</a>
-        {{ end }}
+        <a href="{{ .Permalink }}" class="hover:text-eureka"
+          >{{ .LinkTitle }}</a
+        >
+      {{ end }}
     </div>
-    {{ end }}
+  {{ end }}
 
-    {{ with .GetTerms "series" }}
+  {{ with .GetTerms "series" }}
     <div class="me-6 my-2">
-        <i class="fas fa-th-list me-1"></i>
-        {{ range $index, $value := . }}
+      <i class="fas fa-th-list me-1"></i>
+      {{ range $index, $value := . }}
         {{ if gt $index 0 }}
-        <span>, </span>
+          <span>, </span>
         {{ end -}}
-        <a href="{{ .Permalink }}" class="hover:text-eureka">{{ .LinkTitle }}</a>
-        {{ end }}
+        <a href="{{ .Permalink }}" class="hover:text-eureka"
+          >{{ .LinkTitle }}</a
+        >
+      {{ end }}
     </div>
-    {{ end }}
-</div>
\ No newline at end of file
+  {{ end }}
+</div>
diff --git a/layouts/partials/components/post-series.html b/layouts/partials/components/post-series.html
index ebc3810..a407b81 100644
--- a/layouts/partials/components/post-series.html
+++ b/layouts/partials/components/post-series.html
@@ -1,12 +1,10 @@
-{{ $series := .Site.Taxonomies.series}}
-<div class="bg-secondary-bg rounded p-6">
-    <h3 class="text-lg font-semibold mb-4">{{ i18n "seriesOfPosts"}}</h3>
-    <div class="content">
-        {{ range (.GetTerms "series") }}
-        {{ range .Pages }}
-        <a href="{{ .Page.Permalink }}">{{ .Page.LinkTitle }}</a>
-        <br />
-        {{end}}
-        {{end}}
-    </div>
-</div>
\ No newline at end of file
+{{ $series := .Site.Taxonomies.series }}
+<div class="bg-secondary-bg prose max-w-none rounded p-6">
+  <h3>{{ i18n "seriesOfPosts" }}</h3>
+  {{ range (.GetTerms "series") }}
+    {{ range .Pages }}
+      <a href="{{ .Permalink }}" class="no-underline">{{ .LinkTitle }}</a>
+      <br />
+    {{ end }}
+  {{ end }}
+</div>
diff --git a/layouts/partials/components/post-toc.html b/layouts/partials/components/post-toc.html
index 337ecb6..46de312 100644
--- a/layouts/partials/components/post-toc.html
+++ b/layouts/partials/components/post-toc.html
@@ -1,11 +1,21 @@
-<div class="sticky top-16 z-10 hidden lg:block px-6 py-4 {{ if eq .Type "docs" }} bg-secondary-bg pt-16 -mt-16 {{ else }} bg-primary-bg {{ end }}">
-    <span class="text-lg font-semibold">{{ i18n "onThisPage" }}</span>
+<div
+  class="{{ if eq .Type "docs" }}
+    bg-secondary-bg
+  {{ else }}
+    bg-primary-bg
+  {{ end }} prose sticky top-16 z-10 hidden max-w-none px-6 py-4 lg:block"
+>
+  <h3>{{ i18n "onThisPage" }}</h3>
 </div>
-<div class="sticky-toc hidden lg:block px-6 pb-6 {{ if eq .Type "docs" }} pt-10 -mt-10 border-s {{ end }}">
-    {{ .TableOfContents }}
+<div
+  class="sticky-toc {{ if eq .Type "docs" }}
+    border-s
+  {{ end }} hidden px-6 pb-6 lg:block"
+>
+  {{ .TableOfContents }}
 </div>
 <script>
-    window.addEventListener('DOMContentLoaded', () => {
-        enableStickyToc();
-    });
-</script>
\ No newline at end of file
+  window.addEventListener("DOMContentLoaded", () => {
+    enableStickyToc();
+  });
+</script>
diff --git a/layouts/partials/components/summary-masonry.html b/layouts/partials/components/summary-masonry.html
index 4027f7a..8984b04 100644
--- a/layouts/partials/components/summary-masonry.html
+++ b/layouts/partials/components/summary-masonry.html
@@ -1,13 +1,15 @@
-<div class="bg-secondary-bg rounded overflow-hidden border hover:shadow-lg transition ease-in-out duration-200">
+<div
+  class="bg-secondary-bg overflow-hidden rounded border transition duration-200 ease-in-out hover:shadow-lg"
+>
   {{ $featured := partial "utils/get-featured" . }}
   {{ with $featured }}
-  {{ . }}
+    {{ . }}
   {{ end }}
   <div class="px-6 pt-6">
-    <div class="font-bold text-xl text-primary-text mb-2">
+    <div class="text-primary-text mb-2 text-xl font-bold">
       <a href="{{ .Permalink }}" class="hover:text-eureka">{{ .LinkTitle }}</a>
     </div>
-    <div class="">
+    <div class="prose max-w-none">
       {{ if .Description }}
         {{ .Description | plainify | htmlUnescape }}
       {{ else if .Summary }}
@@ -18,4 +20,4 @@
   <div class="px-6 pb-2">
     {{ partial "components/post-metadata" . }}
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 80a4a22..e780290 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -54,12 +54,11 @@
 
 <meta name="generator" content="Hugo Eureka {{ .Site.Data.eureka.version }}" />
 
-{{- $eurekaCSS := resources.Get "css/eureka.css" | postCSS (dict "config" "./assets/css/postcss.config.js") }}
-{{- $eurekaCSS := $eurekaCSS | minify }}
-<link rel="stylesheet" href="{{ $eurekaCSS.Permalink }}">
+{{- $eurekaCSS := resources.Get "css/eureka.css" | postCSS (dict "config" "./assets/css/postcss.config.js") | minify | fingerprint "sha384" }}
+<link rel="stylesheet" href="{{ $eurekaCSS.Permalink }}" integrity="{{ $eurekaCSS.Data.Integrity }}">
 
-{{- $eurekaJS := resources.Get "js/eureka.js" | resources.ExecuteAsTemplate "js/eureka.js" . | minify }}
-<script defer src="{{ $eurekaJS.Permalink }}"></script>
+{{- $eurekaJS := resources.Get "js/eureka.js" | resources.ExecuteAsTemplate "js/eureka.js" . | minify | fingerprint "sha384" }}
+<script defer src="{{ $eurekaJS.Permalink }}" integrity="{{ $eurekaJS.Data.Integrity }}"></script>
 
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="preload"
diff --git a/layouts/partials/utils/get-summary.html b/layouts/partials/utils/get-summary.html
index 49682bf..c6e972e 100644
--- a/layouts/partials/utils/get-summary.html
+++ b/layouts/partials/utils/get-summary.html
@@ -1,7 +1,7 @@
 <div class="mb-4">
-  <a href="{{ .Permalink }}" class="font-bold text-xl hover:text-eureka">{{ .LinkTitle }}</a>
+  <a href="{{ .Permalink }}" class="text-xl font-bold">{{ .LinkTitle }}</a>
 </div>
-<div class="content">
+<div class="prose max-w-none">
   {{ if .Description }}
     {{ .Description | plainify | htmlUnescape }}
   {{ else if .Summary }}
@@ -9,29 +9,29 @@
   {{ end }}
 </div>
 {{ if eq .Type "docs" }}
-<div class="px-6 pt-4">
-  {{ range $index, $value := first 3 .Pages }}
-  {{ if gt $index 0 }}
-  <div class="-mx-4 my-4 border-t"></div>
-  {{ end -}}
-  <div class="">
+  <div class="px-6 pt-4">
+    {{ range $index, $value := first 3 .Pages }}
+      {{ if gt $index 0 }}
+        <div class="-mx-4 my-4 border-t"></div>
+      {{ end -}}
       <div class="mb-2">
-          <a href="{{ .Permalink }}" class="font-semibold hover:text-eureka">{{ .LinkTitle }}</a>
+        <a href="{{ .Permalink }}" class="font-semibold">{{ .LinkTitle }}</a>
       </div>
-      <div class="">
+      <div class="prose max-w-none">
         {{ if .Description }}
           {{ .Description | plainify | htmlUnescape }}
         {{ else if .Summary }}
           {{ .Summary | plainify | htmlUnescape }}
         {{ end }}
       </div>
-  </div>
-  {{ end }}
-  <div class="pt-6 hover:text-eureka">
+    {{ end }}
+    <div class="hover:text-eureka pt-6">
       <a href="{{ .Permalink }}" class="font-semibold">{{ i18n "readMore" }}</a>
-      <i class='fas {{ cond (eq .Site.Language.LanguageDirection "rtl") "fa-caret-left" "fa-caret-right" }} ms-1'></i>
+      <i
+        class="fas {{ cond (eq .Site.Language.LanguageDirection "rtl") "fa-caret-left" "fa-caret-right" }} ms-1"
+      ></i>
+    </div>
   </div>
-</div>
 {{ else }}
-{{ partial "components/post-metadata" . }}
-{{ end }}
\ No newline at end of file
+  {{ partial "components/post-metadata" . }}
+{{ end }}
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>
diff --git a/layouts/partials/widgets/experience.html b/layouts/partials/widgets/experience.html
index cbbe34c..c380b68 100644
--- a/layouts/partials/widgets/experience.html
+++ b/layouts/partials/widgets/experience.html
@@ -1,29 +1,34 @@
 {{ range .Params.experiences }}
-<div class="mb-6">
-  <div class="bg-secondary-bg rounded border hover:shadow-lg transition ease-in-out duration-200 px-6 pt-6 pb-4">
-    <div class="mb-4">
-      <div class="font-bold text-xl">{{ .title }}</div>
-      <div class="flex flex-col md:flex-row md:justify-between">
-        <div>
-          {{ if .organization.url }}
-          <a href="{{ .organization.url }}">{{ .organization.name | markdownify }}</a>
-          {{ else }}
-          <span>{{ .organization.name | markdownify }}</span>
-          {{ end }}
+  <div class="mb-6">
+    <div
+      class="bg-secondary-bg rounded border px-6 pt-6 pb-4 transition duration-200 ease-in-out hover:shadow-lg"
+    >
+      <div class="mb-4">
+        <div class="text-xl font-bold">{{ .title }}</div>
+        <div class="flex flex-col md:flex-row md:justify-between">
+          <div>
+            {{ if .organization.url }}
+              <a href="{{ .organization.url }}"
+                >{{ .organization.name | markdownify }}</a
+              >
+            {{ else }}
+              <span>{{ .organization.name | markdownify }}</span>
+            {{ end }}
 
-          {{ if and .organization.name .location }}
-          <span class="ms-2 me-2">·</span>
-          {{ end }}
+            {{ if and .organization.name .location }}
+              <span class="ms-2 me-2">·</span>
+            {{ end }}
 
-          <span>{{ .location | markdownify }} </span>
+
+            <span>{{ .location | markdownify }} </span>
+          </div>
+          <div class="shrink-0">{{ .dates | markdownify }}</div>
         </div>
-        <div class="shrink-0"> {{ .dates | markdownify }}</div>
       </div>
-    </div>
 
-    <div class="content">
-      {{ .writeup | markdownify }}
+      <div class="prose max-w-none">
+        {{ .writeup | markdownify }}
+      </div>
     </div>
   </div>
-</div>
-{{ end }}
\ No newline at end of file
+{{ end }}
-- 
cgit v1.2.3